feat: enhance Gradio interface styling and UX

- Added modern theme with proper spacing and colors
- Added custom CSS for better chat styling
- Enhanced header with emojis and formatting
- Improved chat window layout and responsiveness
- Added loading states and dynamic button states
- Improved message formatting for code blocks
- Added emojis to buttons and example queries

app.py

@@ -191,36 +191,67 @@ class ChatInterface:
             """Get available venture types."""
             return VentureAPI(self.reasoning_engine).get_venture_types()
 
-    def create_interface(self):
+    def create_interface(self) -> gr.Blocks:
         """Create the Gradio interface."""
         with gr.Blocks(
-            theme=gr.themes.Soft(),
-            analytics_enabled=False,
-            title="Advanced Agentic System"
+            title="Advanced Agentic System",
+            theme=gr.themes.Soft(
+                primary_hue="blue",
+                secondary_hue="slate",
+                neutral_hue="slate",
+                spacing_size=gr.themes.sizes.spacing_md,
+                radius_size=gr.themes.sizes.radius_md,
+                text_size=gr.themes.sizes.text_md,
+            ),
+            css="""
+                .gradio-container {
+                    max-width: 1200px !important;
+                    margin: auto;
+                    padding: 20px;
+                }
+                .chat-message {
+                    padding: 15px;
+                    border-radius: 10px;
+                    margin-bottom: 10px;
+                }
+                .user-message {
+                    background-color: #f0f0f0;
+                }
+                .assistant-message {
+                    background-color: #e3f2fd;
+                }
+                footer {display: none !important;}
+                .gradio-container {min-height: 100vh !important;}
+                .main {flex-grow: 1;}
+            """
         ) as interface:
-            # Verify Gradio version
-            gr.Markdown(f"""
-            # Advanced Agentic System Chat Interface v{gr.__version__}
-            
-            Chat with our autonomous agent teams:
-            - Team A: Coders (App/Software Developers)
-            - Team B: Business (Entrepreneurs)
-            - Team C: Research (Deep Online Research)
-            - Team D: Crypto & Sports Trading
-            
-            You can:
-            1. Ask questions
-            2. Create new objectives
-            3. Check status of teams and objectives
-            4. Get insights and recommendations
+            gr.Markdown("""
+                # 🤖 Advanced Agentic System Chat Interface
+                
+                Welcome to our AI-powered autonomous agent teams! Each team specializes in different domains:
+                
+                - 💻 **Team A: Coders** - Expert software developers and architects
+                - 💼 **Team B: Business** - Strategic entrepreneurs and analysts
+                - 🔍 **Team C: Research** - Deep online research specialists
+                - 📈 **Team D: Trading** - Crypto & sports trading experts
+                
+                You can:
+                1. Ask questions about any domain
+                2. Create new objectives for teams
+                3. Check status of ongoing work
+                4. Get insights and recommendations
+                
+                ---
             """)
             
             chatbot = gr.Chatbot(
                 label="Chat History",
-                height=400,
+                height=500,
                 bubble_full_width=False,
                 show_copy_button=True,
-                render_markdown=True
+                render_markdown=True,
+                container=True,
+                elem_classes=["chat-window"]
             )
             
             with gr.Row():
@@ -228,39 +259,44 @@ class ChatInterface:
                     label="Message",
                     placeholder="Chat with the Agentic System...",
                     lines=2,
-                    scale=9,
-                    autofocus=True,
-                    container=True
+                    max_lines=10,
+                    show_label=False,
+                    container=False,
+                    scale=9
                 )
                 submit = gr.Button(
-                    "Send",
+                    "Send 🚀",
                     scale=1,
                     variant="primary"
                 )
             
-            with gr.Row():
+            with gr.Row(equal_height=True):
                 clear = gr.ClearButton(
                     [msg, chatbot],
-                    value="Clear Chat",
+                    value="Clear Chat 🗑️",
                     variant="secondary",
                     scale=1
                 )
                 retry = gr.Button(
-                    "Retry Last",
+                    "Retry Last 🔄",
                     variant="secondary",
                     scale=1
                 )
 
             async def respond(message, history):
+                """Handle chat responses with proper formatting."""
                 try:
                     # Convert history to the format expected by process_message
                     history_list = [[x, y] for x, y in history] if history else []
                     response = await self.process_message(message, history_list)
                     
+                    # Format response for markdown rendering
+                    formatted_response = response.replace('```', '\n```\n')
+                    
                     # Update history
                     if history is None:
                         history = []
-                    history.append((message, response))
+                    history.append((message, formatted_response))
                     
                     return "", history
                 except Exception as e:
@@ -274,56 +310,66 @@ class ChatInterface:
                     return "", history
 
             async def retry_last(history):
+                """Retry the last message with proper formatting."""
                 if not history:
                     return history
                 last_user_msg = history[-1][0]
                 history = history[:-1]  # Remove last exchange
                 return await respond(last_user_msg, history)
 
-            # Submit handlers
-            msg.submit(
-                respond,
-                [msg, chatbot],
-                [msg, chatbot]
+            # Submit handlers with loading states
+            submit_event = msg.submit(
+                fn=respond,
+                inputs=[msg, chatbot],
+                outputs=[msg, chatbot],
+                api_name=False
             ).then(
                 lambda: (gr.update(value="", interactive=True), gr.update(interactive=True)),
                 None,
                 [msg, submit]
             )
 
-            submit.click(
-                respond,
-                [msg, chatbot],
-                [msg, chatbot]
+            # Click handlers with loading states
+            click_event = submit.click(
+                fn=respond,
+                inputs=[msg, chatbot],
+                outputs=[msg, chatbot],
+                api_name=False
             ).then(
                 lambda: (gr.update(value="", interactive=True), gr.update(interactive=True)),
                 None,
                 [msg, submit]
             )
 
+            # Retry handler
             retry.click(
-                retry_last,
-                [chatbot],
-                [chatbot]
+                fn=retry_last,
+                inputs=[chatbot],
+                outputs=[chatbot],
+                api_name=False
             )
 
-            # Event handlers for better UX
+            # Auto-focus and dynamic submit button state
             msg.change(
-                lambda x: (gr.update(interactive=bool(x.strip())), gr.update(interactive=bool(x.strip()))),
+                lambda x: (
+                    gr.update(interactive=bool(x.strip())), 
+                    gr.update(interactive=bool(x.strip()), variant="primary" if x.strip() else "secondary")
+                ),
                 [msg],
                 [msg, submit]
             )
             
-            # Add example inputs
+            # Example queries with emojis
             gr.Examples(
                 examples=[
-                    "What can Team A (Coders) help me with?",
-                    "Create a new objective: Analyze market trends",
-                    "What's the status of all teams?",
-                    "Give me insights about recent developments"
+                    "💻 Can Team A help me build a web application?",
+                    "💼 Create a new objective: Analyze market trends for AI startups",
+                    "🔍 Research the latest developments in quantum computing",
+                    "📈 What's the current status of all teams?"
                 ],
                 inputs=msg,
-                label="Example Queries"
+                label="Example Queries",
+                examples_per_page=4
             )
 
         return interface