update grouping

src/App.vue

@@ -34,6 +34,7 @@ export default defineComponent({
   components: { Splash },
 
   setup() {
+    
 
     // Show spash screen til true.
     const ready = ref(false);

src/background/session.ts

@@ -86,7 +86,7 @@ const handleStandardMessage = (m: StandardMessage) => {
 
 const handleAnnotationMessage = (message: Annotation) => {
     backgroundMitt.emit('ipc-renderer', {
-        endpoint: 'annotate-message',
+        endpoint: 'render-message',
         message: message 
     });
 }
@@ -102,6 +102,7 @@ const onMessage = (messageStr: string): void => {
     }
 
     const message = JSON.parse(messageStr)
+    console.log("New message:")
     console.log(message)
 
     if (message.content) {
@@ -159,7 +160,7 @@ export function initSession(): void {
     socket.on('open', () => {
         console.log('Connected to Crimata Servers.');
 
-        // call auth renderer event on connection
+        // Try to authenticate token right away.
         backgroundMitt.emit('ipc-renderer', {
             endpoint: 'auth',
             message: null

src/background/window.ts

@@ -54,7 +54,7 @@ const saveWindowState = () => {
           if (err) throw err;      
           return;
        });
-    }    
+    }
 }
 
 // Do this on window mount.

src/components/inputItem/inputItem.vue

@@ -42,6 +42,10 @@ export default defineComponent({
     // Mark input item with user's initials.
     const initials = ref("")
 
+    // Set initials.
+    const initialData = window.localStorage.getItem("initials")
+    if (initialData) initials.value = initialData
+
     // Default values for position.
     const xStart = 15;
     const yStart = window.innerHeight - 200;
@@ -56,6 +60,7 @@ export default defineComponent({
     // Update profile functionality.
     const onUpdateProfile = (_event: any, payload: any) => {
       initials.value = payload.message.first[0] + payload.message.last[0]
+      window.localStorage.setItem("initials", initials.value)
     }
 
     onMounted(() => {

src/modules/auth.ts

@@ -21,8 +21,10 @@ if (token) {
     window.localStorage.setItem(AUTH_KEY, token);
 }
 
+// Load key and invoke onAuthSession to try key-login.
 const authToken = async () => {
-   const { invoke  } = useIpc();
+    console.log("Calling auth token.")
+    const { invoke  } = useIpc();
     try {
         token = window.localStorage.getItem(AUTH_KEY);
 
@@ -43,7 +45,7 @@ const authToken = async () => {
     }
 }
 
-// authenticate on auth event
+// Gets called on socket open.
 window.ipcRenderer.on("auth", async (_event, _arg) => {
     await authToken();
 });

src/modules/messages.ts

@@ -2,121 +2,102 @@ import { ref } from 'vue';
 import useScroll from "@/modules/scroll";
 import { RenderMessage, Annotation } from "@/types/message/index";
 
-const messages = ref(new Map()); // ze messages.
+const messages = ref(new Map());
 
-//---Message Grouping-----------------------------------------------
+const addMessage = (message: RenderMessage) => {
+  messages.value.set(message.uid, message)
+}
 
-let prevRef: string;
-let activeGroup = false;
+const updateMessage = (annotation: Annotation) => {
+  const message = messages.value.get(annotation.uid)
+  message.context = annotation.context
+  message.content.text = annotation.text
+}
 
-const updateGrouping = (currentMessageRef: string) => {
-  if (prevRef) {
+const loadMessages = () => {
+  const rawData = window.localStorage.getItem("crimata_messages");
+  if (rawData) {
+    const messageData = JSON.parse(rawData)
+    messages.value = new Map(Object.entries(messageData));
+  }
+}
 
-    // Get references to the two most recent messages.
-    const prev = messages.value.get(prevRef)
-    const current = messages.value.get(currentMessageRef)
+const saveMessages = () => {
+  const messageData = Object.fromEntries(messages.value);
+  window.localStorage.setItem("crimata_messages", JSON.stringify(messageData));
+}
 
-    // See if they should be grouped.
-    if (current.time < prev.time + 20000) {
-      if (prev.modifier === current.modifier) {
-        if (prev.context === current.context) {
+const isSimmilar = (messageA: RenderMessage, messageB: RenderMessage) => {
+  if ((Math.abs(messageA.time - messageB.time) < 20000) && (messageA.modifier == messageB.modifier) && (messageA.context == messageB.context)) {
+    return true
+  }
+  return false
+}
 
-          // Update grouping accordingly.
-          if (activeGroup) {
-            prev.isChild = "middle";
-          } 
+const updateGrouping = () => {
+  console.log("updating grouping")
+  const refs = Array.from(messages.value.keys())
 
-          else {
-            prev.isChild = "first";
-          }
+  // Get the last three messages.
+  const first = messages.value.get(refs[refs.length - 1]) 
+  const second = messages.value.get(refs[refs.length - 2]) 
+  const third = messages.value.get(refs[refs.length - 3])
 
-          current.isChild = "last";
-          activeGroup = true;
-        }
+  // If messages are simmilar, update the classes.
+  if ((first) && (second)) {
+    if (isSimmilar(first, second)) {
+      first.isChild = "last" // i.e. last in group.
+      second.isChild = "first"
 
-        // If messages unrealated, reset activeGroup.
-        else {
-          activeGroup = false;
+      if (third) {
+        if ((third.isChild == "first") || (third.isChild == "middle")) {
+          second.isChild = "middle"
         }
       }
     }
   }
-  prevRef = currentMessageRef;
 }
 
-//------------------------------------------------------------------
+const { setScroll, updateScrollRef, adjustScroll } = useScroll("messenger");
+
+loadMessages()
+setTimeout(setScroll, 1000);
 
 
 export default function useMessages() {
 
-    // Control the scrolling.
-    const {
-      setScroll, 
-      updateScrollRef, 
-      adjustScroll 
-    } = useScroll("messenger");
+    // Main function for updating the message view.
+    const updateMessageView = (message: RenderMessage | Annotation) => {
 
-    // Save message to local storage.
-    const saveMessages = () => {
-        const messageData = Object.fromEntries(messages.value);
-        window.localStorage.setItem("crimata_messages", JSON.stringify(messageData));
-    }
-
-    // Load messages from local storage.
-    const loadMessages = () => {
-      const rawData = window.localStorage.getItem("crimata_messages");
-
-      if (rawData) {
-        const messageData = JSON.parse(rawData)
-        messages.value = new Map(Object.entries(messageData));
-      }
-
-    }
-
-    // Remove oldest message from the messages map. 
-    function popMessage() { 
-       const lastKey = Array.from(messages.value.keys()).shift();
-       messages.value.delete(lastKey);
-    }
-
-    // Add a new message to the view.
-    const addMessage = (message: RenderMessage) => {
+      // Step 1: See if user is scrolled down.
       updateScrollRef()
 
-      // Size limit of 200.
-      if (messages.value.size >= 200) {
-        popMessage();
+      // Step 2: Add the new content to the view.
+      if ("content" in message) {
+        addMessage(message)
+      } else {
+        updateMessage(message)
       }
 
-      messages.value.set(message.uid, message);
+      // Step 3: Pop off oldest message (if > 200).
+      if (messages.value.size >= 200) {
+        const oldest = Array.from(messages.value.keys()).shift();
+        messages.value.delete(oldest);
+      };
 
+      // Step 4: Update grouping.
+      updateGrouping()
+
+      // Setp 5: Scroll the view (if scrolled down).
       setTimeout(adjustScroll, 20);
-      updateGrouping(message.uid)
+
+      // Step 6: Save the view data.
       saveMessages()
+
     }
 
-    // Update an existing message in the view.
-    const updateMessage = (a: Annotation) => {
-        updateScrollRef()
-
-        // update message if in the map.
-        const message = messages.value.get(a.uid)
-        message.context = a.context
-        message.content.text = a.text
-
-        setTimeout(adjustScroll, 20);
-        saveMessages()
-    }
-
-    loadMessages()
-    setTimeout(setScroll, 1000);
-    console.log("loaded messages")
-
     return {
       messages,
-      saveMessages,
-      addMessage,
-      updateMessage, 
-      loadMessages
+      updateMessageView
     }
-}
+};

src/views/messenger.vue

@@ -32,30 +32,20 @@ export default defineComponent({
     const { emitter } = useMitt();
 
     // Handle messages in view.
-    const { 
-      messages, 
-      addMessage, 
-      updateMessage,
-    } = useMessages();
+    const { messages, updateMessageView } = useMessages();
 
-    // Alter existing message.
-    const onAnnotateMessage = (_event: any, payload: any) => {
-      updateMessage(payload.message);
-    }
-
-    // Render new message.
-    const onRenderMessage = (_event: any, payload: any) => { 
-      addMessage(payload.message);
+    // Update message view on new content.
+    const onNewContent = (_event: any, payload: any) => {
+      updateMessageView(payload.message)
     }
 
     onMounted(() => {
 
       // Front end listener.
-      emitter.on('self-message', (message) => addMessage(message));
+      emitter.on('self-message', (message) => updateMessageView(message));
 
       // Back end listener.
-      window.ipcRenderer.on("render-message", onRenderMessage);
-      window.ipcRenderer.on("annotate-message", onAnnotateMessage);
+      window.ipcRenderer.on("render-message", onNewContent);
 
     });
 

windowState.json

@@ -1 +1 @@
-{"w":350,"h":807,"x":1770,"y":453}
+{"w":735,"h":510,"x":1354,"y":513}