Update app.py

app.py

@@ -413,147 +413,371 @@ coordinator_agent = CoordinatorAgent(message_bus)
 
 # Gradio Interface
 def create_interface():
-    """Create Gradio interface"""
+    """Create modern ChatGPT-like Gradio interface"""
     
     with gr.Blocks(
-        theme=gr.themes.Soft(primary_hue="blue", secondary_hue="purple"),
+        theme=gr.themes.Soft(),
         css="""
+        /* Main container styling */
         .gradio-container {
-            max-width: 1200px !important;
+            max-width: 100vw !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            min-height: 100vh;
         }
-        .header-text {
+        
+        /* Header styling */
+        .header-container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 1rem 2rem;
+            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .header-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
             text-align: center;
-            color: #667eea;
-            font-size: 2.5em;
-            font-weight: bold;
-            margin-bottom: 10px;
+            margin: 0;
         }
-        .subheader-text {
+        
+        .header-subtitle {
+            font-size: 1.1rem;
+            color: #6b7280;
             text-align: center;
-            color: #666;
-            font-size: 1.2em;
-            margin-bottom: 20px;
+            margin-top: 0.5rem;
+            font-weight: 400;
+        }
+        
+        /* Sidebar styling */
+        .sidebar {
+            background: rgba(255, 255, 255, 0.95) !important;
+            backdrop-filter: blur(10px);
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+            padding: 2rem 1.5rem !important;
+            min-height: calc(100vh - 100px);
+            box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
+        }
+        
+        .sidebar h3 {
+            color: #374151;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
         }
-        .upload-section {
+        
+        /* Upload area styling */
+        .upload-area {
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
             border: 2px dashed #667eea;
-            border-radius: 10px;
-            padding: 20px;
-            margin: 10px 0;
+            border-radius: 12px;
+            padding: 2rem 1rem;
+            margin: 1rem 0;
+            transition: all 0.3s ease;
+            text-align: center;
+        }
+        
+        .upload-area:hover {
+            border-color: #764ba2;
+            background: linear-gradient(135deg, #f1f5f9 0%, #ddd6fe 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+        }
+        
+        /* Process button styling */
+        .process-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            border: none !important;
+            border-radius: 8px !important;
+            padding: 0.75rem 2rem !important;
+            color: white !important;
+            font-weight: 600 !important;
+            transition: all 0.3s ease !important;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+        }
+        
+        .process-btn:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
         }
+        
+        /* Chat container styling */
         .chat-container {
-            height: 500px;
+            background: rgba(255, 255, 255, 0.95) !important;
+            backdrop-filter: blur(10px);
+            border-radius: 16px !important;
+            margin: 2rem;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+            overflow: hidden;
+            min-height: calc(100vh - 200px);
+        }
+        
+        /* Chatbot styling */
+        .chatbot {
+            background: transparent !important;
+            border: none !important;
+        }
+        
+        /* Message input styling */
+        .message-input {
+            background: rgba(255, 255, 255, 0.9) !important;
+            border: 2px solid rgba(102, 126, 234, 0.2) !important;
+            border-radius: 25px !important;
+            padding: 0.75rem 1.5rem !important;
+            font-size: 1rem !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .message-input:focus {
+            border-color: #667eea !important;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+            outline: none !important;
+        }
+        
+        /* Send button styling */
+        .send-btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            border: none !important;
+            border-radius: 50% !important;
+            width: 48px !important;
+            height: 48px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+            color: white !important;
+            font-weight: 600 !important;
+            transition: all 0.3s ease !important;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+            margin-left: 0.5rem !important;
+        }
+        
+        .send-btn:hover {
+            transform: scale(1.05) !important;
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+        }
+        
+        /* Status display styling */
+        .status-display {
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 100%) !important;
+            border: 1px solid rgba(102, 126, 234, 0.2) !important;
+            border-radius: 8px !important;
+            padding: 1rem !important;
+            margin: 1rem 0 !important;
+            font-family: 'SF Mono', 'Monaco', monospace !important;
+            font-size: 0.9rem !important;
+        }
+        
+        /* Info section styling */
+        .info-section {
+            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 2rem;
+            border: 1px solid rgba(102, 126, 234, 0.1);
+        }
+        
+        .info-section h4 {
+            color: #374151;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+        }
+        
+        .info-section p {
+            color: #6b7280;
+            font-size: 0.9rem;
+            line-height: 1.5;
+            margin: 0.5rem 0;
+        }
+        
+        /* Examples styling */
+        .examples-container {
+            padding: 1rem 2rem;
+        }
+        
+        .example-btn {
+            background: rgba(255, 255, 255, 0.8) !important;
+            border: 1px solid rgba(102, 126, 234, 0.3) !important;
+            border-radius: 20px !important;
+            padding: 0.5rem 1rem !important;
+            margin: 0.25rem !important;
+            font-size: 0.9rem !important;
+            color: #374151 !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .example-btn:hover {
+            background: rgba(102, 126, 234, 0.1) !important;
+            border-color: #667eea !important;
+            transform: translateY(-1px) !important;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .gradio-container {
+                padding: 0 !important;
+            }
+            
+            .header-title {
+                font-size: 2rem;
+            }
+            
+            .sidebar {
+                padding: 1rem !important;
+            }
+            
+            .chat-container {
+                margin: 1rem;
+            }
         }
         """,
-        title="Agentic RAG Chatbot"
+        title="AI Document Assistant"
     ) as iface:
         
         # Header
         gr.HTML("""
-        <div class="header-text">Agentic RAG Chatbot</div>
-        <div class="subheader-text">Multi-Format Document QA with Model Context Protocol (MCP)</div>
+        <div class="header-container">
+            <h1 class="header-title">AI Document Assistant</h1>
+            <p class="header-subtitle">Intelligent multi-format document analysis with advanced RAG architecture</p>
+        </div>
         """)
         
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("## Document Upload")
+            # Sidebar
+            with gr.Column(scale=1, elem_classes=["sidebar"]):
+                gr.HTML("<h3>📁 Document Upload</h3>")
                 
                 file_upload = gr.File(
                     file_count="multiple",
                     file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
-                    label="Upload Documents (PDF, PPTX, CSV, DOCX, TXT, MD)",
-                    elem_classes=["upload-section"]
-                )
-                
-                upload_status = gr.Textbox(
-                    label="Upload Status",
-                    interactive=False,
-                    max_lines=3
+                    label="",
+                    elem_classes=["upload-area"],
+                    interactive=True
                 )
                 
                 process_btn = gr.Button(
-                    "Process Documents", 
+                    "🚀 Process Documents", 
                     variant="primary",
+                    elem_classes=["process-btn"],
                     size="lg"
                 )
                 
-                gr.Markdown("## Architecture Info")
-                gr.Markdown("""
-                **Agents:**
-                - IngestionAgent: Document parsing
-                - RetrievalAgent: Semantic search  
-                - LLMResponseAgent: Response generation
-                - CoordinatorAgent: Workflow orchestration
+                upload_status = gr.Textbox(
+                    label="📊 Status",
+                    interactive=False,
+                    elem_classes=["status-display"],
+                    max_lines=4,
+                    show_label=True
+                )
                 
-                **MCP Communication:** Structured message passing between agents
+                # Info section
+                gr.HTML("""
+                <div class="info-section">
+                    <h4>🤖 AI Agents</h4>
+                    <p><strong>Ingestion:</strong> Document parsing & preprocessing</p>
+                    <p><strong>Retrieval:</strong> Semantic search & context extraction</p>
+                    <p><strong>Response:</strong> Intelligent answer generation</p>
+                    <p><strong>Coordinator:</strong> Workflow orchestration</p>
+                    
+                    <h4 style="margin-top: 1.5rem;">🔗 Architecture</h4>
+                    <p>Built with Model Context Protocol (MCP) for seamless agent communication and advanced RAG capabilities.</p>
+                </div>
                 """)
             
-            with gr.Column(scale=3):
-                gr.Markdown("## Chat Interface")
-                
+            # Main chat area
+            with gr.Column(scale=3, elem_classes=["chat-container"]):
                 chatbot = gr.Chatbot(
-                    height=500,
-                    elem_classes=["chat-container"],
+                    height=600,
+                    elem_classes=["chatbot"],
                     show_copy_button=True,
-                    type="messages" # This requires the new data format
+                    type="messages",
+                    avatar_images=("🧑‍💼", "🤖"),
+                    bubble_full_width=False,
+                    show_share_button=True
                 )
                 
+                # Message input area
                 with gr.Row():
                     msg = gr.Textbox(
-                        label="Ask a question about your documents...",
-                        placeholder="What are the key findings in the uploaded documents?",
-                        scale=4,
+                        label="",
+                        placeholder="Ask me anything about your documents...",
+                        scale=10,
+                        elem_classes=["message-input"],
+                        container=False,
                         autofocus=True
                     )
-                    submit_btn = gr.Button("Send ", scale=1, variant="primary")
+                    submit_btn = gr.Button(
+                        "➤", 
+                        scale=1, 
+                        variant="primary",
+                        elem_classes=["send-btn"],
+                        size="sm"
+                    )
                 
+                # Examples
+                gr.HTML("<div class='examples-container'>")
                 gr.Examples(
                     examples=[
                         "What are the main topics discussed in the documents?",
-                        "Can you summarize the key findings?",
-                        "What metrics or KPIs are mentioned?",
-                        "What recommendations are provided?",
-                        "Are there any trends or patterns identified?"
+                        "Can you summarize the key findings and insights?",
+                        "What metrics, KPIs, or data points are mentioned?",
+                        "What recommendations or action items are provided?",
+                        "Are there any trends, patterns, or correlations identified?",
+                        "What are the potential risks or challenges mentioned?"
                     ],
-                    inputs=msg
+                    inputs=msg,
+                    elem_classes=["example-btn"]
                 )
+                gr.HTML("</div>")
         
         # Event handlers
         def process_files_handler(files):
-            return coordinator_agent.process_files(files)
+            if files:
+                return coordinator_agent.process_files(files)
+            return "Please select files to upload."
         
         def respond(message, history):
             if message.strip():
-                # Add user message to history in the new format
+                # Add user message to history
                 history.append({"role": "user", "content": message})
-                # Add a placeholder for the assistant's response
+                # Add placeholder for assistant response
                 history.append({"role": "assistant", "content": ""})
 
                 # Get streaming response
                 for token in coordinator_agent.handle_query(message, history):
-                    # Append each token to the assistant's message content
                     history[-1]["content"] += token
-                    yield history, "" # Yield updated history and clear the textbox
+                    yield history, ""
             else:
                 yield history, message
         
+        def clear_chat():
+            return [], ""
+        
+        # Event bindings
         process_btn.click(
             process_files_handler,
             inputs=[file_upload],
-            outputs=[upload_status]
+            outputs=[upload_status],
+            show_progress=True
         )
         
         submit_btn.click(
             respond,
             inputs=[msg, chatbot],
             outputs=[chatbot, msg],
-            show_progress=True
+            show_progress="minimal"
         )
         
         msg.submit(
             respond,
             inputs=[msg, chatbot],
             outputs=[chatbot, msg],
-            show_progress=True
+            show_progress="minimal"
         )
     
     return iface
@@ -564,5 +788,6 @@ if __name__ == "__main__":
     demo.launch(
         share=True,
         server_name="0.0.0.0",
-        server_port=7860
+        server_port=7860,
+        show_error=True
     )