Fix: Focus de Textbox y Recolocación de Contexto de Nota

chatbot-widget/src/components/Chatbot.tsx

@@ -37,6 +37,7 @@ const Chatbot: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [isStreaming, setIsStreaming] = useState(false);
   const messagesEndRef = useRef<null | HTMLDivElement>(null);
+  const inputRef = useRef<null | HTMLInputElement>(null);
   const [activeArticle, setActiveArticle] = useState<{ url: string; title: string; } | null>(() => {
     try {
       // 1. Intentamos obtener el contexto del artículo guardado.
@@ -105,6 +106,24 @@ const Chatbot: React.FC = () => {
     }
   }, [messages, isOpen]);
 
+  // Este useEffect se encarga de gestionar el foco del campo de texto.
+  useEffect(() => {
+    // Solo aplicamos la lógica si la ventana del chat está abierta.
+    if (isOpen) {
+      // Si el bot NO está cargando, significa que el usuario puede escribir.
+      // Esto se cumple en dos escenarios:
+      // 1. Justo cuando se abre la ventana del chat.
+      // 2. Justo cuando el bot termina de responder (isLoading pasa de true a false).
+      if (!isLoading) {
+        // Usamos un pequeño retardo (100ms) para asegurar que el DOM se haya actualizado
+        // y cualquier animación de CSS haya terminado antes de intentar hacer foco.
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 100);
+      }
+    }
+  }, [isOpen, isLoading]); // Las dependencias: se ejecuta si cambia `isOpen` o `isLoading`.
+
   const toggleChat = () => setIsOpen(!isOpen);
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -292,6 +311,7 @@ const Chatbot: React.FC = () => {
           <form className="input-form" onSubmit={handleSendMessage}>
             <div className="input-container">
               <input
+                ref={inputRef}
                 type="text"
                 placeholder={isLoading ? "Esperando respuesta..." : "Escribe tu consulta..."}
                 value={inputValue}