Update app.py

app.py

@@ -419,320 +419,454 @@ llm_response_agent = LLMResponseAgent(message_bus)
 coordinator_agent = CoordinatorAgent(message_bus)
 
 def create_interface():
-    """Create ChatGPT-style Gradio interface"""
+    """Create Claude-style Gradio interface with integrated file upload"""
     
     with gr.Blocks(
         theme=gr.themes.Base(),
         css="""
-        /* Dark theme styling */
+        /* Claude-inspired dark theme */
         .gradio-container {
-            background-color: #1a1a1a !important;
+            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;
         }
         
-        /* Main container */
+        /* Main layout */
         .main-container {
             display: flex;
             flex-direction: column;
             height: 100vh;
-            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+            background: #0f0f0f;
+            max-width: 800px;
+            margin: 0 auto;
         }
         
-        /* Header */
+        /* Header - minimal like Claude */
         .header {
-            background: rgba(255, 193, 7, 0.1);
-            border-bottom: 1px solid rgba(255, 193, 7, 0.2);
+            background: #0f0f0f;
+            border-bottom: 1px solid #2a2a2a;
             padding: 1rem 2rem;
-            backdrop-filter: blur(10px);
+            text-align: center;
         }
         
         .header h1 {
-            color: #ffc107;
+            color: #ffffff;
             margin: 0;
-            font-size: 1.5rem;
-            font-weight: 600;
+            font-size: 1.25rem;
+            font-weight: 500;
         }
         
-        .header p {
-            color: #cccccc;
-            margin: 0.25rem 0 0 0;
-            font-size: 0.9rem;
-        }
-        
-        /* Chat area - REDUCED HEIGHT */
+        /* Chat container - full height like Claude */
         .chat-container {
             flex: 1;
             display: flex;
             flex-direction: column;
-            max-width: 1000px;
-            margin: 0 auto;
-            width: 100%;
-            padding: 1rem;
-            height: calc(100vh - 200px) !important; /* Reduced height */
+            padding: 0;
+            background: #0f0f0f;
         }
         
-        /* Chatbot styling - SMALLER */
+        /* Chatbot area - Claude style */
         .gradio-chatbot {
-            height: 300px !important; /* Reduced from 500px */
-            max-height: 300px !important;
-            background: transparent !important;
+            flex: 1 !important;
+            height: calc(100vh - 200px) !important;
+            max-height: none !important;
+            background: #0f0f0f !important;
             border: none !important;
-            margin-bottom: 1rem;
+            padding: 1rem !important;
             overflow-y: auto !important;
-            box-shadow: 0 0 12px rgba(255, 193, 7, 0.1);
-            
         }
         
-        /* 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);
+        /* Messages styling - Claude-like bubbles */
+        .message.user {
+            background: #2a2a2a !important;
+            border-radius: 16px !important;
+            padding: 12px 16px !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;
+        }
+        
+        /* Input area - fixed at bottom like Claude */
+        .input-container {
             position: sticky;
             bottom: 0;
+            background: #0f0f0f;
+            border-top: 1px solid #2a2a2a;
+            padding: 1rem 2rem 2rem 2rem;
         }
         
-        /* 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;
+        .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;
         }
         
-        /* Buttons - YELLOW SEND BUTTON */
-        .send-btn {
-            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
-            color: #000000 !important;
+        .input-wrapper:focus-within {
+            border-color: #ff6b35 !important;
+        }
+        
+        /* File upload button - integrated like Claude */
+        .file-btn {
+            background: transparent !important;
             border: none !important;
-            border-radius: 8px !important;
-            font-weight: 600 !important;
-            min-height: 40px !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;
+        }
+        
+        .file-btn:hover {
+            background: #404040 !important;
+            color: #ffffff !important;
         }
         
-        .primary-btn {
-            background: linear-gradient(135deg, #ffc107 0%, #ff8f00 100%) !important;
-            color: #000000 !important;
+        /* Text input - Claude style */
+        .gradio-textbox {
+            flex: 1 !important;
+        }
+        
+        .gradio-textbox textarea, .gradio-textbox input {
+            background: transparent !important;
             border: none !important;
-            border-radius: 8px !important;
-            font-weight: 600 !important;
+            color: #ffffff !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;
+        }
+        
+        .gradio-textbox textarea:focus, .gradio-textbox input:focus {
+            outline: none !important;
+            box-shadow: none !important;
         }
         
-        /* Text inputs */
-        .gradio-textbox input, .gradio-textbox textarea {
-            background: rgba(45, 45, 45, 0.8) !important;
+        /* Send button - Claude style */
+        .send-btn {
+            background: #ff6b35 !important;
+            border: none !important;
+            border-radius: 20px !important;
             color: #ffffff !important;
-            border: 1px solid rgba(255, 193, 7, 0.2) !important;
-            border-radius: 8px !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;
         }
         
-        /* Processing indicator */
-        .processing-indicator {
-            background: rgba(255, 193, 7, 0.1);
-            border: 1px solid rgba(255, 193, 7, 0.3);
-            border-radius: 8px;
-            padding: 0.75rem;
-            margin: 0.5rem 0;
-            color: #ffc107;
+        .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;
+        }
+        
+        /* 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;
         }
         
-        /* Input row styling */
-        .input-row {
-            display: flex !important;
-            gap: 10px !important;
-            align-items: end !important;
+        .status-success {
+            border-color: #22c55e !important;
+            color: #22c55e !important;
+            background: rgba(34, 197, 94, 0.1) !important;
         }
         
-        /* Message input */
-        .message-input {
-            flex: 1 !important;
-            min-height: 40px !important;
+        .status-error {
+            border-color: #ef4444 !important;
+            color: #ef4444 !important;
+            background: rgba(239, 68, 68, 0.1) !important;
+        }
+        
+        .status-processing {
+            border-color: #ff6b35 !important;
+            color: #ff6b35 !important;
+            background: rgba(255, 107, 53, 0.1) !important;
+        }
+        
+        /* File list styling */
+        .file-list {
+            background: #1a1a1a;
+            border-radius: 8px;
+            padding: 8px 12px;
+            margin: 4px 0;
+            font-size: 14px;
+            color: #cccccc;
+            border-left: 3px solid #ff6b35;
+        }
+        
+        /* Hide Gradio elements we don't want */
+        .gradio-file {
+            display: none !important;
+        }
+        
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #404040;
+            border-radius: 3px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #555555;
         }
         """,
         title="Agentic RAG Assistant"
     ) as iface:
 
-        # Header
-        with gr.Row():
-            with gr.Column():
-                gr.HTML("""
-                <div class="header">
-                    <h1>Agentic RAG Assistant</h1>
-                    <p>Upload documents and ask questions - powered by Multi-Agent Architecture</p>
-                </div>
-                """)
+        # Header - minimal like Claude
+        gr.HTML("""
+        <div class="header">
+            <h1>Agentic RAG Assistant</h1>
+        </div>
+        """)
 
-        # Main layout with sidebar and chat
+        # Main chat container
         with gr.Row():
-            # Left sidebar for file upload
-            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",
-                    elem_classes=["upload-area"]
-                )
-                
-                processing_status = gr.HTML(visible=False)
-                
-                process_btn = gr.Button(
-                    "Process Documents",
-                    variant="primary",
-                    elem_classes=["primary-btn"]
-                )
-                
-                # gr.Markdown("### ℹ️ Architecture")
-                # gr.Markdown("""
-                # **Multi-Agent System:**
-                # - 📄 **IngestionAgent**: Document parsing
-                # - 🔍 **RetrievalAgent**: Semantic search  
-                # - 🤖 **LLMAgent**: Response generation
-                # - 🎯 **CoordinatorAgent**: Workflow orchestration
-                
-                # **Features:**
-                # - Streaming responses
-                # - Multi-format support
-                # - Context-aware answers
-                # """)
-
-            # Right side - Chat interface
-            with gr.Column(scale=2):
-                gr.Markdown("### 💬 Chat Interface")
+            with gr.Column(scale=1, elem_classes=["main-container"]):
                 
-                # Chatbot with reduced height
+                # Chat area
                 chatbot = gr.Chatbot(
-                    height=300,  # Reduced height
                     elem_classes=["gradio-chatbot"],
                     show_copy_button=True,
                     type="messages",
-                    placeholder="Upload documents first, then start chatting!"
+                    placeholder="Hello! Upload documents using the 📎 button below, then ask me anything about them.",
+                    avatar_images=(None, None),
+                    bubble_full_width=False
                 )
                 
-                # Input area with improved layout
-                with gr.Row(elem_classes=["input-row"]):
-                    msg_input = gr.Textbox(
-                        placeholder="Ask about your documents...",
-                        label="Message",
-                        scale=4,
-                        elem_classes=["message-input"],
-                        show_label=False,
-                        autofocus=True
-                    )
-                    send_btn = gr.Button(
-                        "Send", 
-                        scale=1, 
-                        elem_classes=["send-btn"],
-                        size="sm"
-                    )
+                # 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
+                            file_upload = gr.File(
+                                file_count="multiple",
+                                file_types=[".pdf", ".pptx", ".csv", ".docx", ".txt", ".md"],
+                                elem_classes=["file-upload"],
+                                visible=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
+                            )
 
-                # Examples
-                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="Example Questions"
-                )
-
-        # State to track document processing
+        # 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_and_process(files):
+        def handle_file_upload(files, history):
+            """Handle file uploads and show in chat"""
             if not files:
-                return gr.update(visible=False), False
+                return history, [], False, gr.update()
+            
+            # 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 indicator
-            processing_html = f"""
-            <div class="processing-indicator">
-                📄 Processing {len(files)} documents... Please wait.
-            </div>
-            """
+            # Show processing message
+            history.append({
+                "role": "assistant", 
+                "content": "📄 Processing documents... This may take a moment."
+            })
             
-            # Process files
             try:
+                # Process files
                 result = coordinator_agent.process_files(files)
                 
-                # Wait a moment for processing to complete
+                # Wait for processing
                 import time
                 time.sleep(3)
                 
-                success_html = """
-                <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
+                # 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)
                 
             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
+                history[-1]["content"] = f"❌ Error processing documents: {str(e)}"
+                return history, [], False, gr.update(value=None)
 
-        def respond(message, history, doc_ready):
-            if not doc_ready:
-                # Show error message
-                history.append({"role": "user", "content": message})
-                history.append({"role": "assistant", "content": " Please upload and process documents first."})
-                return history, ""
-            
+        def respond(message, history, doc_ready, files):
+            """Handle user messages"""
             if not message.strip():
-                return history, message
+                return history, ""
             
             # 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
             try:
                 for token in coordinator_agent.handle_query(message, history):
-                    history[-1]["content"] += token
-                    yield history, ""
+                    if token:
+                        history[-1]["content"] += token
+                        yield history, ""
             except Exception as e:
-                history[-1]["content"] = f"❌ Error: {str(e)}"
+                history[-1]["content"] = f"❌ Sorry, I encountered an error: {str(e)}"
                 yield history, ""
-
+        
         # Event bindings
-        process_btn.click(
-            handle_file_upload_and_process,
-            inputs=[file_upload],
-            outputs=[processing_status, doc_processed]
+        
+        # File upload handling
+        file_upload.upload(
+            handle_file_upload,
+            inputs=[file_upload, chatbot],
+            outputs=[chatbot, uploaded_files, doc_processed, file_upload]
         )
-
+        
+        # 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],
-            outputs=[chatbot, msg_input],
-            show_progress=True
+            inputs=[msg_input, chatbot, doc_processed, uploaded_files],
+            outputs=[chatbot, msg_input]
         )
-
+        
+        # Enter key submit
         msg_input.submit(
             respond,
-            inputs=[msg_input, chatbot, doc_processed],
-            outputs=[chatbot, msg_input],
-            show_progress=True
+            inputs=[msg_input, chatbot, doc_processed, uploaded_files],
+            outputs=[chatbot, msg_input]
         )
 
     return iface
-
 # Launch the application
 if __name__ == "__main__":
     demo = create_interface()