Update app.py

app.py

@@ -96,6 +96,7 @@ with gr.Blocks(css="""
     
     chatbot = gr.Chatbot(value=[("", translations["en"]["welcome"])], elem_id="chat-container")
 
+
     state = gr.State([])  # Store conversation history
     
     with gr.Row():
@@ -116,7 +117,9 @@ with gr.Blocks(css="""
         # Process chatbot response
         updated_history, _ = chat_with_bot(message, history)
     
-        return gr.update(value=updated_history), ""  # Ensure UI refresh triggers scroll
+        # Ensure UI refresh triggers scroll
+        return gr.update(value=updated_history), ""
+
 
 
     def button_click(btn_text, history):
@@ -128,27 +131,29 @@ with gr.Blocks(css="""
     btn2.click(button_click, inputs=[btn2, chatbot], outputs=[chatbot, user_input])
     btn3.click(button_click, inputs=[btn3, chatbot], outputs=[chatbot, user_input])
 
-    # Inject JavaScript for auto-scroll when a new message appears
+
     gr.HTML("""
         <script>
-        function scrollToBottom() {
-            let chat = document.querySelector('#chat-container'); 
-            if (chat) {
-                setTimeout(() => { chat.scrollTop = chat.scrollHeight; }, 100);
+        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' });
             }
         }
     
-        // Observe changes to chat and scroll when new messages arrive
+        // Observe changes in chat messages and scroll automatically
         document.addEventListener("DOMContentLoaded", function() {
-            let observer = new MutationObserver(scrollToBottom);
-            let chat = document.querySelector('#chat-container');
-            if (chat) {
-                observer.observe(chat, { childList: true, subtree: true });
+            let observer = new MutationObserver(scrollToLatestMessage);
+            let chatContainer = document.querySelector('#chat-container');
+            if (chatContainer) {
+                observer.observe(chatContainer, { childList: true, subtree: true });
             }
         });
         </script>
     """)
 
+
         
         
     demo.launch()