scroll v1

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/modules/messages.ts

@@ -25,74 +25,52 @@ 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) {
-
-    console.log(`Bottom? : ${isScrolledToBottom}`)
-    console.log(e.scrollHeight)
-    console.log(e.clientHeight)
-    console.log(e.scrollTop)
-
-    // // Scroll to bottom if isScrolledToBottom is true
     if (isScrolledToBottom) {
-      e.scrollTop = e.scrollHeight - e.clientHeight
+      e.scrollTo({
+        top: e.scrollHeight - e.clientHeight,
+        behavior: 'smooth'
+      });
     }
-
   }
-
 }
 
-
-
-
-
 export default function useMessages() {
 
     const addMessage = (m: RenderMessage) => {
       updateScrollRef() // must update before we add new elements.
 
-      console.log(`Adding message: ${m.content.text}`)
-
       // check for message limit before setting a new message.
       if (messages.value.size >= sizeLimit) deleteOldest();
-      
+
       messages.value.set(m.uid, m);
 
-      adjustScroll()
+      setTimeout(adjustScroll, 10);
     }
 
     const updateMessage = (a: Annotation) => {
         updateScrollRef()
 
-        console.log(`Updating message...`)
-
         // update message if in the map.
         const m = messages.value.get(a.uid)
         m.context = a.context
         m.text = a.text
 
-        adjustScroll()
+        setTimeout(adjustScroll, 10);
 
         return m
     }

src/views/messenger.vue

@@ -103,7 +103,6 @@ export default defineComponent({
 #messenger {
   width: 100vw;
   height: 100vh;
-
   overflow: auto;
 }