AI Voice

1"use client";
2 
3/**
4 * @author: @kokonutui
5 * @description: AI Voice
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Mic } from "lucide-react";
14import { useEffect, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17export default function AI_Voice() {
18  const [submitted, setSubmitted] = useState(false);
19  const [time, setTime] = useState(0);
20  const [isClient, setIsClient] = useState(false);
21  const [isDemo, setIsDemo] = useState(true);
22 
23  useEffect(() => {
24    setIsClient(true);
25  }, []);
26 
27  useEffect(() => {
28    let intervalId: NodeJS.Timeout;
29 
30    if (submitted) {
31      intervalId = setInterval(() => {
32        setTime((t) => t + 1);
33      }, 1000);
34    } else {
35      setTime(0);
36    }
37 
38    return () => clearInterval(intervalId);
39  }, [submitted]);
40 
41  const formatTime = (seconds: number) => {
42    const mins = Math.floor(seconds / 60);
43    const secs = seconds % 60;
44    return `${mins.toString().padStart(2, "0")}:${secs
45      .toString()
46      .padStart(2, "0")}`;
47  };
48 
49  /**
50   * Remove that, only used for demo
51   */
52  useEffect(() => {
53    if (!isDemo) return;
54 
55    let timeoutId: NodeJS.Timeout;
56    const runAnimation = () => {
57      setSubmitted(true);
58      timeoutId = setTimeout(() => {
59        setSubmitted(false);
60        timeoutId = setTimeout(runAnimation, 1000);
61      }, 3000);
62    };
63 
64    const initialTimeout = setTimeout(runAnimation, 100);
65    return () => {
66      clearTimeout(timeoutId);
67      clearTimeout(initialTimeout);
68    };
69  }, [isDemo]);
70 
71  const handleClick = () => {
72    if (isDemo) {
73      setIsDemo(false);
74      setSubmitted(false);
75    } else {
76      setSubmitted((prev) => !prev);
77    }
78  };
79 
80  return (
81    <div className="w-full py-4">
82      <div className="relative mx-auto flex w-full max-w-xl flex-col items-center gap-2">
83        <button
84          className={cn(
85            "group flex h-16 w-16 items-center justify-center rounded-xl transition-colors",
86            submitted
87              ? "bg-none"
88              : "bg-none hover:bg-black/5 dark:hover:bg-white/5"
89          )}
90          onClick={handleClick}
91          type="button"
92        >
93          {submitted ? (
94            <div
95              className="pointer-events-auto h-6 w-6 animate-spin cursor-pointer rounded-sm bg-black dark:bg-white"
96              style={{ animationDuration: "3s" }}
97            />
98          ) : (
99// … truncated