Improve design

Signed-off-by: Aivin V. Solatorio <[email protected]>

mcp_remote_client.py

@@ -393,11 +393,24 @@ def gradio_interface(
     # server_path_or_url = "wdi_mcp_server.py"
 
     client = MCPClientWrapper()
-
-    with gr.Blocks(
-        title="WDI MCP Client", css="footer{display:none !important}"
-    ) as demo:
-        gr.Markdown("## Ask about the World Development Indicators (WDI) data")
+    custom_css = """
+    .gradio-container {
+        background-color: #f0f0f0 !important;
+    }
+    .message-row.panel.bot-row {
+        background-color: #ebeef4 !important;
+    }
+    .message-row.panel.user-row {
+        background-color: #fff !important;
+    }
+    .user {
+        background-color: #fff !important;
+    }
+    footer{display:none !important}
+    """
+
+    with gr.Blocks(title="WDI MCP Client", css=custom_css) as demo:
+        gr.Markdown("## Development Data Chat")
         # gr.Markdown("Connect to the WDI MCP server and chat with the assistant")
 
         with gr.Accordion(
@@ -430,11 +443,12 @@ def gradio_interface(
 
         with gr.Row(equal_height=True):
             msg = gr.Textbox(
-                label="Your Question",
+                label=None,
                 placeholder="Ask about what indicators are available for a specific topic (e.g., What's the definition of GDP?)",
                 scale=4,
+                show_label=False,
             )
-            clear_btn = gr.Button("Clear Chat", scale=1)
+            # clear_btn = gr.Button("Clear Chat", scale=1)
 
         # connect_btn.click(client.connect, inputs=server_path, outputs=status)
         # Automatically call client.connect(...) as soon as the interface loads
@@ -443,7 +457,7 @@ def gradio_interface(
         )
 
         msg.submit(client.process_message, [msg, chatbot], [chatbot, msg])
-        clear_btn.click(lambda: [], None, chatbot)
+        # clear_btn.click(lambda: [], None, chatbot)
 
         demo.unload(client.disconnect)