Update app.py

app.py

@@ -412,160 +412,342 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create Gradio interface"""
-
+    """Create ChatGPT-style Gradio interface"""
+    
     with gr.Blocks(
-        theme=gr.themes.Soft(primary_hue="blue", secondary_hue="purple"),
+        theme=gr.themes.Base(
+            primary_hue="yellow",
+            secondary_hue="gray",
+            neutral_hue="slate"
+        ),
         css="""
+        /* Dark theme styling */
         .gradio-container {
-            max-width: 1200px !important;
-            padding: 20px !important;
+            background-color: #1a1a1a !important;
+            color: #ffffff !important;
+            height: 100vh !important;
+            max-width: none !important;
+            padding: 0 !important;
         }
-        .header-text {
-            text-align: center;
-            color: #667eea;
-            font-size: 2.5em;
-            font-weight: bold;
-            margin-bottom: 10px;
+        
+        /* Main container */
+        .main-container {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
         }
-        .subheader-text {
-            text-align: center;
-            color: #666;
-            font-size: 1.2em;
-            margin-bottom: 20px;
+        
+        /* Header */
+        .header {
+            background: rgba(255, 193, 7, 0.1);
+            border-bottom: 1px solid rgba(255, 193, 7, 0.2);
+            padding: 1rem 2rem;
+            backdrop-filter: blur(10px);
         }
-        .upload-section {
-            border: 2px dashed #667eea;
-            border-radius: 10px;
-            padding: 20px;
-            margin: 20px 0;
-            background-color: #f9f9f9;
+        
+        .header h1 {
+            color: #ffc107;
+            margin: 0;
+            font-size: 1.5rem;
+            font-weight: 600;
         }
+        
+        .header p {
+            color: #cccccc;
+            margin: 0.25rem 0 0 0;
+            font-size: 0.9rem;
+        }
+        
+        /* Chat area */
         .chat-container {
-            height: 500px;
-            margin-top: 10px;
-            border: 1px solid #ccc;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            max-width: 800px;
+            margin: 0 auto;
+            width: 100%;
+            padding: 1rem;
+        }
+        
+        /* Chatbot styling */
+        .gradio-chatbot {
+            flex: 1 !important;
+            background: transparent !important;
+            border: none !important;
+            margin-bottom: 1rem;
+        }
+        
+        .gradio-chatbot .message {
+            background: rgba(45, 45, 45, 0.8) !important;
+            border: 1px solid rgba(255, 193, 7, 0.1) !important;
+            border-radius: 12px !important;
+            margin: 0.5rem 0 !important;
+        }
+        
+        .gradio-chatbot .message.user {
+            background: rgba(255, 193, 7, 0.1) !important;
+            border-color: rgba(255, 193, 7, 0.3) !important;
+            margin-left: 20% !important;
+        }
+        
+        .gradio-chatbot .message.bot {
+            background: rgba(45, 45, 45, 0.9) !important;
+            margin-right: 20% !important;
+        }
+        
+        /* Input area */
+        .input-area {
+            background: rgba(45, 45, 45, 0.6);
+            border-radius: 16px;
+            padding: 1rem;
+            border: 1px solid rgba(255, 193, 7, 0.2);
+            backdrop-filter: blur(10px);
+        }
+        
+        /* File upload */
+        .upload-area {
+            background: rgba(255, 193, 7, 0.05);
+            border: 2px dashed rgba(255, 193, 7, 0.3);
+            border-radius: 12px;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            transition: all 0.3s ease;
+        }
+        
+        .upload-area:hover {
+            background: rgba(255, 193, 7, 0.1);
+            border-color: rgba(255, 193, 7, 0.5);
+        }
+        
+        /* Buttons */
+        .primary-btn {
+            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
+            color: #000000 !important;
+            border: none !important;
+            border-radius: 8px !important;
+            font-weight: 600 !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .primary-btn:hover {
+            background: linear-gradient(135deg, #ffcd38 0%, #ffa726 100%) !important;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
+        }
+        
+        /* Text inputs */
+        .gradio-textbox input, .gradio-textbox textarea {
+            background: rgba(45, 45, 45, 0.8) !important;
+            color: #ffffff !important;
+            border: 1px solid rgba(255, 193, 7, 0.2) !important;
+            border-radius: 8px !important;
+        }
+        
+        .gradio-textbox input:focus, .gradio-textbox textarea:focus {
+            border-color: #ffc107 !important;
+            box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2) !important;
+        }
+        
+        /* File component */
+        .gradio-file {
+            background: transparent !important;
+            border: none !important;
+        }
+        
+        /* Processing indicator */
+        .processing-indicator {
+            background: rgba(255, 193, 7, 0.1);
+            border: 1px solid rgba(255, 193, 7, 0.3);
             border-radius: 8px;
-            padding: 10px;
-            background-color: #fff;
+            padding: 0.75rem;
+            margin: 0.5rem 0;
+            color: #ffc107;
+            text-align: center;
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
         }
-        .gr-row {
-            margin-bottom: 15px;
+        
+        /* Hide labels for cleaner look */
+        .gradio-textbox label,
+        .gradio-file label {
+            display: none !important;
+        }
+        
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: rgba(45, 45, 45, 0.3);
+            border-radius: 4px;
         }
-        .gr-column {
-            padding: 10px;
+        
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 193, 7, 0.5);
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 193, 7, 0.7);
         }
         """,
-        title="Agentic RAG Chatbot"
+        title="Agentic RAG 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>
-        """)
-
-        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.Row(elem_classes=["header"]):
+            with gr.Column():
+                gr.HTML("""
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <div>
+                        <h1>🤖 Agentic RAG Assistant</h1>
+                        <p>Upload documents and ask questions - powered by Multi-Agent Architecture</p>
+                    </div>
+                </div>
                 """)
 
-            with gr.Column(scale=3):
-                gr.Markdown("## Chat Interface")
-
+        # Main chat container
+        with gr.Row(elem_classes=["chat-container"]):
+            with gr.Column():
+                
+                # Chatbot
                 chatbot = gr.Chatbot(
+                    value=[],
                     height=500,
-                    elem_classes=["chat-container"],
                     show_copy_button=True,
-                    type="messages"
+                    bubble_full_width=False,
+                    elem_classes=["gradio-chatbot"]
                 )
-
-                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
+                
+                # Input area
+                with gr.Column(elem_classes=["input-area"]):
+                    
+                    # File upload (initially hidden, shows when needed)
+                    file_upload = gr.File(
+                        file_count="multiple",
+                        file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                        elem_classes=["upload-area"],
+                        visible=True
+                    )
+                    
+                    # Processing status
+                    processing_status = gr.HTML(visible=False)
+                    
+                    # Message input row
+                    with gr.Row():
+                        msg_input = gr.Textbox(
+                            placeholder="Upload documents above, then ask your questions here...",
+                            scale=5,
+                            max_lines=3,
+                            autofocus=True
+                        )
+                        send_btn = gr.Button(
+                            "Send", 
+                            scale=1, 
+                            elem_classes=["primary-btn"]
+                        )
+                    
+                    # Quick examples
+                    gr.Examples(
+                        examples=[
+                            "What are the main topics in the documents?",
+                            "Summarize the key findings",
+                            "What metrics are mentioned?",
+                            "What are the recommendations?"
+                        ],
+                        inputs=msg_input,
+                        elem_classes=["examples"]
                     )
-                    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
-                )
 
+        # State to track document processing
+        doc_processed = gr.State(False)
+        
         # Event handlers
-        def process_files_handler(files):
-            return coordinator_agent.process_files(files)
-
-        def respond(message, history):
-            if message.strip():
-                history.append({"role": "user", "content": message})
-                history.append({"role": "assistant", "content": ""})
-                for token in coordinator_agent.handle_query(message, history):
-                    history[-1]["content"] += token
-                    yield history, ""
-            else:
-                yield history, message
+        def handle_file_upload(files):
+            if not files:
+                return gr.update(visible=False), False
+            
+            # Show processing indicator
+            processing_html = f"""
+            <div class="processing-indicator">
+                📄 Processing {len(files)} documents... Please wait.
+            </div>
+            """
+            
+            # Process files
+            try:
+                result = coordinator_agent.process_files(files)
+                
+                # Wait a moment for processing to complete
+                import time
+                time.sleep(2)
+                
+                success_html = f"""
+                <div style="background: rgba(76, 175, 80, 0.1); border: 1px solid rgba(76, 175, 80, 0.3); 
+                           border-radius: 8px; padding: 0.75rem; color: #4caf50; text-align: center;">
+                    ✅ Documents processed successfully! You can now ask questions.
+                </div>
+                """
+                return gr.update(value=success_html, visible=True), True
+                
+            except Exception as e:
+                error_html = f"""
+                <div style="background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); 
+                           border-radius: 8px; padding: 0.75rem; color: #f44336; text-align: center;">
+                    ❌ Error processing documents: {str(e)}
+                </div>
+                """
+                return gr.update(value=error_html, visible=True), False
+
+        def respond(message, history, doc_ready):
+            if not doc_ready:
+                return history + [["Please upload and process documents first.", None]], ""
+            
+            if not message.strip():
+                return history, message
+            
+            # Add user message
+            history.append([message, None])
+            
+            # Generate response
+            response = ""
+            for token in coordinator_agent.handle_query(message, history):
+                response += token
+                history[-1][1] = response
+                yield history, ""
+            
+            return history, ""
 
-        process_btn.click(
-            process_files_handler,
+        # File upload triggers processing
+        file_upload.change(
+            handle_file_upload,
             inputs=[file_upload],
-            outputs=[upload_status]
+            outputs=[processing_status, doc_processed]
         )
 
-        submit_btn.click(
+        # Send message
+        send_btn.click(
             respond,
-            inputs=[msg, chatbot],
-            outputs=[chatbot, msg],
+            inputs=[msg_input, chatbot, doc_processed],
+            outputs=[chatbot, msg_input],
             show_progress=True
         )
 
-        msg.submit(
+        msg_input.submit(
             respond,
-            inputs=[msg, chatbot],
-            outputs=[chatbot, msg],
+            inputs=[msg_input, chatbot, doc_processed],
+            outputs=[chatbot, msg_input],
             show_progress=True
         )
 
     return iface
 
-
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()