Update app.py

app.py

@@ -419,365 +419,498 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create Claude-style Gradio interface"""
+    """Create enhanced Gradio interface with improved UI"""
     
     with gr.Blocks(
-        theme=gr.themes.Base(),
+        theme=gr.themes.Soft(),
         css="""
-        /* Claude-inspired styling */
+        /* Global styling */
         .gradio-container {
-            background: #0d1117 !important;
-            color: #e6edf3 !important;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         }
         
         /* Main container */
-        .main-container {
-            max-width: 900px;
-            margin: 0 auto;
-            background: #0d1117;
+        .main-wrapper {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            margin: 20px;
+            padding: 0;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            overflow: hidden;
+        }
+        
+        /* Header section */
+        .app-header {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            padding: 24px 32px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            text-align: center;
         }
         
-        /* Header styling */
-        .header-container {
-            background: #0d1117;
-            border-bottom: 1px solid #30363d;
-            padding: 1.5rem 0;
-            text-align: center;
+        .app-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin: 0 0 8px 0;
+            letter-spacing: -0.02em;
         }
         
-        .header-container h1 {
-            color: #f0f6fc;
+        .app-subtitle {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 16px;
+            font-weight: 400;
             margin: 0;
-            font-size: 1.5rem;
-            font-weight: 600;
+            line-height: 1.5;
         }
         
-        .header-container p {
-            color: #8b949e;
-            margin: 0.5rem 0 0 0;
-            font-size: 0.9rem;
+        /* Content area */
+        .content-area {
+            padding: 32px;
+            display: flex;
+            gap: 32px;
+            min-height: 600px;
         }
         
-        /* Chat interface */
-        .chat-container {
-            background: #0d1117;
-            min-height: 70vh;
+        /* Sidebar */
+        .sidebar {
+            flex: 0 0 320px;
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            height: fit-content;
         }
         
-        /* Chatbot styling */
-        .gradio-chatbot {
-            background: #0d1117 !important;
-            border: 1px solid #30363d !important;
-            border-radius: 12px !important;
-            min-height: 500px !important;
+        .sidebar-title {
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            margin: 0 0 20px 0;
+            padding-bottom: 12px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         
-        .gradio-chatbot .message {
-            background: transparent !important;
-            border-radius: 8px !important;
-            margin: 8px 0 !important;
+        /* File upload area */
+        .upload-container {
+            background: rgba(255, 255, 255, 0.05);
+            border: 2px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            padding: 24px;
+            text-align: center;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            margin-bottom: 20px;
+            cursor: pointer;
         }
         
-        .gradio-chatbot .message.user {
-            background: #21262d !important;
-            border: 1px solid #30363d !important;
-            color: #f0f6fc !important;
+        .upload-container:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
         }
         
-        .gradio-chatbot .message.bot {
-            background: #161b22 !important;
-            border-left: 3px solid #fd7e14 !important;
-            color: #e6edf3 !important;
+        .upload-text {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 14px;
+            margin: 8px 0;
         }
         
-        /* Input area styling */
-        .input-container {
-            background: #0d1117;
-            padding: 1rem 0;
-            border-top: 1px solid #30363d;
+        /* Buttons */
+        .primary-button {
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 12px 24px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.25);
+            width: 100%;
         }
         
-        .upload-section {
-            background: #161b22;
-            border: 1px solid #30363d;
+        .primary-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px 0 rgba(59, 130, 246, 0.35);
+        }
+        
+        .send-button {
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            color: white;
+            border: none;
             border-radius: 8px;
-            padding: 1rem;
-            margin-bottom: 1rem;
+            padding: 10px 20px;
+            font-weight: 600;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 2px 8px 0 rgba(16, 185, 129, 0.25);
+            min-width: 80px;
         }
         
-        .upload-section h4 {
-            color: #f0f6fc;
-            margin: 0 0 0.5rem 0;
-            font-size: 0.9rem;
+        .send-button:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px 0 rgba(16, 185, 129, 0.35);
         }
         
-        /* File upload button */
-        .upload-btn {
-            background: linear-gradient(135deg, #fd7e14, #e8590c) !important;
-            border: none !important;
-            border-radius: 6px !important;
-            color: white !important;
-            font-weight: 500 !important;
-            padding: 0.5rem 1rem !important;
+        /* Chat area */
+        .chat-section {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            overflow: hidden;
         }
         
-        .upload-btn:hover {
-            background: linear-gradient(135deg, #e8590c, #d63384) !important;
+        .chat-header {
+            padding: 20px 24px;
+            background: rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         
-        /* Process button */
-        .process-btn {
-            background: #238636 !important;
-            border: none !important;
-            border-radius: 6px !important;
-            color: white !important;
-            font-weight: 500 !important;
-            margin-top: 0.5rem !important;
+        .chat-title {
+            color: white;
+            font-size: 18px;
+            font-weight: 600;
+            margin: 0;
         }
         
-        .process-btn:hover {
-            background: #2ea043 !important;
+        /* Chatbot styling */
+        .gradio-chatbot {
+            background: transparent !important;
+            border: none !important;
+            height: 400px !important;
+            max-height: 400px !important;
+            padding: 20px 24px !important;
+            overflow-y: auto !important;
+        }
+        
+        /* Message bubbles */
+        .message.user {
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            color: white;
+            border-radius: 18px 18px 4px 18px;
+            margin: 8px 0 8px 48px;
+            padding: 12px 16px;
+            max-width: 80%;
+            margin-left: auto;
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+        }
+        
+        .message.bot {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 18px 18px 18px 4px;
+            margin: 8px 48px 8px 0;
+            padding: 12px 16px;
+            max-width: 80%;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* Input area */
+        .input-section {
+            padding: 20px 24px;
+            background: rgba(255, 255, 255, 0.05);
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
         }
         
-        /* Input row */
         .input-row {
             display: flex !important;
             gap: 12px !important;
             align-items: end !important;
-            background: #161b22;
-            border: 1px solid #30363d;
-            border-radius: 8px;
-            padding: 0.75rem;
         }
         
-        /* Message input */
-        .gradio-textbox {
+        .message-input {
             flex: 1 !important;
+            background: rgba(255, 255, 255, 0.1) !important;
+            border: 1px solid rgba(255, 255, 255, 0.2) !important;
+            border-radius: 12px !important;
+            padding: 12px 16px !important;
+            color: white !important;
+            font-size: 14px !important;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
         }
         
-        .gradio-textbox textarea,
-        .gradio-textbox input {
-            background: transparent !important;
-            border: none !important;
-            color: #f0f6fc !important;
-            font-size: 1rem !important;
-            resize: none !important;
-            min-height: 40px !important;
+        .message-input:focus {
+            background: rgba(255, 255, 255, 0.15) !important;
+            border-color: rgba(255, 255, 255, 0.4) !important;
+            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
+            outline: none !important;
         }
         
-        .gradio-textbox textarea:focus,
-        .gradio-textbox input:focus {
-            outline: none !important;
-            box-shadow: none !important;
+        /* Status indicators */
+        .status-indicator {
+            border-radius: 12px;
+            padding: 16px;
+            margin: 16px 0;
+            font-size: 14px;
+            font-weight: 500;
+            text-align: center;
+            backdrop-filter: blur(10px);
         }
         
-        /* Send button */
-        .send-btn {
-            background: #fd7e14 !important;
-            border: none !important;
-            border-radius: 6px !important;
-            color: white !important;
-            min-height: 40px !important;
-            font-weight: 500 !important;
+        .status-success {
+            background: rgba(16, 185, 129, 0.15);
+            color: #10b981;
+            border: 1px solid rgba(16, 185, 129, 0.3);
         }
         
-        .send-btn:hover {
-            background: #e8590c !important;
+        .status-error {
+            background: rgba(239, 68, 68, 0.15);
+            color: #ef4444;
+            border: 1px solid rgba(239, 68, 68, 0.3);
         }
         
-        /* Status messages */
-        .status-message {
-            padding: 0.75rem;
-            border-radius: 6px;
-            margin: 0.5rem 0;
-            font-size: 0.9rem;
+        .status-processing {
+            background: rgba(59, 130, 246, 0.15);
+            color: #3b82f6;
+            border: 1px solid rgba(59, 130, 246, 0.3);
         }
         
-        .status-success {
-            background: rgba(35, 134, 54, 0.15);
-            border: 1px solid #238636;
-            color: #2ea043;
+        /* Examples section */
+        .examples-container {
+            margin-top: 16px;
         }
         
-        .status-error {
-            background: rgba(248, 81, 73, 0.15);
-            border: 1px solid #da3633;
-            color: #f85149;
+        .examples-title {
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 14px;
+            font-weight: 500;
+            margin-bottom: 12px;
         }
         
-        .status-processing {
-            background: rgba(253, 126, 20, 0.15);
-            border: 1px solid #fd7e14;
-            color: #fd7e14;
+        .example-item {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            padding: 8px 12px;
+            color: rgba(255, 255, 255, 0.8);
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            margin-bottom: 6px;
         }
         
-        /* File list */
-        .file-list {
-            background: #21262d;
-            border-radius: 6px;
-            padding: 0.5rem;
-            margin: 0.25rem 0;
-            font-size: 0.85rem;
-            color: #8b949e;
-            border-left: 3px solid #fd7e14;
+        .example-item:hover {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+            color: white;
         }
         
-        /* Examples */
-        .examples-container {
-            margin-top: 1rem;
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
         }
         
-        .examples-container .gradio-examples {
-            border: 1px solid #30363d;
-            border-radius: 6px;
-            background: #161b22;
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
         }
         
-        /* Hide default file upload styling */
-        .gradio-file {
-            background: transparent !important;
-            border: 1px dashed #30363d !important;
-            border-radius: 6px !important;
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
         }
         
-        /* Progress bar */
-        .gradio-progress {
-            background: #21262d !important;
-            border-radius: 4px !important;
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.5);
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .content-area {
+                flex-direction: column;
+                padding: 16px;
+                gap: 16px;
+            }
+            
+            .sidebar {
+                flex: none;
+            }
+            
+            .main-wrapper {
+                margin: 10px;
+            }
+            
+            .app-title {
+                font-size: 24px;
+            }
+        }
+        
+        /* Form elements */
+        .gradio-textbox input, .gradio-textbox textarea {
+            background: rgba(255, 255, 255, 0.1) !important;
+            color: white !important;
+            border: 1px solid rgba(255, 255, 255, 0.2) !important;
+            border-radius: 8px !important;
+        }
+        
+        .gradio-textbox input:focus, .gradio-textbox textarea:focus {
+            border-color: rgba(255, 255, 255, 0.4) !important;
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
+        }
+        
+        /* File upload specific styling */
+        .gradio-file {
+            background: transparent !important;
+            border: none !important;
         }
         
-        .gradio-progress .progress-bar {
-            background: #fd7e14 !important;
+        .gradio-file .file-preview {
+            background: rgba(255, 255, 255, 0.05) !important;
+            border: 1px solid rgba(255, 255, 255, 0.1) !important;
+            border-radius: 8px !important;
+            color: white !important;
         }
         """,
         title="Agentic RAG Assistant"
     ) as iface:
 
-        # Header
-        with gr.Row():
-            with gr.Column(elem_classes=["main-container"]):
-                gr.HTML("""
-                <div class="header-container">
-                    <h1>🤖 Agentic RAG Assistant</h1>
-                    <p>Upload documents and ask intelligent questions powered by multi-agent architecture</p>
-                </div>
-                """)
+        # Main wrapper
+        with gr.Column(elem_classes=["main-wrapper"]):
+            
+            # Header
+            gr.HTML("""
+            <div class="app-header">
+                <h1 class="app-title">Agentic RAG Assistant</h1>
+                <p class="app-subtitle">Upload documents and ask questions - powered by Multi-Agent Architecture</p>
+            </div>
+            """)
 
-        # Main content area
-        with gr.Row():
-            with gr.Column(elem_classes=["main-container"]):
-                
-                # Chat interface
-                chatbot = gr.Chatbot(
-                    height=500,
-                    elem_classes=["chat-container"],
-                    show_copy_button=True,
-                    type="messages",
-                    placeholder="👋 Welcome! Upload your documents below, then start asking questions.",
-                    avatar_images=("👤", "🤖")
-                )
+            # Content area
+            with gr.Row(elem_classes=["content-area"]):
                 
-                # Input section
-                with gr.Column(elem_classes=["input-container"]):
+                # Sidebar
+                with gr.Column(elem_classes=["sidebar"]):
+                    gr.HTML('<h3 class="sidebar-title">Document Management</h3>')
                     
-                    # File upload section
-                    with gr.Group():
-                        gr.HTML('<div class="upload-section"><h4>📎 Document Upload</h4></div>')
-                        
-                        with gr.Row():
-                            file_upload = gr.File(
-                                file_count="multiple",
-                                file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
-                                label="Choose files",
-                                show_label=False
+                    gr.HTML("""
+                    <div class="upload-container">
+                        <div class="upload-text">Drag and drop files here or click to browse</div>
+                        <div style="color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-top: 8px;">
+                            Supported: PDF, PPTX, CSV, DOCX, TXT, MD
+                        </div>
+                    </div>
+                    """)
+                    
+                    file_upload = gr.File(
+                        file_count="multiple",
+                        file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                        label="",
+                        show_label=False,
+                        container=False
+                    )
+                    
+                    processing_status = gr.HTML(visible=False)
+                    
+                    process_btn = gr.Button(
+                        "Process Documents",
+                        elem_classes=["primary-button"],
+                        size="lg"
+                    )
+
+                # Chat section
+                with gr.Column(elem_classes=["chat-section"]):
+                    
+                    # Chat header
+                    gr.HTML('<div class="chat-header"><h3 class="chat-title">Conversation</h3></div>')
+                    
+                    # Chatbot
+                    chatbot = gr.Chatbot(
+                        height=400,
+                        elem_classes=["gradio-chatbot"],
+                        show_copy_button=True,
+                        type="messages",
+                        placeholder="Upload and process documents to start chatting..."
+                    )
+                    
+                    # Input section
+                    with gr.Column(elem_classes=["input-section"]):
+                        with gr.Row(elem_classes=["input-row"]):
+                            msg_input = gr.Textbox(
+                                placeholder="Type your question about the uploaded documents...",
+                                label="",
+                                show_label=False,
+                                scale=4,
+                                elem_classes=["message-input"],
+                                autofocus=True,
+                                container=False
                             )
-                            
-                            process_btn = gr.Button(
-                                "🚀 Process Documents",
-                                elem_classes=["process-btn"],
+                            send_btn = gr.Button(
+                                "Send", 
+                                scale=1, 
+                                elem_classes=["send-button"],
                                 size="sm"
                             )
-                        
-                        # Status display
-                        processing_status = gr.HTML(visible=False)
-                    
-                    # Message input section
-                    with gr.Row(elem_classes=["input-row"]):
-                        msg_input = gr.Textbox(
-                            placeholder="Ask me anything about your documents...",
-                            label="Message",
-                            show_label=False,
-                            scale=4,
-                            autofocus=True,
-                            container=False
-                        )
-                        
-                        send_btn = gr.Button(
-                            "Send ↗",
-                            elem_classes=["send-btn"],
-                            scale=1,
-                            size="sm"
-                        )
 
-                    # Example questions
-                    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 specific metrics or data points are mentioned?",
-                                "💡 What are the main recommendations or conclusions?"
-                            ],
-                            inputs=msg_input,
-                            label="💭 Example Questions",
-                            elem_id="examples"
-                        )
+                        # Examples
+                        with gr.Column(elem_classes=["examples-container"]):
+                            gr.HTML('<div class="examples-title">Example Questions</div>')
+                            gr.Examples(
+                                examples=[
+                                    "What are the main topics discussed?",
+                                    "Summarize the key findings",
+                                    "What metrics are mentioned?",
+                                    "What are the recommendations?"
+                                ],
+                                inputs=msg_input,
+                                label="",
+                                show_label=False
+                            )
 
         # State management
         doc_processed = gr.State(False)
         
-        # Event handlers - keeping original functionality
+        # Event handlers
         def handle_file_upload_and_process(files):
             if not files:
                 return gr.update(visible=False), False
             
             # Show processing indicator
             processing_html = f"""
-            <div class="status-message status-processing">
-                📄 Processing {len(files)} documents... Please wait.
+            <div class="status-indicator status-processing">
+                Processing {len(files)} documents... Please wait.
             </div>
             """
             
-            # Process files using original logic
+            # Process files
             try:
                 result = coordinator_agent.process_files(files)
                 
-                # Wait a moment for processing to complete
+                # Wait for processing
                 import time
                 time.sleep(3)
                 
                 success_html = """
-                <div class="status-message status-success">
-                    ✅ Documents processed successfully! You can now ask questions.
+                <div class="status-indicator status-success">
+                    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 class="status-message status-error">
-                    ❌ Error processing documents: {str(e)}
+                <div class="status-indicator status-error">
+                    Error processing documents: {str(e)}
                 </div>
                 """
                 return gr.update(value=error_html, visible=True), False
 
         def respond(message, history, doc_ready):
-            # Keep original response logic exactly the same
             if not doc_ready:
-                # Show error message
                 history.append({"role": "user", "content": message})
-                history.append({"role": "assistant", "content": "📚 Please upload and process documents first using the upload section above."})
+                history.append({"role": "assistant", "content": "Please upload and process documents first."})
                 return history, ""
             
             if not message.strip():
@@ -787,21 +920,20 @@ def create_interface():
             history.append({"role": "user", "content": message})
             history.append({"role": "assistant", "content": ""})
             
-            # Stream response using original logic
+            # Stream response
             try:
                 for token in coordinator_agent.handle_query(message, history):
                     history[-1]["content"] += token
                     yield history, ""
             except Exception as e:
-                history[-1]["content"] = f"❌ Error: {str(e)}"
+                history[-1]["content"] = f"Error: {str(e)}"
                 yield history, ""
 
-        # Event bindings - keeping original functionality
+        # Event bindings
         process_btn.click(
             handle_file_upload_and_process,
             inputs=[file_upload],
-            outputs=[processing_status, doc_processed],
-            show_progress=True
+            outputs=[processing_status, doc_processed]
         )
 
         send_btn.click(