dynamic initials

src/modules/auth.ts

@@ -25,6 +25,12 @@ const authToken = async () => {
    const { invoke  } = useIpc();
     try {
         token = window.localStorage.getItem(AUTH_KEY);
+
+        if (!token) {
+            token = "no-token"
+        }
+
+        console.log(`Token ${token}`)
         const res = await invoke('auth-session', token);
         window.localStorage.setItem(AUTH_KEY, res);
         state.accessToken = res;

src/modules/messages.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import useScroll from "@/modules/scroll";
 import { RenderMessage, Annotation } from "@/types/message/index";
 
 const messagesKey = "CRIMATA_MESSAGES";
@@ -7,7 +8,7 @@ const sizeLimit = 200;
 // list of messages where the first item is the oldest message.
 const messages = ref(new Map());
 
-// get stored messages.
+// Get stored messages.
 const messagesString = window.localStorage.getItem(messagesKey);
 
 if (messagesString) {
@@ -17,51 +18,75 @@ if (messagesString) {
   messages.value = new Map(Object.entries(parsed));
 }
 
-// utility function to remove oldest message from the messages map. 
+// Remove oldest message from the messages map. 
 function deleteOldest() { 
-   // create array of map keys and get the key of the oldest message.
    const lastKey = Array.from(messages.value.keys()).shift();
-
    messages.value.delete(lastKey);
 }
 
-// Is the message div scrolled to the bottom?
-let isScrolledToBottom: boolean;
+//---Message Grouping-----------------------------------------------
 
-// Update isScrolledToBottom
-const updateScrollRef = () => {
-  const e = document.getElementById("messenger")
-  if (e) {
-    isScrolledToBottom = e.scrollHeight - e.clientHeight <= e.scrollTop + 1
-  }
-}
+let prevRef: string;
+let activeGroup = false;
 
-// Adjust scroll after we add content to the messenger.
-const adjustScroll = () => {
-  const e = document.getElementById("messenger")
-  if (e) {
-    if (isScrolledToBottom) {
-      e.scrollTo({
-        top: e.scrollHeight - e.clientHeight,
-        behavior: 'smooth'
-      });
+const updateGrouping = (currentMessageRef: string) => {
+  if (prevRef) {
+
+    // Get references to the two most recent messages.
+    const prev = messages.value.get(prevRef)
+    const current = messages.value.get(currentMessageRef)
+
+    // See if they should be grouped.
+    if (current.time < prev.time + 20000) {
+      if (prev.modifier === current.modifier) {
+        if (prev.context === current.context) {
+
+          // Update grouping accordingly.
+          if (activeGroup) {
+            prev.isChild = "middle";
+          } 
+
+          else {
+            prev.isChild = "first";
+          }
+
+          current.isChild = "last";
+          activeGroup = true;
+        }
+
+        // If messages unrealated, reset activeGroup.
+        else {
+          activeGroup = false;
+        }
+      }
     }
   }
+  prevRef = currentMessageRef;
 }
 
+//------------------------------------------------------------------
+
+
 export default function useMessages() {
 
-    const addMessage = (m: RenderMessage) => {
-      updateScrollRef() // must update before we add new elements.
+    // Control the scrolling.
+    const { updateScrollRef, adjustScroll } = useScroll("messenger");
 
-      // check for message limit before setting a new message.
-      if (messages.value.size >= sizeLimit) deleteOldest();
+    // Add a new message to the view.
+    const addMessage = (message: RenderMessage) => {
+      updateScrollRef()
 
-      messages.value.set(m.uid, m);
+      if (messages.value.size >= sizeLimit) {
+        deleteOldest();
+      }
 
-      setTimeout(adjustScroll, 10);
+      messages.value.set(message.uid, message);
+
+      setTimeout(adjustScroll, 20);
+      updateGrouping(message.uid)
     }
 
+    // Update an existing message in the view.
     const updateMessage = (a: Annotation) => {
         updateScrollRef()
 
@@ -70,14 +95,10 @@ export default function useMessages() {
         message.context = a.context
         message.content.text = a.text
 
-        setTimeout(adjustScroll, 10);
-
-        console.log(`Annotation: ${a.text}`)
-        console.log(`Annotation: ${a.context}`)
-
-        return message
+        setTimeout(adjustScroll, 20);
     }
 
+    // Used in App.vue on shutdown.
     const saveMessages = () => {
         // de-reactivate message data before saving.
         const messageData = Object.fromEntries(messages.value);

src/modules/scroll.ts

@@ -0,0 +1,37 @@
+
+
+export default function useScroll(element: string) {
+
+  let isScrolledToBottom: boolean;
+
+  // Update isScrolledToBottom
+  const updateScrollRef = () => {
+    const view = document.getElementById(element)
+
+    if (view) {
+      isScrolledToBottom = view.scrollHeight - view.clientHeight <= view.scrollTop + 1
+    }
+
+  }
+
+  // Adjust scroll after we add content to the messenger.
+  const adjustScroll = () => {
+    const view = document.getElementById(element)
+
+    if (view) {
+      if (isScrolledToBottom) {
+        view.scrollTo({
+          top: view.scrollHeight - view.clientHeight,
+          behavior: 'smooth'
+        });
+      }
+    }
+
+  }
+
+  return {
+    updateScrollRef,
+    adjustScroll
+  }
+  
+}