Refactoriza la interfaz de usuario en `app.py` al envolver `gr.ChatInterface` dentro de `gr.Blocks`, mejorando la estructura del código. Se añade un script de JavaScript para mantener el enfoque en el campo de entrada después de las respuestas, optimizando la experiencia del usuario. Además, se actualiza la función de lanzamiento para utilizar `demo.launch()` en lugar de `chat.launch()`, asegurando una mejor gestión de la interfaz.

app.py

@@ -344,28 +344,59 @@ 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="Chat para guiar en la creación de API Keys.",
-    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,
-)
+with gr.Blocks(theme=gr.themes.Monochrome(), css=style) as demo:
+    gr.ChatInterface(
+        fn=respond,
+        # default type keeps string message, keeps compatibility across versions
+        title="Gmail & Outlook API Helper",
+        description="Chat para guiar en la creación de API Keys.",
+        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",
+        ],
+    )
+
+
+# Front-end helper to keep the input focused after responses
+AUTOFOCUS_JS = """
+() => {
+  const container = document.querySelector('.gradio-container');
+  if (!container) return;
+  const focusInput = () => {
+    const ta = container.querySelector('textarea');
+    if (ta) ta.focus();
+  };
+  // Focus on initial load
+  focusInput();
+  // Re-focus on DOM updates (e.g., after new assistant messages)
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      if (m.addedNodes && m.addedNodes.length > 0) {
+        focusInput();
+        break;
+      }
+    }
+  });
+  observer.observe(container, { childList: true, subtree: true });
+}
+"""
+
+# Run once on load to attach the observer and ensure focus
+try:
+    demo.load(None, None, None, js=AUTOFOCUS_JS)
+except Exception:
+    # Best-effort: if load hook signature differs by version, ignore
+    pass
 
 
 if __name__ == "__main__":
-    chat.launch()
+    demo.launch()