Update app.py

app.py

@@ -20,7 +20,7 @@ translations = {
             "Send me somewhere!",
             "1-week planned vacations"
         ],
-        "system_prompt": "You help users plan trips. Keep responses short and clear. If a user asks specifically about booking a flight, hotel, or reservation, try to find a relevant link, else don't. Be friendly.",
+        "system_prompt": "You help users plan trips. Keep responses clear. If a user asks specifically about booking a flight, hotel, or reservation, try to find a relevant link, else don't. Be friendly.",
         "input_placeholder": "Type your travel question here..."
     },
     "fr": {
@@ -30,7 +30,7 @@ translations = {
             "Envoyez-moi quelque part !",
             "Voyage d'une semaine planifié"
         ],
-        "system_prompt": "Vous aidez les utilisateurs à planifier des voyages. Réponses courtes et simples. Fournissez un lien si on vous demande spécifiquement une réservation. Si ce n'est pas nécessaire, ne le faites pas. Soyez amical.",
+        "system_prompt": "Vous aidez les utilisateurs à planifier des voyages. Réponses précises. Fournissez un lien si on vous demande spécifiquement une réservation. Si ce n'est pas nécessaire, ne le faites pas. Soyez amical.",
         "input_placeholder": "Tapez votre question de voyage ici..."
     }
 }
@@ -94,7 +94,7 @@ with gr.Blocks(css="""
 """) as demo:
     gr.Markdown("# 🌍 ***FlightAI - Your Travel Assistant / Votre Assistant de Voyage*** ✈️\n")
     
-    chatbot = gr.Chatbot(value=[("", translations["en"]["welcome"])], elem_id="chatbox")
+chatbot = gr.Chatbot(value=[("", translations["en"]["welcome"])], elem_id="chat-container")
 
     state = gr.State([])  # Store conversation history
     
@@ -108,15 +108,16 @@ with gr.Blocks(css="""
     def submit_msg(message, history):
         if not message.strip():
             return "", history  # Ignore empty messages
-    
+        
         # Ensure history exists
         if not isinstance(history, list):
             history = []
-
+    
         # Process chatbot response
         updated_history, _ = chat_with_bot(message, history)
+    
+        return gr.update(value=updated_history), ""  # Ensure UI refresh triggers scroll
 
-        return updated_history, ""
 
     def button_click(btn_text, history):
         updated_history, _ = chat_with_bot(btn_text, history)
@@ -130,24 +131,24 @@ with gr.Blocks(css="""
     # Inject JavaScript for auto-scroll when a new message appears
     gr.HTML("""
         <script>
-        function scrollChatToBottom() {
-            let chatElements = document.querySelectorAll('[data-testid="chatbot"]'); 
-            chatElements.forEach(chat => {
-                setTimeout(() => { chat.scrollTop = chat.scrollHeight; }, 100); 
-            });
+        function scrollToBottom() {
+            let chat = document.querySelector('#chat-container'); 
+            if (chat) {
+                setTimeout(() => { chat.scrollTop = chat.scrollHeight; }, 100);
+            }
         }
-
+    
+        // Observe changes to chat and scroll when new messages arrive
         document.addEventListener("DOMContentLoaded", function() {
-            let observer = new MutationObserver(scrollChatToBottom);
-            let chatElements = document.querySelectorAll('[data-testid="chatbot"]');
-            chatElements.forEach(chat => {
+            let observer = new MutationObserver(scrollToBottom);
+            let chat = document.querySelector('#chat-container');
+            if (chat) {
                 observer.observe(chat, { childList: true, subtree: true });
-            });
+            }
         });
-
-        // Also trigger scroll when chatbot receives new messages
-        setInterval(scrollChatToBottom, 500);
         </script>
     """)
 
+        
+        
     demo.launch()