"use client"; import { Mic } from "lucide-react"; import { useState, useEffect } from "react"; import { cn } from "@/lib/utils"; interface AIVoiceInputProps { onStart?: () => void; onStop?: (duration: number) => void; visualizerBars?: number; demoMode?: boolean; demoInterval?: number; className?: string; } export function AIVoiceInput({ onStart, onStop, visualizerBars = 48, demoMode = false, demoInterval = 3000, className }: AIVoiceInputProps) { const [submitted, setSubmitted] = useState(false); const [time, setTime] = useState(0); const [isClient, setIsClient] = useState(false); const [isDemo, setIsDemo] = useState(demoMode); useEffect(() => { setIsClient(true); }, []); useEffect(() => { let intervalId: NodeJS.Timeout; if (submitted) { onStart?.(); intervalId = setInterval(() => { setTime((t) => t + 1); }, 1000); } else { onStop?.(time); setTime(0); } return () => clearInterval(intervalId); }, [submitted, time, onStart, onStop]); useEffect(() => { if (!isDemo) return; let timeoutId: NodeJS.Timeout; const runAnimation = () => { setSubmitted(true); timeoutId = setTimeout(() => { setSubmitted(false); timeoutId = setTimeout(runAnimation, 1000); }, demoInterval); }; const initialTimeout = setTimeout(runAnimation, 100); return () => { clearTimeout(timeoutId); clearTimeout(initialTimeout); }; }, [isDemo, demoInterval]); const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`; }; const handleClick = () => { if (isDemo) { setIsDemo(false); setSubmitted(false); } else { setSubmitted((prev) => !prev); } }; return (

{formatTime(time)}

{[...Array(visualizerBars)].map((_, i) => (

))}

{submitted ? "Listening..." : "Click to speak"}

); }