Update app.py

app.py

@@ -411,339 +411,161 @@ retrieval_agent = RetrievalAgent(message_bus)
 llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
-# Gradio Interface
 def create_interface():
     """Create Gradio interface"""
 
     with gr.Blocks(
-        theme=gr.themes.Base().set(
-            background_fill_primary="#0b0f19",
-            text_color_primary="#ffffff",
-            button_primary_background="#6366f1",
-            button_primary_background_hover="#4f46e5",
-            button_primary_text_color="#ffffff",
-            block_background="#1f2937",
-            block_border_color="#374151",
-            input_background="#374151",
-            input_border_color="#4b5563",
-            input_placeholder_color="#9ca3af",
-            checkbox_background_color_selected="#374151",
-            checkbox_border_color="#4b5563",
-            panel_background_fill="#111827",
-            panel_border_color="#374151",
-        ),
+        theme=gr.themes.Soft(primary_hue="blue", secondary_hue="purple"),
         css="""
         .gradio-container {
-            max-width: 100vw !important;
-            margin: 0 !important;
+            max-width: 1200px !important;
             padding: 20px !important;
-            background: linear-gradient(135deg, #0b0f19 0%, #1a1b3a 100%);
-            min-height: 100vh;
         }
-        .header-container {
+        .header-text {
             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;
-            background-clip: text;
+            color: #667eea;
+            font-size: 2.5em;
+            font-weight: bold;
+            margin-bottom: 10px;
         }
-        .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.25rem;
-            margin-top: 0.5rem;
-            color: #9ca3af;
-            font-weight: 400;
+        .subheader-text {
+            text-align: center;
+            color: #666;
+            font-size: 1.2em;
+            margin-bottom: 20px;
         }
-        .sidebar-container {
-            background: rgba(31, 41, 55, 0.8) !important;
-            border-radius: 20px !important;
-            padding: 24px !important;
-            backdrop-filter: blur(10px);
-            border: 1px solid #374151;
-            height: fit-content;
-            position: sticky;
-            top: 20px;
+        .upload-section {
+            border: 2px dashed #667eea;
+            border-radius: 10px;
+            padding: 20px;
+            margin: 20px 0;
+            background-color: #f9f9f9;
         }
         .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 {
-            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;
-        }
-        .upload-area:hover {
-            border-color: #8b5cf6 !important;
-            background: rgba(139, 92, 246, 0.1) !important;
-            transform: translateY(-2px);
-            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-btn {
-            background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
-            border: none !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(99, 102, 241, 0.3) !important;
-        }
-        .process-btn:hover {
-            transform: translateY(-2px) !important;
-            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !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;
+            height: 500px;
+            margin-top: 10px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            padding: 10px;
+            background-color: #fff;
         }
-        .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;
-        }
-        .send-btn {
-            background: linear-gradient(135deg, #10b981, #059669) !important;
-            border: none !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(16, 185, 129, 0.3) !important;
-        }
-        .send-btn:hover {
-            transform: translateY(-2px) !important;
-            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
-        }
-        .examples-container {
-            margin-top: 16px !important;
-        }
-        .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;
-        }
-        .examples-container .gr-button:hover {
-            background: rgba(99, 102, 241, 0.2) !important;
-            border-color: #6366f1 !important;
-            transform: translateY(-1px) !important;
-        }
-        .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;
+        .gr-row {
+            margin-bottom: 15px;
         }
-        .architecture-info h3 {
-            color: #6366f1 !important;
-            margin-bottom: 16px !important;
-            font-size: 1.1rem !important;
-            font-weight: 600 !important;
-        }
-        .architecture-info p, .architecture-info ul {
-            color: #d1d5db !important;
-            line-height: 1.6 !important;
-            font-size: 0.9rem !important;
-        }
-        .architecture-info ul {
-            margin-left: 16px !important;
-        }
-        .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;
+        .gr-column {
+            padding: 10px;
         }
         """,
         title="Agentic RAG Chatbot"
     ) as iface:
-        
+
         # Header
         gr.HTML("""
-        <div class="header-container">
-            <h1 class="header-title">Agentic RAG Chatbot</h1>
-            <p class="header-subtitle">Multi-Format Document QA with Model Context Protocol (MCP)</p>
-        </div>
+        <div class="header-text">Agentic RAG Chatbot</div>
+        <div class="subheader-text">Multi-Format Document QA with Model Context Protocol (MCP)</div>
         """)
-        
-        with gr.Row(equal_height=False):
-            # Sidebar
-            with gr.Column(scale=1, min_width=350):
-                with gr.Group(elem_classes=["sidebar-container"]):
-                    gr.Markdown("### Document Upload", elem_id="upload-title")
-                    
-                    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..."
-                    )
-                    
-                    process_btn = gr.Button(
-                        "Process Documents", 
-                        variant="primary",
-                        size="lg",
-                        elem_classes=["process-btn"],
-                        scale=1
-                    )
-                
-                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.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("## Document Upload")
+
+                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
+                )
+
+                process_btn = gr.Button(
+                    "Process Documents",
+                    variant="primary",
+                    size="lg"
+                )
+
+                gr.Markdown("## Architecture Info")
+                gr.Markdown("""
+                **Agents:**
+                - IngestionAgent: Document parsing
+                - RetrievalAgent: Semantic search  
+                - LLMResponseAgent: Response generation
+                - CoordinatorAgent: Workflow orchestration
+
+                **MCP Communication:** Structured message passing between agents
+                """)
+
+            with gr.Column(scale=3):
+                gr.Markdown("## Chat Interface")
+
+                chatbot = gr.Chatbot(
+                    height=500,
+                    elem_classes=["chat-container"],
+                    show_copy_button=True,
+                    type="messages"
+                )
+
+                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,
+                        autofocus=True
                     )
-                    
-                    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?",
-                                "What metrics or KPIs are mentioned?",
-                                "What recommendations are provided?",
-                                "Are there any trends or patterns identified?"
-                            ],
-                            inputs=msg,
-                            label="Example Questions"
-                        )
-        
+                    submit_btn = gr.Button("Send", scale=1, variant="primary")
+
+                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?"
+                    ],
+                    inputs=msg
+                )
+
         # Event handlers
         def process_files_handler(files):
-            if files:
-                return f" Processing {len(files)} files: {', '.join([os.path.basename(f.name) for f in files])}\n⏳ Please wait..."
-            return "No files uploaded."
-        
+            return coordinator_agent.process_files(files)
+
         def respond(message, history):
             if message.strip():
-                # Add user message to history in the new format
                 history.append({"role": "user", "content": message})
-                # 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 updated history and clear the textbox
+                    yield history, ""
             else:
                 yield history, message
-        
+
         process_btn.click(
             process_files_handler,
             inputs=[file_upload],
             outputs=[upload_status]
         )
-        
+
         submit_btn.click(
             respond,
             inputs=[msg, chatbot],
             outputs=[chatbot, msg],
-            show_progress="minimal"
+            show_progress=True
         )
-        
+
         msg.submit(
             respond,
             inputs=[msg, chatbot],
             outputs=[chatbot, msg],
-            show_progress="minimal"
+            show_progress=True
         )
-    
+
     return iface
 
+
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()