Update app.py

app.py

@@ -413,356 +413,319 @@ coordinator_agent = CoordinatorAgent(message_bus)
 
 # Gradio Interface
 def create_interface():
-    """Create modern ChatGPT-like Gradio interface"""
+    """Create Gradio interface"""
     
     with gr.Blocks(
-        theme=gr.themes.Soft(),
+        theme=gr.themes.Base().set(
+            body_background_color="#0b0f19",
+            body_text_color="#ffffff",
+            button_primary_background_fill="#6366f1",
+            button_primary_background_fill_hover="#4f46e5",
+            button_primary_text_color="#ffffff",
+            block_background_fill="#1f2937",
+            block_border_color="#374151",
+            input_background_fill="#374151",
+            input_border_color="#4b5563",
+            input_placeholder_color="#9ca3af",
+            checkbox_background_color="#374151",
+            checkbox_border_color="#4b5563",
+            panel_background_fill="#111827",
+            panel_border_color="#374151",
+        ),
         css="""
-        /* Main container styling */
         .gradio-container {
             max-width: 100vw !important;
             margin: 0 !important;
-            padding: 0 !important;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            padding: 20px !important;
+            background: linear-gradient(135deg, #0b0f19 0%, #1a1b3a 100%);
             min-height: 100vh;
         }
-        
-        /* 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);
+            text-align: center;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            text-align: center;
+            background-clip: text;
+        }
+        .header-title {
+            font-size: 3.5rem;
+            font-weight: 800;
             margin: 0;
+            text-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         }
-        
         .header-subtitle {
-            font-size: 1.1rem;
-            color: #6b7280;
-            text-align: center;
+            font-size: 1.25rem;
             margin-top: 0.5rem;
+            color: #9ca3af;
             font-weight: 400;
         }
-        
-        /* Sidebar styling */
-        .sidebar {
-            background: rgba(255, 255, 255, 0.95) !important;
+        .sidebar-container {
+            background: rgba(31, 41, 55, 0.8) !important;
+            border-radius: 20px !important;
+            padding: 24px !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);
+            border: 1px solid #374151;
+            height: fit-content;
+            position: sticky;
+            top: 20px;
         }
-        
-        .sidebar h3 {
-            color: #374151;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            font-size: 1.2rem;
+        .chat-container {
+            background: rgba(31, 41, 55, 0.6) !important;
+            border-radius: 20px !important;
+            padding: 24px !important;
+            backdrop-filter: blur(10px);
+            border: 1px solid #374151;
+            height: calc(100vh - 200px);
+            display: flex;
+            flex-direction: column;
         }
-        
-        /* Upload area styling */
         .upload-area {
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-            border: 2px dashed #667eea;
-            border-radius: 12px;
-            padding: 2rem 1rem;
-            margin: 1rem 0;
+            border: 2px dashed #6366f1 !important;
+            border-radius: 15px !important;
+            padding: 24px !important;
+            margin: 16px 0 !important;
+            background: rgba(99, 102, 241, 0.05) !important;
             transition: all 0.3s ease;
-            text-align: center;
         }
-        
         .upload-area:hover {
-            border-color: #764ba2;
-            background: linear-gradient(135deg, #f1f5f9 0%, #ddd6fe 100%);
+            border-color: #8b5cf6 !important;
+            background: rgba(139, 92, 246, 0.1) !important;
             transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
+            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
+        }
+        .status-display {
+            background: linear-gradient(135deg, #065f46, #047857) !important;
+            border: none !important;
+            border-radius: 12px !important;
+            color: #ecfdf5 !important;
+            padding: 12px 16px !important;
+            font-family: 'JetBrains Mono', monospace !important;
+            font-size: 0.9rem !important;
         }
-        
-        /* Process button styling */
         .process-btn {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
             border: none !important;
-            border-radius: 8px !important;
-            padding: 0.75rem 2rem !important;
-            color: white !important;
+            border-radius: 12px !important;
+            padding: 12px 24px !important;
             font-weight: 600 !important;
+            text-transform: uppercase !important;
+            letter-spacing: 0.5px !important;
             transition: all 0.3s ease !important;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !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 {
-            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);
+            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
         }
-        
-        /* Chatbot styling */
-        .chatbot {
-            background: transparent !important;
-            border: none !important;
+        .chatbot-container {
+            flex: 1 !important;
+            background: rgba(17, 24, 39, 0.8) !important;
+            border-radius: 15px !important;
+            border: 1px solid #374151 !important;
+            margin-bottom: 20px !important;
+            overflow: hidden !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;
+        .input-row {
+            background: rgba(55, 65, 81, 0.5) !important;
+            border-radius: 15px !important;
+            padding: 16px !important;
+            margin-top: 16px !important;
+            border: 1px solid #4b5563 !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;
+            background: linear-gradient(135deg, #10b981, #059669) !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;
+            border-radius: 10px !important;
+            padding: 12px 20px !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;
+            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
         }
-        
         .send-btn:hover {
-            transform: scale(1.05) !important;
-            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+            transform: translateY(-2px) !important;
+            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !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;
+        .examples-container {
+            margin-top: 16px !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);
+        .examples-container .gr-button {
+            background: rgba(75, 85, 99, 0.5) !important;
+            border: 1px solid #6b7280 !important;
+            border-radius: 8px !important;
+            margin: 4px !important;
+            transition: all 0.3s ease !important;
         }
-        
-        .info-section h4 {
-            color: #374151;
-            font-weight: 600;
-            margin-bottom: 1rem;
-            font-size: 1.1rem;
+        .examples-container .gr-button:hover {
+            background: rgba(99, 102, 241, 0.2) !important;
+            border-color: #6366f1 !important;
+            transform: translateY(-1px) !important;
         }
-        
-        .info-section p {
-            color: #6b7280;
-            font-size: 0.9rem;
-            line-height: 1.5;
-            margin: 0.5rem 0;
+        .architecture-info {
+            background: rgba(17, 24, 39, 0.8) !important;
+            border-radius: 15px !important;
+            padding: 20px !important;
+            margin-top: 24px !important;
+            border: 1px solid #374151 !important;
         }
-        
-        /* Examples styling */
-        .examples-container {
-            padding: 1rem 2rem;
+        .architecture-info h3 {
+            color: #6366f1 !important;
+            margin-bottom: 16px !important;
+            font-size: 1.1rem !important;
+            font-weight: 600 !important;
         }
-        
-        /* Example buttons styling - using data attributes */
-        [data-testid="example"] button {
-            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;
+        .architecture-info p, .architecture-info ul {
+            color: #d1d5db !important;
+            line-height: 1.6 !important;
             font-size: 0.9rem !important;
-            color: #374151 !important;
-            transition: all 0.3s ease !important;
         }
-        
-        [data-testid="example"] button:hover {
-            background: rgba(102, 126, 234, 0.1) !important;
-            border-color: #667eea !important;
-            transform: translateY(-1px) !important;
+        .architecture-info ul {
+            margin-left: 16px !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;
-            }
+        .architecture-info li {
+            margin-bottom: 8px !important;
+        }
+        .gr-textbox {
+            background: rgba(55, 65, 81, 0.8) !important;
+            border: 1px solid #4b5563 !important;
+            border-radius: 12px !important;
+            color: #f9fafb !important;
+        }
+        .gr-textbox:focus {
+            border-color: #6366f1 !important;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
         }
         """,
-        title="AI Document Assistant"
+        title="Agentic RAG Chatbot"
     ) as iface:
         
         # Header
         gr.HTML("""
         <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>
+            <h1 class="header-title">Agentic RAG Chatbot</h1>
+            <p class="header-subtitle">Multi-Format Document QA with Model Context Protocol (MCP)</p>
         </div>
         """)
         
-        with gr.Row():
+        with gr.Row(equal_height=False):
             # 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="",
-                    elem_classes=["upload-area"],
-                    interactive=True
-                )
-                
-                process_btn = gr.Button(
-                    "🚀 Process Documents", 
-                    variant="primary",
-                    elem_classes=["process-btn"],
-                    size="lg"
-                )
-                
-                upload_status = gr.Textbox(
-                    label="📊 Status",
-                    interactive=False,
-                    elem_classes=["status-display"],
-                    max_lines=4,
-                    show_label=True
-                )
-                
-                # 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>
+            with gr.Column(scale=1, min_width=350):
+                with gr.Group(elem_classes=["sidebar-container"]):
+                    gr.Markdown("### Document Upload", elem_id="upload-title")
                     
-                    <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>
-                """)
-            
-            # Main chat area
-            with gr.Column(scale=3, elem_classes=["chat-container"]):
-                chatbot = gr.Chatbot(
-                    height=600,
-                    elem_classes=["chatbot"],
-                    show_copy_button=True,
-                    type="messages",
-                    avatar_images=("🧑‍💼", "🤖"),
-                    show_share_button=True
-                )
-                
-                # Message input area
-                with gr.Row():
-                    msg = gr.Textbox(
-                        label="",
-                        placeholder="Ask me anything about your documents...",
-                        scale=10,
-                        elem_classes=["message-input"],
-                        container=False,
-                        autofocus=True
+                    file_upload = gr.File(
+                        file_count="multiple",
+                        file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                        label="Drop files here or click to browse",
+                        elem_classes=["upload-area"],
+                        scale=4
+                    )
+                    
+                    upload_status = gr.Textbox(
+                        label="Processing Status",
+                        interactive=False,
+                        max_lines=4,
+                        elem_classes=["status-display"],
+                        value="Ready to process documents..."
                     )
-                    submit_btn = gr.Button(
-                        "➤", 
-                        scale=1, 
+                    
+                    process_btn = gr.Button(
+                        "Process Documents", 
                         variant="primary",
-                        elem_classes=["send-btn"],
-                        size="sm"
+                        size="lg",
+                        elem_classes=["process-btn"],
+                        scale=1
                     )
                 
-                # Examples
-                with gr.Row():
-                    with gr.Column():
+                with gr.Group(elem_classes=["architecture-info"]):
+                    gr.Markdown("""
+                    ###  System Architecture
+                    
+                    ** Agents:**
+                    - **IngestionAgent**: Document parsing & preprocessing
+                    - **RetrievalAgent**: Semantic search & embeddings  
+                    - **LLMResponseAgent**: AI response generation
+                    - **CoordinatorAgent**: Workflow orchestration
+                    
+                    **📡 MCP Communication:** 
+                    Structured message passing between agents for scalable, maintainable AI workflows.
+                    
+                    **🔧 Supported Formats:**
+                    PDF, PPTX, CSV, DOCX, TXT, MD
+                    """)
+            
+            # Main Chat Area
+            with gr.Column(scale=2, min_width=600):
+                with gr.Group(elem_classes=["chat-container"]):
+                    gr.Markdown("### 💬 Chat Interface", elem_id="chat-title")
+                    
+                    chatbot = gr.Chatbot(
+                        height=550,
+                        elem_classes=["chatbot-container"],
+                        show_copy_button=True,
+                        type="messages",
+                        avatar_images=("[( ͡° ͜ʖ ͡°)]", " [¯\_(ツ)_/¯]"),
+                        bubble_full_width=False,
+                        show_share_button=False
+                    )
+                    
+                    with gr.Group(elem_classes=["input-row"]):
+                        with gr.Row():
+                            msg = gr.Textbox(
+                                label="",
+                                placeholder="💭 Ask a question about your documents...",
+                                scale=4,
+                                autofocus=True,
+                                container=False,
+                                show_label=False
+                            )
+                            submit_btn = gr.Button(
+                                "Send", 
+                                scale=1, 
+                                variant="primary",
+                                elem_classes=["send-btn"]
+                            )
+                    
+                    with gr.Group(elem_classes=["examples-container"]):
                         gr.Examples(
                             examples=[
                                 "What are the main topics discussed in the documents?",
-                                "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?"
+                                "Can you summarize the key findings?",
+                                "What metrics or KPIs are mentioned?",
+                                "What recommendations are provided?",
+                                "Are there any trends or patterns identified?"
                             ],
-                            inputs=msg
+                            inputs=msg,
+                            label="Example Questions"
                         )
         
         # Event handlers
         def process_files_handler(files):
             if files:
-                return coordinator_agent.process_files(files)
-            return "Please select files to upload."
+                return f" Processing {len(files)} files: {', '.join([os.path.basename(f.name) for f in files])}\n⏳ Please wait..."
+            return "No files uploaded."
         
         def respond(message, history):
             if message.strip():
-                # Add user message to history
+                # Add user message to history in the new format
                 history.append({"role": "user", "content": message})
-                # Add placeholder for assistant response
+                # Add a placeholder for the assistant's 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 history, "" # Yield updated history and clear the textbox
             else:
                 yield history, message
         
-        def clear_chat():
-            return [], ""
-        
-        # Event bindings
         process_btn.click(
             process_files_handler,
             inputs=[file_upload],
-            outputs=[upload_status],
-            show_progress=True
+            outputs=[upload_status]
         )
         
         submit_btn.click(
@@ -787,6 +750,5 @@ if __name__ == "__main__":
     demo.launch(
         share=True,
         server_name="0.0.0.0",
-        server_port=7860,
-        show_error=True
+        server_port=7860
     )