Update app.py

app.py

@@ -135,25 +135,32 @@ with gr.Blocks(css="""
     gr.HTML("""
         <script>
         function scrollToLatestMessage() {
-            let chatMessages = document.querySelectorAll('#chat-container .message'); 
-            if (chatMessages.length > 0) {
-                let lastMessage = chatMessages[chatMessages.length - 1];
-                lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
+            let chatContainer = document.getElementById('chat-container');
+            if (chatContainer) {
+                let messages = chatContainer.getElementsByClassName('message');
+                if (messages.length > 0) {
+                    let lastMessage = messages[messages.length - 1];
+                    lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                }
             }
         }
     
-        // Observe changes in chat messages and scroll automatically
-        document.addEventListener("DOMContentLoaded", function() {
-            let observer = new MutationObserver(scrollToLatestMessage);
-            let chatContainer = document.querySelector('#chat-container');
+        function observeChatUpdates() {
+            let chatContainer = document.getElementById('chat-container');
             if (chatContainer) {
+                let observer = new MutationObserver(scrollToLatestMessage);
                 observer.observe(chatContainer, { childList: true, subtree: true });
             }
-        });
+        }
+    
+        // Ensure scroll happens every time a new message appears
+        document.addEventListener("DOMContentLoaded", observeChatUpdates);
+        setInterval(observeChatUpdates, 1000); // Reattach observer in case of UI updates
         </script>
     """)
 
 
+
         
         
     demo.launch()