voice-nav-01

1"use client"
2 
3import { useCallback, useEffect, useRef, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6import { voiceToSiteAction } from "@/app/voice-nav/actions/voice-to-site"
7import {
8  Card,
9  CardDescription,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card"
13import { VoiceButton } from "@/components/ui/voice-button"
14 
15const AUDIO_CONSTRAINTS: MediaStreamConstraints = {
16  audio: {
17    echoCancellation: true,
18    noiseSuppression: true,
19    autoGainControl: true,
20  },
21}
22 
23const SUPPORTED_MIME_TYPES = ["audio/webm;codecs=opus", "audio/webm"] as const
24 
25function getMimeType(): string {
26  for (const type of SUPPORTED_MIME_TYPES) {
27    if (MediaRecorder.isTypeSupported(type)) {
28      return type
29    }
30  }
31  return "audio/webm"
32}
33 
34export default function Page() {
35  const [url, setUrl] = useState("https://elevenlabs.io/docs")
36  const [isRecording, setIsRecording] = useState(false)
37  const [isProcessing, setIsProcessing] = useState(false)
38  const [error, setError] = useState("")
39  const [success, setSuccess] = useState(false)
40 
41  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
42  const audioChunksRef = useRef<Blob[]>([])
43  const streamRef = useRef<MediaStream | null>(null)
44 
45  const cleanupStream = useCallback(() => {
46    if (streamRef.current) {
47      streamRef.current.getTracks().forEach((track) => track.stop())
48      streamRef.current = null
49    }
50  }, [])
51 
52  const processAudio = useCallback(async (audioBlob: Blob) => {
53    setIsProcessing(true)
54    setError("")
55    setSuccess(false)
56 
57    try {
58      const audioFile = new File([audioBlob], "audio.webm", {
59        type: audioBlob.type,
60      })
61 
62      const result = await voiceToSiteAction(audioFile)
63 
64      if (result.data?.url) {
65        setUrl(result.data.url)
66        setSuccess(true)
67      }
68    } catch (err) {
69      console.error("Voice input error:", err)
70      setError(err instanceof Error ? err.message : "Failed to process audio")
71    } finally {
72      setIsProcessing(false)
73    }
74  }, [])
75 
76  const stopRecording = useCallback(() => {
77    if (mediaRecorderRef.current?.state !== "inactive") {
78      mediaRecorderRef.current?.stop()
79    }
80    cleanupStream()
81    setIsRecording(false)
82  }, [cleanupStream])
83 
84  const startRecording = useCallback(async () => {
85    try {
86      setError("")
87      audioChunksRef.current = []
88 
89      const stream =
90        await navigator.mediaDevices.getUserMedia(AUDIO_CONSTRAINTS)
91      streamRef.current = stream
92 
93      const mimeType = getMimeType()
94// … truncated