Fix JS client stream consumption by switching from .on() to async iterator

index.html

@@ -1112,23 +1112,25 @@
           max_tokens: tokens
         });
 
-        activeJob.on("data", (dataEvent) => {
-          const streamedText = dataEvent.data[0];
-          updateAssistantStream(currentMessageId, streamedText);
-        });
-
-        activeJob.on("status", (statusEvent) => {
-          // Can monitor queue status here if needed
-        });
-
-        activeJob.on("error", (err) => {
-          console.error("Job error:", err);
-          clearInterval(timerInterval);
-          updateMessageError(currentMessageId, "An error occurred during text generation.");
-          isGenerating = false;
-          resetSubmitButton();
-          updateStatus("ready", "Error");
-        });
+        // Consume stream using async iterator
+        (async () => {
+          try {
+            for await (const msg of activeJob) {
+              if (msg && msg.data) {
+                const streamedText = msg.data[0];
+                updateAssistantStream(currentMessageId, streamedText);
+              }
+            }
+            finalizeGeneration(currentMessageId);
+          } catch (err) {
+            console.error("Stream reading error:", err);
+            clearInterval(timerInterval);
+            updateMessageError(currentMessageId, "An error occurred during text generation.");
+            isGenerating = false;
+            resetSubmitButton();
+            updateStatus("ready", "Error");
+          }
+        })();
 
       } catch (err) {
         console.error("Submission failed:", err);
@@ -1428,16 +1430,7 @@
       updateStatus("ready", "Server Ready");
     };
 
-    // Hook finalize generation on custom check if necessary
-    // We add an interval hook to check if activeJob has finished and set isGenerating = false
-    setInterval(() => {
-      if (isGenerating && activeJob) {
-        // If the job is resolved or cancelled
-        if (activeJob.status === "complete" || activeJob.status === "error") {
-          finalizeGeneration(currentMessageId);
-        }
-      }
-    }, 1000);
+    // Stream state is now fully managed by the async iterator loop
   </script>
 </body>
 </html>