feat: implement support for aborting active chat generation jobs

index.html

@@ -205,10 +205,10 @@ async function getClient() {
   return gradioClient;
 }
 
-// ── State ──
 let conversations = [];
 let currentConv = null;
 let isGenerating = false;
+let currentJob = null;
 
 // ── Init ──
 function init() {
@@ -231,6 +231,14 @@ function autoResize() {
 
 // ── Chat Management ──
 function newChat() {
+  if (isGenerating && currentJob) {
+    try { currentJob.destroy(); } catch(e) {}
+  }
+  isGenerating = false;
+  currentJob = null;
+  document.getElementById('sendBtn').disabled = false;
+  updateSendBtnIcon(false);
+
   const conv = { id: Date.now(), title: 'New Chat', messages: [] };
   conversations.unshift(conv);
   currentConv = conv;
@@ -240,6 +248,14 @@ function newChat() {
 }
 
 function switchChat(id) {
+  if (isGenerating && currentJob) {
+    try { currentJob.destroy(); } catch(e) {}
+  }
+  isGenerating = false;
+  currentJob = null;
+  document.getElementById('sendBtn').disabled = false;
+  updateSendBtnIcon(false);
+
   currentConv = conversations.find(c => c.id === id);
   renderChatList();
   renderMessages();
@@ -307,11 +323,23 @@ function escapeHTML(s) {
   const d = document.createElement('div'); d.textContent = s; return d.innerHTML;
 }
 
+// ── Send Message (uses Gradio JS Client) ──
 // ── Send Message (uses Gradio JS Client) ──
 async function sendMessage() {
+  if (isGenerating) {
+    if (currentJob) {
+      try { currentJob.destroy(); } catch(e) {}
+    }
+    isGenerating = false;
+    currentJob = null;
+    document.getElementById('sendBtn').disabled = false;
+    updateSendBtnIcon(false);
+    return;
+  }
+
   const input = document.getElementById('userInput');
   const text = input.value.trim();
-  if (!text || isGenerating) return;
+  if (!text) return;
 
   // Hide welcome
   const welcome = document.getElementById('welcome');
@@ -331,7 +359,7 @@ async function sendMessage() {
   input.value = '';
   input.style.height = 'auto';
   isGenerating = true;
-  document.getElementById('sendBtn').disabled = true;
+  updateSendBtnIcon(true);
 
   // Add assistant placeholder with typing indicator
   const assistantDiv = document.createElement('div');
@@ -347,7 +375,7 @@ async function sendMessage() {
     const client = await getClient();
     const history = currentConv.messages.slice(0, -1);
 
-    const job = client.submit("/generate", {
+    currentJob = client.submit("/generate", {
       message: text,
       history: JSON.stringify(history),
       system_prompt: document.getElementById('systemPrompt').value,
@@ -356,24 +384,46 @@ async function sendMessage() {
       max_new_tokens: parseInt(document.getElementById('maxTokens').value),
     });
 
-    for await (const event of job) {
-      if (event.type === "data") {
-        fullText = event.data[0];
-        bubble.innerHTML = formatResponse(fullText);
-        messagesEl.scrollTop = messagesEl.scrollHeight;
-      }
-    }
+    await new Promise((resolve, reject) => {
+      currentJob.on("data", (event) => {
+        if (event.data && event.data[0]) {
+          fullText = event.data[0];
+          bubble.innerHTML = formatResponse(fullText);
+          messagesEl.scrollTop = messagesEl.scrollHeight;
+        }
+      });
+      currentJob.on("status", (status) => {
+        if (status.stage === "complete") resolve();
+        if (status.stage === "error") reject(new Error(status.message || "Generation failed"));
+      });
+    });
   } catch (err) {
+    console.error("Generation error:", err);
     if (!fullText) {
       fullText = 'Sorry, an error occurred. Please try again.';
       bubble.innerHTML = `<span style="color:var(--red)">${escapeHTML(err.message || fullText)}</span>`;
     }
+  } finally {
+    isGenerating = false;
+    currentJob = null;
+    document.getElementById('sendBtn').disabled = false;
+    updateSendBtnIcon(false);
+    if (fullText) {
+      currentConv.messages.push({ role: 'assistant', content: fullText });
+    }
+    document.getElementById('userInput').focus();
   }
+}
 
-  currentConv.messages.push({ role: 'assistant', content: fullText });
-  isGenerating = false;
-  document.getElementById('sendBtn').disabled = false;
-  document.getElementById('userInput').focus();
+function updateSendBtnIcon(loading) {
+  const btn = document.getElementById('sendBtn');
+  if (loading) {
+    btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12"/></svg>`;
+    btn.title = "Stop generating";
+  } else {
+    btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2L15 22L11 13L2 9L22 2Z"/></svg>`;
+    btn.title = "Send message";
+  }
 }
 
 // ── Globals for onclick handlers ──