Update app.py

app.py

@@ -105,7 +105,6 @@ def render_message(history):
     messages_html = """
     <div id="chatbox-container" class="chatbox">
         <div id="messages">""" 
-
     for user_message, assistant_message, user_profile, assistant_profile, user_pic, assistant_pic in history:
         if user_message:
             messages_html += f"<div style='display: flex; align-items: center; margin-bottom: 10px;'>"
@@ -124,28 +123,24 @@ def render_message(history):
     </div>
 
     <script>
-        function scrollToBottom() {
+        function appendMessage(newContent) {
             var chatbox = document.getElementById('chatbox-container');
             var messages = document.getElementById('messages');
-            var isAtBottom = chatbox.scrollHeight - chatbox.scrollTop === chatbox.clientHeight;
-            
-            if (isAtBottom) {
+
+            messages.innerHTML += newContent;
+
+            if (chatbox.scrollHeight - chatbox.scrollTop === chatbox.clientHeight) {
                 chatbox.scrollTop = messages.scrollHeight;
             }
         }
 
-        var targetNode = document.getElementById('messages');
-        var observerOptions = { childList: true, subtree: true };
+        var newMessageContent = `""" + messages_html + """`;
+        appendMessage(newMessageContent);
 
-        var observer = new MutationObserver(function(mutationsList, observer) {
-            scrollToBottom();
-        });
-
-        observer.observe(targetNode, observerOptions);
-
-        // Ensure scrolling happens on page load as well
         window.onload = function() {
-            scrollToBottom();
+            var chatbox = document.getElementById('chatbox-container');
+            var messages = document.getElementById('messages');
+            chatbox.scrollTop = messages.scrollHeight;  // Ensure it scrolls to the bottom on load
         };
     </script>
     """