add isComplete value to hook for easier access to autosending messages once complete

app/hooks/useTranscriber.ts

@@ -29,6 +29,7 @@ interface TranscriberCompleteData {
 }
 
 export interface TranscriberData {
+    isComplete?: boolean;
     isBusy: boolean;
     text: string;
     chunks: { text: string; timestamp: [number, number | null] }[];
@@ -37,6 +38,7 @@ export interface TranscriberData {
 export interface Transcriber {
     onInputChange: () => void;
     isBusy: boolean;
+    isComplete: boolean;
     isModelLoading: boolean;
     progressItems: ProgressItem[];
     start: (audioData: AudioBuffer | undefined) => void;
@@ -58,6 +60,7 @@ export function useTranscriber(): Transcriber {
         undefined,
     );
     const [isBusy, setIsBusy] = useState(false);
+    const [isComplete, setIsComplete] = useState(false);
     const [isModelLoading, setIsModelLoading] = useState(false);
 
     const [progressItems, setProgressItems] = useState<ProgressItem[]>([]);
@@ -99,6 +102,7 @@ export function useTranscriber(): Transcriber {
                     chunks: completeMessage.data.chunks,
                 });
                 setIsBusy(false);
+                setIsComplete(true);
                 break;
 
             case "initiate":
@@ -149,6 +153,7 @@ export function useTranscriber(): Transcriber {
             if (audioData) {
                 setTranscript(undefined);
                 setIsBusy(true);
+                setIsComplete(false);
 
                 let audio;
                 if (audioData.numberOfChannels === 2) {
@@ -184,6 +189,7 @@ export function useTranscriber(): Transcriber {
         return {
             onInputChange,
             isBusy,
+            isComplete,
             isModelLoading,
             progressItems,
             start: postRequest,
@@ -202,6 +208,7 @@ export function useTranscriber(): Transcriber {
     }, [
         onInputChange,
         isBusy,
+        isComplete,
         isModelLoading,
         progressItems,
         postRequest,

app/input.tsx

@@ -50,10 +50,13 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
     const [recognizedText, setRecognizedText] = useState('');
     const transcriber = useTranscriber();
 
+    const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        handleSubmit(input); // Assuming handleSubmit now takes the input as an argument
+    };
+
     const startListening = useCallback((audioData: any) => {
-        if (!transcriber.isBusy && !transcriber.isModelLoading) {
-            transcriber.start(audioData);
-        }
+        transcriber.start(audioData);
     }, [transcriber]);
 
     useEffect(() => {
@@ -62,6 +65,30 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
         }
     }, [transcriber.output, transcriber.isBusy]);
 
+    const handleTranscriptionComplete = () => {
+        // Create a synthetic event object
+        const syntheticEvent = {
+            preventDefault: () => {},
+            target: {
+                // Mimic the structure of your form's event.target here
+                elements: {
+                    // Assuming the form has an input field named 'input'
+                    input: {
+                        value: recognizedText
+                    }
+                }
+            }
+        };
+
+        handleSubmit(syntheticEvent);
+    };
+    
+    useEffect(() => {
+        if (transcriber.isComplete) {
+            handleTranscriptionComplete();
+        }
+    }, [transcriber.isComplete]);
+
     useEffect(() => {
         if (recognizedText) {
             setInput(recognizedText);
@@ -114,8 +141,6 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
 
         let startTime = Date.now();
 
-        vad.start();
-
         try {
             if (!streamRef.current) {
                 streamRef.current = await navigator.mediaDevices.getUserMedia({
@@ -177,6 +202,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
     }, [recording]);
 
     const handleToggleRecording = () => {
+        vad.start();
         if (recording) {
             stopRecording();
         } else {
@@ -201,7 +227,7 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
                     ))}
                 </div>
             )}
-            <form onSubmit={handleSubmit} className={styles.form}>
+            <form onSubmit={onFormSubmit} className={styles.form}>
                 <input
                     type="text"
                     value={input}