From 9a8a5905e0b42b4d5a08f9fbc83e6ba618599a6c Mon Sep 17 00:00:00 2001
From: Prince Baghel <pkbghl90@gmail.com>
Date: Thu, 7 Nov 2024 12:04:41 +0530
Subject: [PATCH] chore: vad chunks

---
 src/components/VadAudio.tsx  |  6 ++++--
 src/components/inputBar.tsx  | 26 +++++++++++++-------------
 src/components/inputBar2.tsx | 21 +++++++++++++++++----
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/components/VadAudio.tsx b/src/components/VadAudio.tsx
index 5f6c70c..64b066d 100644
--- a/src/components/VadAudio.tsx
+++ b/src/components/VadAudio.tsx
@@ -12,12 +12,14 @@ interface VadAudioProps {
   onStartListening: () => void;
   onStopListening: () => void;
   isHome?: boolean;
+  isTranscribing?: boolean;
 }
 
 export default function VadAudio({
   onAudioCapture,
   onStartListening,
   onStopListening,
+  isTranscribing = false,
   isHome = false,
 }: VadAudioProps) {
   const [isListening, setIsListening] = useState(false);
@@ -70,6 +72,7 @@ export default function VadAudio({
     setIsListening(false);
     onStopListening();
     vad.pause();
+    console.log("pausing vad", vad.listening);
     resetDuration();
     clearTimer();
     if (isSupported) {
@@ -82,7 +85,6 @@ export default function VadAudio({
     timerRef.current = setInterval(() => {
       if (startTimeRef.current) {
         const elapsed = Date.now() - startTimeRef.current;
-        console.log("elapsed", elapsed);
         const minutes = Math.floor(elapsed / 60000);
         const seconds = Math.floor((elapsed % 60000) / 1000);
         setDuration(
@@ -127,7 +129,7 @@ export default function VadAudio({
         variant={vad.listening ? "destructive" : "secondary"}
         type="button"
         className="disabled:text-muted"
-        disabled={vad.loading}
+        disabled={vad.loading || (isTranscribing && !vad.listening)}
       >
         {vad.listening ? (
           <StopCircle
diff --git a/src/components/inputBar.tsx b/src/components/inputBar.tsx
index fe0dd8a..07ba673 100644
--- a/src/components/inputBar.tsx
+++ b/src/components/inputBar.tsx
@@ -8,6 +8,7 @@ import {
   SetStateAction,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { ChatRequestOptions, CreateMessage, Message, nanoid } from "ai";
@@ -473,6 +474,10 @@ const InputBar = (props: InputBarProps) => {
     [key: number]: string;
   }>({});
 
+  const [isBlinking, setIsBlinking] = useState(false); // Control blinking state
+  const [displayNumber, setDisplayNumber] = useState(1);
+  const isLastChunk = useRef(false);
+
   const handleAudioChunk = async (audioChunk: File) => {
     const newAudioId = audioId + 1;
     setAudioId(newAudioId);
@@ -490,6 +495,11 @@ const InputBar = (props: InputBarProps) => {
         ...prev,
         [newAudioId]: data.text,
       }));
+      if (isLastChunk.current) {
+        setTimeout(() => {
+          setTranscriptHashTable({});
+        }, 1000);
+      }
       // props?.setInput?.((prev) => prev + data.text);
       setIsTranscribing(false);
     } catch (err) {
@@ -595,9 +605,6 @@ const InputBar = (props: InputBarProps) => {
     // setDisableInputs(true)
   };
 
-  const [isBlinking, setIsBlinking] = useState(false); // Control blinking state
-  const [displayNumber, setDisplayNumber] = useState(1);
-
   useEffect(() => {
     let interval: any;
     if (isBlinking) {
@@ -609,16 +616,6 @@ const InputBar = (props: InputBarProps) => {
     return () => clearInterval(interval);
   }, [isBlinking]);
 
-  useEffect(() => {
-    if (!isBlinking) {
-      const resetTimer = setTimeout(() => {
-        setTranscriptHashTable({});
-      }, 5000); // Reset after 5 seconds
-
-      return () => clearTimeout(resetTimer);
-    }
-  }, [isBlinking]);
-
   return (
     <form
       onSubmit={handleSubmit}
@@ -748,7 +745,9 @@ const InputBar = (props: InputBarProps) => {
                 />
               </Button> */}
             <VadAudio
+              isTranscribing={isTranscribing}
               onStartListening={() => {
+                isLastChunk.current = false;
                 setIsBlinking(true);
                 setIsAudioWaveVisible(true);
                 const newAudioId = audioId + 1;
@@ -758,6 +757,7 @@ const InputBar = (props: InputBarProps) => {
                 }));
               }}
               onStopListening={() => {
+                isLastChunk.current = true;
                 setIsBlinking(false);
                 // setTranscriptHashTable({});
                 setIsAudioWaveVisible(false);
diff --git a/src/components/inputBar2.tsx b/src/components/inputBar2.tsx
index c818fbe..0305113 100644
--- a/src/components/inputBar2.tsx
+++ b/src/components/inputBar2.tsx
@@ -8,6 +8,7 @@ import {
   SetStateAction,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { ChatRequestOptions, CreateMessage, Message, nanoid } from "ai";
@@ -342,6 +343,9 @@ const InputBar = (props: InputBarProps) => {
   const [transcriptHashTable, setTranscriptHashTable] = useState<{
     [key: number]: string;
   }>({});
+  const [isBlinking, setIsBlinking] = useState(false); // Control blinking state
+  const [displayNumber, setDisplayNumber] = useState(1);
+  const isLastChunk = useRef(false);
 
   const handleAudioChunk = async (audioChunk: File) => {
     const newAudioId = audioId + 1;
@@ -360,6 +364,12 @@ const InputBar = (props: InputBarProps) => {
         ...prev,
         [newAudioId]: data.text,
       }));
+      if (isLastChunk.current) {
+        console.log("resetting transcript hash table", isLastChunk.current);
+        setTimeout(() => {
+          setTranscriptHashTable({});
+        }, 1000);
+      }
       setIsTranscribing(false);
     } catch (err) {
       console.error("got in error", err);
@@ -391,9 +401,6 @@ const InputBar = (props: InputBarProps) => {
     }
   };
 
-  const [isBlinking, setIsBlinking] = useState(false); // Control blinking state
-  const [displayNumber, setDisplayNumber] = useState(1);
-
   useEffect(() => {
     let interval: any;
     if (isBlinking) {
@@ -509,7 +516,9 @@ const InputBar = (props: InputBarProps) => {
           <div>
             <div className="flex gap-2">
               <VadAudio
+                isTranscribing={isTranscribing}
                 onStartListening={() => {
+                  isLastChunk.current = false;
                   setIsBlinking(true);
                   setIsAudioWaveVisible(true);
                   const newAudioId = audioId + 1;
@@ -521,13 +530,17 @@ const InputBar = (props: InputBarProps) => {
                   setIsAudioWaveVisible(true);
                 }}
                 onStopListening={() => {
+                  isLastChunk.current = true;
                   setIsBlinking(false);
-                  setTranscriptHashTable({});
                   setIsAudioWaveVisible(false);
                 }}
                 // disabled={isRecording || isTranscribing || disableInputs}
                 onAudioCapture={(file: File) => {
                   // trigger a call to the backend to transcribe the audio
+                  console.log(
+                    "checking isBlinking onAudioCapture",
+                    isLastChunk.current,
+                  );
                   handleAudioChunk(file);
                 }}
                 isHome={props.isHome}