"use client"; /** * @author: @kokonutui * @description: AI Voice * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Mic } from "lucide-react"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; export default function AI_Voice() { const [submitted, setSubmitted] = useState(false); const [time, setTime] = useState(0); const [isClient, setIsClient] = useState(false); const [isDemo, setIsDemo] = useState(true); useEffect(() => { setIsClient(true); }, []); useEffect(() => { let intervalId: NodeJS.Timeout; if (submitted) { intervalId = setInterval(() => { setTime((t) => t + 1); }, 1000); } else { setTime(0); } return () => 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")}`; }; /** * Remove that, only used for demo */ 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, 100); return () => { clearTimeout(timeoutId); clearTimeout(initialTimeout); }; }, [isDemo]); const handleClick = () => { if (isDemo) { setIsDemo(false); setSubmitted(false); } else { setSubmitted((prev) => !prev); } }; return (

{formatTime(time)}

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

))}

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

); }

AI Voice

Instalação

Dependências