voice-form-01

1"use client"
2 
3import { useCallback, useEffect, useRef, useState } from "react"
4import { zodResolver } from "@hookform/resolvers/zod"
5import { useForm } from "react-hook-form"
6 
7import { cn } from "@/lib/utils"
8import { voiceToFormAction } from "@/app/voice-form/actions/voice-to-form"
9import {
10  exampleFormSchema,
11  ExampleFormValues,
12} from "@/app/voice-form/schema"
13import { Button } from "@/components/ui/button"
14import {
15  Card,
16  CardContent,
17  CardDescription,
18  CardHeader,
19  CardTitle,
20} from "@/components/ui/card"
21import {
22  Form,
23  FormControl,
24  FormField,
25  FormItem,
26  FormLabel,
27  FormMessage,
28} from "@/components/ui/form"
29import { Input } from "@/components/ui/input"
30import { VoiceButton } from "@/components/ui/voice-button"
31 
32const AUDIO_CONSTRAINTS: MediaStreamConstraints = {
33  audio: {
34    echoCancellation: true,
35    noiseSuppression: true,
36    autoGainControl: true,
37  },
38}
39 
40const SUPPORTED_MIME_TYPES = ["audio/webm;codecs=opus", "audio/webm"] as const
41 
42function getMimeType(): string {
43  for (const type of SUPPORTED_MIME_TYPES) {
44    if (MediaRecorder.isTypeSupported(type)) {
45      return type
46    }
47  }
48  return "audio/webm"
49}
50 
51export default function Page() {
52  const [isRecording, setIsRecording] = useState(false)
53  const [isProcessing, setIsProcessing] = useState(false)
54  const [error, setError] = useState("")
55  const [success, setSuccess] = useState(false)
56 
57  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
58  const audioChunksRef = useRef<Blob[]>([])
59  const streamRef = useRef<MediaStream | null>(null)
60 
61  const form = useForm<ExampleFormValues>({
62    resolver: zodResolver(exampleFormSchema),
63    defaultValues: {
64      firstName: "",
65      lastName: "",
66    },
67    mode: "onChange",
68  })
69 
70  const cleanupStream = useCallback(() => {
71    if (streamRef.current) {
72      streamRef.current.getTracks().forEach((track) => track.stop())
73      streamRef.current = null
74    }
75  }, [])
76 
77  const processAudio = useCallback(
78    async (audioBlob: Blob) => {
79      setIsProcessing(true)
80      setError("")
81      setSuccess(false)
82 
83      try {
84        const audioFile = new File([audioBlob], "audio.webm", {
85          type: audioBlob.type,
86        })
87 
88        const result = await voiceToFormAction(audioFile)
89 
90        if (result.data && Object.keys(result.data).length > 0) {
91          Object.entries(result.data).forEach(([key, value]) => {
92            if (value) {
93              form.setValue(key as keyof ExampleFormValues, value as string, {
94// … truncated