Cleaned up some parts

frontend/src/pages/Character.tsx

@@ -1,7 +1,7 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import { Icon } from '@iconify/react';
 import CharacterBadge from '../components/CharacterBadge';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { speechToText, characterChatMessage, getAudio } from '../logic/sdk';
 
 export default function Character() {
@@ -23,44 +23,38 @@ export default function Character() {
                 chunks.push(e.data);
             }
     
-            mediaRecorder.current.onstop = (e) => {
+            mediaRecorder.current.onstop = async (e) => {
                 setIsRecording(false);
                 const blob = new Blob(chunks, { type: 'audio/wav' });
                 chunks = [];
             
                 const audioFile = new File([blob], "audio.wav", { type: 'audio/wav' });
             
-                speechToText(audioFile).then((text) => {
-                    setMessages(prevMessages => [...prevMessages, { text: text, sender: 'me' }]);
-                    characterChatMessage(sessionId, text).then((response) => {
-                        const { msg, audio_id } = response
-                        getAudio(audio_id).then((audioBlob) => {
-                            const audioFile = new File([audioBlob], "audio.wav", { type: 'audio/wav' });
-                            const audioUrl = URL.createObjectURL(audioFile);
-                            const audio = new Audio(audioUrl);
-                            audio.play();
-                        });
-                        setMessages(prevMessages => [...prevMessages, { text: msg, sender: 'other' }]); 
-                    })
-                });
+                const text = await speechToText(audioFile);
+                const response = await characterChatMessage(sessionId, text);
+                const { msg, audio_id } = response;
+                const audioBlob = await getAudio(audio_id);
+                const audioFileResponse = new File([audioBlob], "audio.wav", { type: 'audio/wav' });
+                const audioUrl = URL.createObjectURL(audioFileResponse);
+                const audio = new Audio(audioUrl);
+                audio.play();
+                setMessages(prevMessages => [...prevMessages, { text: text, sender: 'me' }, { text: msg, sender: 'other' }]); 
             }
         });
     }, []);
 
-    function handleRecord() {
+    const handleRecord = useCallback(() => {
         if (!isRecording) {
             if (mediaRecorder.current) {
                 mediaRecorder.current.start();
             }
             setIsRecording(true);
-            console.log("Recording...");
         } else {
             if (mediaRecorder.current) {
                 mediaRecorder.current.stop();
             }
-            console.log("Stopped recording.");
         }
-    }
+    }, [isRecording]);
 
     return (
         <div>