Add title component to Gradio app for improved user guidance; enhance description for clarity and support.

app.py

@@ -352,6 +352,12 @@ def respond(message, history: list[tuple[str, str]]):
 
 # Create the Gradio app with Blocks for better control
 with gr.Blocks(theme=gr.themes.Monochrome(), css=style, fill_height=True) as demo:
+    # Title component
+    title = gr.Markdown(
+        value="# Gmail & Outlook API Helper",
+        visible=True
+    )
+    
     # 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>',
@@ -361,10 +367,10 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=style, fill_height=True) as dem
     # State to track if first message has been sent
     first_message_sent = gr.State(False)
     
-    # ChatInterface without description (handled separately above)
+    # ChatInterface without title and description (handled separately above)
     chat = gr.ChatInterface(
         fn=respond,
-        title="Gmail & Outlook API Helper",
+        title="",
         description="",
         textbox=gr.MultimodalTextbox(
             file_types=["image", ".png", ".jpg", ".jpeg", ".webp", ".gif"],