@luxfi/ui 8.0.0 → 8.1.0

package/src/ai-voice.tsx

@@ -0,0 +1,735 @@
+"use client"
+
+// WebSpeech API type declarations
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import {
+  Mic,
+  MicOff,
+  Pause,
+  Play,
+  RotateCcw,
+  Settings,
+  Square,
+  Volume2,
+  VolumeX,
+} from "lucide-react"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Box, Card, CardContent, CardHeader, CardTitle, css, sx } from '@hanzo/ui'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@hanzo/ui"
+import { Slider } from "./slider"
+import { Switch } from "./switch"
+import { Textarea } from "./textarea"
+
+declare global {
+  interface Window {
+    SpeechRecognition: typeof SpeechRecognition
+    webkitSpeechRecognition: typeof SpeechRecognition
+    webkitAudioContext: typeof AudioContext
+  }
+
+  interface SpeechRecognition extends EventTarget {
+    continuous: boolean
+    interimResults: boolean
+    lang: string
+    onresult: (event: SpeechRecognitionEvent) => void
+    onerror: (event: SpeechRecognitionErrorEvent) => void
+    onend: () => void
+    start(): void
+    stop(): void
+    abort(): void
+  }
+
+  interface SpeechRecognitionEvent extends Event {
+    results: SpeechRecognitionResultList
+    resultIndex: number
+  }
+
+  interface SpeechRecognitionErrorEvent extends Event {
+    error: string
+    message: string
+  }
+
+  interface SpeechRecognitionResultList {
+    readonly length: number
+    item(index: number): SpeechRecognitionResult
+    [index: number]: SpeechRecognitionResult
+  }
+
+  interface SpeechRecognitionResult {
+    readonly length: number
+    readonly isFinal: boolean
+    item(index: number): SpeechRecognitionAlternative
+    [index: number]: SpeechRecognitionAlternative
+  }
+
+  interface SpeechRecognitionAlternative {
+    readonly transcript: string
+    readonly confidence: number
+  }
+
+  const SpeechRecognition: {
+    prototype: SpeechRecognition
+    new (): SpeechRecognition
+  }
+}
+
+interface VoiceProfile {
+  id: string
+  name: string
+  language: string
+  gender: "male" | "female" | "neutral"
+  accent?: string
+  speed?: number
+  pitch?: number
+}
+
+interface VoiceCommand {
+  command: string
+  confidence: number
+  timestamp: number
+  parameters?: Record<string, any>
+}
+
+interface AIVoiceProps {
+  onTranscript?: (text: string) => void
+  onCommand?: (command: VoiceCommand) => void
+  language?: string
+  voice?: VoiceProfile
+  wakeWord?: string
+  autoStart?: boolean
+  className?: string
+}
+
+const defaultVoices: VoiceProfile[] = [
+  {
+    id: "default-en-us",
+    name: "English (US)",
+    language: "en-US",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-en-gb",
+    name: "English (UK)",
+    language: "en-GB",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-es-es",
+    name: "Spanish (Spain)",
+    language: "es-ES",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-fr-fr",
+    name: "French (France)",
+    language: "fr-FR",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-de-de",
+    name: "German (Germany)",
+    language: "de-DE",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-ja-jp",
+    name: "Japanese (Japan)",
+    language: "ja-JP",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+  {
+    id: "default-zh-cn",
+    name: "Chinese (Mandarin)",
+    language: "zh-CN",
+    gender: "neutral",
+    speed: 1.0,
+    pitch: 1.0,
+  },
+]
+
+const commandPatterns = [
+  { pattern: /^(start|begin|go)$/i, command: "start" },
+  { pattern: /^(stop|end|halt)$/i, command: "stop" },
+  { pattern: /^(pause|wait)$/i, command: "pause" },
+  { pattern: /^(resume|continue)$/i, command: "resume" },
+  { pattern: /^(clear|reset)$/i, command: "clear" },
+  { pattern: /^volume (\d+)$/i, command: "volume", extract: 1 },
+  { pattern: /^speak (.+)$/i, command: "speak", extract: 1 },
+]
+
+export function AIVoice({
+  onTranscript,
+  onCommand,
+  language = "en-US",
+  voice,
+  wakeWord = "hey assistant",
+  autoStart = false,
+  className,
+}: AIVoiceProps) {
+  const [isListening, setIsListening] = useState(false)
+  const [isSpeaking, setIsSpeaking] = useState(false)
+  const [transcript, setTranscript] = useState("")
+  const [finalTranscript, setFinalTranscript] = useState("")
+  const [currentVolume, setCurrentVolume] = useState(0)
+  const [isWakeWordActive, setIsWakeWordActive] = useState(false)
+  const [selectedVoice, setSelectedVoice] = useState<VoiceProfile>(
+    voice || defaultVoices[0]
+  )
+  const [showSettings, setShowSettings] = useState(false)
+  const [speechSpeed, setSpeechSpeed] = useState(1.0)
+  const [speechPitch, setSpeechPitch] = useState(1.0)
+  const [speechVolume, setSpeechVolume] = useState(0.8)
+  const [error, setError] = useState<string | null>(null)
+  const [audioLevel, setAudioLevel] = useState(0)
+
+  const recognitionRef = useRef<SpeechRecognition | null>(null)
+  const synthRef = useRef<SpeechSynthesis | null>(null)
+  const audioContextRef = useRef<AudioContext | null>(null)
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const microphoneRef = useRef<MediaStreamAudioSourceNode | null>(null)
+  const animationFrameRef = useRef<number | null>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  // Initialize speech recognition
+  useEffect(() => {
+    if (typeof window !== "undefined" && "webkitSpeechRecognition" in window) {
+      const SpeechRecognition =
+        window.webkitSpeechRecognition || window.SpeechRecognition
+      recognitionRef.current = new SpeechRecognition()
+
+      if (recognitionRef.current) {
+        recognitionRef.current.continuous = true
+        recognitionRef.current.interimResults = true
+        recognitionRef.current.lang = language
+
+        recognitionRef.current.onresult = (event) => {
+          let interimTranscript = ""
+          let finalTranscriptText = ""
+
+          for (let i = event.resultIndex; i < event.results.length; i++) {
+            const result = event.results[i]
+            if (result.isFinal) {
+              finalTranscriptText += result[0].transcript
+            } else {
+              interimTranscript += result[0].transcript
+            }
+          }
+
+          setTranscript(interimTranscript)
+
+          if (finalTranscriptText) {
+            setFinalTranscript((prev) => prev + finalTranscriptText)
+            onTranscript?.(finalTranscriptText)
+
+            // Check for wake word
+            if (
+              isWakeWordActive &&
+              finalTranscriptText.toLowerCase().includes(wakeWord.toLowerCase())
+            ) {
+              setIsWakeWordActive(false)
+              handleWakeWordDetected(finalTranscriptText)
+            }
+
+            // Check for voice commands
+            checkForCommands(finalTranscriptText)
+          }
+        }
+
+        recognitionRef.current.onerror = (event) => {
+          setError(`Speech recognition error: ${event.error}`)
+          setIsListening(false)
+        }
+
+        recognitionRef.current.onend = () => {
+          setIsListening(false)
+        }
+      }
+    }
+
+    // Initialize speech synthesis
+    if (typeof window !== "undefined") {
+      synthRef.current = window.speechSynthesis
+    }
+
+    return () => {
+      if (recognitionRef.current) {
+        recognitionRef.current.stop()
+      }
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [language, wakeWord, isWakeWordActive, onTranscript])
+
+  // Auto start if enabled
+  useEffect(() => {
+    if (autoStart) {
+      startListening()
+    }
+  }, [autoStart])
+
+  // Initialize audio context and analyzer
+  const initializeAudioContext = useCallback(async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+
+      audioContextRef.current = new (window.AudioContext ||
+        window.webkitAudioContext)()
+      analyserRef.current = audioContextRef.current.createAnalyser()
+      microphoneRef.current =
+        audioContextRef.current.createMediaStreamSource(stream)
+
+      analyserRef.current.fftSize = 256
+      microphoneRef.current.connect(analyserRef.current)
+
+      startAudioVisualization()
+      setError(null)
+    } catch (err) {
+      setError("Microphone access denied")
+    }
+  }, [])
+
+  // Audio visualization
+  const startAudioVisualization = useCallback(() => {
+    if (!analyserRef.current || !canvasRef.current) return
+
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    const bufferLength = analyserRef.current.frequencyBinCount
+    const dataArray = new Uint8Array(bufferLength)
+
+    const draw = () => {
+      if (!analyserRef.current) return
+
+      analyserRef.current.getByteFrequencyData(dataArray)
+
+      // Calculate audio level
+      const sum = dataArray.reduce((a, b) => a + b, 0)
+      const level = sum / (bufferLength * 255)
+      setAudioLevel(level)
+
+      // Draw waveform
+      ctx.fillStyle = "rgb(0, 0, 0, 0.1)"
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+      const barWidth = (canvas.width / bufferLength) * 2.5
+      let barHeight
+      let x = 0
+
+      ctx.fillStyle = "rgb(59, 130, 246)"
+
+      for (let i = 0; i < bufferLength; i++) {
+        barHeight = (dataArray[i] / 255) * canvas.height * 0.8
+
+        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight)
+        x += barWidth + 1
+      }
+
+      animationFrameRef.current = requestAnimationFrame(draw)
+    }
+
+    draw()
+  }, [])
+
+  const startListening = useCallback(async () => {
+    if (!recognitionRef.current) {
+      setError("Speech recognition not supported")
+      return
+    }
+
+    try {
+      await initializeAudioContext()
+      recognitionRef.current.start()
+      setIsListening(true)
+      setError(null)
+    } catch (err) {
+      setError("Failed to start listening")
+    }
+  }, [initializeAudioContext])
+
+  const stopListening = useCallback(() => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop()
+    }
+    setIsListening(false)
+
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current)
+    }
+  }, [])
+
+  const speak = useCallback(
+    (text: string) => {
+      if (!synthRef.current) return
+
+      synthRef.current.cancel()
+
+      const utterance = new SpeechSynthesisUtterance(text)
+      utterance.lang = selectedVoice.language
+      utterance.rate = speechSpeed
+      utterance.pitch = speechPitch
+      utterance.volume = speechVolume
+
+      utterance.onstart = () => setIsSpeaking(true)
+      utterance.onend = () => setIsSpeaking(false)
+      utterance.onerror = () => {
+        setIsSpeaking(false)
+        setError("Speech synthesis error")
+      }
+
+      synthRef.current.speak(utterance)
+    },
+    [selectedVoice, speechSpeed, speechPitch, speechVolume]
+  )
+
+  const stopSpeaking = useCallback(() => {
+    if (synthRef.current) {
+      synthRef.current.cancel()
+      setIsSpeaking(false)
+    }
+  }, [])
+
+  const checkForCommands = useCallback(
+    (text: string) => {
+      const words = text.toLowerCase().trim()
+
+      for (const { pattern, command, extract } of commandPatterns) {
+        const match = words.match(pattern)
+        if (match) {
+          const voiceCommand: VoiceCommand = {
+            command,
+            confidence: 0.9,
+            timestamp: Date.now(),
+            parameters: extract ? { value: match[extract] } : undefined,
+          }
+          onCommand?.(voiceCommand)
+          break
+        }
+      }
+    },
+    [onCommand]
+  )
+
+  const handleWakeWordDetected = useCallback(
+    (text: string) => {
+      speak("How can I help you?")
+      const afterWakeWord = text.split(wakeWord)[1]?.trim()
+      if (afterWakeWord) {
+        checkForCommands(afterWakeWord)
+      }
+    },
+    [speak, wakeWord, checkForCommands]
+  )
+
+  const clearTranscript = useCallback(() => {
+    setTranscript("")
+    setFinalTranscript("")
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      switch (event.key) {
+        case " ":
+          event.preventDefault()
+          if (isListening) {
+            stopListening()
+          } else {
+            startListening()
+          }
+          break
+        case "Escape":
+          event.preventDefault()
+          stopListening()
+          stopSpeaking()
+          break
+        case "Enter":
+          if (event.ctrlKey || event.metaKey) {
+            event.preventDefault()
+            if (finalTranscript.trim()) {
+              speak(finalTranscript)
+            }
+          }
+          break
+      }
+    },
+    [
+      isListening,
+      startListening,
+      stopListening,
+      stopSpeaking,
+      finalTranscript,
+      speak,
+    ]
+  )
+
+  return (
+    <Box
+      className={cn("w-full max-w-2xl mx-auto space-y-4", className)}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
+      {/* Main Control Panel */}
+      <Card>
+        <CardHeader {...sx('pb-3')}>
+          <CardTitle {...sx('flex items-center justify-between')}>
+            AI Voice Interface
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowSettings(!showSettings)}
+            >
+              <Settings style={css('h-4 w-4')} />
+            </Button>
+          </CardTitle>
+        </CardHeader>
+        <CardContent {...sx('space-y-4')}>
+          {/* Audio Visualization */}
+          <Box className="relative h-24 bg-muted rounded-lg overflow-hidden">
+            <canvas
+              ref={canvasRef}
+              width={400}
+              height={96}
+              className="w-full h-full"
+            />
+            <Box className="absolute inset-0 flex items-center justify-center">
+              {!isListening && audioLevel === 0 && (
+                <Box className="text-muted-foreground text-sm">
+                  Click microphone to start listening
+                </Box>
+              )}
+            </Box>
+          </Box>
+
+          {/* Control Buttons */}
+          <Box className="flex items-center justify-center gap-4">
+            <Button
+              variant={isListening ? "destructive" : "default"}
+              size="lg"
+              {...sx(cn(
+                "relative transition-all duration-200",
+                isListening && audioLevel > 0.1 && "animate-pulse"
+              ))}
+              onClick={isListening ? stopListening : startListening}
+            >
+              {isListening ? (
+                <MicOff style={css('h-5 w-5')} />
+              ) : (
+                <Mic style={css('h-5 w-5')} />
+              )}
+              <Box tag="span" className="ml-2">
+                {isListening ? "Stop" : "Start"} Listening
+              </Box>
+            </Button>
+
+            <Button
+              variant={isSpeaking ? "destructive" : "outline"}
+              size="lg"
+              onClick={isSpeaking ? stopSpeaking : () => speak(finalTranscript)}
+              disabled={!finalTranscript.trim()}
+            >
+              {isSpeaking ? (
+                <Square style={css('h-4 w-4')} />
+              ) : (
+                <Volume2 style={css('h-4 w-4')} />
+              )}
+              <Box tag="span" className="ml-2">{isSpeaking ? "Stop" : "Speak"}</Box>
+            </Button>
+
+            <Button variant="outline" size="lg" onClick={clearTranscript}>
+              <RotateCcw style={css('h-4 w-4')} />
+              <Box tag="span" className="ml-2">Clear</Box>
+            </Button>
+          </Box>
+
+          {/* Wake Word Toggle */}
+          <Box className="flex items-center justify-between">
+            <Box className="space-y-1">
+              <Box className="text-sm font-medium">Wake Word Detection</Box>
+              <Box className="text-xs text-muted-foreground">
+                Say "{wakeWord}" to activate
+              </Box>
+            </Box>
+            <Switch
+              checked={isWakeWordActive}
+              onCheckedChange={setIsWakeWordActive}
+            />
+          </Box>
+
+          {/* Status Indicators */}
+          <Box className="flex items-center gap-2">
+            {isListening && (
+              <Badge variant="solid" {...sx('animate-pulse')}>
+                Listening
+              </Badge>
+            )}
+            {isSpeaking && (
+              <Badge colorPalette="gray" {...sx('animate-pulse')}>
+                Speaking
+              </Badge>
+            )}
+            {isWakeWordActive && (
+              <Badge variant="outline">Wake Word Active</Badge>
+            )}
+            {audioLevel > 0.1 && (
+              <Badge variant="outline">
+                Audio: {Math.round(audioLevel * 100)}%
+              </Badge>
+            )}
+          </Box>
+
+          {/* Error Display */}
+          {error && (
+            <Box className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-sm text-destructive">
+              {error}
+            </Box>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Transcript Display */}
+      <Card>
+        <CardHeader {...sx('pb-3')}>
+          <CardTitle {...sx('text-lg')}>Transcript</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            value={finalTranscript + (transcript ? ` ${transcript}` : "")}
+            onChange={(e) => setFinalTranscript(e.target.value)}
+            placeholder="Transcript will appear here..."
+            {...sx('min-h-[100px] resize-none')}
+            readOnly={false}
+          />
+          <Box className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
+            <span>{finalTranscript.length} characters</span>
+            <span>Ctrl/Cmd + Enter to speak</span>
+          </Box>
+        </CardContent>
+      </Card>
+
+      {/* Settings Panel */}
+      {showSettings && (
+        <Card>
+          <CardHeader {...sx('pb-3')}>
+            <CardTitle {...sx('text-lg')}>Voice Settings</CardTitle>
+          </CardHeader>
+          <CardContent {...sx('space-y-6')}>
+            {/* Voice Selection */}
+            <Box className="space-y-2">
+              <Box tag="label" className="text-sm font-medium">Voice</Box>
+              <Select
+                value={selectedVoice.id}
+                onValueChange={(value) => {
+                  const voice = defaultVoices.find((v) => v.id === value)
+                  if (voice) setSelectedVoice(voice)
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {defaultVoices.map((voice) => (
+                    <SelectItem key={voice.id} value={voice.id}>
+                      {voice.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Box>
+
+            {/* Speech Controls */}
+            <Box className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <Box className="space-y-2">
+                <Box tag="label" className="text-sm font-medium">Speed</Box>
+                <Slider
+                  value={[speechSpeed]}
+                  onValueChange={([value]) => setSpeechSpeed(value)}
+                  min={0.5}
+                  max={2.0}
+                  step={0.1}
+                  {...sx('w-full')}
+                />
+                <Box className="text-xs text-muted-foreground text-center">
+                  {speechSpeed.toFixed(1)}x
+                </Box>
+              </Box>
+
+              <Box className="space-y-2">
+                <Box tag="label" className="text-sm font-medium">Pitch</Box>
+                <Slider
+                  value={[speechPitch]}
+                  onValueChange={([value]) => setSpeechPitch(value)}
+                  min={0.5}
+                  max={2.0}
+                  step={0.1}
+                  {...sx('w-full')}
+                />
+                <Box className="text-xs text-muted-foreground text-center">
+                  {speechPitch.toFixed(1)}x
+                </Box>
+              </Box>
+
+              <Box className="space-y-2">
+                <Box tag="label" className="text-sm font-medium">Volume</Box>
+                <Slider
+                  value={[speechVolume]}
+                  onValueChange={([value]) => setSpeechVolume(value)}
+                  min={0.0}
+                  max={1.0}
+                  step={0.1}
+                  {...sx('w-full')}
+                />
+                <Box className="text-xs text-muted-foreground text-center">
+                  {Math.round(speechVolume * 100)}%
+                </Box>
+              </Box>
+            </Box>
+
+            {/* Keyboard Shortcuts */}
+            <Box className="space-y-2">
+              <Box tag="label" className="text-sm font-medium">Keyboard Shortcuts</Box>
+              <Box className="grid grid-cols-1 md:grid-cols-2 gap-2 text-xs">
+                <Box className="flex justify-between">
+                  <span>Toggle listening:</span>
+                  <Box tag="kbd" className="bg-muted px-1 rounded">Space</Box>
+                </Box>
+                <Box className="flex justify-between">
+                  <span>Stop all:</span>
+                  <Box tag="kbd" className="bg-muted px-1 rounded">Esc</Box>
+                </Box>
+                <Box className="flex justify-between">
+                  <span>Speak transcript:</span>
+                  <Box tag="kbd" className="bg-muted px-1 rounded">Ctrl+Enter</Box>
+                </Box>
+              </Box>
+            </Box>
+          </CardContent>
+        </Card>
+      )}
+    </Box>
+  )
+}
+
+export type { VoiceProfile, VoiceCommand, AIVoiceProps }