Update app.py

app.py

@@ -122,18 +122,25 @@ def render_message(history):
                 messages_html += f"<img src='{assistant_pic}' style='width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;'>"
             messages_html += f"<span style='color: white;'>{assistant_message}</span></div><br>"
 
-    messages_html += """
-        </div>
-    </div>
+    messages_html += "</div></div>" 
 
+    scroll_script = """
     <script>
-    // Ensure the chatbox scrolls to the bottom after each update
-    var chatboxContainer = document.getElementById('chatbox-container');
-    chatboxContainer.scrollTop = chatboxContainer.scrollHeight;
+    const container = document.getElementById('chatbox-container');
+
+    const observer = new MutationObserver(() => {
+        container.scrollTop = container.scrollHeight;  // Force scroll to bottom after re-render
+    });
+
+    observer.observe(container, { childList: true, subtree: true });
+
+    window.onload = function() {
+        container.scrollTop = container.scrollHeight;
+    };
     </script>
     """
 
-    return messages_html
+    return messages_html + scroll_script
 
 with gr.Blocks(css=".chatbox {height: 400px; overflow-y: auto; border: 1px solid #262626; padding: 10px; background-color: #171717;}") as demo: