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;

src/modules/message.ts

@@ -2,13 +2,13 @@ import { RenderMessage, ClientMessage } from "@/types/message/index";
 import { v4 as uuidv4 } from 'uuid';
 
 // Create a RenderMessage object directly from json string.
-export function initRenderMessageFromString(message_str: string) {
+export function initRenderMessageFromString(messageStr: string) {
 
   // Parse the string.
-  const m = JSON.parse(message_str);
+  const m = JSON.parse(messageStr);
 
   // Auto set uid and time.
-  let currentdate = new Date();
+  const currentdate = new Date();
 
   const message: RenderMessage = {
     content: m.content,
@@ -16,7 +16,7 @@ export function initRenderMessageFromString(message_str: string) {
     modifier: m.modifier,
     time: currentdate.getTime(),
     uid: uuidv4(),
-    isChild: false
+    isChild: "none"
   }
 
   return message
@@ -26,7 +26,7 @@ export function initRenderMessageFromString(message_str: string) {
 export function initRenderMessage(text: string, audio: string, context: string, modifier: string) {
 
   // Auto set uid and time.
-  let currentdate = new Date();
+  const currentdate = new Date();
 
   const message: RenderMessage = {
     content: {
@@ -37,7 +37,7 @@ export function initRenderMessage(text: string, audio: string, context: string,
     modifier: modifier,
     time: currentdate.getTime(),
     uid: uuidv4(),
-    isChild: false
+    isChild: "none"
   }
 
   return message

src/modules/messages.ts

@@ -16,14 +16,20 @@ if (messagesString) {
 
 export default function useMessages() {
 
-    const addMessage = (m: RenderMessage) => messages.value.set(m.uid, m);
+    // Add new message and update previous message if nessesary.
+    const addMessage = (m: RenderMessage) => {
+      console.log(`Adding message: ${m.content.text}`)
+      messages.value.set(m.uid, m);
+    }
 
-    const updateMessage = (m: Annotation) => {
-        // update message if in the map.
-        if (messages.value.has(m.uid)) {
-            messages.value.get(m.uid).context = m.context;
-            messages.value.get(m.uid).content.text = m.text;
-        }
+    const updateMessage = (a: Annotation) => {
+        console.log("Updating message...")
+
+        const m = messages.value.get(a.uid)
+        m.context = a.context
+        m.text = a.text
+
+        return m
     }
 
     const saveMessages = () => {

src/types/message/index.ts

@@ -12,7 +12,7 @@ export interface RenderMessage {
     modifier: string;
     time: number;
     uid: string;
-    isChild: boolean;
+    isChild: string;
 }
 
 export interface ClientMessage {

src/views/messenger.vue

@@ -11,7 +11,6 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted } from "vue";
-import { RenderMessage } from "@/types/message/index";
 import MessageItem from "@/components/messageItem.vue";
 import InputItem from "@/components/inputItem/inputItem.vue";
 import Settings from "@/components/settings.vue";
@@ -30,35 +29,62 @@ export default defineComponent({
     const { emitter } = useMitt();
     const { messages, addMessage, updateMessage } = useMessages();
 
-    // Reference to previous message for grouping purposes.
-    let prevMessage: RenderMessage;
+    let prevRef: string; // ref to previous message
+    let activeGroup = false; // if active group exists.
 
+    // When backend has new message.
     const onRenderMessage = (_event: any, payload: any) => { 
-      const message = payload.message; // cleaner
+      let message = payload.message; // cleaner
 
-      // render message if there is content.
+      // Check type and handle accordingly.
       if (message.content) {
         addMessage(message);
-      } 
-
-      // must be an annotation, update message.
-      else {
-        updateMessage(message);
+      } else {
+        message = updateMessage(message);
       }
 
-      // Also want to check if message should be grouped.
-      // Message context and modifier needs to be same as previous message while also having close times (20s).
-      if (message.time < prevMessage.time + 20000 && message.context == prevMessage.context && message.modifier == prevMessage.modifier) {
+      // Check for grouping.
+      if (prevRef) {
+        const prev = messages.value.get(prevRef)
+        const current = messages.value.get(message.uid)
+
+        console.log(`${message.modifier}, ${prev.modifier}`)
+        console.log(`${message.context}, ${prev.context}`)
+        
+        // If last two messages go together...group accordingly.
+        if (current.time < prev.time + 20000 && current.modifier === prev.modifier && current.context === prev.context) {
+
+          if (activeGroup) {
+            prev.isChild = "middle"
+          } else {
+            prev.isChild = "first"
+          }
+
+          // Current always last child.
+          current.isChild = "last"
+          activeGroup = true
+        }
+
+        // Else...reset activeGroup.
+        else {
+          activeGroup = false
+        }
 
-        prevMessage.isChild = true;
       }
 
+      // Set previous message for next time.
+      prevRef = message.uid
+
     }
 
     onMounted(() => {
-      // Listen for new messages to render.
+
+      // Front end listener.
       emitter.on('self-message', (message) => addMessage(message));
+
+      // Back end listener.
       window.ipcRenderer.on("render-message", onRenderMessage);
+
     });
 
     onUnmounted(() => {