improve frontend

app.py

@@ -104,76 +104,111 @@ def create_gradio_app():
     """Creates and launches the Gradio web application."""
     print("Launching Gradio app...")
 
-    with gr.Blocks(theme=gr.themes.Soft(), title="LangGraph Multi-Agent Chat") as demo:
-        session_state = gr.State({})
-
-        gr.Markdown(
-            """
-            # LangGraph Multi-Agent Project Manager
-
-            Interact with a multi-agent system powered by LangGraph.
-            You can assign tasks related to Trello and Github.
-            The system can be interrupted for human feedback when it needs to use a tool.
-            """
+    AVATAR_BOT = "pmcp/assets/pmcp_bot.png"
+
+    theme = gr.themes.Soft(
+        primary_hue="green",
+        secondary_hue="teal",
+        neutral_hue="slate",
+        font=["Arial", "sans-serif"]
+        ).set(
+            body_background_fill="linear-gradient(135deg,#e8f5e9 0%,#f4fcf4 100%)",
+            block_background_fill="white",
+            block_border_width="1px",
+            block_shadow="*shadow_drop_lg",
+            button_primary_background_fill="#02B900",  
+            button_primary_text_color="white",
+            button_secondary_background_fill="#35C733",
+            button_secondary_text_color="white",
         )
+    
+    # Extra CSS (font, bubble colors, subtle animations)
+    custom_css = """
+    body { font-family: 'Inter', sans-serif; }
+    #header { text-align:center; margin-bottom: 1.25rem; }
+    #header h1 { font-size:2.25rem; font-weight:700; background:linear-gradient(90deg,#02B900 0%,#35C733 100%); -webkit-background-clip:text; color:transparent; }
+    #chatbot .message.user   { background:#E8FBE8; }
+    #chatbot .message.assistant { background:#F9FDF9; }
+    """
 
-        chatbot = gr.Chatbot(
-            [],
-            elem_id="chatbot",
-            bubble_full_width=False,
-            height=600,
-            label="Multi-Agent Chat",
-            show_label=False,
-        )
+    with gr.Blocks( theme=theme, 
+                    title="LangGraph Multi-Agent Chat",
+                    css=custom_css,
+                    fill_height=True,) as demo:
+        
+        session_state = gr.State({})
 
-        # --- FIX: Added an accordion for API keys and configuration ---
-        with gr.Accordion("API Configuration", open=True):
-            gr.Markdown(
-                "Please enter your credentials. The agent will be configured when you send your first message."
-            )
-            github_repo = gr.Textbox(
-                label="GitHub Repo",
-                placeholder="e.g., username/repository",
-                info="The target repository for GitHub operations.",
-            )
-            github_token = gr.Textbox(
-                label="GitHub Token",
-                placeholder="ghp_xxxxxxxxxxxx",
-                type="password",
-                info="A fine-grained personal access token.",
-            )
-            trello_api = gr.Textbox(
-                label="Trello API Key",
-                placeholder="Your Trello API key",
-                info="Your API key from trello.com/power-ups/admin.",
-            )
-            trello_token = gr.Textbox(
-                label="Trello Token",
-                placeholder="Your Trello token",
-                type="password",
-                info="A token generated from your Trello account.",
-            )
-            hf_token = gr.Textbox(
-                label="Hugging Face Token",
-                placeholder="hf_xxxxxxxxxxxx",
-                type="password",
-                info="Used for tools requiring Hugging Face models.",
-            )
-
-        gr.ChatInterface(
-            fn=chat_logic,
-            chatbot=chatbot,
-            additional_inputs=[
-                session_state,
-                github_repo,
-                github_token,
-                trello_api,
-                trello_token,
-                hf_token,
-            ],
-            title=None,
-            description=None,
-        )
+        gr.HTML(
+                        """
+            <div id='header'>
+            <h1>PMCP — Agentic Project Management</h1>
+            <p class='tagline'>Manage your projects with PMCP, a multi-agent system capable to interact with Trello and GitHub.</p>
+            </div>
+            """
+                    )
+
+
+        with gr.Row():
+            with gr.Column(scale=1):
+                with gr.Accordion("🔑 API Configuration", open=True):
+                    gr.Markdown(
+                        "Please enter your credentials. The agent will be configured when you send your first message."
+                    )
+                    github_repo = gr.Textbox(
+                        label="📁 GitHub Repo",
+                        placeholder="e.g., username/repository",
+                        info="The target repository for GitHub operations.",
+                    )
+                    github_token = gr.Textbox(
+                        label="🔐 GitHub Token",
+                        placeholder="ghp_xxxxxxxxxxxx",
+                        type="password",
+                        info="A fine-grained personal access token.",
+                    )
+                    trello_api = gr.Textbox(
+                        label="🗂️ Trello API Key",
+                        placeholder="Your Trello API key",
+                        info="Your API key from trello.com/power-ups/admin.",
+                    )
+                    trello_token = gr.Textbox(
+                        label="🔐 Trello Token",
+                        placeholder="Your Trello token",
+                        type="password",
+                        info="A token generated from your Trello account.",
+                    )
+                    hf_token = gr.Textbox(
+                        label="🤗 Hugging Face Token",
+                        placeholder="hf_xxxxxxxxxxxx",
+                        type="password",
+                        info="Used for tools requiring Hugging Face models.",
+                    )
+
+            with gr.Column(scale=2):
+                chatbot = gr.Chatbot(
+                    [],
+                    elem_id="chatbot",
+                    bubble_full_width=False,
+                    height=600,
+                    label="Multi-Agent Chat",
+                    show_label=False,
+                    avatar_images=(None, AVATAR_BOT)
+                    )
+                
+
+                gr.ChatInterface(
+                    fn=chat_logic,
+                    chatbot=chatbot,
+                    additional_inputs=[
+                        session_state,
+                        github_repo,
+                        github_token,
+                        trello_api,
+                        trello_token,
+                        hf_token,
+                    ],
+                    title=None,
+                    description="Ask **PMCP** to create tickets, open PRs, or coordinate tasks across your boards and repositories.",
+                )
 
     demo.queue()
     demo.launch(debug=True)