AI Voice Settings

import { AIVoiceSettings } from "@/components/ui/ai-voice-settings"

export default function Settings() {
  const handleSave = (settings) => {
    // Save to localStorage, database, etc.
    localStorage.setItem("voiceSettings", JSON.stringify(settings))
  }

  return (
    <AIVoiceSettings
      settings={{
        voice: "nova",
        language: "en-US",
        personality: "friendly",
        speed: 1.0,
        pitch: 1.0,
        wakeWord: "Hey Assistant",
        customInstructions: "",
        autoListen: false,
        noiseCancellation: true,
      }}
      onSettingsChange={(settings) => console.log(settings)}
      onSave={handleSave}
      onPreview={(voice, speed, pitch) => {
        // Play preview audio
      }}
    />
  )
}

import { VoiceSelector } from "@/components/ui/ai-voice-settings"

export default function QuickVoiceSelect() {
  const [voice, setVoice] = useState("alloy")

  return <VoiceSelector value={voice} onValueChange={setVoice} />
}

import {
  LanguageSelector,
  VoiceSelector,
} from "@/components/ui/ai-voice-settings"

export default function LanguageAndVoice() {
  const [language, setLanguage] = useState("en-US")
  const [voice, setVoice] = useState("nova")

  return (
    <div className="space-y-4">
      <LanguageSelector value={language} onValueChange={setLanguage} />
      <VoiceSelector value={voice} onValueChange={setVoice} />
    </div>
  )
}

import { PitchControl, SpeedControl } from "@/components/ui/ai-voice-settings"

export default function VoiceCharacteristics() {
  const [speed, setSpeed] = useState(1.0)
  const [pitch, setPitch] = useState(1.0)

  return (
    <div className="space-y-6">
      <SpeedControl value={speed} onValueChange={setSpeed} />
      <PitchControl value={pitch} onValueChange={setPitch} />
    </div>
  )
}

import {
  AutoListenToggle,
  PersonalitySelector,
  SpeedControl,
  VoiceSelector,
} from "@/components/ui/ai-voice-settings"

export default function CustomSettings() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Quick Voice Setup</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <VoiceSelector value={voice} onValueChange={setVoice} />
        <PersonalitySelector
          value={personality}
          onValueChange={setPersonality}
        />
        <SpeedControl value={speed} onValueChange={setSpeed} />
        <AutoListenToggle
          checked={autoListen}
          onCheckedChange={setAutoListen}
        />
      </CardContent>
    </Card>
  )
}

const voices = [
  {
    label: "Alloy",
    value: "alloy",
    gender: "neutral",
    description: "Neutral and balanced",
  },
  {
    label: "Echo",
    value: "echo",
    gender: "male",
    description: "Clear and articulate",
  },
  {
    label: "Fable",
    value: "fable",
    gender: "neutral",
    description: "Expressive storytelling",
  },
  {
    label: "Onyx",
    value: "onyx",
    gender: "male",
    description: "Deep and authoritative",
  },
  {
    label: "Nova",
    value: "nova",
    gender: "female",
    description: "Warm and friendly",
  },
  {
    label: "Shimmer",
    value: "shimmer",
    gender: "female",
    description: "Energetic and bright",
  },
  {
    label: "Samantha",
    value: "samantha",
    gender: "female",
    description: "Classic and smooth",
  },
  { label: "Alex", value: "alex", gender: "male", description: "Professional" },
]

// Custom voices
const customVoices = [
  { label: "Jarvis", value: "jarvis", gender: "male", description: "AI assistant" },
  { label: "Friday", value: "friday", gender: "female", description: "AI companion" },
]

<VoiceSelector
  value={voice}
  onValueChange={setVoice}
  voices={customVoices}
/>

// Custom personalities
const customPersonalities = [
  { label: "Helpful", value: "helpful", description: "Always ready to assist" },
  { label: "Creative", value: "creative", description: "Thinks outside the box" },
]

<PersonalitySelector
  value={personality}
  onValueChange={setPersonality}
  personalities={customPersonalities}
/>

const handleSave = (settings: AIVoiceSettings) => {
  localStorage.setItem("hanzo-voice-settings", JSON.stringify(settings))
  toast.success("Settings saved!")
}

const loadSettings = () => {
  const saved = localStorage.getItem("hanzo-voice-settings")
  return saved ? JSON.parse(saved) : undefined
}

;<AIVoiceSettings settings={loadSettings()} onSave={handleSave} />

import { AIVoice } from "@/components/ui/ai-voice"
import { AIVoiceSettings } from "@/components/ui/ai-voice-settings"

export default function VoiceChat() {
  const [settings, setSettings] = useState(defaultSettings)

  return (
    <div className="grid gap-4">
      {/* Voice interaction */}
      <AIVoice
        language={settings.language}
        voice={{
          id: settings.voice,
          speed: settings.speed,
          pitch: settings.pitch,
        }}
        wakeWord={settings.wakeWord}
        autoStart={settings.autoListen}
        onTranscript={handleTranscript}
      />

      {/* Settings panel */}
      <AIVoiceSettings settings={settings} onSettingsChange={setSettings} />
    </div>
  )
}

const handlePreview = async (voice: string, speed: number, pitch: number) => {
  const utterance = new SpeechSynthesisUtterance(
    "Hello, this is how I sound with these settings."
  )
  utterance.voice = speechSynthesis.getVoices().find((v) => v.name === voice)
  utterance.rate = speed
  utterance.pitch = pitch
  speechSynthesis.speak(utterance)
}

;<AIVoiceSettings onPreview={handlePreview} />

<VoiceSelector
  className="border-2 rounded-xl"
  value={voice}
  onValueChange={setVoice}
/>