style: enhance Gradio interface styling

- Update theme configuration with proper colors and fonts
- Enhance CSS with responsive design
- Add CSS variables for consistent theming
- Improve chatbot component styling
- Add avatars and likeable messages

app.py

@@ -196,33 +196,66 @@ class ChatInterface:
         with gr.Blocks(
             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,
+                primary_hue=gr.themes.colors.blue,
+                secondary_hue=gr.themes.colors.sky,
+                neutral_hue=gr.themes.colors.gray,
+                spacing_size="lg",
+                radius_size="lg",
+                text_size="lg",
+                font=["Poppins", "ui-sans-serif", "system-ui", "sans-serif"],
             ),
             css="""
                 .gradio-container {
                     max-width: 1200px !important;
                     margin: auto;
                     padding: 20px;
+                    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
                 }
                 .chat-message {
                     padding: 15px;
-                    border-radius: 10px;
-                    margin-bottom: 10px;
+                    border-radius: 12px;
+                    margin-bottom: 12px;
+                    line-height: 1.5;
                 }
                 .user-message {
-                    background-color: #f0f0f0;
+                    background-color: var(--neutral-100);
+                    border: 1px solid var(--neutral-200);
                 }
                 .assistant-message {
-                    background-color: #e3f2fd;
+                    background-color: var(--primary-50);
+                    border: 1px solid var(--primary-100);
+                }
+                .message-wrap {
+                    max-width: 90%;
+                }
+                .chat-window {
+                    height: 600px;
+                    overflow-y: auto;
+                    padding: 20px;
+                    border-radius: 15px;
+                    border: 1px solid var(--neutral-200);
+                    background: var(--background-fill-primary);
                 }
                 footer {display: none !important;}
                 .gradio-container {min-height: 100vh !important;}
-                .main {flex-grow: 1;}
+                .main {
+                    flex-grow: 1;
+                    padding: 2rem;
+                }
+                .message {
+                    padding: 1rem;
+                    margin: 0.5rem 0;
+                }
+                .avatar {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    margin-right: 10px;
+                }
+                .timestamp {
+                    font-size: 0.8rem;
+                    color: var(--neutral-500);
+                }
             """
         ) as interface:
             gr.Markdown("""
@@ -246,13 +279,18 @@ class ChatInterface:
             
             chatbot = gr.Chatbot(
                 label="Chat History",
-                height=500,
+                height=600,
                 bubble_full_width=False,
                 show_copy_button=True,
                 render_markdown=True,
                 container=True,
+                layout="bubble",
+                likeable=True,
+                avatar_images=["👤", "🤖"],
                 elem_classes=["chat-window"],
-                type="messages"  # Use the new message format
+                type="messages",
+                show_label=False,
+                rtl=False,
             )
             
             with gr.Row():