Update ui.py

ui.py

@@ -84,7 +84,7 @@ def create_interface(agent):
 
         /* Header with same gradient as send button */
         .header {
-            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%) !important;
+            background: #f50082 !important;
             color: #ffffff !important;
             text-align: center;
             padding: 1rem;
@@ -95,16 +95,33 @@ def create_interface(agent):
         .header h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
         .header p { margin: .5rem 0 0 0; color: rgba(255,255,255,0.9); font-size: .95rem; }
 
+        /* Sidebar styling */
+        .sidebar {
+            background: var(--panel) !important;
+            border-radius: 16px !important;
+            border: 1px solid var(--border) !important;
+            padding: 16px !important;
+            margin-right: 16px !important;
+            min-width: 280px !important;
+        }
+
+        /* Main chat area */
+        .chat-main {
+            display: flex !important;
+            flex-direction: column !important;
+        }
+
         /* Chat container - flexible height for HF Spaces */
         .chat-container {
-            min-height: 400px !important;
-            max-height: 600px !important;
+            min-height: 1000px !important;
+            max-height: 1200px !important;
             height: auto !important;
             background: var(--panel) !important;
             border-radius: 16px !important;
             border: 1px solid var(--border) !important;
             box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
             overflow-y: auto !important;
+            flex: 1 !important;
         }
 
         /* Message row alignment */
@@ -370,6 +387,23 @@ def create_interface(agent):
             background: var(--muted);
         }
 
+        /* Responsive tables */
+        .gradio-container .dataframe {
+            overflow-x: auto !important;
+            max-width: 100% !important;
+        }
+
+        .gradio-container table {
+            min-width: 600px !important; /* Ensure minimum width for readability */
+            font-size: 14px !important;
+        }
+
+        @media (max-width: 768px) {
+            .gradio-container table {
+                font-size: 12px !important;
+            }
+        }
+
         /* Hugging Face Spaces specific fixes */
         .gradio-container {
             min-height: 100vh !important;
@@ -402,31 +436,92 @@ def create_interface(agent):
             min-height: 100% !important;
         }
 
-        /* Responsive */
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            /* Tablet and small laptop adjustments */
+            .sidebar {
+                min-width: 240px !important;
+                margin-right: 12px !important;
+                padding: 12px !important;
+            }
+
+            .chat-container {
+                min-height: 350px !important;
+                max-height: 500px !important;
+            }
+
+            .header h1 {
+                font-size: 1.3rem !important;
+            }
+        }
+
         @media (max-width: 768px) {
+            /* Mobile landscape and small tablets */
+            .gradio-container .tabitem [role="tabpanel"] {
+                flex-direction: column !important;
+            }
+
+            .sidebar {
+                width: 100% !important;
+                margin-right: 0 !important;
+                margin-bottom: 16px !important;
+                order: 2 !important; /* Chat first on mobile */
+            }
+
+            .chat-main {
+                order: 1 !important;
+                width: 100% !important;
+            }
+
             .chat-container {
                 min-height: 300px !important;
                 max-height: 400px !important;
             }
-            
+
             .gradio-container [data-testid="bot"] .message > *,
             .gradio-container [data-testid="user"] .message > * {
                 max-width: 85% !important;
             }
-            
+
             .header h1 {
                 font-size: 1.2rem !important;
             }
+
+            .gradio-container .gr-button {
+                font-size: 13px !important;
+                padding: 12px 16px !important;
+            }
         }
 
         @media (max-width: 480px) {
+            /* Mobile portrait */
+            .chat-container {
+                min-height: 250px !important;
+                max-height: 350px !important;
+            }
+
             .gradio-container [data-testid="bot"] .message > *,
             .gradio-container [data-testid="user"] .message > * {
                 max-width: 90% !important;
+                padding: 10px 12px !important;
             }
-            
-            .send-button {
-                width: 100% !important;
+
+            .sidebar {
+                padding: 8px !important;
+            }
+
+            .gradio-container .gr-button {
+                font-size: 12px !important;
+                padding: 10px 14px !important;
+                margin: 2px !important;
+            }
+
+            .header h1 {
+                font-size: 1.1rem !important;
+            }
+
+            .header p {
+                font-size: 0.9rem !important;
             }
         }
         """
@@ -442,49 +537,47 @@ def create_interface(agent):
         
         # Main Chat Tab
         with gr.Tab("💬 Chat with Agent"):
-            chatbot = gr.Chatbot(
-                height=None,  
-                show_label=False,
-                bubble_full_width=False,
-                type='messages',
-                elem_classes=["chat-container"],
-                container=True  
-            )
-            
-            # Clear chat button
             with gr.Row():
-                clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary", scale=1)
-            
-            # Organized Query Sections
-            gr.Markdown("### 📊 Overdue Analysis Examples")
-            gr.Markdown("*Analyze overdue accounts and risk factors*")
-            
-            with gr.Row():
-                overdue_btn1 = gr.Button("Show me all late-payment customers", elem_classes=["overdue-btn"], scale=1)
-                overdue_btn2 = gr.Button("Which invoices are more than 30 days overdue?", elem_classes=["overdue-btn"], scale=1)
-            with gr.Row():
-                overdue_btn3 = gr.Button("Top 5 customers at risk of default", elem_classes=["overdue-btn"], scale=1)
-                overdue_btn4 = gr.Button("What's the most overdue account?", elem_classes=["overdue-btn"], scale=1)
-            
-            gr.Markdown("### 👥 Customer Segmentation Examples")  
-            gr.Markdown("*Explore customer segments and payment patterns*")
-            
-            with gr.Row():
-                segment_btn1 = gr.Button("Who are the VIPs with unpaid invoices?", elem_classes=["segment-btn"], scale=1)
-                segment_btn2 = gr.Button("Show me all Swedish customers with overdue invoices", elem_classes=["segment-btn"], scale=1)
-            with gr.Row():
-                segment_btn3 = gr.Button("Which customers are repeat late-payers in the last 12 months?", elem_classes=["segment-btn"], scale=1)
-                segment_btn4 = gr.Button("How much total money is outstanding?", elem_classes=["segment-btn"], scale=1)
-            
-            gr.Markdown("### ⚡ Action Examples - AI Agent Email Campaigns")
-            gr.Markdown("*Take action by generating collection emails for multiple customers*")
-            
-            with gr.Row():
-                action_btn1 = gr.Button("Send collection emails to all overdue customers", elem_classes=["action-btn"], scale=1)
-                action_btn2 = gr.Button("Generate bulk emails for VIP customers only", elem_classes=["action-btn"], scale=1)
-            with gr.Row():
-                action_btn3 = gr.Button("Create targeted collection campaign for Swedish customers", elem_classes=["action-btn"], scale=1)
-                action_btn4 = gr.Button("Send emails to high-risk accounts only", elem_classes=["action-btn"], scale=1)
+                # Left Sidebar - Buttons
+                with gr.Column(scale=1, elem_classes=["sidebar"]):
+                    # Clear chat button
+                    clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary", scale=1)
+
+                    # Organized Query Sections
+                    gr.Markdown("### 📊 Overdue Analysis")
+                    gr.Markdown("*Analyze overdue accounts*")
+
+                    overdue_btn1 = gr.Button("Show me all late-payment customers", elem_classes=["overdue-btn"], scale=1)
+                    overdue_btn2 = gr.Button("Which invoices are more than 30 days overdue?", elem_classes=["overdue-btn"], scale=1)
+                    overdue_btn3 = gr.Button("Top 5 customers at risk of default", elem_classes=["overdue-btn"], scale=1)
+                    overdue_btn4 = gr.Button("What's the most overdue account?", elem_classes=["overdue-btn"], scale=1)
+
+                    gr.Markdown("### 👥 Customer Segmentation")
+                    gr.Markdown("*Explore customer segments*")
+
+                    segment_btn1 = gr.Button("Who are the VIPs with unpaid invoices?", elem_classes=["segment-btn"], scale=1)
+                    segment_btn2 = gr.Button("Show me all Swedish customers with overdue invoices", elem_classes=["segment-btn"], scale=1)
+                    segment_btn3 = gr.Button("Which customers are repeat late-payers in the last 12 months?", elem_classes=["segment-btn"], scale=1)
+                    segment_btn4 = gr.Button("How much total money is outstanding?", elem_classes=["segment-btn"], scale=1)
+
+                    gr.Markdown("### ⚡ Action Examples")
+                    gr.Markdown("*AI Agent Email Campaigns*")
+
+                    action_btn1 = gr.Button("Send collection emails to all overdue customers", elem_classes=["action-btn"], scale=1)
+                    action_btn2 = gr.Button("Generate bulk emails for VIP customers only", elem_classes=["action-btn"], scale=1)
+                    action_btn3 = gr.Button("Create targeted collection campaign for Swedish customers", elem_classes=["action-btn"], scale=1)
+                    action_btn4 = gr.Button("Send emails to high-risk accounts only", elem_classes=["action-btn"], scale=1)
+
+                # Right Side - Chat Interface
+                with gr.Column(scale=2, elem_classes=["chat-main"]):
+                    chatbot = gr.Chatbot(
+                        height=None,
+                        show_label=False,
+                        bubble_full_width=False,
+                        type='messages',
+                        elem_classes=["chat-container"],
+                        container=True
+                    )
         
         # Email Activity Log Tab
         with gr.Tab("📧 Email Activity"):