update the App.py file

app.py

@@ -42,7 +42,13 @@ def can_view_analytics(role: str) -> bool:
 def chat_with_agent(message, tenant_id, role, history):
     """
     Send a message to the backend MCP agent and return the response.
-    Uses streaming for real-time word-by-word updates.
+    Uses streaming for real-time character-by-character updates for smooth UX.
+    
+    Features:
+    - Character-by-character streaming for smooth animation
+    - Query caching for faster repeated queries
+    - Enhanced error handling with actionable messages
+    - Multi-query web search for better results
     
     Args:
         message: User's message text
@@ -50,7 +56,7 @@ def chat_with_agent(message, tenant_id, role, history):
         history: Chat history (Gradio messages format)
     
     Yields:
-        Updated chat history with agent response (streaming)
+        Updated chat history with agent response (streaming character-by-character)
     """
     if not message or not message.strip():
         yield history
@@ -101,7 +107,8 @@ def chat_with_agent(message, tenant_id, role, history):
             history.append({"role": "assistant", "content": assistant_message})
             yield history  # Yield initial empty message
             
-            # Stream tokens - use iter_lines for SSE format
+            # Stream tokens character-by-character for smooth UX
+            # Backend now streams character-by-character instead of word-by-word
             for line_bytes in response.iter_lines():
                 if line_bytes:
                     try:
@@ -123,13 +130,13 @@ def chat_with_agent(message, tenant_id, role, history):
                                         yield history
                                     continue
                                 
-                                # Handle tokens
+                                # Handle tokens (now character-by-character for smoother streaming)
                                 token = data.get('token', '')
                                 if token:
                                     assistant_message += token
                                     # Update the last message in history
                                     history[-1] = {"role": "assistant", "content": assistant_message}
-                                    yield history  # Yield updated history immediately
+                                    yield history  # Yield updated history immediately for smooth character-by-character display
                                 
                                 if data.get('done', False):
                                     break
@@ -1452,16 +1459,15 @@ with gr.Blocks(
         box-shadow: 0 8px 26px rgba(15, 23, 42, 0.9);
         display: flex;
         flex-direction: column;
-        gap: 10px;
         transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
     }
 
-    .tenant-card:hover,
-    .role-card:hover {
-        border-color: #38bdf8;
-        box-shadow: 0 12px 36px rgba(56, 189, 248, 0.35);
-        transform: translateY(-1px);
-    }
+    # .tenant-card:hover,
+    # .role-card:hover {
+    #     border-color: #38bdf8;
+    #     box-shadow: 0 12px 36px rgba(56, 189, 248, 0.35);
+    #     transform: translateY(-1px);
+    # }
 
     .field-label-pill {
         display: inline-flex;
@@ -1483,10 +1489,21 @@ with gr.Blocks(
     }
 
     .field-label-subtitle {
-        margin-top: 8px;
+        margin-top: 4px;
+        margin-bottom: 4px;
         color: #9ca3af;
         font-size: 0.8rem;
     }
+    
+    /* Reduce spacing for dropdown in role card */
+    .role-card .field-label-subtitle {
+        margin-bottom: 6px;
+    }
+    
+    .role-card select,
+    .role-card .gradio-dropdown {
+        margin-top: 2px;
+    }
 
     /* Left/right columns in Chat tab */
     .chat-row > .col:nth-child(1) {
@@ -1650,6 +1667,19 @@ with gr.Blocks(
         box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.65) !important;
         background: rgba(15, 23, 42, 1) !important;
     }
+    
+    /* Reduce spacing in dropdown menu items */
+    .gradio-dropdown ul,
+    .gradio-dropdown .dropdown-menu,
+    select option {
+        padding: 4px 8px !important;
+        margin: 0 !important;
+    }
+    
+    /* Reduce gap between dropdown and label */
+    .role-card .gradio-dropdown {
+        margin-top: 4px !important;
+    }
 
     /* Generic section card */
     .section-card {
@@ -1810,14 +1840,18 @@ with gr.Blocks(
                             3. The MCP agent will automatically select tools (RAG, Web, etc.)
                             
                             ### ⚡ Features
-                            - ✨ Real-time streaming responses  
+                            - ✨ Real-time character-by-character streaming responses  
+                            - 🚀 Query caching for faster repeated queries  
+                            - 🔍 Query expansion for ambiguous terms (Al→AI, ML→machine learning)  
+                            - 🌐 Multi-query web search with parallel execution  
                             - 🧠 Multi-step planning & reasoning  
                             - 🔍 Automatic tool selection with latency prediction  
                             - 🧠 Context-aware routing (intelligent tool skipping)  
                             - 💾 Conversation memory  
                             - 📊 Reasoning visualization (see Debug tab)  
                             - ⚡ Per-tool latency estimates (RAG: 60-120ms, Web: 400-1800ms)  
-                            - 📋 Schema-validated tool outputs
+                            - 📋 Schema-validated tool outputs  
+                            - 🛡️ Enhanced error handling with actionable messages
                             """
                         )