Update app.py

app.py

@@ -419,454 +419,407 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create Claude-style Gradio interface with integrated file upload"""
+    """Create Claude-style Gradio interface"""
     
     with gr.Blocks(
         theme=gr.themes.Base(),
         css="""
-        /* Claude-inspired dark theme */
+        /* Claude-inspired styling */
         .gradio-container {
-            background-color: #0f0f0f !important;
-            color: #ffffff !important;
-            height: 100vh !important;
-            max-width: none !important;
-            padding: 0 !important;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
+            background: #0d1117 !important;
+            color: #e6edf3 !important;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
         }
         
-        /* Main layout */
+        /* Main container */
         .main-container {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            background: #0f0f0f;
-            max-width: 800px;
+            max-width: 900px;
             margin: 0 auto;
+            background: #0d1117;
         }
         
-        /* Header - minimal like Claude */
-        .header {
-            background: #0f0f0f;
-            border-bottom: 1px solid #2a2a2a;
-            padding: 1rem 2rem;
+        /* Header styling */
+        .header-container {
+            background: #0d1117;
+            border-bottom: 1px solid #30363d;
+            padding: 1.5rem 0;
             text-align: center;
         }
         
-        .header h1 {
-            color: #ffffff;
+        .header-container h1 {
+            color: #f0f6fc;
             margin: 0;
-            font-size: 1.25rem;
-            font-weight: 500;
+            font-size: 1.5rem;
+            font-weight: 600;
         }
         
-        /* Chat container - full height like Claude */
+        .header-container p {
+            color: #8b949e;
+            margin: 0.5rem 0 0 0;
+            font-size: 0.9rem;
+        }
+        
+        /* Chat interface */
         .chat-container {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            padding: 0;
-            background: #0f0f0f;
+            background: #0d1117;
+            min-height: 70vh;
         }
         
-        /* Chatbot area - Claude style */
+        /* Chatbot styling */
         .gradio-chatbot {
-            flex: 1 !important;
-            height: calc(100vh - 200px) !important;
-            max-height: none !important;
-            background: #0f0f0f !important;
-            border: none !important;
-            padding: 1rem !important;
-            overflow-y: auto !important;
+            background: #0d1117 !important;
+            border: 1px solid #30363d !important;
+            border-radius: 12px !important;
+            min-height: 500px !important;
         }
         
-        /* Messages styling - Claude-like bubbles */
-        .message.user {
-            background: #2a2a2a !important;
-            border-radius: 16px !important;
-            padding: 12px 16px !important;
+        .gradio-chatbot .message {
+            background: transparent !important;
+            border-radius: 8px !important;
             margin: 8px 0 !important;
-            color: #ffffff !important;
         }
         
-        .message.bot {
-            background: transparent !important;
-            border-radius: 16px !important;
-            padding: 12px 16px !important;
-            margin: 8px 0 !important;
-            color: #ffffff !important;
-            border-left: 3px solid #ff6b35 !important;
-            padding-left: 16px !important;
+        .gradio-chatbot .message.user {
+            background: #21262d !important;
+            border: 1px solid #30363d !important;
+            color: #f0f6fc !important;
+        }
+        
+        .gradio-chatbot .message.bot {
+            background: #161b22 !important;
+            border-left: 3px solid #fd7e14 !important;
+            color: #e6edf3 !important;
         }
         
-        /* Input area - fixed at bottom like Claude */
+        /* Input area styling */
         .input-container {
-            position: sticky;
-            bottom: 0;
-            background: #0f0f0f;
-            border-top: 1px solid #2a2a2a;
-            padding: 1rem 2rem 2rem 2rem;
+            background: #0d1117;
+            padding: 1rem 0;
+            border-top: 1px solid #30363d;
         }
         
-        .input-wrapper {
-            background: #2a2a2a;
-            border-radius: 24px;
-            border: 1px solid #404040;
-            padding: 4px;
-            display: flex;
-            align-items: end;
-            gap: 8px;
-            transition: border-color 0.2s;
+        .upload-section {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 1rem;
         }
         
-        .input-wrapper:focus-within {
-            border-color: #ff6b35 !important;
+        .upload-section h4 {
+            color: #f0f6fc;
+            margin: 0 0 0.5rem 0;
+            font-size: 0.9rem;
         }
         
-        /* File upload button - integrated like Claude */
-        .file-btn {
-            background: transparent !important;
+        /* File upload button */
+        .upload-btn {
+            background: linear-gradient(135deg, #fd7e14, #e8590c) !important;
             border: none !important;
-            color: #999999 !important;
-            padding: 8px !important;
-            border-radius: 20px !important;
-            cursor: pointer !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            min-width: 36px !important;
-            height: 36px !important;
-            transition: all 0.2s !important;
+            border-radius: 6px !important;
+            color: white !important;
+            font-weight: 500 !important;
+            padding: 0.5rem 1rem !important;
+        }
+        
+        .upload-btn:hover {
+            background: linear-gradient(135deg, #e8590c, #d63384) !important;
+        }
+        
+        /* 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;
         }
         
-        .file-btn:hover {
-            background: #404040 !important;
-            color: #ffffff !important;
+        .process-btn:hover {
+            background: #2ea043 !important;
         }
         
-        /* Text input - Claude style */
+        /* 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 {
             flex: 1 !important;
         }
         
-        .gradio-textbox textarea, .gradio-textbox input {
+        .gradio-textbox textarea,
+        .gradio-textbox input {
             background: transparent !important;
             border: none !important;
-            color: #ffffff !important;
+            color: #f0f6fc !important;
+            font-size: 1rem !important;
             resize: none !important;
-            padding: 12px 16px !important;
-            font-size: 16px !important;
-            line-height: 1.5 !important;
-            max-height: 200px !important;
-            min-height: 24px !important;
+            min-height: 40px !important;
         }
         
-        .gradio-textbox textarea:focus, .gradio-textbox input:focus {
+        .gradio-textbox textarea:focus,
+        .gradio-textbox input:focus {
             outline: none !important;
             box-shadow: none !important;
         }
         
-        /* Send button - Claude style */
+        /* Send button */
         .send-btn {
-            background: #ff6b35 !important;
+            background: #fd7e14 !important;
             border: none !important;
-            border-radius: 20px !important;
-            color: #ffffff !important;
-            padding: 8px !important;
-            min-width: 36px !important;
-            height: 36px !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            cursor: pointer !important;
-            transition: all 0.2s !important;
+            border-radius: 6px !important;
+            color: white !important;
+            min-height: 40px !important;
+            font-weight: 500 !important;
         }
         
         .send-btn:hover {
-            background: #e55a2b !important;
-        }
-        
-        .send-btn:disabled {
-            background: #404040 !important;
-            cursor: not-allowed !important;
-        }
-        
-        /* File upload area - hidden by default */
-        .file-upload {
-            display: none !important;
+            background: #e8590c !important;
         }
         
         /* Status messages */
         .status-message {
-            background: #1a1a1a;
-            border: 1px solid #404040;
-            border-radius: 12px;
-            padding: 12px 16px;
-            margin: 8px 0;
-            color: #cccccc;
-            font-size: 14px;
-            text-align: center;
+            padding: 0.75rem;
+            border-radius: 6px;
+            margin: 0.5rem 0;
+            font-size: 0.9rem;
         }
         
         .status-success {
-            border-color: #22c55e !important;
-            color: #22c55e !important;
-            background: rgba(34, 197, 94, 0.1) !important;
+            background: rgba(35, 134, 54, 0.15);
+            border: 1px solid #238636;
+            color: #2ea043;
         }
         
         .status-error {
-            border-color: #ef4444 !important;
-            color: #ef4444 !important;
-            background: rgba(239, 68, 68, 0.1) !important;
+            background: rgba(248, 81, 73, 0.15);
+            border: 1px solid #da3633;
+            color: #f85149;
         }
         
         .status-processing {
-            border-color: #ff6b35 !important;
-            color: #ff6b35 !important;
-            background: rgba(255, 107, 53, 0.1) !important;
+            background: rgba(253, 126, 20, 0.15);
+            border: 1px solid #fd7e14;
+            color: #fd7e14;
         }
         
-        /* File list styling */
+        /* File list */
         .file-list {
-            background: #1a1a1a;
-            border-radius: 8px;
-            padding: 8px 12px;
-            margin: 4px 0;
-            font-size: 14px;
-            color: #cccccc;
-            border-left: 3px solid #ff6b35;
+            background: #21262d;
+            border-radius: 6px;
+            padding: 0.5rem;
+            margin: 0.25rem 0;
+            font-size: 0.85rem;
+            color: #8b949e;
+            border-left: 3px solid #fd7e14;
         }
         
-        /* Hide Gradio elements we don't want */
-        .gradio-file {
-            display: none !important;
+        /* Examples */
+        .examples-container {
+            margin-top: 1rem;
         }
         
-        /* Scrollbar styling */
-        ::-webkit-scrollbar {
-            width: 6px;
+        .examples-container .gradio-examples {
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            background: #161b22;
         }
         
-        ::-webkit-scrollbar-track {
-            background: transparent;
+        /* Hide default file upload styling */
+        .gradio-file {
+            background: transparent !important;
+            border: 1px dashed #30363d !important;
+            border-radius: 6px !important;
         }
         
-        ::-webkit-scrollbar-thumb {
-            background: #404040;
-            border-radius: 3px;
+        /* Progress bar */
+        .gradio-progress {
+            background: #21262d !important;
+            border-radius: 4px !important;
         }
         
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555555;
+        .gradio-progress .progress-bar {
+            background: #fd7e14 !important;
         }
         """,
         title="Agentic RAG Assistant"
     ) as iface:
 
-        # Header - minimal like Claude
-        gr.HTML("""
-        <div class="header">
-            <h1>Agentic RAG Assistant</h1>
-        </div>
-        """)
+        # 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 chat container
+        # Main content area
         with gr.Row():
-            with gr.Column(scale=1, elem_classes=["main-container"]):
+            with gr.Column(elem_classes=["main-container"]):
                 
-                # Chat area
+                # Chat interface
                 chatbot = gr.Chatbot(
-                    elem_classes=["gradio-chatbot"],
+                    height=500,
+                    elem_classes=["chat-container"],
                     show_copy_button=True,
                     type="messages",
-                    placeholder="Hello! Upload documents using the 📎 button below, then ask me anything about them.",
-                    avatar_images=(None, None),
-                    bubble_full_width=False
+                    placeholder="👋 Welcome! Upload your documents below, then start asking questions.",
+                    avatar_images=("👤", "🤖")
                 )
                 
-                # Input area - Claude style with integrated file upload
-                with gr.Row(elem_classes=["input-container"]):
-                    with gr.Column():
-                        with gr.Row(elem_classes=["input-wrapper"]):
-                            
-                            # Hidden file upload
+                # Input section
+                with gr.Column(elem_classes=["input-container"]):
+                    
+                    # 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"],
-                                elem_classes=["file-upload"],
-                                visible=False
+                                label="Choose files",
+                                show_label=False
                             )
                             
-                            # File upload button (📎 icon)
-                            file_btn = gr.Button(
-                                "📎",
-                                elem_classes=["file-btn"],
-                                size="sm",
-                                scale=0
-                            )
-                            
-                            # Message input
-                            msg_input = gr.Textbox(
-                                placeholder="Message Agentic RAG Assistant...",
-                                show_label=False,
-                                elem_classes=["message-input"],
-                                scale=1,
-                                container=False,
-                                autofocus=True,
-                                lines=1,
-                                max_lines=10
-                            )
-                            
-                            # Send button
-                            send_btn = gr.Button(
-                                "↑",
-                                elem_classes=["send-btn"],
-                                size="sm",
-                                scale=0
+                            process_btn = gr.Button(
+                                "🚀 Process Documents",
+                                elem_classes=["process-btn"],
+                                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"
+                        )
 
         # State management
         doc_processed = gr.State(False)
-        uploaded_files = gr.State([])
-        
-        # JavaScript for file upload integration
-        gr.HTML("""
-        <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Make file button trigger file upload
-            const fileBtn = document.querySelector('.file-btn');
-            const fileInput = document.querySelector('.file-upload input[type="file"]');
-            
-            if (fileBtn && fileInput) {
-                fileBtn.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    fileInput.click();
-                });
-            }
-            
-            // Auto-resize textarea
-            const textarea = document.querySelector('.message-input textarea');
-            if (textarea) {
-                textarea.addEventListener('input', function() {
-                    this.style.height = 'auto';
-                    this.style.height = Math.min(this.scrollHeight, 200) + 'px';
-                });
-            }
-        });
-        </script>
-        """)
         
-        # Event handlers
-        def handle_file_upload(files, history):
-            """Handle file uploads and show in chat"""
+        # Event handlers - keeping original functionality
+        def handle_file_upload_and_process(files):
             if not files:
-                return history, [], False, gr.update()
+                return gr.update(visible=False), False
             
-            # Add file upload message to chat
-            file_names = [f.name.split('/')[-1] if hasattr(f, 'name') else str(f) for f in files]
-            file_list = "\n".join([f"📄 {name}" for name in file_names])
-            
-            history.append({
-                "role": "user", 
-                "content": f"📎 Uploaded {len(files)} file(s):\n{file_list}"
-            })
-            
-            # Show processing message
-            history.append({
-                "role": "assistant", 
-                "content": "📄 Processing documents... This may take a moment."
-            })
+            # Show processing indicator
+            processing_html = f"""
+            <div class="status-message status-processing">
+                📄 Processing {len(files)} documents... Please wait.
+            </div>
+            """
             
+            # Process files using original logic
             try:
-                # Process files
                 result = coordinator_agent.process_files(files)
                 
-                # Wait for processing
+                # Wait a moment for processing to complete
                 import time
                 time.sleep(3)
                 
-                # Update last message with success
-                history[-1]["content"] = f"✅ Successfully processed {len(files)} document(s)! You can now ask questions about your documents."
-                
-                return history, files, True, gr.update(value=None)
+                success_html = """
+                <div class="status-message status-success">
+                    ✅ Documents processed successfully! You can now ask questions.
+                </div>
+                """
+                return gr.update(value=success_html, visible=True), True
                 
             except Exception as e:
-                history[-1]["content"] = f"❌ Error processing documents: {str(e)}"
-                return history, [], False, gr.update(value=None)
+                error_html = f"""
+                <div class="status-message status-error">
+                    ❌ Error processing documents: {str(e)}
+                </div>
+                """
+                return gr.update(value=error_html, visible=True), False
 
-        def respond(message, history, doc_ready, files):
-            """Handle user messages"""
-            if not message.strip():
+        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."})
                 return history, ""
             
+            if not message.strip():
+                return history, message
+            
             # Add user message
             history.append({"role": "user", "content": message})
-            
-            if not doc_ready and not any(cmd in message.lower() for cmd in ['hello', 'hi', 'help']):
-                history.append({
-                    "role": "assistant", 
-                    "content": "👋 Hello! I'm your RAG assistant. Please upload some documents first using the 📎 button, then I can help you analyze and answer questions about them."
-                })
-                return history, ""
-            
-            # Handle general queries without documents
-            if not doc_ready:
-                if any(cmd in message.lower() for cmd in ['hello', 'hi', 'help']):
-                    history.append({
-                        "role": "assistant", 
-                        "content": "👋 Hello! I'm an AI assistant specialized in document analysis. Upload documents using the 📎 button above, and I'll help you:\n\n• Summarize content\n• Answer questions\n• Extract key insights\n• Find specific information\n\nSupported formats: PDF, DOCX, PPTX, CSV, TXT, MD"
-                    })
-                else:
-                    history.append({
-                        "role": "assistant", 
-                        "content": "Please upload documents first using the 📎 button above, then I can help answer questions about them."
-                    })
-                return history, ""
-            
-            # Add assistant message placeholder
             history.append({"role": "assistant", "content": ""})
             
-            # Stream response
+            # Stream response using original logic
             try:
                 for token in coordinator_agent.handle_query(message, history):
-                    if token:
-                        history[-1]["content"] += token
-                        yield history, ""
+                    history[-1]["content"] += token
+                    yield history, ""
             except Exception as e:
-                history[-1]["content"] = f"❌ Sorry, I encountered an error: {str(e)}"
+                history[-1]["content"] = f"�� Error: {str(e)}"
                 yield history, ""
-        
-        # Event bindings
-        
-        # File upload handling
-        file_upload.upload(
-            handle_file_upload,
-            inputs=[file_upload, chatbot],
-            outputs=[chatbot, uploaded_files, doc_processed, file_upload]
+
+        # Event bindings - keeping original functionality
+        process_btn.click(
+            handle_file_upload_and_process,
+            inputs=[file_upload],
+            outputs=[processing_status, doc_processed],
+            show_progress=True
         )
-        
-        # File button click (handled by JavaScript)
-        file_btn.click(None, None, None, js="""
-        function() {
-            document.querySelector('.file-upload input[type="file"]').click();
-        }
-        """)
-        
-        # Send button click
+
         send_btn.click(
             respond,
-            inputs=[msg_input, chatbot, doc_processed, uploaded_files],
-            outputs=[chatbot, msg_input]
+            inputs=[msg_input, chatbot, doc_processed],
+            outputs=[chatbot, msg_input],
+            show_progress=True
         )
-        
-        # Enter key submit
+
         msg_input.submit(
             respond,
-            inputs=[msg_input, chatbot, doc_processed, uploaded_files],
-            outputs=[chatbot, msg_input]
+            inputs=[msg_input, chatbot, doc_processed],
+            outputs=[chatbot, msg_input],
+            show_progress=True
         )
 
     return iface
+    
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()