feat: add generation state management and a 30s stream timeout to prevent hanging

index.html

@@ -409,6 +409,7 @@
     <script type="module">
         let client;
         let history = [];
+        let isGenerating = false;
 
         const chatContainer = document.getElementById('chat-container');
         const userInput = document.getElementById('user-input');
@@ -429,18 +430,22 @@
             }
         }
 
+        function updateSendButton() {
+            sendBtn.disabled = isGenerating || userInput.value.trim().length === 0;
+        }
+
         // Auto-resize textarea
         userInput.addEventListener('input', function () {
             this.style.height = 'auto';
             this.style.height = Math.min(this.scrollHeight, 200) + 'px';
-            sendBtn.disabled = this.value.trim().length === 0;
+            updateSendButton();
         });
 
         // Handle Enter key (Shift+Enter for newline)
         userInput.addEventListener('keydown', function (e) {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
-                if (!sendBtn.disabled) {
+                if (!isGenerating && userInput.value.trim().length > 0) {
                     sendMessage();
                 }
             }
@@ -492,15 +497,24 @@
             chatContainer.scrollTop = chatContainer.scrollHeight;
         }
 
+        function finishGeneration() {
+            isGenerating = false;
+            typingIndicatorWrapper.style.display = 'none';
+            typingIndicator.style.display = 'none';
+            updateSendButton();
+            userInput.focus();
+        }
+
         async function sendMessage() {
             const text = userInput.value.trim();
-            if (!text || !client) return;
+            if (!text || !client || isGenerating) return;
+
+            isGenerating = true;
 
             // Reset input
             userInput.value = '';
             userInput.style.height = 'auto';
-            sendBtn.disabled = true;
-            userInput.disabled = true;
+            updateSendButton();
 
             // Add user message to UI
             addMessage('user', text);
@@ -520,19 +534,30 @@
                     history_json: history
                 });
 
-                // Use manual iterator + while loop instead of for-await.
-                // In a while loop, `break` does NOT call iterator.return(),
-                // so it won't hang on Gradio client cleanup.
                 const iterator = submission[Symbol.asyncIterator]();
-                while (true) {
-                    const { value: event, done } = await iterator.next();
-                    if (done) break;
+                let streamDone = false;
+
+                while (!streamDone) {
+                    // Race each iterator.next() against a 30s idle timeout.
+                    // The Gradio client's iterator may hang forever after the
+                    // last event, so this guarantees we always break out.
+                    const result = await Promise.race([
+                        iterator.next(),
+                        new Promise(resolve =>
+                            setTimeout(() => resolve({ value: undefined, done: true }), 30000)
+                        )
+                    ]);
+
+                    if (result.done) {
+                        streamDone = true;
+                        break;
+                    }
+
+                    const event = result.value;
 
                     if (event.type === "data") {
-                        if (typingIndicatorWrapper.style.display !== 'none') {
-                            typingIndicatorWrapper.style.display = 'none';
-                            typingIndicator.style.display = 'none';
-                        }
+                        typingIndicatorWrapper.style.display = 'none';
+                        typingIndicator.style.display = 'none';
                         fullResponse = event.data[0];
                         botContentDiv.innerHTML = marked.parse(fullResponse || "");
                         scrollToBottom();
@@ -542,7 +567,7 @@
                             throw new Error(event.message);
                         }
                         if (event.stage === "complete") {
-                            break;
+                            streamDone = true;
                         }
                     }
                 }
@@ -553,16 +578,13 @@
 
             } catch (err) {
                 console.error("Error during generation:", err);
-                typingIndicatorWrapper.style.display = 'none';
-                typingIndicator.style.display = 'none';
                 botContentDiv.innerHTML = `<span style="color: #ef4444;">Error: ${err.message || 'Something went wrong.'}</span>`;
-            } finally {
-                typingIndicatorWrapper.style.display = 'none';
-                typingIndicator.style.display = 'none';
-                userInput.disabled = false;
-                sendBtn.disabled = userInput.value.trim().length === 0;
-                userInput.focus();
             }
+
+            // Always runs — not inside finally (which depends on iterator cleanup)
+            // but sequentially after try/catch, which is guaranteed to complete
+            // thanks to Promise.race timeout.
+            finishGeneration();
         }
 
         // Run init