FIX: Decouple DOM manipulation from SummaryUpdater streamer

assets/javascripts/discourse/connectors/topic-map-expanded-after/ai-summary-box.gjs

@@ -8,6 +8,7 @@ import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
 import { next } from "@ember/runloop";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
 import { ajax } from "discourse/lib/ajax";
 import { shortDateNoYear } from "discourse/lib/formatter";
 import dIcon from "discourse-common/helpers/d-icon";
@@ -32,6 +33,7 @@ export default class AiSummaryBox extends Component {
   @tracked outdated = false;
   @tracked canRegenerate = false;
   @tracked loading = false;
+  @tracked isStreaming = false;
   oldRaw = null; // used for comparison in SummaryUpdater in lib/ai-streamer
   finalSummary = null;
 
@@ -147,9 +149,11 @@ export default class AiSummaryBox extends Component {
     };
     this.loading = false;
 
+    this.isStreaming = true;
     streamSummaryText(topicSummary, this);
 
     if (update.done) {
+      this.isStreaming = false;
       this.text = this.finalSummary;
       this.summarizedOn = shortDateNoYear(
         moment(topicSummary.updated_at, "YYYY-MM-DD HH:mm:ss Z")
@@ -212,11 +216,18 @@ export default class AiSummaryBox extends Component {
                 {{/if}}
               </header>
 
-              <article class="ai-summary-box">
+              <article
+                class={{concatClass
+                  "ai-summary-box"
+                  (if this.isStreaming "streaming")
+                }}
+              >
                 {{#if this.loading}}
                   <AiSummarySkeleton />
                 {{else}}
-                  <div class="generated-summary cooked">{{this.text}}</div>
+                  <div class="generated-summary cooked">
+                    {{this.text}}
+                  </div>
                   {{#if this.summarizedOn}}
                     <div class="summarized-on">
                       <p>

assets/javascripts/discourse/lib/ai-streamer.js

@@ -152,9 +152,9 @@ export class SummaryUpdater extends StreamUpdater {
   set streaming(value) {
     if (this.element) {
       if (value) {
-        this.element.classList.add("streaming");
+        this.componentContext.isStreaming = true;
       } else {
-        this.element.classList.remove("streaming");
+        this.componentContext.isStreaming = false;
       }
     }
   }
@@ -163,27 +163,15 @@ export class SummaryUpdater extends StreamUpdater {
     this.componentContext.oldRaw = value;
     const cooked = await cook(value);
 
-    // resets animation
-    this.element.classList.remove("streaming");
-    void this.element.offsetWidth;
-    this.element.classList.add("streaming");
-
-    const cookedElement = document.createElement("div");
-    cookedElement.innerHTML = cooked;
-
-    if (!done) {
-      addProgressDot(cookedElement);
-    }
-    await this.setCooked(cookedElement.innerHTML);
+    await this.setCooked(cooked);
 
     if (done) {
       this.componentContext.finalSummary = cooked;
     }
   }
 
   async setCooked(value) {
-    const cookedContainer = this.element.querySelector(".generated-summary");
-    cookedContainer.innerHTML = value;
+    this.componentContext.text = value;
   }
 
   get raw() {

assets/stylesheets/common/streaming.scss

@@ -8,18 +8,26 @@
   }
 }
 
+@mixin progress-dot {
+  content: "\25CF";
+  font-family: Söhne Circle, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
+    Cantarell, Noto Sans, sans-serif;
+  line-height: normal;
+  margin-left: 0.25rem;
+  vertical-align: baseline;
+  animation: flashing 1.5s 3s infinite;
+  display: inline-block;
+  font-size: 1rem;
+  color: var(--tertiary-medium);
+}
+
+.streaming .cooked p:last-child::after {
+  @include progress-dot;
+}
+
 article.streaming .cooked {
   .progress-dot::after {
-    content: "\25CF";
-    font-family: Söhne Circle, system-ui, -apple-system, Segoe UI, Roboto,
-      Ubuntu, Cantarell, Noto Sans, sans-serif;
-    line-height: normal;
-    margin-left: 0.25rem;
-    vertical-align: baseline;
-    animation: flashing 1.5s 3s infinite;
-    display: inline-block;
-    font-size: 1rem;
-    color: var(--tertiary-medium);
+    @include progress-dot;
   }
 
   > .progress-dot:only-child::after {