WOHOOOOOOOO

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";
@@ -38,7 +38,8 @@ const InputOutputBackend: React.FC = () => {
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
   const getWorkerRef = useRef<Worker | null>(null)
-  const [messages, setMessages] = useState<Message[]>([{ role: "system", 
+  const [messages, setMessages] = useState<Message[]>([{
+    role: "system",
     content: `You are in the timezone: ${timeZone}. 
     You use the time format ${timeFormat}. 
     You use the date format ${dateFormat} for all references of dates. 
@@ -169,40 +170,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;
 
+    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" })
+        const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" });
-      audioChunks.current = []
+        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 remote = new VoiceSend()
+        const text_voice = await sendToVoiceRecognition(audioBlob);
-      remote.sendToVoiceRecognition(audioBlob)
+        console.log(text_voice);
-    }
+        resolve(text_voice); // Resolve the promise with the recognized text
+      };
+    });
 
-    mediaRecorder.start()
+    mediaRecorder.start();
-    setIsRecording(true)
+    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();
     }

app/backend/voice_backend.ts

@@ -1,15 +1,13 @@
 import axios from "axios";
 
-
+export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
-class VoiceSend {
-    sendToVoiceRecognition(audio_data: Blob) {
     console.log("sending recording...");
 
     const formdata = new FormData()
     formdata.append("audio", audio_data)
 
     const dataSend = { option: "offline", type: "basic", audio: audio_data }
-        axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
+    return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
         .then((response) => {
             console.log(response.data)
             return response.data.response
@@ -17,10 +15,6 @@ class VoiceSend {
         .catch(error => {
             console.log("Error calling API:", error)
             postMessage({ status: 500 })
+            return "Error"
         })
 }
-
-}
-
-
-export default VoiceSend;

app/components/InputFrontend.tsx

@@ -13,6 +13,10 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
   ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => {
     const [inputValue, setInputValue] = useState('');
 
+    useEffect(() => {
+      setInputValue(message);
+    }, [message]);
+
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(e.target.value);
     };