Update ui.py

ui.py

@@ -95,16 +95,25 @@ def create_interface(agent):
         .header h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
         .header p { margin: .5rem 0 0 0; color: rgba(255,255,255,0.9); font-size: .95rem; }
 
-        /* Chat container - flexible height for HF Spaces */
+        /* Chat container - flexible height for HF Spaces with proper scrolling */
         .chat-container {
-            min-height: 400px !important;
-            max-height: 600px !important;
+            min-height: 300px !important;
+            max-height: 500px !important;
             height: auto !important;
             background: var(--panel) !important;
             border-radius: 16px !important;
             border: 1px solid var(--border) !important;
             box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
             overflow-y: auto !important;
+            overflow-x: hidden !important;
+            position: relative !important;
+        }
+        
+        /* Ensure chat messages container scrolls properly */
+        .chat-container .gradio-chatbot {
+            height: 100% !important;
+            max-height: 100% !important;
+            overflow-y: auto !important;
         }
 
         /* Message row alignment */
@@ -387,12 +396,18 @@ def create_interface(agent):
         /* Ensure proper scrolling in tabs - Critical for HF Spaces */
         .gradio-container .tabitem,
         .gradio-container [role="tabpanel"] {
-            min-height: calc(100vh - 150px) !important;
+            min-height: auto !important;
             max-height: none !important;
             height: auto !important;
-            overflow-y: visible !important;
+            overflow-y: auto !important;
             overflow-x: hidden !important;
             position: relative !important;
+            padding-bottom: 20px !important;
+        }
+        
+        /* Specific fix for chat tab to allow internal scrolling */
+        .gradio-container [role="tabpanel"]:has(.chat-container) {
+            overflow-y: visible !important;
         }
         
         /* Make sure tab content can expand */
@@ -405,7 +420,7 @@ def create_interface(agent):
         /* Responsive */
         @media (max-width: 768px) {
             .chat-container {
-                min-height: 300px !important;
+                min-height: 250px !important;
                 max-height: 400px !important;
             }
             
@@ -443,12 +458,13 @@ def create_interface(agent):
         # Main Chat Tab
         with gr.Tab("💬 Chat with Agent"):
             chatbot = gr.Chatbot(
-                height=None,  
+                height=400,  
                 show_label=False,
                 bubble_full_width=False,
                 type='messages',
                 elem_classes=["chat-container"],
-                container=True  
+                container=True,
+                autoscroll=True
             )
             
             # Clear chat button