Update app.py

app.py

@@ -261,7 +261,7 @@ header {
 .bot-actions {
     display: flex;
     gap: 10px;
-    opacity: 0; /* Se muestra al hover o al terminar de escribir */
+    opacity: 0;
     transition: opacity 0.3s;
     margin-top: 5px;
 }
@@ -333,7 +333,7 @@ header {
     padding: 10px 0;
 }
 
-#sendBtn {
+#mainBtn {
     background: white;
     color: black;
     border: none;
@@ -348,8 +348,7 @@ header {
     transition: transform 0.2s;
 }
 
-#sendBtn:hover { transform: scale(1.05); }
-#sendBtn:disabled { background: #555; cursor: default; transform: none; }
+#mainBtn:hover { transform: scale(1.05); }
 
 .disclaimer {
     text-align: center;
@@ -374,7 +373,6 @@ header {
 
 .pulsing { animation: pulseAvatar 1.5s infinite; }
 
-/* Scrollbar */
 ::-webkit-scrollbar { width: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
@@ -407,10 +405,8 @@ header {
 <div class="footer-container">
     <div class="input-box">
         <input type="text" id="userInput" placeholder="Escribe un mensaje..." autocomplete="off">
-        <button id="sendBtn" onclick="sendMessage()">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"></path>
-            </svg>
+        <button id="mainBtn" onclick="handleBtnClick()">
+            <!-- El icono se inyecta por JS -->
         </button>
     </div>
     <div class="disclaimer">
@@ -421,23 +417,71 @@ header {
 <script>
 const chatScroll = document.getElementById('chatScroll');
 const userInput = document.getElementById('userInput');
-const sendBtn = document.getElementById('sendBtn');
+const mainBtn = document.getElementById('mainBtn');
 
+// Variables de Estado
 let isGenerating = false;
-let lastUserPrompt = ""; // Para la función regenerar
+let abortController = null; // Para cancelar fetch
+let typingTimeout = null;   // Para cancelar escritura
+let lastUserPrompt = "";
+
+// Iconos SVG
+const ICON_SEND = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"></path></svg>`;
+const ICON_STOP = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0"><rect x="2" y="2" width="20" height="20" rx="4" ry="4"></rect></svg>`;
+
+// Inicializar botón
+mainBtn.innerHTML = ICON_SEND;
 
 // --- UTILS ---
 function scrollToBottom() {
     chatScroll.scrollTop = chatScroll.scrollHeight;
 }
 
+function setBtnState(state) {
+    if (state === 'sending') {
+        mainBtn.innerHTML = ICON_STOP;
+        isGenerating = true;
+    } else {
+        mainBtn.innerHTML = ICON_SEND;
+        isGenerating = false;
+        abortController = null;
+    }
+}
+
 // --- CORE FUNCTIONS ---
 
+// Manejador del Click
+function handleBtnClick() {
+    if (isGenerating) {
+        stopGeneration();
+    } else {
+        sendMessage();
+    }
+}
+
+function stopGeneration() {
+    // 1. Cancelar fetch
+    if (abortController) abortController.abort();
+    
+    // 2. Cancelar escritura
+    if (typingTimeout) clearTimeout(typingTimeout);
+    
+    // 3. UI Cleanup
+    // Buscamos el cursor activo para quitarlo
+    const activeCursor = document.querySelector('.typing-cursor');
+    if (activeCursor) activeCursor.classList.remove('typing-cursor');
+    
+    const activeAvatar = document.querySelector('.pulsing');
+    if (activeAvatar) activeAvatar.classList.remove('pulsing');
+
+    setBtnState('idle');
+    userInput.focus();
+}
+
 async function sendMessage(textOverride = null) {
     const text = textOverride || userInput.value.trim();
-    if (!text || isGenerating) return;
+    if (!text) return;
 
-    // Guardar para regenerar
     lastUserPrompt = text;
 
     // UI Updates
@@ -446,22 +490,18 @@ async function sendMessage(textOverride = null) {
         addMessage(text, 'user');
     }
     
-    isGenerating = true;
-    sendBtn.disabled = true;
-    sendBtn.style.opacity = "0.5";
+    setBtnState('sending');
+    abortController = new AbortController();
 
-    // Crear placeholder del Bot
+    // Placeholder Bot
     const botRow = document.createElement('div');
     botRow.className = 'msg-row bot';
-    
     const avatar = document.createElement('div');
-    avatar.className = 'bot-avatar pulsing'; // Animación pensando
-    
+    avatar.className = 'bot-avatar pulsing'; 
     const wrapper = document.createElement('div');
     wrapper.className = 'msg-content-wrapper';
-    
     const msgText = document.createElement('div');
-    msgText.className = 'msg-text'; // Vacio por ahora
+    msgText.className = 'msg-text'; 
 
     wrapper.appendChild(msgText);
     botRow.appendChild(avatar);
@@ -473,57 +513,66 @@ async function sendMessage(textOverride = null) {
         const response = await fetch('/generate', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text: text })
+            body: JSON.stringify({ text: text }),
+            signal: abortController.signal
         });
 
         const data = await response.json();
-        avatar.classList.remove('pulsing');
         
-        const reply = data.reply || "No pude generar respuesta.";
+        if (!isGenerating) return; // Si se detuvo justo antes
+
+        avatar.classList.remove('pulsing');
+        const reply = data.reply || "No entendí eso.";
         
-        // Iniciar escritura
         await typeWriter(msgText, reply);
         
-        // Añadir botones de acción al terminar
-        addActions(wrapper, reply);
+        if (isGenerating) { // Solo añadir acciones si no se canceló
+            addActions(wrapper, reply);
+            setBtnState('idle');
+        }
 
     } catch (error) {
-        avatar.classList.remove('pulsing');
-        msgText.textContent = "Error de conexión. Intenta de nuevo.";
-        msgText.style.color = "#ff8b8b";
-    } finally {
-        isGenerating = false;
-        sendBtn.disabled = false;
-        sendBtn.style.opacity = "1";
-        if (!textOverride) userInput.focus();
+        if (error.name === 'AbortError') {
+            msgText.textContent += " [Detenido]";
+        } else {
+            avatar.classList.remove('pulsing');
+            msgText.textContent = "Error de conexión.";
+            msgText.style.color = "#ff8b8b";
+            setBtnState('idle');
+        }
     }
 }
 
 function addMessage(text, sender) {
     const row = document.createElement('div');
     row.className = `msg-row ${sender}`;
-    
     const content = document.createElement('div');
     content.className = 'msg-content';
     content.textContent = text;
-    
     row.appendChild(content);
     chatScroll.appendChild(row);
     scrollToBottom();
 }
 
-// Efecto máquina de escribir
 function typeWriter(element, text, speed = 12) {
     return new Promise(resolve => {
         let i = 0;
         element.classList.add('typing-cursor');
         
         function type() {
+            if (!isGenerating) { // Check de seguridad por si se dio Stop
+                element.classList.remove('typing-cursor');
+                resolve();
+                return;
+            }
+
             if (i < text.length) {
                 element.textContent += text.charAt(i);
                 i++;
                 scrollToBottom();
-                setTimeout(type, speed + Math.random() * 5);
+                typingTimeout = setTimeout(() => {
+                    type();
+                }, speed + Math.random() * 5);
             } else {
                 element.classList.remove('typing-cursor');
                 resolve();
@@ -533,59 +582,37 @@ function typeWriter(element, text, speed = 12) {
     });
 }
 
-// Añadir botones Copiar / Regenerar
 function addActions(wrapperElement, textToCopy) {
     const actionsDiv = document.createElement('div');
     actionsDiv.className = 'bot-actions';
     
-    // Botón Copiar
+    // Copy Btn
     const copyBtn = document.createElement('button');
     copyBtn.className = 'action-btn';
-    copyBtn.title = "Copiar";
-    copyBtn.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-        </svg>
-    `;
+    copyBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
     copyBtn.onclick = () => {
         navigator.clipboard.writeText(textToCopy);
-        // Feedback visual temporal
-        const originalIcon = copyBtn.innerHTML;
-        copyBtn.innerHTML = `<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
-        setTimeout(() => copyBtn.innerHTML = originalIcon, 2000);
     };
 
-    // Botón Regenerar
+    // Regen Btn
     const regenBtn = document.createElement('button');
     regenBtn.className = 'action-btn';
-    regenBtn.title = "Regenerar respuesta";
-    regenBtn.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M23 4v6h-6"></path>
-            <path d="M1 20v-6h6"></path>
-            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
-        </svg>
-    `;
+    regenBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`;
     regenBtn.onclick = () => {
         sendMessage(lastUserPrompt);
     };
 
     actionsDiv.appendChild(copyBtn);
     actionsDiv.appendChild(regenBtn);
-    
     wrapperElement.appendChild(actionsDiv);
     
-    // Pequeño fade in
-    requestAnimationFrame(() => {
-        actionsDiv.style.opacity = "1";
-    });
+    requestAnimationFrame(() => actionsDiv.style.opacity = "1");
     scrollToBottom();
 }
 
 // Listeners
 userInput.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') sendMessage();
+    if (e.key === 'Enter') handleBtnClick();
 });
 
 window.onload = () => userInput.focus();