Merge remote-tracking branch 'origin/main'

src/components/messageItem.vue

@@ -161,6 +161,10 @@
   .messageBox {
     display: flex;
     flex-direction: column;
+
+    // Animate on render.
+    animation-name: appear;
+    animation-duration: 0.25s;
   }
 
   #aiMessageBox {
@@ -190,17 +194,13 @@
     padding: 10px;
 
     border-radius: 18px;
-
-    // Animate on render.
-    animation-name: appear;
-    animation-duration: 0.25s;
   }
 
   @keyframes appear {
-    from {
+    10% {
       transform: scale(0.3);
     }
-    to {
+    100% {
       transform: scale(1);
     }
   }

src/components/settings.vue

@@ -114,12 +114,15 @@
   display: flex;
   flex-direction: row;
 
+  padding: 5px;
   margin-right: 20px;
-  margin-top: 24px;
+  margin-top: 19px;
 
   z-index: 2;
-  background-color: #EBEBEB;
+  background-color: Transparent;
+}
 
+.settingsIcon:hover {
   cursor: pointer;
 }
 

src/modules/draggify.ts

@@ -113,8 +113,8 @@ export default function draggify(input: { elementId: string }) {
     });
 
     // Initialize the coordinants.
-    elementX.value = 600 - 38 - 20;
-    elementY.value = 500 - 38 - 20;
+    elementX.value = 20;
+    elementY.value = 200 - 38 - 20;
 
     // remove event listeners on component dismount.
     onUnmounted(() => {

src/modules/message.ts

@@ -1,4 +1,4 @@
-// import { RenderMessage, ClientMessage } from "@/types/message/index";
+import { RenderMessage, ClientMessage } from "@/types/message/index";
 import { v4 as uuidv4 } from 'uuid';
 
 interface RenderParams {

src/modules/messages.ts

@@ -25,23 +25,53 @@ function deleteOldest() {
    messages.value.delete(lastKey);
 }
 
+// Is the message div scrolled to the bottom?
+let isScrolledToBottom: boolean;
+
+// Update isScrolledToBottom
+const updateScrollRef = () => {
+  const e = document.getElementById("messenger")
+  if (e) {
+    isScrolledToBottom = e.scrollHeight - e.clientHeight <= e.scrollTop + 1
+  }
+}
+
+// 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'
+      });
+    }
+  }
+}
+
 export default function useMessages() {
 
     const addMessage = (m: RenderMessage) => {
-      console.log(`Adding message: ${m.content.text}`)
+      updateScrollRef() // must update before we add new elements.
 
       // check for message limit before setting a new message.
       if (messages.value.size >= sizeLimit) deleteOldest();
-      
+
       messages.value.set(m.uid, m);
+
+      setTimeout(adjustScroll, 10);
     }
 
     const updateMessage = (a: Annotation) => {
+        updateScrollRef()
+
         // update message if in the map.
         const m = messages.value.get(a.uid)
         m.context = a.context
         m.text = a.text
 
+        setTimeout(adjustScroll, 10);
+
         return m
     }
 

src/views/messenger.vue

@@ -101,17 +101,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #messenger {
-  position: fixed;
-
   width: 100vw;
-
-  overflow-y: scroll;
-
-  bottom: 0;
-
-  overflow-y: scroll;
-
-  bottom: 0;
+  height: 100vh;
+  overflow: auto;
 }
 
 #messenger::-webkit-scrollbar {