Add application files

app.py

@@ -17,6 +17,7 @@ import gradio as gr
 import asyncio
 import logging
 import json
+import base64
 from pathlib import Path
 from dotenv import load_dotenv
 from datetime import datetime
@@ -512,6 +513,296 @@ input[type="text"], textarea {
 
 .dark input, .dark textarea { background: var(--input-bg) !important; color: var(--text-primary) !important; }
 .dark label, .dark .prose, .dark .prose p { color: var(--text-primary) !important; }
+
+/* ============== RESPONSIVE DESIGN ============== */
+
+/* Tablet and below (max-width: 1024px) */
+@media (max-width: 1024px) {
+    .main-header {
+        padding: 16px 20px;
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+
+    .header-content h1 {
+        font-size: 22px;
+    }
+
+    .header-content p {
+        font-size: 12px;
+    }
+
+    .header-badge {
+        font-size: 11px;
+        padding: 4px 10px;
+    }
+
+    .stat-card {
+        padding: 16px;
+    }
+
+    .stat-value {
+        font-size: 28px;
+    }
+
+    .action-card {
+        padding: 16px;
+    }
+
+    .prospect-card-header {
+        padding: 14px;
+    }
+}
+
+/* Mobile (max-width: 768px) */
+@media (max-width: 768px) {
+    .main-header {
+        padding: 14px 16px;
+        flex-direction: column;
+        text-align: center;
+        gap: 10px;
+    }
+
+    .header-logo {
+        width: 48px;
+        height: 48px;
+    }
+
+    .header-logo img {
+        width: 40px !important;
+        height: 40px !important;
+    }
+
+    .header-content h1 {
+        font-size: 20px;
+        margin-bottom: 4px;
+    }
+
+    .header-content p {
+        font-size: 11px;
+        line-height: 1.3;
+    }
+
+    .header-badge {
+        font-size: 10px;
+        padding: 4px 8px;
+    }
+
+    .stat-card {
+        padding: 12px;
+        border-left-width: 3px;
+    }
+
+    .stat-value {
+        font-size: 24px;
+    }
+
+    .stat-label {
+        font-size: 11px;
+    }
+
+    .action-card {
+        padding: 12px;
+    }
+
+    .action-card h3 {
+        font-size: 15px;
+    }
+
+    .action-card p {
+        font-size: 12px;
+    }
+
+    .prospect-card {
+        border-radius: 10px;
+    }
+
+    .prospect-card-header {
+        padding: 12px;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .prospect-card-title {
+        font-size: 14px;
+    }
+
+    .prospect-card-badge {
+        font-size: 10px;
+        padding: 3px 8px;
+    }
+
+    .prospect-card-details {
+        padding: 12px;
+    }
+
+    .detail-section h4 {
+        font-size: 12px;
+    }
+
+    .detail-section p, .detail-section li {
+        font-size: 13px;
+    }
+
+    /* Progress container mobile */
+    .progress-container {
+        padding: 12px;
+        margin: 8px 0;
+    }
+
+    .progress-header {
+        font-size: 16px;
+        margin-bottom: 12px;
+        padding-bottom: 10px;
+    }
+
+    .progress-section {
+        padding: 10px 12px;
+    }
+
+    .progress-item {
+        font-size: 13px;
+        padding: 5px 0;
+    }
+
+    .progress-detail {
+        font-size: 11px;
+        margin-left: 24px;
+    }
+
+    .progress-summary {
+        padding: 12px;
+    }
+
+    .progress-summary h3 {
+        font-size: 14px;
+    }
+
+    .progress-summary td {
+        padding: 5px 6px;
+        font-size: 13px;
+    }
+
+    /* Chat section mobile */
+    .chatbot {
+        height: 350px !important;
+    }
+
+    /* Footer mobile */
+    .footer {
+        padding: 16px;
+        margin-top: 20px;
+    }
+
+    .footer p {
+        font-size: 12px;
+    }
+
+    /* Tab labels mobile */
+    .tab-nav button {
+        font-size: 12px !important;
+        padding: 8px 12px !important;
+    }
+}
+
+/* Small mobile (max-width: 480px) */
+@media (max-width: 480px) {
+    .main-header {
+        padding: 12px;
+        border-radius: 10px;
+        margin-bottom: 12px;
+    }
+
+    .header-logo {
+        width: 40px;
+        height: 40px;
+    }
+
+    .header-logo img {
+        width: 32px !important;
+        height: 32px !important;
+    }
+
+    .header-content h1 {
+        font-size: 18px;
+    }
+
+    .header-content p {
+        font-size: 10px;
+    }
+
+    .stat-card {
+        padding: 10px;
+    }
+
+    .stat-value {
+        font-size: 20px;
+    }
+
+    .stat-label {
+        font-size: 10px;
+    }
+
+    .action-card {
+        padding: 10px;
+    }
+
+    .action-card h3 {
+        font-size: 14px;
+    }
+
+    .prospect-card-header {
+        padding: 10px;
+    }
+
+    .prospect-card-title {
+        font-size: 13px;
+    }
+
+    .progress-header {
+        font-size: 14px;
+    }
+
+    .progress-item {
+        font-size: 12px;
+    }
+
+    /* Example prompts mobile - make them scrollable */
+    .action-card ul {
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .action-card li {
+        font-size: 11px;
+        line-height: 1.6;
+    }
+}
+
+/* Ensure Gradio rows stack on mobile */
+@media (max-width: 768px) {
+    .gr-row {
+        flex-direction: column !important;
+    }
+
+    .gr-column {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+}
+
+/* Fix Gradio tab overflow on mobile */
+@media (max-width: 768px) {
+    .tabs {
+        overflow-x: auto;
+    }
+
+    .tab-nav {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
 """
 
 
@@ -2203,13 +2494,38 @@ def get_prospect_choices():
 # ============================================================================
 # GRADIO UI
 # ============================================================================
+def get_logo_base64():
+    """Load logo image as base64 for embedding in HTML"""
+    logo_path = Path(__file__).parent / "assets" / "cx_ai_agent_logo_512.png"
+    if logo_path.exists():
+        with open(logo_path, "rb") as f:
+            return base64.b64encode(f.read()).decode("utf-8")
+    return None
+
+def get_favicon_base64():
+    """Load favicon as base64 for embedding"""
+    favicon_path = Path(__file__).parent / "assets" / "cx_ai_agent_favicon_32.png"
+    if favicon_path.exists():
+        with open(favicon_path, "rb") as f:
+            return base64.b64encode(f.read()).decode("utf-8")
+    return None
+
+
 def create_app():
 
+    # Load logo as base64
+    logo_b64 = get_logo_base64()
+    favicon_b64 = get_favicon_base64()
+
     # Custom head HTML for favicon and meta tags
-    head_html = """
-    <link rel="icon" type="image/png" sizes="32x32" href="/file=assets/cx_ai_agent_favicon_32.png">
-    <link rel="apple-touch-icon" sizes="192x192" href="/file=assets/cx_ai_agent_appicon_192.png">
+    favicon_html = ""
+    if favicon_b64:
+        favicon_html = f'<link rel="icon" type="image/png" href="data:image/png;base64,{favicon_b64}">'
+
+    head_html = f"""
+    {favicon_html}
     <meta name="theme-color" content="#2563eb">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     """
 
     with gr.Blocks(
@@ -2219,11 +2535,13 @@ def create_app():
         head=head_html
     ) as demo:
 
-        # Header with logo
-        gr.HTML("""
+        # Header with logo (using base64 encoded image)
+        logo_img = f'<img src="data:image/png;base64,{logo_b64}" alt="CX AI Agent" style="width: 48px; height: 48px; border-radius: 8px;">' if logo_b64 else '<div style="width:48px;height:48px;background:rgba(255,255,255,0.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;">🤖</div>'
+
+        gr.HTML(f"""
         <div class="main-header">
             <div class="header-logo">
-                <img src="/file=assets/cx_ai_agent_logo_512.png" alt="CX AI Agent" style="width: 48px; height: 48px; border-radius: 8px;">
+                {logo_img}
             </div>
             <div class="header-content">
                 <h1>CX AI Agent</h1>