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
@@ -24,21 +25,21 @@ const InputOutputBackend: React.FC = () => {
   const [dateFormat, setDateFormat] = useState<string | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
 
-    useEffect(() => {
+  useEffect(() => {
-      setPreferredCurrency(localStorage.getItem("preferredCurrency"));
+    setPreferredCurrency(localStorage.getItem("preferredCurrency"));
-      setPreferredLanguage(localStorage.getItem("preferredLanguage"));
+    setPreferredLanguage(localStorage.getItem("preferredLanguage"));
-      setTimeFormat(localStorage.getItem("timeFormat"));
+    setTimeFormat(localStorage.getItem("timeFormat"));
-      setPreferredMeasurement(localStorage.getItem("preferredMeasurement"));
+    setPreferredMeasurement(localStorage.getItem("preferredMeasurement"));
-      setTimeZone(localStorage.getItem("timeZone"));
+    setTimeZone(localStorage.getItem("timeZone"));
-      setDateFormat(localStorage.getItem("dateFormat"));
+    setDateFormat(localStorage.getItem("dateFormat"));
-    }, []);
+  }, []);
 
-    useEffect(() => {
+  useEffect(() => {
-      if (preferredCurrency && preferredLanguage && timeFormat && dateFormat && preferredMeasurement && timeZone) {
+    if (preferredCurrency && preferredLanguage && timeFormat && dateFormat && preferredMeasurement && timeZone) {
-        setMessages([
+      setMessages([
-          {
+        {
-            role: "system",
+          role: "system",
-            content: `You are in the timezone: ${timeZone}. 
+          content: `You are in the timezone: ${timeZone}. 
             You use the time format ${timeFormat}. 
             You use the date format ${dateFormat} for all references of dates. 
             You use the ${preferredMeasurement} system. 
@@ -47,11 +48,12 @@ const InputOutputBackend: React.FC = () => {
             But in the case the user specifically states to answer in another language, do that. Speaking in 
             another language is not stating you should answer in that language. 
             Additionally, under no circumstances translate your answer into multiple languages.`,
-          },
+        },
-          { role: "assistant", content: "Hello! How can I help you?" },
+        { role: "assistant", content: "Hello! How can I help you?" },
-        ]);
+      ]);
-      }
+    }
-    }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
+  }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
+
 
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
@@ -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 startRecording = async (): Promise<string> => {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    const mediaRecorder = new MediaRecorder(stream)
+    const mediaRecorder = new MediaRecorder(stream);
-    mediaRecorderRef.current = mediaRecorder
+    mediaRecorderRef.current = mediaRecorder;
 
-    mediaRecorder.ondataavailable = (event) => {
+    audioChunks.current = []; // Initialize audio chunks
-      audioChunks.current.push(event.data)
-    }
 
-    mediaRecorder.onstop = async () => {
+    // Create a promise that resolves when the onstop event is done
-      const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" })
+    const stopRecordingPromise = new Promise<string>((resolve) => {
-      audioChunks.current = []
+      mediaRecorder.ondataavailable = (event) => {
-      // console.log(audioBlob);
+        audioChunks.current.push(event.data);
-      // const url = URL.createObjectURL(audioBlob)
+      };
-      // const audio = new Audio(url);
-      // audio.play().catch(error => console.error("Error playing audio:", error));
 
-      const remote = new VoiceSend()
+      mediaRecorder.onstop = async () => {
-      remote.sendToVoiceRecognition(audioBlob)
+        const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" });
-    }
+        audioChunks.current = [];
 
-    mediaRecorder.start()
+        const text_voice = await sendToVoiceRecognition(audioBlob);
-    setIsRecording(true)
+        console.log(text_voice);
-  }
+        resolve(text_voice); // Resolve the promise with the recognized text
+      };
+    });
+
+    mediaRecorder.start();
+    setIsRecording(true);
+
+    // Wait for the recording to stop and get the recognized text
+    return stopRecordingPromise;
+  };
 
   const stopRecording = () => {
-    mediaRecorderRef.current?.stop()
+    mediaRecorderRef.current?.stop();
-    setIsRecording(false)
+    setIsRecording(false);
-  }
+  };
 
-
+  const handleMicClick = async () => {
-  const handleMicClick = () => {
     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>
+    </>
   )
 }