Improve AI message streaming and error handling

Refactor AI message handling and error streaming.

Author: RenzMc

src/main.js

@@ -400,6 +400,8 @@ class AIAssistant {
     const sendBtn = app.querySelector(".ai-send-btn");
     if (sendBtn) sendBtn.innerHTML = stopIconSvg;
 
+    let aiMessageElement = null;
+
     try {
       const settings = await this.getSettings();
       if (!settings.apiKey || !settings.baseUrl || !settings.model) {
@@ -408,11 +410,11 @@ class AIAssistant {
         return;
       }
 
-      const aiMessageElement = this.addMessageToChat("assistant", "", app);
+      aiMessageElement = this.addMessageToChat("assistant", "", app);
 
       let response = await this.callAI(message, settings);
 
-      this.updateMessage(aiMessageElement, response, app);
+      await this.streamMessage(aiMessageElement, response, app, false);
 
       const chatAreaAfter = app.querySelector("#ai-chat-area");
       if (chatAreaAfter) {
@@ -434,8 +436,12 @@ class AIAssistant {
 
       this.saveSession().catch((e) => console.error("saveSession error:", e));
     } catch (error) {
+      const errMsg = "Error: " + (error && error.message ? error.message : String(error));
+      if (!aiMessageElement) {
+        aiMessageElement = this.addMessageToChat("assistant", "", app);
+      }
+      await this.streamMessage(aiMessageElement, errMsg, app, true);
       console.error("Error generating response:", error);
-      window.toast("Error generating response: " + (error && error.message ? error.message : error), 3000);
     } finally {
       this.isGenerating = false;
       if (sendBtn) sendBtn.innerHTML = sendIconSvg;
@@ -472,6 +478,44 @@ class AIAssistant {
     return messageContent;
   }
 
+  async streamMessage(element, content, app, isError) {
+    if (!element) return;
+    const text = String(content || "");
+    element.classList.remove("ai-error");
+    element.innerHTML = "";
+    element.textContent = "";
+    if (isError) element.classList.add("ai-error");
+    const total = text.length;
+    let i = 0;
+    const large = total > 2000;
+    const chunk = large ? 8 : 1;
+    const delay = large ? 20 : 18;
+    while (i < total) {
+      const part = text.slice(i, i + chunk);
+      element.textContent = element.textContent + part;
+      i += chunk;
+      await new Promise((r) => setTimeout(r, delay));
+      const chatArea = app && app.querySelector ? app.querySelector("#ai-chat-area") : null;
+      if (chatArea) {
+        requestAnimationFrame(() => {
+          chatArea.scrollTop = chatArea.scrollHeight;
+        });
+      }
+    }
+    if (!isError && window.markdownit) {
+      element.innerHTML = this.formatAIResponse(element.textContent);
+      this.highlightCode(app);
+    } else {
+      element.innerHTML = String(element.textContent).replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br>");
+    }
+    const chatAreaFinal = app && app.querySelector ? app.querySelector("#ai-chat-area") : null;
+    if (chatAreaFinal) {
+      requestAnimationFrame(() => {
+        chatAreaFinal.scrollTop = chatAreaFinal.scrollHeight;
+      });
+    }
+  }
+
   updateMessage(element, content, app) {
     if (!element) return;
     element.innerHTML = this.formatAIResponse(content);