Refactor Gradio app structure for improved control and user experience; enhance description styling in CSS for better visibility and aesthetics.

app.py

@@ -350,28 +350,51 @@ def respond(message, history: list[tuple[str, str]]):
         _flush_langsmith()
 
 
-chat = gr.ChatInterface(
-    fn=respond,
-    # default type keeps string message, keeps compatibility across versions
-    title="Gmail & Outlook API Helper",
-    description='<div class="app-description">🤖 Este chatbot te guía <strong>paso a paso</strong> para crear credenciales de API de <strong>Gmail</strong> (Google Cloud) ☁️ o <strong>OneDrive</strong> (Microsoft Entra ID) 🔑. Puedes enviar 📸 <strong>capturas de pantalla</strong> para recibir ayuda visual personalizada. El asistente te dará <strong>una instrucción a la vez</strong> para que no te abrumes ✨</div>',
-    textbox=gr.MultimodalTextbox(
-        file_types=["image", ".png", ".jpg", ".jpeg", ".webp", ".gif"],
-        placeholder="Escribe o pega (⌘/Ctrl+V) una imagen o arrástrala aquí",
-        file_count="multiple",
-    ),
-    multimodal=True,
-    fill_height=True,
-    examples=[
-        "¿Cómo creo una API Key de Gmail?",
-        "Guíame para obtener credenciales de OneDrive",
-    ],
-    theme=gr.themes.Monochrome(),
-    css=style,
-)
+# Create the Gradio app with Blocks for better control
+with gr.Blocks(theme=gr.themes.Monochrome(), css=style, fill_height=True) as demo:
+    # Description component that can be hidden
+    description = gr.HTML(
+        value='<div class="app-description">🤖 Este chatbot te guía <strong>paso a paso</strong> para crear credenciales de API de <strong>Gmail</strong> (Google Cloud) ☁️ o <strong>OneDrive</strong> (Microsoft Entra ID) 🔑. Puedes enviar 📸 <strong>capturas de pantalla</strong> para recibir ayuda visual personalizada. El asistente te dará <strong>una instrucción a la vez</strong> para que no te abrumes ✨</div>',
+        visible=True
+    )
+    
+    # State to track if first message has been sent
+    first_message_sent = gr.State(False)
+    
+    # ChatInterface without description (handled separately above)
+    chat = gr.ChatInterface(
+        fn=respond,
+        title="Gmail & Outlook API Helper",
+        description="",
+        textbox=gr.MultimodalTextbox(
+            file_types=["image", ".png", ".jpg", ".jpeg", ".webp", ".gif"],
+            placeholder="Escribe o pega (⌘/Ctrl+V) una imagen o arrástrala aquí",
+            file_count="multiple",
+        ),
+        multimodal=True,
+        fill_height=True,
+        examples=[
+            "¿Cómo creo una API Key de Gmail?",
+            "Guíame para obtener credenciales de OneDrive",
+        ],
+    )
+    
+    # Hide description on first message
+    def hide_description_on_first_message(message, is_sent):
+        if not is_sent:
+            return gr.update(visible=False), True
+        return gr.update(), is_sent
+    
+    # Connect the event to hide description when user submits first message
+    chat.textbox.submit(
+        fn=hide_description_on_first_message,
+        inputs=[chat.textbox, first_message_sent],
+        outputs=[description, first_message_sent],
+        queue=False
+    )
 
 
 if __name__ == "__main__":
-    chat.launch()
+    demo.launch()
 
 

style.css

@@ -85,7 +85,8 @@
 
 /* Description styling - Target markdown div (not paragraphs which are used in chat) */
 /* The description is rendered as: .prose > .md > div */
-.prose .md > div {
+.prose .md > div,
+.app-description {
   font-size: 1rem !important;
   font-weight: 400 !important;
   line-height: 1.6 !important;
@@ -93,42 +94,76 @@
   margin: 0.75rem auto 1.5rem auto !important;
   padding: 1.25rem 1.5rem !important;
   max-width: 700px !important;
-  color: var(--text-light-secondary) !important;
-  background: var(--bg-light-secondary) !important;
+  color: #4B5563 !important;
+  background-color: #F9FAFB !important;
   border-radius: 16px !important;
-  box-shadow: var(--card-shadow-light) !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
   display: block !important;
   position: relative !important;
 
   /* Multi-color gradient border */
-  border: 1px solid transparent !important;
-  background-image:
-    linear-gradient(var(--bg-light-secondary), var(--bg-light-secondary)),
+  border: 2px solid transparent !important;
+  background-image: 
+    linear-gradient(#F9FAFB, #F9FAFB),
     linear-gradient(
       90deg,
-      var(--primary-purple) 0%,
-      var(--secondary-pink) 14%,
-      var(--accent-salmon) 28%,
-      var(--accent-orange) 42%,
-      var(--accent-yellow) 57%,
-      var(--accent-green) 71%,
-      var(--accent-teal) 85%,
-      var(--primary-purple-light) 100%
+      #7C3AED 0%,
+      #EC4899 14%,
+      #FF8F8F 28%,
+      #FB923C 42%,
+      #FBBF24 57%,
+      #10B981 71%,
+      #14B8A6 85%,
+      #8B5CF6 100%
     ) !important;
   background-origin: border-box !important;
   background-clip: padding-box, border-box !important;
 }
 
 /* Bold text styling within description */
-.prose .md > div strong {
+.prose .md > div strong,
+.app-description strong {
   color: var(--primary-purple) !important;
   font-weight: 600 !important;
 }
 
 /* Dark theme description */
-.dark .prose .md > div {
-  color: var(--text-dark-secondary) !important;
-  box-shadow: var(--card-shadow-dark) !important;
+@media (prefers-color-scheme: dark) {
+  .prose .md > div,
+  .app-description {
+    color: #E5E7EB !important;
+    background-color: #1E293B !important;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
+
+    /* Multi-color gradient border for dark theme */
+    background-image: 
+      linear-gradient(#1E293B, #1E293B),
+      linear-gradient(
+        90deg,
+        #7C3AED 0%,
+        #EC4899 14%,
+        #FF8F8F 28%,
+        #FB923C 42%,
+        #FBBF24 57%,
+        #10B981 71%,
+        #14B8A6 85%,
+        #8B5CF6 100%
+      ) !important;
+  }
+
+  /* Dark theme bold text in description */
+  .prose .md > div strong,
+  .app-description strong {
+    color: #A78BFA !important;
+  }
+}
+
+/* Also support .dark class for manual theme switching */
+.dark .prose .md > div,
+.dark .app-description {
+  color: #E5E7EB !important;
+  background-color: #1E293B !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
 
   /* Multi-color gradient border for dark theme */
   background-image:
@@ -147,7 +182,8 @@
 }
 
 /* Dark theme bold text in description */
-.dark .prose .md > div strong {
+.dark .prose .md > div strong,
+.dark .app-description strong {
   color: var(--primary-purple-light) !important;
 }