Update ui/ui_generators.py

ui/ui_generators.py

@@ -764,16 +764,15 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         min-height: 400px;
     }
     
-    /* MODIFIED: Removed .report-content .markdown as the component is now gr.HTML */
-    /* and direct styling is handled by the overall CSS */
-    .report-content .gr-html { /* Target the inner HTML component directly */
+    /* MODIFIED: Adjusted target for the report body's content */
+    .report-body-content { /* New class for the Markdown content container */
         padding: 40px;
         font-size: 1.1rem;
         line-height: 1.8;
     }
     
-    /* Typography Enhancements */
-    .report-content h1 {
+    /* Typography Enhancements for the Markdown content */
+    .report-body-content h1 {
         font-size: 2.2rem;
         font-weight: 700;
         color: #1a1a1a;
@@ -782,7 +781,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         letter-spacing: -0.02em;
     }
     
-    .report-content h2 {
+    .report-body-content h2 {
         font-size: 1.8rem;
         font-weight: 600;
         color: #1a1a1a;
@@ -792,7 +791,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         border-bottom: 2px solid #e6e6e6;
     }
     
-    .report-content h3 {
+    .report-body-content h3 {
         font-size: 1.4rem;
         font-weight: 600;
         color: #2c2c2c;
@@ -800,34 +799,34 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         margin-bottom: 16px;
     }
     
-    .report-content p {
+    .report-body-content p {
         margin-bottom: 20px;
         color: #292929;
         font-size: 1.1rem;
     }
     
-    .report-content ul, .report-content ol {
+    .report-body-content ul, .report-body-content ol {
         margin-bottom: 20px;
         padding-left: 24px;
     }
     
-    .report-content li {
+    .report-body-content li {
         margin-bottom: 8px;
         color: #292929;
     }
     
-    .report-content strong {
+    .report-body-content strong {
         font-weight: 600;
         color: #1a1a1a;
     }
     
-    .report-content em {
+    .report-body-content em {
         font-style: italic;
         color: #4a4a4a;
     }
     
     /* Quote Styling */
-    .report-content blockquote {
+    .report-body-content blockquote {
         border-left: 4px solid #667eea;
         padding-left: 20px;
         margin: 24px 0;
@@ -839,7 +838,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
     }
     
     /* Code Styling */
-    .report-content code {
+    .report-body-content code {
         background: #f1f3f4;
         padding: 2px 6px;
         border-radius: 4px;
@@ -889,15 +888,15 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
             padding: 24px;
         }
         
-        .report-content .gr-html { /* Target the inner HTML component directly */
+        .report-body-content { /* Target the inner HTML component directly */
             padding: 24px;
         }
         
-        .report-content h1 {
+        .report-body-content h1 {
             font-size: 1.8rem;
         }
         
-        .report-content h2 {
+        .report-body-content h2 {
             font-size: 1.5rem;
         }
         
@@ -907,8 +906,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
     }
     
     /* Gradio Component Overrides */
-    /* REMOVED: .gradio-container .report-content .markdown as component is now gr.HTML */
-    .gradio-container .report-content .gr-html { /* Target the inner HTML component directly */
+    .report-content .gradio-container {
         background: transparent !important;
         border: none !important;
     }
@@ -926,25 +924,9 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
     
-    /* Loading Animation */
+    /* Loading Indicator: Hidden by default */
     .loading-indicator {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 40px;
-        color: #6b6b6b;
-    }
-    
-    /* MODIFIED: Removed animation for hourglass */
-    .loading-indicator::before {
-        content: "⏳";
-        margin-right: 12px;
-        /* animation: spin 2s linear infinite; */ /* REMOVED ANIMATION */
-    }
-    
-    @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
+        display: none !important; /* Hide the entire loading indicator block */
     }
     </style>
     """
@@ -956,7 +938,8 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
     with gr.Column(elem_classes=["report-container"]):
         # Header section
         with gr.Column(elem_classes=["report-header"]):
-            gr.HTML("""
+            # This HTML component will display the dynamic title and subtitle
+            report_header_html_display = 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>
@@ -972,10 +955,10 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
                 </div>
             """)
             
-            # Status indicator
+            # Status indicator (now hidden by default via CSS)
             agentic_pipeline_status_md = gr.Markdown(
                 "🔄 **Status:** Loading report data...", 
-                elem_classes=["loading-indicator"]
+                elem_classes=["loading-indicator"] # This class now hides the element
             )
             
             # Report selector dropdown
@@ -990,8 +973,8 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         
         # Report content display area
         with gr.Column(elem_classes=["report-content"]):
-            # MODIFIED: Changed from gr.Markdown to gr.HTML to render raw HTML from format_report_for_display
-            agentic_report_display_md = gr.HTML(
+            # This Markdown component will display the actual report text, formatted as Markdown
+            report_body_markdown_display = gr.Markdown(
                 """
                 <div class="empty-state">
                     <div class="empty-state-icon">📄</div>
@@ -1001,11 +984,12 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
                     </div>
                 </div>
                 """,
-                elem_classes=["gr-html"] # Changed elem_classes to target gr-html if needed
+                # Apply styles to the content within the Markdown component using a wrapper div
+                elem_classes=["report-body-content"] 
             )
     
     # Error handling for when modules are not loaded
-    if not agentic_modules_loaded_status:
+    if not agentic_modules_loaded_loaded_status:
         gr.HTML("""
             <div style="
                 background: #fee;
@@ -1024,4 +1008,6 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
             </div>
         """)
             
-    return agentic_pipeline_status_md, report_selector_dd, agentic_report_display_md
+    # Return both header HTML and body Markdown components for app.py to update
+    return agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display
+