*

1 files changed, 16 insertions, 1 deletions

diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html
index 5747438..d987f21 100644
--- a/html/matt-chat/index.html
+++ b/html/matt-chat/index.html
@@ -34,6 +34,7 @@
             overflow-y: auto;
             width: 100%;
             max-height: 400px;
+            scroll-behavior: smooth;
         }
         #user-input {
             width: 100%;
@@ -235,7 +236,12 @@
             messageElement.classList.add("message", sender === "user" ? "user-message" : "bot-message");
             messageElement.textContent = message;
             chatContainer.appendChild(messageElement);
-            chatContainer.scrollTop = chatContainer.scrollHeight; // Try to scroll to the bottom
+            
+            // Scroll to the new message with a smooth animation
+            messageElement.scrollIntoView({ behavior: "smooth", block: "end" });
+            
+            // Force scroll to bottom in case the scrollIntoView doesn't work in some browsers
+            chatContainer.scrollTop = chatContainer.scrollHeight;
         }
 
         // Fancy format milliseconds into a more readable format
@@ -333,6 +339,7 @@
             loadingIndicator.classList.add("message", "bot-message");
             loadingIndicator.textContent = "...";
             document.getElementById("chat-container").appendChild(loadingIndicator);
+            scrollToBottom();
 
             // Start animation for this specific indicator
             const animationInterval = animateLoadingIndicator(loadingIndicator);
@@ -383,6 +390,8 @@
                     timeDisplay.classList.add("bot-time");
                     timeDisplay.textContent = `Response time: ${timeTakenMessage}`;
                     document.getElementById("chat-container").appendChild(timeDisplay);
+                    scrollToBottom();
+
                 } else {
                     console.error("No response from API");
                     loadingIndicator.remove();
@@ -586,6 +595,12 @@
             console.log("Current Context:", context);
             return context;
         }
+
+        // Add this helper function
+        function scrollToBottom() {
+            const chatContainer = document.getElementById("chat-container");
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
     </script>
 </body>
 </html>