message grouping

src/components/inputItem/inputController.ts

@@ -10,12 +10,9 @@ 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, initRenderMessage} from '@/modules/message';
 
 let textInput: HTMLInputElement | null;
-let uid: string;
 
 export default function useInputController() {
 
@@ -37,8 +34,8 @@ export default function useInputController() {
             emitter.emit("self-message", message);
 
             // Then send it to the backend for processing.
-            const clientMm = clientMessage(text, false, message.uid);
-            post('client-message', message);
+            const clientM = clientMessage(text, false, message.uid);
+            post('client-message', clientM);
 
             // Reset the text input.
             if (textInput) textInput.value = ''; 

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 v-if="message.isChild === false" 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">
@@ -128,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;
   }
@@ -200,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;