Update app.py

app.py

@@ -157,66 +157,611 @@ def create_qna_interface():
     chatbot = QnAChatbot()
     print("🎨 Setting up UI components...")
     
-    # Custom CSS for better styling
+    # Enhanced Custom CSS for modern, professional styling
     custom_css = """
+    /* Import Google Fonts */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+    
+    /* CSS Variables for Theme Support */
+    :root {
+        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+        --glass-bg: rgba(255, 255, 255, 0.95);
+        --glass-border: rgba(255, 255, 255, 0.2);
+        --text-primary: #2d3748;
+        --text-secondary: #4a5568;
+        --text-light: #718096;
+        --bg-light: #f7fafc;
+        --bg-card: #ffffff;
+        --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
+        --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
+        --border-radius: 12px;
+        --border-radius-lg: 20px;
+        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Global Styles */
+    * {
+        font-family: 'Inter', sans-serif !important;
+        box-sizing: border-box !important;
+    }
+    
+    /* Main Container with Enhanced Background */
     .gradio-container {
-        max-width: 1200px !important;
-        margin: auto !important;
+        max-width: 1400px !important;
+        margin: 0 auto !important;
+        background: 
+            radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
+            radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3), transparent 50%),
+            radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3), transparent 50%),
+            var(--primary-gradient) !important;
+        min-height: 100vh !important;
+        padding: 20px !important;
+        position: relative !important;
+        overflow-x: hidden !important;
+    }
+    
+    /* Animated Background Particles */
+    .gradio-container::before {
+        content: '' !important;
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='53' cy='7' r='1'/%3E%3Ccircle cx='7' cy='53' r='1'/%3E%3Ccircle cx='53' cy='53' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
+        animation: float 20s ease-in-out infinite !important;
+        pointer-events: none !important;
+        z-index: 0 !important;
+    }
+    
+    /* Main Content Area with Glass Effect */
+    .main-content {
+        background: var(--glass-bg) !important;
+        backdrop-filter: blur(20px) !important;
+        -webkit-backdrop-filter: blur(20px) !important;
+        border-radius: var(--border-radius-lg) !important;
+        box-shadow: 
+            var(--shadow-lg),
+            inset 0 1px 0 var(--glass-border) !important;
+        padding: 40px !important;
+        margin: 20px 0 !important;
+        position: relative !important;
+        z-index: 1 !important;
+        border: 1px solid var(--glass-border) !important;
+        transition: var(--transition) !important;
+    }
+    
+    .main-content:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 
+            0 25px 50px rgba(0, 0, 0, 0.15),
+            inset 0 1px 0 var(--glass-border) !important;
+    }
+    
+    /* Enhanced Header with Animations */
+    .markdown h1 {
+        background: var(--primary-gradient) !important;
+        -webkit-background-clip: text !important;
+        -webkit-text-fill-color: transparent !important;
+        background-clip: text !important;
+        font-size: 3rem !important;
+        font-weight: 800 !important;
+        text-align: center !important;
+        margin-bottom: 1.5rem !important;
+        position: relative !important;
+        animation: titleGlow 3s ease-in-out infinite alternate !important;
+    }
+    
+    .markdown h1::after {
+        content: '' !important;
+        position: absolute !important;
+        bottom: -10px !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        width: 100px !important;
+        height: 4px !important;
+        background: var(--primary-gradient) !important;
+        border-radius: 2px !important;
+        animation: pulse 2s ease-in-out infinite !important;
+    }
+    
+    /* Enhanced Chat Interface */
+    .chatbot {
+        border: none !important;
+        border-radius: var(--border-radius) !important;
+        box-shadow: var(--shadow-md) !important;
+        background: var(--bg-card) !important;
+        overflow: hidden !important;
+        position: relative !important;
+    }
+    
+    /* Chat Messages with Better Styling */
+    .chatbot .message-wrap {
+        padding: 20px !important;
+        margin: 15px !important;
+        border-radius: 18px !important;
+        max-width: 85% !important;
+        animation: messageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        position: relative !important;
+        word-wrap: break-word !important;
+    }
+    
+    .chatbot .message.user {
+        background: var(--primary-gradient) !important;
+        color: white !important;
+        margin-left: auto !important;
+        margin-right: 15px !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+        border-bottom-right-radius: 5px !important;
+    }
+    
+    .chatbot .message.user::before {
+        content: '🧑‍💻' !important;
+        position: absolute !important;
+        top: -25px !important;
+        right: 10px !important;
+        font-size: 16px !important;
+        background: var(--bg-card) !important;
+        padding: 5px 8px !important;
+        border-radius: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    .chatbot .message.bot {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        color: var(--text-primary) !important;
+        margin-right: auto !important;
+        margin-left: 15px !important;
+        border: 1px solid #e2e8f0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        border-bottom-left-radius: 5px !important;
+    }
+    
+    .chatbot .message.bot::before {
+        content: '🤖' !important;
+        position: absolute !important;
+        top: -25px !important;
+        left: 10px !important;
+        font-size: 16px !important;
+        background: var(--bg-card) !important;
+        padding: 5px 8px !important;
+        border-radius: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    /* Typing Indicator */
+    .typing-indicator {
+        display: flex !important;
+        align-items: center !important;
+        padding: 15px 20px !important;
+        margin: 15px !important;
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        border-radius: 18px !important;
+        max-width: 85% !important;
+        margin-right: auto !important;
+        margin-left: 15px !important;
+        border: 1px solid #e2e8f0 !important;
+        animation: messageSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+    
+    .typing-dots {
+        display: flex !important;
+        align-items: center !important;
+        gap: 4px !important;
+    }
+    
+    .typing-dots span {
+        width: 8px !important;
+        height: 8px !important;
+        border-radius: 50% !important;
+        background: var(--text-light) !important;
+        animation: typingDots 1.4s ease-in-out infinite both !important;
+    }
+    
+    .typing-dots span:nth-child(1) { animation-delay: -0.32s !important; }
+    .typing-dots span:nth-child(2) { animation-delay: -0.16s !important; }
+    .typing-dots span:nth-child(3) { animation-delay: 0s !important; }
+    
+    /* Enhanced Input Areas */
+    .textbox input, .textbox textarea {
+        border: 2px solid #e2e8f0 !important;
+        border-radius: var(--border-radius) !important;
+        padding: 18px 24px !important;
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+        transition: var(--transition) !important;
+        background: var(--bg-card) !important;
+        box-shadow: var(--shadow-sm) !important;
+        font-family: 'Inter', sans-serif !important;
     }
-    .chat-message {
+    
+    .textbox input:focus, .textbox textarea:focus {
+        border-color: #667eea !important;
+        box-shadow: 
+            0 0 0 4px rgba(102, 126, 234, 0.1),
+            var(--shadow-md) !important;
+        outline: none !important;
+        transform: translateY(-1px) !important;
+        background: #ffffff !important;
+    }
+    
+    /* Enhanced Buttons with Micro-interactions */
+    .btn {
+        border-radius: var(--border-radius) !important;
+        font-weight: 600 !important;
+        text-transform: none !important;
+        letter-spacing: 0.3px !important;
+        transition: var(--transition) !important;
+        border: none !important;
+        box-shadow: var(--shadow-sm) !important;
+        padding: 14px 28px !important;
+        font-size: 16px !important;
+        position: relative !important;
+        overflow: hidden !important;
+        cursor: pointer !important;
+    }
+    
+    .btn::before {
+        content: '' !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: -100% !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
+        transition: left 0.5s !important;
+    }
+    
+    .btn:hover::before {
+        left: 100% !important;
+    }
+    
+    .btn-primary {
+        background: var(--primary-gradient) !important;
+        color: white !important;
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3) !important;
+    }
+    
+    .btn-primary:hover {
+        transform: translateY(-3px) scale(1.02) !important;
+        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4) !important;
+    }
+    
+    .btn-primary:active {
+        transform: translateY(-1px) scale(0.98) !important;
+    }
+    
+    .btn-secondary {
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
+        color: var(--text-secondary) !important;
+        border: 1px solid #e2e8f0 !important;
+    }
+    
+    .btn-secondary:hover {
+        transform: translateY(-2px) !important;
+        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    
+    /* Enhanced File Upload with Drag & Drop Animation */
+    .file-upload {
+        border: 3px dashed #cbd5e0 !important;
+        border-radius: var(--border-radius) !important;
+        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
+        padding: 40px !important;
+        text-align: center !important;
+        transition: var(--transition) !important;
+        position: relative !important;
+        overflow: hidden !important;
+        cursor: pointer !important;
+    }
+    
+    .file-upload:hover {
+        border-color: #667eea !important;
+        background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%) !important;
+        transform: translateY(-2px) scale(1.01) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    
+    .file-upload::before {
+        content: '📁' !important;
+        font-size: 4rem !important;
+        display: block !important;
+        margin-bottom: 15px !important;
+        animation: fileFloat 3s ease-in-out infinite !important;
+    }
+    
+    .file-upload::after {
+        content: 'Drag files here or click to browse' !important;
+        position: absolute !important;
+        bottom: 15px !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        font-size: 14px !important;
+        color: var(--text-light) !important;
+        font-weight: 500 !important;
+    }
+    
+    /* Enhanced Examples Section */
+    .examples {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 30px !important;
+        margin: 25px 0 !important;
+        border: 1px solid #e2e8f0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        position: relative !important;
+    }
+    
+    .examples::before {
+        content: '💡' !important;
+        position: absolute !important;
+        top: -15px !important;
+        left: 30px !important;
+        background: var(--bg-card) !important;
         padding: 10px !important;
-        margin: 5px 0 !important;
-        border-radius: 10px !important;
+        border-radius: 50% !important;
+        font-size: 20px !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    .examples h3 {
+        color: #667eea !important;
+        font-weight: 700 !important;
+        margin-bottom: 20px !important;
+        font-size: 1.3rem !important;
+        margin-left: 20px !important;
+    }
+    
+    /* Feature Cards with Hover Effects */
+    .feature-card {
+        background: var(--bg-card) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 25px !important;
+        margin: 15px 0 !important;
+        box-shadow: var(--shadow-sm) !important;
+        border-left: 4px solid transparent !important;
+        transition: var(--transition) !important;
+        cursor: pointer !important;
+    }
+    
+    .feature-card:hover {
+        transform: translateY(-5px) translateX(5px) !important;
+        box-shadow: var(--shadow-md) !important;
     }
-    .user-message {
-        background-color: #e3f2fd !important;
-        margin-left: 20% !important;
+    
+    .feature-card.research {
+        border-left-color: #667eea !important;
+    }
+    
+    .feature-card.code {
+        border-left-color: #48bb78 !important;
+    }
+    
+    .feature-card.data {
+        border-left-color: #ed8936 !important;
+    }
+    
+    .feature-card.image {
+        border-left-color: #dd6b20 !important;
+    }
+    
+    /* Status Indicator with Pulse Animation */
+    .status-indicator {
+        display: inline-block !important;
+        width: 12px !important;
+        height: 12px !important;
+        border-radius: 50% !important;
+        background: radial-gradient(circle, #48bb78, #38a169) !important;
+        margin-right: 12px !important;
+        animation: statusPulse 2s ease-in-out infinite !important;
+        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7) !important;
+    }
+    
+    /* Enhanced Footer */
+    .footer {
+        background: var(--glass-bg) !important;
+        backdrop-filter: blur(10px) !important;
+        border-radius: var(--border-radius) !important;
+        padding: 30px !important;
+        margin-top: 40px !important;
+        text-align: center !important;
+        border: 1px solid var(--glass-border) !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    
+    /* Advanced Animations */
+    @keyframes titleGlow {
+        0%, 100% { text-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
+        50% { text-shadow: 0 0 30px rgba(102, 126, 234, 0.8), 0 0 40px rgba(118, 75, 162, 0.6); }
+    }
+    
+    @keyframes messageSlideIn {
+        from {
+            opacity: 0;
+            transform: translateY(30px) scale(0.95);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
+    
+    @keyframes typingDots {
+        0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
+        40% { transform: scale(1.2); opacity: 1; }
+    }
+    
+    @keyframes fileFloat {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+    }
+    
+    @keyframes statusPulse {
+        0% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
+        }
+        70% {
+            transform: scale(1);
+            box-shadow: 0 0 0 10px rgba(72, 187, 120, 0);
+        }
+        100% {
+            transform: scale(0.95);
+            box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
+        }
+    }
+    
+    @keyframes float {
+        0%, 100% { transform: translateY(0px) rotate(0deg); }
+        33% { transform: translateY(-10px) rotate(1deg); }
+        66% { transform: translateY(-5px) rotate(-1deg); }
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1) scaleX(1); }
+        50% { transform: scale(1.05) scaleX(1.1); }
+    }
+    
+    /* Responsive Design Enhancements */
+    @media (max-width: 1024px) {
+        .gradio-container { padding: 15px !important; }
+        .main-content { padding: 25px !important; margin: 15px 0 !important; }
+        .markdown h1 { font-size: 2.5rem !important; }
     }
-    .bot-message {
-        background-color: #f5f5f5 !important;
-        margin-right: 20% !important;
+    
+    @media (max-width: 768px) {
+        .gradio-container { padding: 10px !important; }
+        .main-content { padding: 20px !important; margin: 10px 0 !important; }
+        .chatbot .message-wrap { max-width: 90% !important; margin: 10px !important; padding: 15px !important; }
+        .markdown h1 { font-size: 2rem !important; }
+        .btn { padding: 12px 20px !important; font-size: 14px !important; }
+        .file-upload { padding: 30px 20px !important; }
+    }
+    
+    @media (max-width: 480px) {
+        .markdown h1 { font-size: 1.8rem !important; }
+        .chatbot .message-wrap { margin: 8px !important; padding: 12px !important; }
+        .main-content { padding: 15px !important; }
+    }
+    
+    /* Custom Scrollbar Enhancement */
+    ::-webkit-scrollbar { width: 12px; }
+    ::-webkit-scrollbar-track { 
+        background: rgba(241, 241, 241, 0.5); 
+        border-radius: 6px; 
+    }
+    ::-webkit-scrollbar-thumb { 
+        background: var(--primary-gradient); 
+        border-radius: 6px; 
+        border: 2px solid rgba(255, 255, 255, 0.2);
+    }
+    ::-webkit-scrollbar-thumb:hover { 
+        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); 
+    }
+    
+    /* Loading States */
+    .loading { animation: pulse 2s infinite !important; }
+    .processing { 
+        position: relative !important;
+        overflow: hidden !important;
+    }
+    .processing::after {
+        content: '' !important;
+        position: absolute !important;
+        top: 0 !important;
+        left: -100% !important;
+        width: 100% !important;
+        height: 100% !important;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
+        animation: shimmer 2s infinite !important;
+    }
+    
+    @keyframes shimmer {
+        0% { left: -100%; }
+        100% { left: 100%; }
+    }
+    
+    /* Dark mode support (future enhancement) */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --glass-bg: rgba(26, 32, 44, 0.95);
+            --text-primary: #e2e8f0;
+            --text-secondary: #cbd5e0;
+            --text-light: #a0aec0;
+            --bg-card: #2d3748;
+            --bg-light: #1a202c;
+        }
     }
     """
     
-    with gr.Blocks(css=custom_css, title="GAIA Agent - Q&A Chatbot") as demo:
-        gr.Markdown(
-            """
-            # 🤖 GAIA Agent - Q&A Chatbot
-            
-            Welcome to the GAIA Agent Q&A interface! Ask me anything and I'll help you find the answer using my various tools and capabilities.
-            
-            **What I can do:**
-            - 🔍 Search the web, Wikipedia, and academic papers
-            - 🧮 Perform mathematical calculations
-            - 💻 Execute code in multiple languages (Python, Bash, SQL, C, Java)
-            - 📊 Analyze CSV and Excel files
-            - 🖼️ Process and analyze images (JPG, PNG, GIF, etc.)
-            - 📄 Extract text from images (OCR)
-            - 📁 Handle file uploads and processing (PDF, DOC, TXT, etc.)
-            - 📈 Create visualizations and charts
-            - 🔧 Multi-file analysis and comparison
-            - And much more!
-            
-            ---
-            """
-        )
+    with gr.Blocks(css=custom_css, title="GAIA Agent - Q&A Chatbot", theme=gr.themes.Soft()) as demo:
+        # Header with enhanced styling
+        with gr.Row(elem_classes="main-content"):
+            gr.Markdown(
+                """
+                <h1 align="center">🤖 GAIA Agent - Advanced Q&A Chatbot</h1>
+                
+                Welcome to the **GAIA Agent Q&A interface**! Ask me anything and I'll help you find the answer using my various tools and capabilities.
+                
+                ### 🌟 **What I can do:**
+                
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0;">
+                    <div class="feature-card research" style="background: linear-gradient(135deg, #f8f9ff 0%, #e8eeff 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #667eea; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">🔍</span>
+                            <strong style="font-size: 1.1rem; color: #667eea;">Research & Search</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Web search, Wikipedia, academic papers, arXiv research</p>
+                    </div>
+                    <div class="feature-card code" style="background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #48bb78; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">💻</span>
+                            <strong style="font-size: 1.1rem; color: #48bb78;">Code Execution</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Python, Bash, SQL, C, Java with real-time results</p>
+                    </div>
+                    <div class="feature-card data" style="background: linear-gradient(135deg, #fffaf0 0%, #fbd38d 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #ed8936; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">📊</span>
+                            <strong style="font-size: 1.1rem; color: #ed8936;">Data Analysis</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">CSV, Excel, visualizations, statistical analysis</p>
+                    </div>
+                    <div class="feature-card image" style="background: linear-gradient(135deg, #fef5e7 0%, #f6ad55 100%); padding: 25px; border-radius: 12px; border-left: 4px solid #dd6b20; cursor: pointer; transition: all 0.3s ease;">
+                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
+                            <span style="font-size: 2rem; margin-right: 15px;">🖼️</span>
+                            <strong style="font-size: 1.1rem; color: #dd6b20;">Image Processing</strong>
+                        </div>
+                        <p style="margin: 0; color: #718096; font-size: 14px; line-height: 1.5;">Analysis, OCR, transformations, generation</p>
+                    </div>
+                </div>
+                
+                ---
+                """
+            )
         
-        # Chat interface
-        with gr.Row():
+        # Chat interface with enhanced styling
+        with gr.Row(elem_classes="main-content"):
             with gr.Column(scale=1):
                 chatbot_interface = gr.Chatbot(
-                    label="Conversation",
-                    height=500,
+                    label="💬 Conversation",
+                    height=600,
                     show_label=True,
                     container=True,
-                    bubble_full_width=False
+                    bubble_full_width=False,
+                    elem_classes="chatbot"
                 )
         
-        # File upload section
-        with gr.Row():
+        # File upload section with enhanced styling
+        with gr.Row(elem_classes="main-content"):
             with gr.Column():
                 file_upload = gr.File(
-                    label="📁 Upload Files (Images, Documents, CSV, Excel, etc.)",
+                    label="📁 Upload Files - Drag & drop or click to upload images, documents, CSV, Excel files, etc.",
                     file_count="multiple",
                     file_types=[
                         ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp",  # Images
@@ -224,29 +769,35 @@ def create_qna_interface():
                         ".csv", ".xlsx", ".xls",  # Data files
                         ".pdf", ".doc", ".docx"  # Documents
                     ],
-                    height=100
+                    height=120,
+                    elem_classes="file-upload"
                 )
         
-        with gr.Row():
+        # Input and buttons with enhanced styling
+        with gr.Row(elem_classes="main-content"):
             with gr.Column(scale=8):
                 question_input = gr.Textbox(
-                    label="Ask a question",
+                    label="💭 Ask a question",
                     placeholder="Type your question here or upload files above... (e.g., 'What is the capital of France?', 'Analyze this image', 'Summarize this document')",
-                    lines=2,
-                    max_lines=5
+                    lines=3,
+                    max_lines=5,
+                    elem_classes="textbox"
                 )
-            with gr.Column(scale=1, min_width=100):
-                submit_btn = gr.Button("Send", variant="primary", size="lg")
+            with gr.Column(scale=2, min_width=120):
+                submit_btn = gr.Button("🚀 Send", variant="primary", size="lg", elem_classes="btn btn-primary")
         
-        with gr.Row():
-            clear_btn = gr.Button("Clear History", variant="secondary")
-            clear_files_btn = gr.Button("Clear Files", variant="secondary")
-            
-        # Example questions
-        with gr.Row():
-            gr.Markdown("### 💡 Example Questions:")
+        with gr.Row(elem_classes="main-content"):
+            with gr.Column(scale=1):
+                clear_btn = gr.Button("🧹 Clear History", variant="secondary", elem_classes="btn btn-secondary")
+            with gr.Column(scale=1):
+                clear_files_btn = gr.Button("🗑️ Clear Files", variant="secondary", elem_classes="btn btn-secondary")
+            with gr.Column(scale=1):
+                export_btn = gr.Button("💾 Export Chat", variant="secondary", elem_classes="btn btn-secondary")
+                
+        # Hidden download component for chat export
+        download_file = gr.File(visible=False)
             
-        with gr.Row():
+        with gr.Row(elem_classes="main-content"):
             with gr.Column():
                 gr.Examples(
                     examples=[
@@ -257,7 +808,7 @@ def create_qna_interface():
                         "Explain quantum computing in simple terms",
                     ],
                     inputs=question_input,
-                    label="General Questions"
+                    label="🌐 General Questions"
                 )
             with gr.Column():
                 gr.Examples(
@@ -269,7 +820,7 @@ def create_qna_interface():
                         "What are the benefits of renewable energy?",
                     ],
                     inputs=question_input,
-                    label="Research & Analysis"
+                    label="🔬 Research & Analysis"
                 )
             with gr.Column():
                 gr.Examples(
@@ -281,7 +832,7 @@ def create_qna_interface():
                         "What insights can you find in this Excel file?",
                     ],
                     inputs=question_input,
-                    label="File Analysis"
+                    label="📁 File Analysis"
                 )
         
         # Event handlers
@@ -300,6 +851,47 @@ def create_qna_interface():
         def clear_files():
             print("🗑️  UI: Clear files button clicked")
             return None
+            
+        def export_conversation(history):
+            """Export conversation history to a text file"""
+            print("💾 UI: Export conversation button clicked")
+            if not history:
+                print("⚠️  No conversation to export")
+                return None
+                
+            try:
+                import tempfile
+                import datetime
+                
+                # Create export content
+                timestamp = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
+                export_content = f"# GAIA Agent Conversation Export\n"
+                export_content += f"Export Date: {datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n"
+                export_content += f"Total Messages: {len(history)}\n\n"
+                export_content += "=" * 50 + "\n\n"
+                
+                for i, (user_msg, bot_msg) in enumerate(history, 1):
+                    export_content += f"## Message {i}\n\n"
+                    export_content += f"**User:** {user_msg}\n\n"
+                    export_content += f"**Assistant:** {bot_msg}\n\n"
+                    export_content += "-" * 30 + "\n\n"
+                
+                # Save to temporary file
+                temp_file = tempfile.NamedTemporaryFile(
+                    mode='w', 
+                    suffix=f'_gaia_chat_export_{timestamp}.md',
+                    delete=False,
+                    encoding='utf-8'
+                )
+                temp_file.write(export_content)
+                temp_file.close()
+                
+                print(f"📄 Conversation exported to: {temp_file.name}")
+                return temp_file.name
+                
+            except Exception as e:
+                print(f"❌ Error exporting conversation: {e}")
+                return None
         
         # Connect the events
         submit_btn.click(
@@ -328,23 +920,40 @@ def create_qna_interface():
             show_progress=False
         )
         
-        # Footer
-        gr.Markdown(
-            """
-            ---
-            
-            **Note:** This agent uses various tools and APIs to provide comprehensive answers. 
-            Processing complex questions and file analysis may take some time. Please be patient!
-            
-            **Supported file types:** 
-            - **Images:** JPG, PNG, GIF, BMP, WebP
-            - **Documents:** PDF, DOC, DOCX, TXT, MD
-            - **Data files:** CSV, Excel (XLS, XLSX)
-            - **Code files:** Python, JavaScript, HTML, CSS, JSON, XML
-            
-            **Powered by:** LangGraph, Groq, and various specialized tools
-            """
+        export_btn.click(
+            fn=export_conversation,
+            inputs=[chatbot_interface],
+            outputs=[download_file],
+            show_progress=True
         )
+        
+        # Enhanced Footer with better styling
+        with gr.Row(elem_classes="footer"):
+            gr.Markdown(
+                """
+                ### 📋 **Important Information**
+                
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">
+                    <div style="text-align: left;">
+                        <strong>⏱️ Processing Time</strong><br>
+                        <small>Complex questions may take time. Please be patient!</small>
+                    </div>
+                    <div style="text-align: left;">
+                        <strong>📁 Supported Files</strong><br>
+                        <small>Images, Documents, CSV, Excel, Code files</small>
+                    </div>
+                    <div style="text-align: left;">
+                        <strong>🔧 Powered By</strong><br>
+                        <small>LangGraph, Groq, and specialized AI tools</small>
+                    </div>
+                </div>
+                
+                <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; text-align: center;">
+                    <span style="color: #667eea; font-weight: 600;">🤖 GAIA Agent</span> - 
+                    <span style="color: #718096;">Advanced AI Assistant for Complex Tasks</span>
+                </div>
+                """
+            )
     
     return demo