trying to fix freeze bug

src/components/inputItem/inputController.ts

@@ -12,10 +12,9 @@ import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
 import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
 import { RenderMessage, ClientMessage } from "@/types/message/index";
 import { v4 as uuidv4 } from 'uuid';
-import {clientMessage, renderMessage} from '@/modules/message';
+import {clientMessage, initRenderMessage} from '@/modules/message';
 
 let textInput: HTMLInputElement | null;
-let m: RenderMessage | ClientMessage;
 let uid: string;
 
 export default function useInputController() {
@@ -33,19 +32,15 @@ export default function useInputController() {
             // remove first character of input.
             const text = input.value.substring(1);
 
-            uid = uuidv4();
+            // Render the message immediately.
+            const message = initRenderMessage(text, "", "", "sf");
+            emitter.emit("self-message", message);
 
-            m = renderMessage(text, false, "sf", uid);
+            // Then send it to the backend for processing.
+            const clientMm = clientMessage(text, false, message.uid);
+            post('client-message', message);
 
-            // render user message.
-            emitter.emit("self-message", m);
-
-            m = clientMessage(m.content.text, m.content.audio, uid);
-
-            // send message to backend.
-            post('client-message', m);
-
-            // reset text input.
+            // Reset the text input.
             if (textInput) textInput.value = ''; 
             input.value = " ";
         }
@@ -98,18 +93,17 @@ export default function useInputController() {
 
             isRecording.value = false;
 
-            uid = uuidv4();
+            // Render the message immediately.
+            const audioMessage = initRenderMessage("", "", "", "sf")
+            emitter.emit("self-message", audioMessage);
 
-            // render audio message.
-            m = renderMessage("", false, "sf", uid);
-            emitter.emit("self-message", m);
-
-            // stop stream recording.
+            // Notify backend to stop recording and send audio to python backend for audio processing.
             post('update-recorder', {
                 isRecording: isRecording.value,
-                uid
+                uid: audioMessage.uid
             }); 
 
+            // Reset input.
             input.value = ''
         }
     }
@@ -129,7 +123,6 @@ export default function useInputController() {
     // watch keyboard input & update current state.
     watch(input, (input, prevInput) => {
 
-        // 
         if (prevInput !== "" || prevInput.length > 0) {
             if (!isRecording.value) {
                 isTyping.value = true;
@@ -137,7 +130,6 @@ export default function useInputController() {
             return;
         }
 
-        //
         if (input === " " && isRecording.value === false) {
             isTyping.value = false;
             isRecording.value = true;

src/components/messageItem.vue

@@ -42,7 +42,7 @@
       </div>
 
       <!-- message context -->
-      <span class="context">
+      <span v-if="message.isChild === false" class="context">
 
         <!-- Render Crimata icon or friend's initials. -->
         <div v-if="message.modifier == 'ai'" class="photo">
@@ -69,6 +69,7 @@
 
  import {defineComponent, ref, onMounted} from 'vue';
 
+
  export default defineComponent({
   name: "MessageItem",