'use client'; import { Mic } from 'lucide-react'; import { useState, useEffect } from 'react'; import { cn } from '@/lib/utils'; export default function AI_Voice() { const [submitted, setSubmitted] = useState(false); const [time, setTime] = useState(0); const [isDemo, setIsDemo] = useState(true); // Timer logic useEffect(() => { let intervalId: NodeJS.Timeout | null = null; if (submitted) { intervalId = setInterval(() => { setTime((t) => t + 1); }, 1000); } else { setTime(0); } return () => { if (intervalId) clearInterval(intervalId); }; }, [submitted]); 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')}`; }; /** * Demo loop – auto toggles listening on/off until user clicks. */ useEffect(() => { if (!isDemo) return; let timeoutId: NodeJS.Timeout; const runAnimation = () => { setSubmitted(true); timeoutId = setTimeout(() => { setSubmitted(false); timeoutId = setTimeout(runAnimation, 1000); }, 3000); }; const initialTimeout = setTimeout(runAnimation, 150); return () => { clearTimeout(timeoutId); clearTimeout(initialTimeout); }; }, [isDemo]); const handleClick = () => { if (isDemo) { setIsDemo(false); setSubmitted(false); } else { setSubmitted((prev) => !prev); } }; const labelText = submitted ? 'Listening...' : 'Click to speak'; return (

{/* Top accent line & glow */}

{/* Header row */}

Voice input Hands-free talking to your model

Beta

{/* Main mic button + halo */} {/* Time + status */}

{formatTime(time)}

{labelText}

{/* Waveform bars */}

{Array.from({ length: 40 }).map((_, i) => (

))}

{/* Bottom hint */}

Press Space to hold and talk

); }

AI Voice

Installation

Usage