Create ui_components.py

ui_components.py

@@ -0,0 +1,200 @@
+"""
+UI Components for Universal MCP Client
+"""
+import gradio as gr
+from typing import Tuple, List, Dict, Any
+
+from config import AppConfig, CUSTOM_CSS
+from chat_handler import ChatHandler
+from server_manager import ServerManager
+from mcp_client import UniversalMCPClient
+
+class UIComponents:
+    """Manages Gradio UI components and event handlers"""
+    
+    def __init__(self, mcp_client: UniversalMCPClient):
+        self.mcp_client = mcp_client
+        self.chat_handler = ChatHandler(mcp_client)
+        self.server_manager = ServerManager(mcp_client)
+    
+    def create_interface(self) -> gr.Blocks:
+        """Create the main Gradio interface"""
+        with gr.Blocks(
+            title="Universal MCP Client", 
+            theme=getattr(gr.themes, AppConfig.GRADIO_THEME.title())(),
+            fill_height=True,
+            css=CUSTOM_CSS
+        ) as demo:
+            
+            # Create sidebar
+            self._create_sidebar()
+            
+            # Create main chat area
+            chatbot = self._create_main_chat_area()
+            
+            # Set up event handlers
+            self._setup_event_handlers(chatbot)
+            
+        return demo
+    
+    def _create_sidebar(self):
+        """Create the sidebar with server management"""
+        with gr.Sidebar():
+            gr.Markdown("# Gradio.chat.app")
+            
+            # Collapsible information section
+            with gr.Accordion("📚 Guide & Info", open=True):
+                gr.Markdown("""
+                ## ✅ Quick Start
+                
+                **Native Capabilities:**
+                - 👁️ **Image Understanding**: Upload & ask "What's in this?"
+                - 💬 **Chat**: All conversation capabilities  
+                - 🧠 **Analysis**: Code, text, documents
+                
+                **MCP Servers:**
+                - 🎨 **Generate**: Images, audio, content
+                - ⚡ **Process**: Files via connected servers
+                - 🔧 **Edit**: Transform existing media
+                """)
+                
+                gr.Markdown("""
+                ## 🎯 How It Works
+                
+                1. **Direct Tasks**: Claude handles image analysis instantly
+                2. **Generation**: MCP servers create new content
+                3. **File Processing**: Server-dependent compatibility
+                
+                ## 📁 File Support
+                - **Images**: PNG, JPG, GIF, WebP
+                - **Audio**: MP3, WAV, M4A, FLAC  
+                - **Video**: MP4, AVI, MOV
+                - **Documents**: PDF, TXT, DOCX
+                """)
+            
+            # Server status (not in accordion) - make it reactive
+            gr.Markdown("## 🔧 Server Status")
+            self.server_count_display = gr.Markdown(f"**Connected Servers**: {len(self.mcp_client.servers)}")
+            
+            if self.mcp_client.servers:
+                server_list = "\n".join([f"• **{name}**" for name in self.mcp_client.servers.keys()])
+                self.server_list_display = gr.Markdown(server_list)
+            else:
+                self.server_list_display = gr.Markdown("*No servers connected*\n\nAdd servers below.")
+            
+            # Server management in accordion
+            self._create_server_management_section()
+    
+    def _create_server_management_section(self):
+        """Create the server management section in sidebar"""
+        with gr.Accordion("⚙️ Manage Servers", open=False):
+            gr.Markdown("### Add MCP Server")
+            
+            self.server_name = gr.Textbox(
+                label="Server Title", 
+                placeholder="Text to Image Generator"
+            )
+            self.space_name = gr.Textbox(
+                label="HuggingFace Space Name", 
+                placeholder="ysharma/dalle-3-xl-lora-v2"
+            )
+            
+            self.add_server_btn = gr.Button("Add Server", variant="primary")
+            self.add_server_output = gr.Textbox(label="Status", interactive=False)
+            self.add_server_details = gr.HTML(label="Details")
+            
+            self.status_btn = gr.Button("Refresh Status", variant="secondary")  
+            self.status_count = gr.Markdown("**Total MCP Servers**: 0")
+            self.status_output = gr.HTML()
+    
+    def _create_main_chat_area(self) -> gr.Chatbot:
+        """Create the main chat area"""
+        with gr.Column(elem_classes="main-content"):
+            # Chatbot takes most of the space
+            chatbot = gr.Chatbot(
+                label="Universal MCP-Powered Multimodal Chatbot",
+                show_label=False,
+                type="messages",
+                scale=1,  # Expand to fill available space
+                show_copy_button=True,
+                avatar_images=None
+            )
+            
+            # Input area at bottom - fixed size
+            with gr.Column(scale=0, elem_classes="input-area"):
+                self.chat_input = gr.MultimodalTextbox(
+                    interactive=True,
+                    file_count="multiple",
+                    placeholder="Enter message or upload files (images, audio, video, documents)...",
+                    show_label=False,
+                    sources=["upload", "microphone"],
+                    file_types=None  # Accept all file types
+                )
+        
+        return chatbot
+    
+    def _setup_event_handlers(self, chatbot: gr.Chatbot):
+        """Set up all event handlers for the interface"""
+        
+        # Chat event handlers
+        def submit_message(message, history):
+            if message and (message.get("text", "").strip() or message.get("files", [])):
+                new_history, cleared_input = self.chat_handler.process_multimodal_message(message, history)
+                return new_history, cleared_input
+            return history, gr.MultimodalTextbox(value=None, interactive=False)
+        
+        def enable_input():
+            return gr.MultimodalTextbox(interactive=True)
+        
+        # Set up the chat flow - using built-in submit functionality
+        chat_msg_enter = self.chat_input.submit(
+            submit_message,
+            inputs=[self.chat_input, chatbot],
+            outputs=[chatbot, self.chat_input]
+        )
+        chat_msg_enter.then(enable_input, None, [self.chat_input])
+        
+        # Server management event handlers
+        def update_server_display():
+            """Update the server status display in sidebar"""
+            server_count = len(self.mcp_client.servers)
+            count_text = f"**Connected Servers**: {server_count}"
+            
+            if self.mcp_client.servers:
+                server_list = "\n".join([f"• **{name}**" for name in self.mcp_client.servers.keys()])
+                return count_text, server_list
+            else:
+                return count_text, "*No servers connected*\n\nAdd servers below."
+        
+        def handle_add_server(name, space_name):
+            """Handle adding a server and update displays"""
+            status_msg, details_html = self.server_manager.add_custom_server(name, space_name)
+            
+            # Update sidebar server display
+            count_text, list_text = update_server_display()
+            
+            return status_msg, details_html, count_text, list_text, "", ""  # Clear inputs
+        
+        def handle_refresh_status():
+            """Handle refresh status button"""
+            count_text, accordions_html = self.server_manager.get_server_status()
+            return count_text, accordions_html
+        
+        # Connect server management events
+        self.add_server_btn.click(
+            handle_add_server,
+            inputs=[self.server_name, self.space_name],
+            outputs=[
+                self.add_server_output, 
+                self.add_server_details, 
+                self.server_count_display, 
+                self.server_list_display, 
+                self.server_name, 
+                self.space_name
+            ]
+        )
+        
+        self.status_btn.click(
+            handle_refresh_status,
+            outputs=[self.status_count, self.status_output]
+        )