Create VoiceBot.jsx

src/VoiceBot.jsx

@@ -0,0 +1,91 @@
+import React, { useRef, useState } from "react";
+import Loader from "./Loader";
+
+const SILENCE_THRESHOLD = 0.01;
+const SILENCE_DURATION = 1500;
+
+export default function VoiceBot() {
+  const mediaRecorderRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const analyserRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const silenceTimerRef = useRef(null);
+  const streamRef = useRef(null);
+
+  const [status, setStatus] = useState("idle");
+  // idle | listening | thinking | speaking
+
+  // =========================
+  // START RECORDING
+  // =========================
+  const startRecording = async () => {
+    setStatus("listening");
+
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    streamRef.current = stream;
+
+    mediaRecorderRef.current = new MediaRecorder(stream);
+    audioChunksRef.current = [];
+
+    mediaRecorderRef.current.ondataavailable = e =>
+      audioChunksRef.current.push(e.data);
+
+    mediaRecorderRef.current.onstop = handleStop;
+    mediaRecorderRef.current.start();
+
+    setupSilenceDetection(stream);
+  };
+
+  // =========================
+  // SILENCE DETECTION
+  // =========================
+  const setupSilenceDetection = stream => {
+    audioContextRef.current = new AudioContext();
+    const source = audioContextRef.current.createMediaStreamSource(stream);
+
+    analyserRef.current = audioContextRef.current.createAnalyser();
+    analyserRef.current.fftSize = 2048;
+    source.connect(analyserRef.current);
+
+    const data = new Uint8Array(analyserRef.current.fftSize);
+
+    const check = () => {
+      analyserRef.current.getByteTimeDomainData(data);
+      let sum = 0;
+      for (let i = 0; i < data.length; i++) {
+        const v = (data[i] - 128) / 128;
+        sum += v * v;
+      }
+      const volume = Math.sqrt(sum / data.length);
+
+      if (volume < SILENCE_THRESHOLD) {
+        if (!silenceTimerRef.current) {
+          silenceTimerRef.current = setTimeout(stopRecording, SILENCE_DURATION);
+        }
+      } else {
+        clearTimeout(silenceTimerRef.current);
+        silenceTimerRef.current = null;
+      }
+
+      if (status === "listening") requestAnimationFrame(check);
+    };
+
+    check();
+  };
+
+  // =========================
+  // STOP RECORDING
+  // =========================
+  const stopRecording = () => {
+    mediaRecorderRef.current?.stop();
+    streamRef.current?.getTracks().forEach(t => t.stop());
+    audioContextRef.current?.close();
+  };
+
+  // =========================
+  // SEND TO BACKEND
+  // =========================
+  const handleStop = async () => {
+    setStatus("thinking");
+
+    const blob = new Blob(audi