Update ui/ui_generators.py

ui/ui_generators.py

@@ -521,7 +521,7 @@ def build_home_tab_ui():
                 
             with gr.Column():
                 btn_help = gr.Button("📚 Documentation", variant="secondary", size="lg", 
-                                     elem_classes="nav-button", scale=1)
+                                         elem_classes="nav-button", scale=1)
 
         # How it works section with enhanced styling
         gr.HTML("""
@@ -662,3 +662,361 @@ def build_analytics_tab_plot_area(plot_configs):
     
     return plot_ui_objects, section_titles_map
 
+
+def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
+    """
+    Creates an enhanced report tab with Medium-style design for optimal readability.
+    This function returns the Gradio components that will be updated.
+    """
+
+    # Custom CSS for Medium-style design
+    report_css = """
+    <style>
+    /* Medium-style Report Container */
+    .report-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 40px 20px;
+        font-family: 'Georgia', 'Charter', 'Times New Roman', serif;
+        line-height: 1.6;
+        color: #292929;
+        background: #ffffff;
+    }
+    
+    /* Header Section */
+    .report-header {
+        text-align: center;
+        margin-bottom: 48px;
+        padding-bottom: 24px;
+        border-bottom: 1px solid #e6e6e6;
+    }
+    
+    .report-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 16px;
+        letter-spacing: -0.02em;
+    }
+    
+    .report-subtitle {
+        font-size: 1.2rem;
+        color: #6b6b6b;
+        font-weight: 400;
+        margin-bottom: 24px;
+    }
+    
+    /* Status Badge */
+    .status-badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 8px 16px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        margin-bottom: 16px;
+    }
+    
+    .status-badge::before {
+        content: "�";
+        margin-right: 8px;
+    }
+    
+    /* Report Selection Area */
+    .report-selection {
+        background: #f8f9fa;
+        padding: 32px;
+        border-radius: 12px;
+        margin-bottom: 40px;
+        border: 1px solid #e9ecef;
+    }
+    
+    .selection-title {
+        font-size: 1.3rem;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .selection-title::before {
+        content: "📚";
+        margin-right: 12px;
+        font-size: 1.5rem;
+    }
+    
+    .selection-description {
+        color: #6b6b6b;
+        margin-bottom: 24px;
+        font-size: 1.05rem;
+    }
+    
+    /* Report Content Area */
+    .report-content {
+        background: white;
+        padding: 0;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
+        border: 1px solid #e9ecef;
+        min-height: 400px;
+    }
+    
+    .report-content .markdown {
+        padding: 40px;
+        font-size: 1.1rem;
+        line-height: 1.8;
+    }
+    
+    /* Typography Enhancements */
+    .report-content h1 {
+        font-size: 2.2rem;
+        font-weight: 700;
+        color: #1a1a1a;
+        margin-bottom: 24px;
+        margin-top: 0;
+        letter-spacing: -0.02em;
+    }
+    
+    .report-content h2 {
+        font-size: 1.8rem;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin-top: 48px;
+        margin-bottom: 20px;
+        padding-bottom: 12px;
+        border-bottom: 2px solid #e6e6e6;
+    }
+    
+    .report-content h3 {
+        font-size: 1.4rem;
+        font-weight: 600;
+        color: #2c2c2c;
+        margin-top: 36px;
+        margin-bottom: 16px;
+    }
+    
+    .report-content p {
+        margin-bottom: 20px;
+        color: #292929;
+        font-size: 1.1rem;
+    }
+    
+    .report-content ul, .report-content ol {
+        margin-bottom: 20px;
+        padding-left: 24px;
+    }
+    
+    .report-content li {
+        margin-bottom: 8px;
+        color: #292929;
+    }
+    
+    .report-content strong {
+        font-weight: 600;
+        color: #1a1a1a;
+    }
+    
+    .report-content em {
+        font-style: italic;
+        color: #4a4a4a;
+    }
+    
+    /* Quote Styling */
+    .report-content blockquote {
+        border-left: 4px solid #667eea;
+        padding-left: 20px;
+        margin: 24px 0;
+        font-style: italic;
+        color: #4a4a4a;
+        background: #f8f9fa;
+        padding: 20px;
+        border-radius: 4px;
+    }
+    
+    /* Code Styling */
+    .report-content code {
+        background: #f1f3f4;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', monospace;
+        font-size: 0.9em;
+        color: #d73a49;
+    }
+    
+    /* Empty State */
+    .empty-state {
+        text-align: center;
+        padding: 80px 40px;
+        color: #6b6b6b;
+    }
+    
+    .empty-state-icon {
+        font-size: 4rem;
+        margin-bottom: 24px;
+        opacity: 0.6;
+    }
+    
+    .empty-state-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 12px;
+        color: #4a4a4a;
+    }
+    
+    .empty-state-description {
+        font-size: 1.1rem;
+        line-height: 1.6;
+        max-width: 400px;
+        margin: 0 auto;
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .report-container {
+            padding: 24px 16px;
+        }
+        
+        .report-title {
+            font-size: 2rem;
+        }
+        
+        .report-selection {
+            padding: 24px;
+        }
+        
+        .report-content .markdown {
+            padding: 24px;
+        }
+        
+        .report-content h1 {
+            font-size: 1.8rem;
+        }
+        
+        .report-content h2 {
+            font-size: 1.5rem;
+        }
+        
+        .empty-state {
+            padding: 60px 20px;
+        }
+    }
+    
+    /* Gradio Component Overrides */
+    .gradio-container .report-content .markdown {
+        background: transparent !important;
+        border: none !important;
+    }
+    
+    /* Dropdown Styling */
+    .report-selection .gr-dropdown {
+        background: white;
+        border: 2px solid #e9ecef;
+        border-radius: 8px;
+        font-size: 1.05rem;
+    }
+    
+    .report-selection .gr-dropdown:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    /* Loading Animation */
+    .loading-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        color: #6b6b6b;
+    }
+    
+    .loading-indicator::before {
+        content: "⏳";
+        margin-right: 12px;
+        animation: spin 2s linear infinite;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    </style>
+    """
+    
+    # Inject custom CSS
+    gr.HTML(report_css)
+    
+    # Main container
+    with gr.Column(elem_classes=["report-container"]):
+        # Header section
+        with gr.Column(elem_classes=["report-header"]):
+            gr.HTML("""
+                <div class="report-title">📊 Comprehensive Analysis Report</div>
+                <div class="report-subtitle">AI-Generated Insights from Your LinkedIn Data</div>
+                <div class="status-badge">Generated from Bubble.io</div>
+            """)
+        
+        # Report selection section
+        with gr.Column(elem_classes=["report-selection"]):
+            gr.HTML("""
+                <div class="selection-title">Report Library</div>
+                <div class="selection-description">
+                    Select a pre-generated report from your analysis library to view detailed insights, 
+                    trends, and recommendations based on your LinkedIn organization data.
+                </div>
+            """)
+            
+            # Status indicator
+            agentic_pipeline_status_md = gr.Markdown(
+                "🔄 **Status:** Loading report data...", 
+                elem_classes=["loading-indicator"]
+            )
+            
+            # Report selector dropdown
+            with gr.Row():
+                report_selector_dd = gr.Dropdown(
+                    label="📋 Select Report",
+                    choices=[],
+                    interactive=True,
+                    info="Choose from your available analysis reports",
+                    elem_classes=["report-dropdown"]
+                )
+        
+        # Report content display area
+        with gr.Column(elem_classes=["report-content"]):
+            agentic_report_display_md = gr.Markdown(
+                """
+                <div class="empty-state">
+                    <div class="empty-state-icon">📄</div>
+                    <div class="empty-state-title">No Report Selected</div>
+                    <div class="empty-state-description">
+                        Please select a report from the library above to view its detailed analysis and insights.
+                    </div>
+                </div>
+                """,
+                elem_classes=["markdown"]
+            )
+    
+    # Error handling for when modules are not loaded
+    if not agentic_modules_loaded_status:
+        gr.HTML("""
+            <div style="
+                background: #fee;
+                border: 1px solid #fcc;
+                border-radius: 8px;
+                padding: 20px;
+                margin-top: 20px;
+                text-align: center;
+            ">
+                <div style="color: #c33; font-size: 1.2rem; font-weight: 600; margin-bottom: 8px;">
+                    ⚠️ Module Loading Error
+                </div>
+                <div style="color: #666;">
+                    Agentic analysis modules could not be loaded. Please check your configuration.
+                </div>
+            </div>
+        """)
+            
+    return agentic_pipeline_status_md, report_selector_dd, agentic_report_display_md