scrolling bug

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

@@ -25,23 +25,75 @@ 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
+    }
+
+  }
+
+}
+
+
+
+
+
 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()
     }
 
     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()
+
         return m
     }