@luxfi/ui 8.0.0 → 8.2.0

package/src/ai-voice-settings.tsx

@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Info } from "lucide-react"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Box, Card, CardContent, CardDescription, CardHeader, CardTitle, css, sx } from '@hanzo/ui'
+import { Input } from "./input"
+import { Label } from "@hanzo/ui"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@hanzo/ui"
+import { Separator } from "./separator"
+import { Slider } from "./slider"
+import { Switch } from "./switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@hanzo/ui"
+import { Textarea } from "./textarea"
+
+// ============================================================================
+// Types & Constants
+// ============================================================================
+
+export interface Voice {
+  label: string
+  value: string
+  gender: "male" | "female" | "neutral"
+  description: string
+}
+
+export interface Language {
+  label: string
+  value: string
+}
+
+export interface Personality {
+  label: string
+  value: string
+  description: string
+}
+
+export const voices: Voice[] = [
+  {
+    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" },
+]
+
+export const languages: Language[] = [
+  { label: "English (US)", value: "en-US" },
+  { label: "English (UK)", value: "en-GB" },
+  { label: "English (AU)", value: "en-AU" },
+  { label: "Spanish (Spain)", value: "es-ES" },
+  { label: "Spanish (Mexico)", value: "es-MX" },
+  { label: "French (France)", value: "fr-FR" },
+  { label: "French (Canada)", value: "fr-CA" },
+  { label: "German", value: "de-DE" },
+  { label: "Italian", value: "it-IT" },
+  { label: "Portuguese (Brazil)", value: "pt-BR" },
+  { label: "Portuguese (Portugal)", value: "pt-PT" },
+  { label: "Japanese", value: "ja-JP" },
+  { label: "Korean", value: "ko-KR" },
+  { label: "Chinese (Mandarin)", value: "zh-CN" },
+  { label: "Chinese (Taiwan)", value: "zh-TW" },
+  { label: "Arabic", value: "ar-SA" },
+  { label: "Hindi", value: "hi-IN" },
+  { label: "Russian", value: "ru-RU" },
+  { label: "Dutch", value: "nl-NL" },
+  { label: "Polish", value: "pl-PL" },
+]
+
+export const personalities: Personality[] = [
+  {
+    label: "Friendly",
+    value: "friendly",
+    description: "Warm and approachable, uses casual language",
+  },
+  {
+    label: "Professional",
+    value: "professional",
+    description: "Formal and authoritative, maintains business tone",
+  },
+  {
+    label: "Enthusiastic",
+    value: "enthusiastic",
+    description: "Energetic and upbeat, shows excitement",
+  },
+  {
+    label: "Calm",
+    value: "calm",
+    description: "Soothing and measured, relaxed pace",
+  },
+  {
+    label: "Witty",
+    value: "witty",
+    description: "Quick and clever, uses humor appropriately",
+  },
+]
+
+// ============================================================================
+// Composable Sub-Components (Orthogonal & Reusable)
+// ============================================================================
+
+export interface VoiceSelectorProps {
+  value: string
+  onValueChange: (value: string) => void
+  voices?: Voice[]
+  showDescription?: boolean
+}
+
+export const VoiceSelector = React.forwardRef<
+  HTMLDivElement,
+  VoiceSelectorProps
+>(
+  (
+    {
+      value,
+      onValueChange,
+      voices: customVoices = voices,
+      showDescription = true,
+    },
+    ref
+  ) => {
+    const selected = customVoices.find((v) => v.value === value)
+
+    return (
+      <Box ref={ref} className="space-y-2">
+        <Label htmlFor="voice">Voice</Label>
+        <Select value={value} onValueChange={onValueChange}>
+          <SelectTrigger id="voice">
+            <SelectValue placeholder="Select voice" />
+          </SelectTrigger>
+          <SelectContent>
+            {customVoices.map((voice) => (
+              <SelectItem key={voice.value} value={voice.value}>
+                <Box className="flex items-center gap-2">
+                  <span>{voice.label}</span>
+                  <Badge variant="outline" {...sx('text-xs')}>
+                    {voice.gender}
+                  </Badge>
+                </Box>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {showDescription && selected && (
+          <Box tag="p" className="text-xs text-muted-foreground">
+            {selected.description}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+VoiceSelector.displayName = "VoiceSelector"
+
+export interface LanguageSelectorProps {
+  value: string
+  onValueChange: (value: string) => void
+  languages?: Language[]
+  showAutoDetect?: boolean
+}
+
+export const LanguageSelector = React.forwardRef<
+  HTMLDivElement,
+  LanguageSelectorProps
+>(
+  (
+    {
+      value,
+      onValueChange,
+      languages: customLanguages = languages,
+      showAutoDetect = true,
+    },
+    ref
+  ) => {
+    return (
+      <Box ref={ref} className="space-y-2">
+        <Label htmlFor="language">Spoken Language</Label>
+        <Select value={value} onValueChange={onValueChange}>
+          <SelectTrigger id="language">
+            <SelectValue placeholder="Select language" />
+          </SelectTrigger>
+          <SelectContent>
+            {showAutoDetect && (
+              <>
+                <SelectItem value="auto">Auto-detect</SelectItem>
+                <SelectSeparator />
+              </>
+            )}
+            {customLanguages.map((lang) => (
+              <SelectItem key={lang.value} value={lang.value}>
+                {lang.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Box tag="p" className="text-xs text-muted-foreground">
+          For best results, select the language you mainly speak
+        </Box>
+      </Box>
+    )
+  }
+)
+LanguageSelector.displayName = "LanguageSelector"
+
+export interface PersonalitySelectorProps {
+  value: string
+  onValueChange: (value: string) => void
+  personalities?: Personality[]
+  showDescription?: boolean
+}
+
+export const PersonalitySelector = React.forwardRef<
+  HTMLDivElement,
+  PersonalitySelectorProps
+>(
+  (
+    {
+      value,
+      onValueChange,
+      personalities: customPersonalities = personalities,
+      showDescription = true,
+    },
+    ref
+  ) => {
+    const selected = customPersonalities.find((p) => p.value === value)
+
+    return (
+      <Box ref={ref} className="space-y-2">
+        <Label htmlFor="personality">Personality / Tone</Label>
+        <Select value={value} onValueChange={onValueChange}>
+          <SelectTrigger id="personality">
+            <SelectValue placeholder="Select personality" />
+          </SelectTrigger>
+          <SelectContent>
+            {customPersonalities.map((personality) => (
+              <SelectItem key={personality.value} value={personality.value}>
+                {personality.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {showDescription && selected && (
+          <Box tag="p" className="text-xs text-muted-foreground">
+            {selected.description}
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+PersonalitySelector.displayName = "PersonalitySelector"
+
+export interface SpeedControlProps {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+}
+
+export const SpeedControl = React.forwardRef<HTMLDivElement, SpeedControlProps>(
+  ({ value, onValueChange, min = 0.5, max = 2.0, step = 0.1 }, ref) => {
+    return (
+      <Box ref={ref} className="space-y-3">
+        <Box className="flex items-center justify-between">
+          <Label htmlFor="speed">Speaking Speed</Label>
+          <Box tag="span" className="text-sm text-muted-foreground">
+            {value.toFixed(1)}x
+          </Box>
+        </Box>
+        <Slider
+          id="speed"
+          min={min}
+          max={max}
+          step={step}
+          value={[value]}
+          onValueChange={([val]) => onValueChange(val)}
+        />
+        <Box className="flex justify-between text-xs text-muted-foreground">
+          <span>Slower ({min}x)</span>
+          <span>Normal (1.0x)</span>
+          <span>Faster ({max}x)</span>
+        </Box>
+      </Box>
+    )
+  }
+)
+SpeedControl.displayName = "SpeedControl"
+
+export interface PitchControlProps {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+}
+
+export const PitchControl = React.forwardRef<HTMLDivElement, PitchControlProps>(
+  ({ value, onValueChange, min = 0.5, max = 2.0, step = 0.1 }, ref) => {
+    return (
+      <Box ref={ref} className="space-y-3">
+        <Box className="flex items-center justify-between">
+          <Label htmlFor="pitch">Voice Pitch</Label>
+          <Box tag="span" className="text-sm text-muted-foreground">
+            {value.toFixed(1)}x
+          </Box>
+        </Box>
+        <Slider
+          id="pitch"
+          min={min}
+          max={max}
+          step={step}
+          value={[value]}
+          onValueChange={([val]) => onValueChange(val)}
+        />
+        <Box className="flex justify-between text-xs text-muted-foreground">
+          <span>Lower ({min}x)</span>
+          <span>Normal (1.0x)</span>
+          <span>Higher ({max}x)</span>
+        </Box>
+      </Box>
+    )
+  }
+)
+PitchControl.displayName = "PitchControl"
+
+export interface WakeWordInputProps {
+  value: string
+  onValueChange: (value: string) => void
+  placeholder?: string
+}
+
+export const WakeWordInput = React.forwardRef<
+  HTMLDivElement,
+  WakeWordInputProps
+>(
+  (
+    {
+      value,
+      onValueChange,
+      placeholder = "e.g., Hey Assistant, Computer, Jarvis",
+    },
+    ref
+  ) => {
+    return (
+      <Box ref={ref} className="space-y-2">
+        <Label htmlFor="wakeWord">Wake Word</Label>
+        <Input
+          id="wakeWord"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+        />
+        <Box tag="p" className="text-xs text-muted-foreground">
+          Phrase to activate hands-free listening (optional)
+        </Box>
+      </Box>
+    )
+  }
+)
+WakeWordInput.displayName = "WakeWordInput"
+
+export interface CustomInstructionsProps {
+  value: string
+  onValueChange: (value: string) => void
+  rows?: number
+  placeholder?: string
+}
+
+export const CustomInstructions = React.forwardRef<
+  HTMLDivElement,
+  CustomInstructionsProps
+>(
+  (
+    {
+      value,
+      onValueChange,
+      rows = 4,
+      placeholder = "Add any specific instructions for the AI assistant...",
+    },
+    ref
+  ) => {
+    return (
+      <Box ref={ref} className="space-y-2">
+        <Label htmlFor="customInstructions">Custom Instructions</Label>
+        <Textarea
+          id="customInstructions"
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          rows={rows}
+        />
+        <Box tag="p" className="text-xs text-muted-foreground">
+          These instructions will guide how the AI responds to you
+        </Box>
+      </Box>
+    )
+  }
+)
+CustomInstructions.displayName = "CustomInstructions"
+
+export interface AutoListenToggleProps {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+export const AutoListenToggle = React.forwardRef<
+  HTMLDivElement,
+  AutoListenToggleProps
+>(({ checked, onCheckedChange }, ref) => {
+  return (
+    <Box ref={ref} className="flex items-center justify-between">
+      <Box className="space-y-0.5">
+        <Label htmlFor="autoListen">Auto-listen Mode</Label>
+        <Box tag="p" className="text-xs text-muted-foreground">
+          Automatically start listening after each response
+        </Box>
+      </Box>
+      <Switch
+        id="autoListen"
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+      />
+    </Box>
+  )
+})
+AutoListenToggle.displayName = "AutoListenToggle"
+
+export interface NoiseCancellationToggleProps {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}
+
+export const NoiseCancellationToggle = React.forwardRef<
+  HTMLDivElement,
+  NoiseCancellationToggleProps
+>(({ checked, onCheckedChange }, ref) => {
+  return (
+    <Box ref={ref} className="flex items-center justify-between">
+      <Box className="space-y-0.5">
+        <Label htmlFor="noiseCancellation">Noise Cancellation</Label>
+        <Box tag="p" className="text-xs text-muted-foreground">
+          Filter background noise for clearer recognition
+        </Box>
+      </Box>
+      <Switch
+        id="noiseCancellation"
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+      />
+    </Box>
+  )
+})
+NoiseCancellationToggle.displayName = "NoiseCancellationToggle"
+
+// ============================================================================
+// Main Composite Component
+// ============================================================================
+
+export interface VoiceSettings {
+  voice: string
+  language: string
+  personality: string
+  speed: number
+  pitch: number
+  wakeWord: string
+  customInstructions: string
+  autoListen: boolean
+  noiseCancellation: boolean
+}
+
+export interface AIVoiceSettingsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  settings?: Partial<VoiceSettings>
+  onSettingsChange?: (settings: VoiceSettings) => void
+  onSave?: (settings: VoiceSettings) => void
+  onReset?: () => void
+  onPreview?: (voice: string, speed: number, pitch: number) => void
+}
+
+const AIVoiceSettings = React.forwardRef<HTMLDivElement, AIVoiceSettingsProps>(
+  (
+    {
+      className,
+      settings: initialSettings,
+      onSettingsChange,
+      onSave,
+      onReset,
+      onPreview,
+      ...props
+    },
+    ref
+  ) => {
+    const [settings, setSettings] = React.useState<VoiceSettings>({
+      voice: initialSettings?.voice || "alloy",
+      language: initialSettings?.language || "en-US",
+      personality: initialSettings?.personality || "friendly",
+      speed: initialSettings?.speed || 1.0,
+      pitch: initialSettings?.pitch || 1.0,
+      wakeWord: initialSettings?.wakeWord || "",
+      customInstructions: initialSettings?.customInstructions || "",
+      autoListen: initialSettings?.autoListen ?? false,
+      noiseCancellation: initialSettings?.noiseCancellation ?? true,
+    })
+
+    const updateSetting = <K extends keyof VoiceSettings>(
+      key: K,
+      value: VoiceSettings[K]
+    ) => {
+      const newSettings = { ...settings, [key]: value }
+      setSettings(newSettings)
+      onSettingsChange?.(newSettings)
+    }
+
+    const handleSave = () => {
+      onSave?.(settings)
+    }
+
+    const handleReset = () => {
+      const defaultSettings: VoiceSettings = {
+        voice: "alloy",
+        language: "en-US",
+        personality: "friendly",
+        speed: 1.0,
+        pitch: 1.0,
+        wakeWord: "",
+        customInstructions: "",
+        autoListen: false,
+        noiseCancellation: true,
+      }
+      setSettings(defaultSettings)
+      onSettingsChange?.(defaultSettings)
+      onReset?.()
+    }
+
+    const handlePreview = () => {
+      onPreview?.(settings.voice, settings.speed, settings.pitch)
+    }
+
+    return (
+      <Box ref={ref} className={cn("w-full", className)} {...props}>
+        <Tabs defaultValue="general" {...sx('w-full')}>
+          <TabsList {...sx('grid w-full grid-cols-3')}>
+            <TabsTrigger value="general">General</TabsTrigger>
+            <TabsTrigger value="voice">Voice</TabsTrigger>
+            <TabsTrigger value="advanced">Advanced</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="general" {...sx('space-y-4')}>
+            <Card>
+              <CardHeader>
+                <CardTitle>Language & Voice</CardTitle>
+                <CardDescription>
+                  Configure your preferred language and voice profile
+                </CardDescription>
+              </CardHeader>
+              <CardContent {...sx('space-y-6')}>
+                <LanguageSelector
+                  value={settings.language}
+                  onValueChange={(value) => updateSetting("language", value)}
+                />
+                <VoiceSelector
+                  value={settings.voice}
+                  onValueChange={(value) => updateSetting("voice", value)}
+                />
+                <PersonalitySelector
+                  value={settings.personality}
+                  onValueChange={(value) => updateSetting("personality", value)}
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="voice" {...sx('space-y-4')}>
+            <Card>
+              <CardHeader>
+                <CardTitle>Voice Characteristics</CardTitle>
+                <CardDescription>
+                  Fine-tune voice speed and pitch to your preference
+                </CardDescription>
+              </CardHeader>
+              <CardContent {...sx('space-y-6')}>
+                <SpeedControl
+                  value={settings.speed}
+                  onValueChange={(value) => updateSetting("speed", value)}
+                />
+                <Separator />
+                <PitchControl
+                  value={settings.pitch}
+                  onValueChange={(value) => updateSetting("pitch", value)}
+                />
+                <Separator />
+                <Button
+                  variant="outline"
+                  {...sx('w-full')}
+                  onClick={handlePreview}
+                >
+                  Preview Voice
+                </Button>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="advanced" {...sx('space-y-4')}>
+            <Card>
+              <CardHeader>
+                <CardTitle>Advanced Settings</CardTitle>
+                <CardDescription>
+                  Configure wake words, custom instructions, and audio features
+                </CardDescription>
+              </CardHeader>
+              <CardContent {...sx('space-y-6')}>
+                <WakeWordInput
+                  value={settings.wakeWord}
+                  onValueChange={(value) => updateSetting("wakeWord", value)}
+                />
+                <Separator />
+                <CustomInstructions
+                  value={settings.customInstructions}
+                  onValueChange={(value) =>
+                    updateSetting("customInstructions", value)
+                  }
+                />
+                <Separator />
+                <Box className="space-y-4">
+                  <AutoListenToggle
+                    checked={settings.autoListen}
+                    onCheckedChange={(checked) =>
+                      updateSetting("autoListen", checked)
+                    }
+                  />
+                  <Separator />
+                  <NoiseCancellationToggle
+                    checked={settings.noiseCancellation}
+                    onCheckedChange={(checked) =>
+                      updateSetting("noiseCancellation", checked)
+                    }
+                  />
+                </Box>
+              </CardContent>
+            </Card>
+
+            <Card {...sx('border-[var(--color-link-primary)] bg-[var(--color-link-primary)] dark:border-[var(--color-link-primary)] dark:bg-[var(--color-link-primary)]')}>
+              <CardContent {...sx('flex gap-3 pt-6')}>
+                <Info style={css('h-5 w-5 text-[var(--color-link-primary)] dark:text-[var(--color-link-primary)]')} />
+                <Box className="space-y-1">
+                  <Box tag="p" className="text-sm font-medium text-[var(--color-link-primary)] dark:text-[var(--color-link-primary)]">
+                    Voice Recognition Tips
+                  </Box>
+                  <Box tag="p" className="text-xs text-[var(--color-link-primary)] dark:text-[var(--color-link-primary)]">
+                    For best results, speak clearly, use a good microphone, and
+                    minimize background noise. Wake word detection works best in
+                    quiet environments.
+                  </Box>
+                </Box>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+
+        <Box className="mt-6 flex justify-end gap-3">
+          <Button variant="outline" onClick={handleReset}>
+            Reset to Defaults
+          </Button>
+          <Button onClick={handleSave}>Save Settings</Button>
+        </Box>
+      </Box>
+    )
+  }
+)
+
+AIVoiceSettings.displayName = "AIVoiceSettings"
+
+export { AIVoiceSettings }