Bug fixes merge

app/backend/InputOutputHandler.tsx

@@ -2,7 +2,7 @@
 import React, { use, useEffect, useRef, useState } from "react";
 import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
-import VoiceSend from "./voice_backend"
+import { sendToVoiceRecognition } from "./voice_backend"
 import { AudioRecorder } from "./AudioRecorder";
 import axios from "axios";
 import { resolve } from "path";
@@ -11,6 +11,7 @@ import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
 
 const InputOutputBackend: React.FC = () => {
+  // # variables
   type Message = {
     role: string
     content: string
@@ -53,6 +54,7 @@ const InputOutputBackend: React.FC = () => {
     }
   }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
 
+
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
@@ -162,11 +164,6 @@ const InputOutputBackend: React.FC = () => {
     });
   };
 
-
-  useEffect(() => {
-    
-  },[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
-
   const addMessage = (role: string, content: string) => {
     setMessages(previous => [...previous, { role, content }])
   }
@@ -184,40 +181,46 @@ const InputOutputBackend: React.FC = () => {
     }
   }
 
-  const startRecording = async () => {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
-    const mediaRecorder = new MediaRecorder(stream)
-    mediaRecorderRef.current = mediaRecorder
+  const startRecording = async (): Promise<string> => {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mediaRecorder = new MediaRecorder(stream);
+    mediaRecorderRef.current = mediaRecorder;
 
+    audioChunks.current = []; // Initialize audio chunks
+
+    // Create a promise that resolves when the onstop event is done
+    const stopRecordingPromise = new Promise<string>((resolve) => {
       mediaRecorder.ondataavailable = (event) => {
-      audioChunks.current.push(event.data)
-    }
+        audioChunks.current.push(event.data);
+      };
 
       mediaRecorder.onstop = async () => {
-      const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" })
-      audioChunks.current = []
-      // console.log(audioBlob);
-      // const url = URL.createObjectURL(audioBlob)
-      // const audio = new Audio(url);
-      // audio.play().catch(error => console.error("Error playing audio:", error));
+        const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" });
+        audioChunks.current = [];
 
-      const remote = new VoiceSend()
-      remote.sendToVoiceRecognition(audioBlob)
-    }
+        const text_voice = await sendToVoiceRecognition(audioBlob);
+        console.log(text_voice);
+        resolve(text_voice); // Resolve the promise with the recognized text
+      };
+    });
 
-    mediaRecorder.start()
-    setIsRecording(true)
-  }
+    mediaRecorder.start();
+    setIsRecording(true);
+
+    // Wait for the recording to stop and get the recognized text
+    return stopRecordingPromise;
+  };
 
   const stopRecording = () => {
-    mediaRecorderRef.current?.stop()
-    setIsRecording(false)
-  }
+    mediaRecorderRef.current?.stop();
+    setIsRecording(false);
+  };
 
-
-  const handleMicClick = () => {
+  const handleMicClick = async () => {
     if (!isRecording) {
-      startRecording();
+      const recognizedText = await startRecording();
+      setInputMessage(recognizedText); // Set the recognized text after recording
+      console.log("Set!")
     } else {
       stopRecording();
     }
@@ -264,7 +267,7 @@ const InputOutputBackend: React.FC = () => {
 
 
   return (
-    <div>
+    <>
       <ConversationFrontend
         messages={messages}
         onResendClick={handleResendClick}
@@ -279,7 +282,7 @@ const InputOutputBackend: React.FC = () => {
         inputDisabled={inputDisabled}
         isRecording={isRecording}
       />
-    </div>
+    </>
   )
 }