Merge remote-tracking branch 'origin/main'

src/components/inputItem/inputController.ts

@@ -10,14 +10,10 @@ import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
 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 anime from "animejs";
+import { clientMessage, renderMessage } from '@/modules/message';
 
 let textInput: HTMLInputElement | null;
-let m: RenderMessage | ClientMessage;
-let uid: string;
 
 // Animation functions for text input element.
 function expandInput() {
@@ -50,24 +46,27 @@ export default function useInputController() {
     const input = ref("");
     const capsLock = ref(false);
 
+    // Utility function to render message.
+    const render = (text: string, audio: boolean | string, context: string, modifier: string): string => {
+        const m = renderMessage({ text, audio, context, modifier });
+        emitter.emit("self-message", m);
+        console.log(m.time)
+        return m.uid;
+    }
+
     // send message on ENTER.
     const onEnter = () => {
 
         if (input.value) {
 
-            uid = uuidv4();
+            // Render the message immediately and get its unique id.
+            const uid = render(input.value, false, "", "sf");
 
-            m = renderMessage(input.value, false, "sf", uid);
+            // Then send it to the backend for processing.
+            const clientM = clientMessage(input.value, false, uid);
+            post('client-message', clientM);
 
-            // render user message.
-            emitter.emit("self-message", m);
-
-            m = clientMessage(m.content.text, m.content.audio, uid);
-
-            // send message to main process.
-            post('client-message', m);
-
-            // reset text input.
+            // Reset the text input.
             if (textInput) textInput.value = ''; 
             input.value = " ";
         }
@@ -127,18 +126,15 @@ export default function useInputController() {
 
             isRecording.value = false;
 
-            uid = uuidv4();
-
-            // render audio message.
-            m = renderMessage("", false, "sf", uid);
-            emitter.emit("self-message", m);
-
-            // stop stream recording.
+            // // Render the message immediately and get its unique id.
+            const uid = render("", "", "", "sf");
+            // Notify main process to stop recording and send send audio to backend for analysis.
             post('update-recorder', {
                 isRecording: isRecording.value,
                 uid
             }); 
 
+            // Reset input.
             input.value = ''
         }
         else if (e.code === "CapsLock") {
@@ -158,7 +154,6 @@ export default function useInputController() {
         window.removeEventListener("keyup", onKeyUp);
     });
 
-
     // watch keyboard input & update inputItem state.
     watch(input, (input, prevInput) => {
         if (isTyping.value && input.length === 0) {

src/components/messageItem.vue

@@ -1,6 +1,7 @@
 <template>  
   <div
     class="message"
+    :class="`${message.isChild}ChildMessage`"
     :id="`${message.modifier}Message`"
     :key="message.id"
   >
@@ -9,11 +10,15 @@
     <!-- !denoted by the modifier attribute -->
 
     <!-- Includes bubble and context. -->
-    <div class="messageBox" :id="`${message.modifier}MessageBox`">
+    <div 
+      :id="`${message.modifier}MessageBox`"
+      class="messageBox"
+    >
 
       <!-- message bubble -->
       <div
         class="bubble"
+        :class="`${message.modifier}-${message.isChild}ChildBubble`"
         :id="`${message.modifier}Bubble`"
       >
         <!-- Show loader when audio is being transcribed. -->
@@ -42,7 +47,7 @@
       </div>
 
       <!-- message context -->
-      <span class="context">
+      <span v-if="message.isChild === 'last' || message.isChild === 'none'" class="context">
 
         <!-- Render Crimata icon or friend's initials. -->
         <div v-if="message.modifier == 'ai'" class="photo">
@@ -69,6 +74,7 @@
 
  import {defineComponent, ref, onMounted} from 'vue';
 
+
  export default defineComponent({
   name: "MessageItem",
 
@@ -127,6 +133,19 @@
     margin-bottom: 18px;
   }
 
+  .firstChildMessage {
+    padding-bottom: 2px;
+  }
+
+  .middleChildMessage {
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+
+  .lastChildMessage {
+    padding-top: 2px;
+  }
+
   #aiMessage {
     align-items: flex-start;
   }
@@ -199,6 +218,32 @@
     background-color: white;
   }
 
+  .sf-firstChildBubble {
+    border-bottom-right-radius: 9px;
+  }
+
+  .sf-middleChildBubble {
+    border-top-right-radius: 9px;
+    border-bottom-right-radius: 9px;
+  }
+
+  .sf-lastChildBubble {
+    border-top-right-radius: 9px;
+  }
+
+  .ai-firstChildBubble, .fr-firstChildBubble {
+    border-bottom-left-radius: 9px;
+  }
+
+  .ai-middleChildBubble, .fr-middleChildBubble {
+    border-top-left-radius: 9px;
+    border-bottom-left-radius: 9px;
+  }
+
+  .ai-lastChildBubble, .fr-lastChildBubble {
+    border-top-left-radius: 9px;
+  }
+
   .context {
     display: flex;
     align-items: center;