Merge branch 'main' into main

app/backend/InputOutputHandler.tsx

@@ -1,11 +1,13 @@
 "use client"
-import React, { useEffect, useRef, useState } from "react";
+import React, { use, useEffect, useRef, useState } from "react";
 import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
 import VoiceSend from "./voice_backend"
 import { AudioRecorder } from "./AudioRecorder";
 import axios from "axios";
 import { resolve } from "path";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
 
 const InputOutputBackend: React.FC = () => {
@@ -125,6 +127,17 @@ const InputOutputBackend: React.FC = () => {
     });
   };
 
+  /* Variables for System-prompt */
+  const [preferredCurrency, setPreferredCurrency] = useState(localStorage.getItem("preferredCurrency") || "")
+  const [preferredLanguage, setPreferredLanguage] = useState(localStorage.getItem("preferredLanguage") || "")
+  const [timeFormat, setTimeFormat] = useState(localStorage.getItem("timeFormat") || "")
+  const [preferredMeasurement, setPreferredMeasurement] = useState(localStorage.getItem("preferredMeasurement") || "")
+  const [timeZone, setTimeZone] = useState(localStorage.getItem("timeZone") || "")
+  const [dateFormat, setDateFormat] = useState(localStorage.getItem("dateFormat") || "")
+
+  useEffect(() => {
+    
+  },[preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat])
 
   const addMessage = (role: string, content: string) => {
     setMessages(previous => [...previous, { role, content }])
@@ -152,25 +165,50 @@ const InputOutputBackend: React.FC = () => {
       audioChunks.current.push(event.data)
     }
         
-    mediaRecorder.onstop = () => {
+    mediaRecorder.onstop = async () => {
       const audioBlob = new Blob(audioChunks.current, { type: "audio/ogg" })
-      const url = URL.createObjectURL(audioBlob)
-      console.log(url);
-      setAudioURL(url)
       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()
-      remote.sendToVoiceRecognition(audioBlob,)
+      remote.sendToVoiceRecognition(audioBlob)
     }
 
     mediaRecorder.start()
     setIsRecording(true)
-        
+  }
+
+  const ffmpegRef = useRef<FFmpeg | null>(null)
+  const audioRef = useRef("")
+
+  const loadFFmpeg = async () => {
+    if (!ffmpegRef.current) {
+      ffmpegRef.current = new FFmpeg()
+      await ffmpegRef.current.load()
     }
+  }
+
+  const convertOggToWav = async (oggFile: File | Blob) => {
+    await loadFFmpeg()
+
+    const ffmpeg = ffmpegRef.current!
+
+    await ffmpeg.writeFile("input.ogg", await fetchFile(oggFile))
+    await ffmpeg.exec(["-i", "input.ogg", "output.wav"])
+    const wavData = await ffmpeg.readFile("output.wav")
+    console.log(wavData);
+    const wavBlob = new Blob([wavData], { type: "audio/wav" })
+    audioRef.current = URL.createObjectURL(wavBlob)
+    return wavBlob
+  }
     
-    const stopRecording = () => {
-      mediaRecorderRef.current?.stop()
-      setIsRecording(false)
-    }
+  const stopRecording = () => {
+    mediaRecorderRef.current?.stop()
+    setIsRecording(false)
+  }
 
 
   const handleMicClick = () => {
@@ -236,14 +274,9 @@ const InputOutputBackend: React.FC = () => {
         onMicClick={handleMicClick}
         inputDisabled={inputDisabled}
         isRecording={isRecording}
-      />
+      /> 
     </div>
   )
 }
 
-export default InputOutputBackend
-
-
-
-
-
+export default InputOutputBackend

app/components/ConversationFrontend.tsx

@@ -58,7 +58,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
             <button type="button" onClick={onCopyClick}>
               <img src="/img/copy.svg" alt="copy" />
             </button>
-            <p style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
+            <p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
           </div>
         </div>
       </div>

app/components/InputFrontend.tsx

@@ -13,10 +13,6 @@ 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);
     };
@@ -31,10 +27,6 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
       }
     };
 
-    const styles = {
-      
-    }
-
     return (
       <div className="input" id="inputForm" ref={ref}>
         <input

app/styles/output.css

@@ -69,3 +69,7 @@
 .button-container img {
     height: 1.5em;
 }
+
+#copiedText{
+    margin-top: 1em;
+}