From 3dc6a34f792c76d92e8eef5043244caa31ea33f3 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 26 Mar 2025 15:05:54 -0700
Subject: [PATCH 1/5] UX: Add streaming animation to explain

---
 .../components/ai-post-helper-menu.gjs        | 69 +++++++++++++++++--
 1 file changed, 65 insertions(+), 4 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
index ce013a1b3..750eaba9e 100644
--- a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
+++ b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
@@ -3,6 +3,7 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import { cancel, later } from "@ember/runloop";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import { and } from "truth-helpers";
@@ -10,6 +11,7 @@ import CookText from "discourse/components/cook-text";
 import DButton from "discourse/components/d-button";
 import FastEdit from "discourse/components/fast-edit";
 import FastEditModal from "discourse/components/modal/fast-edit";
+import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { bind } from "discourse/lib/decorators";
@@ -21,6 +23,8 @@ import eq from "truth-helpers/helpers/eq";
 import AiHelperLoading from "../components/ai-helper-loading";
 import AiHelperOptionsList from "../components/ai-helper-options-list";
 
+const STREAMED_TEXT_SPEED = 15;
+
 export default class AiPostHelperMenu extends Component {
   @service messageBus;
   @service site;
@@ -43,6 +47,11 @@ export default class AiPostHelperMenu extends Component {
   @tracked isSavingFootnote = false;
   @tracked supportsAddFootnote = this.args.data.supportsFastEdit;
 
+  @tracked isStreaming = false;
+  @tracked streamedText = "";
+  typingTimer = null;
+  streamedTextLength = 0;
+
   MENU_STATES = {
     options: "OPTIONS",
     loading: "LOADING",
@@ -157,6 +166,34 @@ export default class AiPostHelperMenu extends Component {
     return sanitize(text);
   }
 
+  typeCharacter() {
+    if (this.streamedTextLength < this.suggestion.length) {
+      this.streamedText += this.suggestion.charAt(this.streamedTextLength);
+      this.streamedTextLength++;
+
+      this.typingTimer = later(this, this.typeCharacter, STREAMED_TEXT_SPEED);
+    } else {
+      this.typingTimer = null;
+    }
+  }
+
+  onTextUpdate() {
+    this.cancelTypingTimer();
+    this.typeCharacter();
+  }
+
+  cancelTypingTimer() {
+    if (this.typingTimer) {
+      cancel(this.typingTimer);
+    }
+  }
+
+  resetStreaming() {
+    this.cancelTypingTimer();
+    this.streamedText = "";
+    this.streamedTextLength = 0;
+  }
+
   @bind
   subscribe() {
     const channel = `/discourse-ai/ai-helper/stream_suggestion/${this.args.data.quoteState.postId}`;
@@ -172,9 +209,22 @@ export default class AiPostHelperMenu extends Component {
   }
 
   @bind
-  _updateResult(result) {
+  async _updateResult(result) {
     this.streaming = !result.done;
-    this.suggestion = result.result;
+    const newText = result.result;
+
+    if (result.done) {
+      this.streamedText = newText;
+      this.isStreaming = false;
+      this.suggestion = newText;
+
+      // Clear pending animations
+      this.cancelTypingTimer();
+    } else if (newText.length > this.suggestion.length) {
+      this.suggestion = newText;
+      this.isStreaming = true;
+      await this.onTextUpdate();
+    }
   }
 
   @action
@@ -323,6 +373,10 @@ export default class AiPostHelperMenu extends Component {
     }
   }
 
+  get renderedText() {
+    return this.isStreaming ? this.streamedText : this.suggestion;
+  }
+
   <template>
     {{#if
       (and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
@@ -350,8 +404,15 @@ export default class AiPostHelperMenu extends Component {
             {{willDestroy this.unsubscribe}}
           >
             {{#if this.suggestion}}
-              <div class="ai-post-helper__suggestion__text" dir="auto">
-                <CookText @rawText={{this.suggestion}} />
+              <div
+                class={{concatClass
+                  (if this.isStreaming "streaming")
+                  "streamable-content"
+                  "ai-post-helper__suggestion__text"
+                }}
+                dir="auto"
+              >
+                <CookText @rawText={{this.renderedText}} class="cooked" />
               </div>
               <div class="ai-post-helper__suggestion__buttons">
                 <DButton

From c2b43030c08944e9671937d519d70328ea4d0aee Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 26 Mar 2025 16:17:58 -0700
Subject: [PATCH 2/5] DEV: Extract to re-usable API helper

---
 .../components/ai-post-helper-menu.gjs        |  67 ++--------
 .../discourse/lib/smooth-streamer.gjs         | 115 ++++++++++++++++++
 2 files changed, 127 insertions(+), 55 deletions(-)
 create mode 100644 assets/javascripts/discourse/lib/smooth-streamer.gjs

diff --git a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
index 750eaba9e..df626e862 100644
--- a/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
+++ b/assets/javascripts/discourse/components/ai-post-helper-menu.gjs
@@ -3,7 +3,6 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
-import { cancel, later } from "@ember/runloop";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import { and } from "truth-helpers";
@@ -22,8 +21,7 @@ import { i18n } from "discourse-i18n";
 import eq from "truth-helpers/helpers/eq";
 import AiHelperLoading from "../components/ai-helper-loading";
 import AiHelperOptionsList from "../components/ai-helper-options-list";
-
-const STREAMED_TEXT_SPEED = 15;
+import SmoothStreamer from "../lib/smooth-streamer";
 
 export default class AiPostHelperMenu extends Component {
   @service messageBus;
@@ -47,10 +45,11 @@ export default class AiPostHelperMenu extends Component {
   @tracked isSavingFootnote = false;
   @tracked supportsAddFootnote = this.args.data.supportsFastEdit;
 
-  @tracked isStreaming = false;
-  @tracked streamedText = "";
-  typingTimer = null;
-  streamedTextLength = 0;
+  @tracked
+  smoothStreamer = new SmoothStreamer(
+    () => this.suggestion,
+    (newValue) => (this.suggestion = newValue)
+  );
 
   MENU_STATES = {
     options: "OPTIONS",
@@ -166,34 +165,6 @@ export default class AiPostHelperMenu extends Component {
     return sanitize(text);
   }
 
-  typeCharacter() {
-    if (this.streamedTextLength < this.suggestion.length) {
-      this.streamedText += this.suggestion.charAt(this.streamedTextLength);
-      this.streamedTextLength++;
-
-      this.typingTimer = later(this, this.typeCharacter, STREAMED_TEXT_SPEED);
-    } else {
-      this.typingTimer = null;
-    }
-  }
-
-  onTextUpdate() {
-    this.cancelTypingTimer();
-    this.typeCharacter();
-  }
-
-  cancelTypingTimer() {
-    if (this.typingTimer) {
-      cancel(this.typingTimer);
-    }
-  }
-
-  resetStreaming() {
-    this.cancelTypingTimer();
-    this.streamedText = "";
-    this.streamedTextLength = 0;
-  }
-
   @bind
   subscribe() {
     const channel = `/discourse-ai/ai-helper/stream_suggestion/${this.args.data.quoteState.postId}`;
@@ -211,20 +182,7 @@ export default class AiPostHelperMenu extends Component {
   @bind
   async _updateResult(result) {
     this.streaming = !result.done;
-    const newText = result.result;
-
-    if (result.done) {
-      this.streamedText = newText;
-      this.isStreaming = false;
-      this.suggestion = newText;
-
-      // Clear pending animations
-      this.cancelTypingTimer();
-    } else if (newText.length > this.suggestion.length) {
-      this.suggestion = newText;
-      this.isStreaming = true;
-      await this.onTextUpdate();
-    }
+    await this.smoothStreamer.updateResult(result, "result");
   }
 
   @action
@@ -373,10 +331,6 @@ export default class AiPostHelperMenu extends Component {
     }
   }
 
-  get renderedText() {
-    return this.isStreaming ? this.streamedText : this.suggestion;
-  }
-
   <template>
     {{#if
       (and this.site.mobileView (eq this.menuState this.MENU_STATES.options))
@@ -406,13 +360,16 @@ export default class AiPostHelperMenu extends Component {
             {{#if this.suggestion}}
               <div
                 class={{concatClass
-                  (if this.isStreaming "streaming")
+                  (if this.smoothStreamer.isStreaming "streaming")
                   "streamable-content"
                   "ai-post-helper__suggestion__text"
                 }}
                 dir="auto"
               >
-                <CookText @rawText={{this.renderedText}} class="cooked" />
+                <CookText
+                  @rawText={{this.smoothStreamer.renderedText}}
+                  class="cooked"
+                />
               </div>
               <div class="ai-post-helper__suggestion__buttons">
                 <DButton
diff --git a/assets/javascripts/discourse/lib/smooth-streamer.gjs b/assets/javascripts/discourse/lib/smooth-streamer.gjs
new file mode 100644
index 000000000..d62781692
--- /dev/null
+++ b/assets/javascripts/discourse/lib/smooth-streamer.gjs
@@ -0,0 +1,115 @@
+import { tracked } from "@glimmer/tracking";
+import { cancel, later } from "@ember/runloop";
+
+const DEFAULT_TYPING_DELAY = 15;
+
+/**
+ * SmoothStreamer provides a typing animation effect for streamed text updates.
+ */
+export default class SmoothStreamer {
+  @tracked isStreaming = false;
+  @tracked streamedText = "";
+  typingTimer = null;
+  streamedTextLength = 0;
+
+  /**
+   * @param {() => string} getRealtimeText - Function to retrieve the latest realtime text
+   * @param {(value: string) => void} setRealtimeText - Function to update the realtime text
+   * @param {number} [typingDelay] - Delay (in ms) between each character reveal
+   */
+  constructor(getRealtimeText, setRealtimeText, typingDelay) {
+    this.getRealtimeText = getRealtimeText;
+    this.setRealtimeText = setRealtimeText;
+    this.typingDelay = typingDelay || DEFAULT_TYPING_DELAY;
+  }
+
+  /**
+   * Retrieves the appropriate text: either the animated stream or the full realtime text.
+   * @returns {string}
+   */
+  get renderedText() {
+    return this.isStreaming ? this.streamedText : this.realtimeText;
+  }
+
+  /**
+   * Retrieves the current realtime text.
+   * @returns {string}
+   */
+  get realtimeText() {
+    return this.getRealtimeText();
+  }
+
+  /**
+   * Updates the realtime text.
+   * @param {string} value - The new text value
+   */
+  set realtimeText(value) {
+    this.setRealtimeText(value);
+  }
+
+  /**
+   * Resets the streaming state, clearing all animation progress.
+   */
+  resetStreaming() {
+    this.#cancelTypingTimer();
+    this.streamedText = "";
+    this.streamedTextLength = 0;
+  }
+
+  /**
+   * Processes an update result (typically from MessageBus)
+   * either completing the stream or continuing animation.
+   * @param {object} result - The result object containing the new text and status
+   * @param {string} newTextKey - The key in result that holds the new text value (e.g. if the JSON is { text: "Hello", done: false }, newTextKey would be "text")
+   */
+  async updateResult(result, newTextKey) {
+    const newText = result[newTextKey];
+
+    if (result?.done) {
+      this.streamedText = newText;
+      this.realtimeText = newText;
+      this.isStreaming = false;
+
+      // Clear pending animations
+      this.#cancelTypingTimer();
+    } else if (newText.length > this.realtimeText.length) {
+      this.realtimeText = newText;
+      this.isStreaming = true;
+      await this.#onTextUpdate();
+    }
+  }
+
+  /**
+   * Types out the next character in the streaming text.
+   * Private method.
+   */
+  #typeCharacter() {
+    if (this.streamedTextLength < this.realtimeText.length) {
+      this.streamedText += this.realtimeText.charAt(this.streamedTextLength);
+      this.streamedTextLength++;
+
+      this.typingTimer = later(this, this.#typeCharacter, this.typingDelay);
+    } else {
+      this.typingTimer = null;
+    }
+  }
+
+  /**
+   * Handles text updates and restarts the typing animation.
+   * Private method.
+   */
+  #onTextUpdate() {
+    this.#cancelTypingTimer();
+    this.#typeCharacter();
+  }
+
+  /**
+   * Cancels any pending typing animation.
+   * Private method.
+   */
+  #cancelTypingTimer() {
+    if (this.typingTimer) {
+      cancel(this.typingTimer);
+    }
+  }
+}

From b2c2f4be69f4f567ac946be0515f3b5ce092b94f Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 26 Mar 2025 16:23:41 -0700
Subject: [PATCH 3/5] DEV: Apply to search discoveries

---
 .../components/ai-search-discoveries.gjs      | 70 +++----------------
 1 file changed, 11 insertions(+), 59 deletions(-)

diff --git a/assets/javascripts/discourse/components/ai-search-discoveries.gjs b/assets/javascripts/discourse/components/ai-search-discoveries.gjs
index c429c5eff..29005c6a7 100644
--- a/assets/javascripts/discourse/components/ai-search-discoveries.gjs
+++ b/assets/javascripts/discourse/components/ai-search-discoveries.gjs
@@ -12,10 +12,10 @@ import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { bind } from "discourse/lib/decorators";
 import { i18n } from "discourse-i18n";
+import SmoothStreamer from "../lib/smooth-streamer";
 import AiBlinkingAnimation from "./ai-blinking-animation";
 
 const DISCOVERY_TIMEOUT_MS = 10000;
-const STREAMED_TEXT_SPEED = 23;
 
 export default class AiSearchDiscoveries extends Component {
   @service search;
@@ -27,9 +27,11 @@ export default class AiSearchDiscoveries extends Component {
   @tracked hideDiscoveries = false;
   @tracked fullDiscoveryToggled = false;
   @tracked discoveryPreviewLength = this.args.discoveryPreviewLength || 150;
-
-  @tracked isStreaming = false;
-  @tracked streamedText = "";
+  @tracked
+  smoothStreamer = new SmoothStreamer(
+    () => this.discobotDiscoveries.discovery,
+    (newValue) => (this.discobotDiscoveries.discovery = newValue)
+  );
 
   discoveryTimeout = null;
   typingTimer = null;
@@ -53,36 +55,6 @@ export default class AiSearchDiscoveries extends Component {
     );
   }
 
-  typeCharacter() {
-    if (this.streamedTextLength < this.discobotDiscoveries.discovery.length) {
-      this.streamedText += this.discobotDiscoveries.discovery.charAt(
-        this.streamedTextLength
-      );
-      this.streamedTextLength++;
-
-      this.typingTimer = later(this, this.typeCharacter, STREAMED_TEXT_SPEED);
-    } else {
-      this.typingTimer = null;
-    }
-  }
-
-  onTextUpdate() {
-    this.cancelTypingTimer();
-    this.typeCharacter();
-  }
-
-  cancelTypingTimer() {
-    if (this.typingTimer) {
-      cancel(this.typingTimer);
-    }
-  }
-
-  resetStreaming() {
-    this.cancelTypingTimer();
-    this.streamedText = "";
-    this.streamedTextLength = 0;
-  }
-
   @bind
   async _updateDiscovery(update) {
     if (this.query === update.query) {
@@ -94,23 +66,9 @@ export default class AiSearchDiscoveries extends Component {
         this.discobotDiscoveries.discovery = "";
       }
 
-      const newText = update.ai_discover_reply;
       this.discobotDiscoveries.modelUsed = update.model_used;
       this.loadingDiscoveries = false;
-
-      // Handling short replies.
-      if (update.done) {
-        this.discobotDiscoveries.discovery = newText;
-        this.streamedText = newText;
-        this.isStreaming = false;
-
-        // Clear pending animations
-        this.cancelTypingTimer();
-      } else if (newText.length > this.discobotDiscoveries.discovery.length) {
-        this.discobotDiscoveries.discovery = newText;
-        this.isStreaming = true;
-        await this.onTextUpdate();
-      }
+      this.smoothStreamer.updateResult(update, "ai_discover_reply");
     }
   }
 
@@ -153,16 +111,10 @@ export default class AiSearchDiscoveries extends Component {
   get canShowExpandtoggle() {
     return (
       !this.loadingDiscoveries &&
-      this.renderedDiscovery.length > this.discoveryPreviewLength
+      this.smoothStreamer.renderedText.length > this.discoveryPreviewLength
     );
   }
 
-  get renderedDiscovery() {
-    return this.isStreaming
-      ? this.streamedText
-      : this.discobotDiscoveries.discovery;
-  }
-
   get renderPreviewOnly() {
     return !this.fullDiscoveryToggled && this.canShowExpandtoggle;
   }
@@ -173,7 +125,7 @@ export default class AiSearchDiscoveries extends Component {
       this.hideDiscoveries = false;
       return;
     } else {
-      this.resetStreaming();
+      this.smoothStreamer.resetStreaming();
       this.discobotDiscoveries.resetDiscovery();
     }
 
@@ -225,12 +177,12 @@ export default class AiSearchDiscoveries extends Component {
             class={{concatClass
               "ai-search-discoveries__discovery"
               (if this.renderPreviewOnly "preview")
-              (if this.isStreaming "streaming")
+              (if this.smoothStreamer.isStreaming "streaming")
               "streamable-content"
             }}
           >
             <div class="cooked">
-              <CookText @rawText={{this.renderedDiscovery}} />
+              <CookText @rawText={{this.smoothStreamer.renderedText}} />
             </div>
           </article>
 

From 9c4c75d80271b7c7fe75350a1ab64b3d1e8d69ee Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 26 Mar 2025 18:01:38 -0700
Subject: [PATCH 4/5] DEV: Apply API to summarization

---
 .../components/modal/ai-summary-modal.gjs     | 56 ++++---------------
 1 file changed, 11 insertions(+), 45 deletions(-)

diff --git a/assets/javascripts/discourse/components/modal/ai-summary-modal.gjs b/assets/javascripts/discourse/components/modal/ai-summary-modal.gjs
index 51e78145b..5c634997f 100644
--- a/assets/javascripts/discourse/components/modal/ai-summary-modal.gjs
+++ b/assets/javascripts/discourse/components/modal/ai-summary-modal.gjs
@@ -5,7 +5,6 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
-import { cancel, later } from "@ember/runloop";
 import { service } from "@ember/service";
 import { not } from "truth-helpers";
 import CookText from "discourse/components/cook-text";
@@ -20,8 +19,7 @@ import { shortDateNoYear } from "discourse/lib/formatter";
 import { i18n } from "discourse-i18n";
 import DTooltip from "float-kit/components/d-tooltip";
 import AiSummarySkeleton from "../../components/ai-summary-skeleton";
-
-const STREAMED_TEXT_SPEED = 15;
+import SmoothStreamer from "../../lib/smooth-streamer";
 
 export default class AiSummaryModal extends Component {
   @service siteSettings;
@@ -37,11 +35,12 @@ export default class AiSummaryModal extends Component {
   @tracked outdated = false;
   @tracked canRegenerate = false;
   @tracked loading = false;
-  @tracked isStreaming = false;
-  @tracked streamedText = "";
   @tracked currentIndex = 0;
-  typingTimer = null;
-  streamedTextLength = 0;
+  @tracked
+  smoothStreamer = new SmoothStreamer(
+    () => this.text,
+    (newValue) => (this.text = newValue)
+  );
 
   get outdatedSummaryWarningText() {
     let outdatedText = i18n("summary.outdated");
@@ -57,7 +56,7 @@ export default class AiSummaryModal extends Component {
   }
 
   resetSummary() {
-    this.streamedText = "";
+    this.smoothStreamer.resetStreaming();
     this.currentIndex = 0;
     this.text = "";
     this.summarizedOn = null;
@@ -142,26 +141,6 @@ export default class AiSummaryModal extends Component {
     });
   }
 
-  typeCharacter() {
-    if (this.streamedTextLength < this.text.length) {
-      this.streamedText += this.text.charAt(this.streamedTextLength);
-      this.streamedTextLength++;
-
-      this.typingTimer = later(this, this.typeCharacter, STREAMED_TEXT_SPEED);
-    } else {
-      this.typingTimer = null;
-    }
-  }
-
-  onTextUpdate() {
-    // Reset only if there’s a new summary to process
-    if (this.typingTimer) {
-      cancel(this.typingTimer);
-    }
-
-    this.typeCharacter();
-  }
-
   @bind
   async _updateSummary(update) {
     const topicSummary = {
@@ -169,14 +148,11 @@ export default class AiSummaryModal extends Component {
       raw: update.ai_topic_summary?.summarized_text,
       ...update.ai_topic_summary,
     };
-    const newText = topicSummary.raw || "";
+
     this.loading = false;
+    this.smoothStreamer.updateResult(topicSummary, "raw");
 
     if (update.done) {
-      this.text = newText;
-      this.streamedText = newText;
-      this.displayedTextLength = newText.length;
-      this.isStreaming = false;
       this.summarizedOn = shortDateNoYear(
         moment(topicSummary.updated_at, "YYYY-MM-DD HH:mm:ss Z")
       );
@@ -184,16 +160,6 @@ export default class AiSummaryModal extends Component {
       this.newPostsSinceSummary = topicSummary.new_posts_since_summary;
       this.outdated = topicSummary.outdated;
       this.canRegenerate = topicSummary.outdated && topicSummary.can_regenerate;
-
-      // Clear pending animations
-      if (this.typingTimer) {
-        cancel(this.typingTimer);
-        this.typingTimer = null;
-      }
-    } else if (newText.length > this.text.length) {
-      this.text = newText;
-      this.isStreaming = true;
-      this.onTextUpdate();
     }
   }
 
@@ -226,14 +192,14 @@ export default class AiSummaryModal extends Component {
             class={{concatClass
               "ai-summary-box"
               "streamable-content"
-              (if this.isStreaming "streaming")
+              (if this.smoothStreamer.isStreaming "streaming")
             }}
           >
             {{#if this.loading}}
               <AiSummarySkeleton />
             {{else}}
               <div class="generated-summary cooked">
-                <CookText @rawText={{this.streamedText}} />
+                <CookText @rawText={{this.smoothStreamer.renderedText}} />
               </div>
             {{/if}}
           </article>

From 725e12290045234eea71d2359137a1dabbb32928 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 26 Mar 2025 18:14:10 -0700
Subject: [PATCH 5/5] DEV: Add unit test

---
 .../discourse/lib/smooth-streamer.gjs         |   1 +
 .../unit/lib/smooth-streamer-test.js          | 106 ++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 test/javascripts/unit/lib/smooth-streamer-test.js

diff --git a/assets/javascripts/discourse/lib/smooth-streamer.gjs b/assets/javascripts/discourse/lib/smooth-streamer.gjs
index d62781692..7ce83afa9 100644
--- a/assets/javascripts/discourse/lib/smooth-streamer.gjs
+++ b/assets/javascripts/discourse/lib/smooth-streamer.gjs
@@ -52,6 +52,7 @@ export default class SmoothStreamer {
    */
   resetStreaming() {
     this.#cancelTypingTimer();
+    this.isStreaming = false;
     this.streamedText = "";
     this.streamedTextLength = 0;
   }
diff --git a/test/javascripts/unit/lib/smooth-streamer-test.js b/test/javascripts/unit/lib/smooth-streamer-test.js
new file mode 100644
index 000000000..411a4f61e
--- /dev/null
+++ b/test/javascripts/unit/lib/smooth-streamer-test.js
@@ -0,0 +1,106 @@
+import { later } from "@ember/runloop";
+import { settled } from "@ember/test-helpers";
+import { setupTest } from "ember-qunit";
+import { module, test } from "qunit";
+import SmoothStreamer from "discourse/plugins/discourse-ai/discourse/lib/smooth-streamer";
+
+module("Discourse AI | Unit | Lib | smooth-streamer", function (hooks) {
+  setupTest(hooks);
+
+  test("it initializes correctly", function (assert) {
+    let mockText = "";
+    const getRealtimeText = () => mockText;
+    const setRealtimeText = (val) => (mockText = val);
+
+    const streamer = new SmoothStreamer(getRealtimeText, setRealtimeText);
+
+    assert.false(streamer.isStreaming, "isStreaming should be false initially");
+    assert.strictEqual(
+      streamer.renderedText,
+      "",
+      "renderedText should be empty initially"
+    );
+  });
+
+  test("it streams text with animation", async function (assert) {
+    let mockText = "";
+    const getRealtimeText = () => mockText;
+    const setRealtimeText = (val) => (mockText = val);
+
+    const streamer = new SmoothStreamer(getRealtimeText, setRealtimeText);
+    const result1 = { text: "Hello", done: false };
+
+    await streamer.updateResult(result1, "text");
+    assert.true(
+      streamer.isStreaming,
+      "isStreaming should be true while animating"
+    );
+
+    await settled();
+    assert.strictEqual(
+      streamer.realtimeText,
+      "Hello",
+      "Realtime text should be updated immediately"
+    );
+    assert.ok(
+      streamer.streamedText.length > 0,
+      "Streamed text should start appearing"
+    );
+
+    await new Promise((resolve) => later(resolve, 50));
+    assert.strictEqual(
+      streamer.streamedText,
+      "Hello",
+      "Streamed text should fully appear"
+    );
+  });
+
+  test("it stops streaming when done", async function (assert) {
+    let mockText = "";
+    const getRealtimeText = () => mockText;
+    const setRealtimeText = (val) => (mockText = val);
+
+    const streamer = new SmoothStreamer(getRealtimeText, setRealtimeText);
+    await streamer.updateResult({ text: "Done text", done: true }, "text");
+
+    assert.false(streamer.isStreaming, "isStreaming should be false when done");
+    assert.strictEqual(
+      streamer.streamedText,
+      "Done text",
+      "Streamed text should be complete"
+    );
+    assert.strictEqual(
+      streamer.realtimeText,
+      "Done text",
+      "Realtime text should match the final input"
+    );
+  });
+
+  test("resetStreaming clears all progress", function (assert) {
+    let mockText = "Some text";
+    const getRealtimeText = () => mockText;
+    const setRealtimeText = (val) => (mockText = val);
+
+    const streamer = new SmoothStreamer(getRealtimeText, setRealtimeText);
+    streamer.streamedText = "Some text";
+    streamer.streamedTextLength = 9;
+    streamer.isStreaming = true;
+
+    streamer.resetStreaming();
+
+    assert.strictEqual(
+      streamer.streamedText,
+      "",
+      "Streamed text should be cleared"
+    );
+    assert.strictEqual(
+      streamer.streamedTextLength,
+      0,
+      "Streamed text length should be reset"
+    );
+    assert.false(
+      streamer.isStreaming,
+      "isStreaming should be false after reset"
+    );
+  });
+});