FEATURE: Add diff streaming animation (#1355)

Previously we attempted to add a diff streaming animation to the AI composer helper: #1332, but it resulted in issues despite attempted fixes (#1338) so we temporarily suppressed the diff animation (#1341).

This update makes a second attempt at implementing the diff streaming animation. Instead of creating a custom diff algorithm, we make use of a third-party library [`jsDiff`](https://github.com/kpdecker/jsdiff) (which we added to core here: discourse/discourse#32833). While streaming, the diff animation often struggles with markdown links and images, so we make use of `markdown-it` parser to detect those cases and prevent breaking the animation.

---------

Co-authored-by: Sam Saffron <[email protected]>

Author: keegangeorge

assets/javascripts/discourse/components/modal/diff-modal.gjs

@@ -23,21 +23,23 @@ export default class ModalDiffModal extends Component {
 
   @tracked loading = false;
   @tracked finalResult = "";
-  @tracked showcasedDiff = "";
   @tracked diffStreamer = new DiffStreamer(this.args.model.selectedText);
   @tracked suggestion = "";
   @tracked
   smoothStreamer = new SmoothStreamer(
     () => this.suggestion,
     (newValue) => (this.suggestion = newValue)
   );
-  @tracked isStreaming = false;
 
   constructor() {
     super(...arguments);
     this.suggestChanges();
   }
 
+  get isStreaming() {
+    return this.diffStreamer.isStreaming || this.smoothStreamer.isStreaming;
+  }
+
   get primaryBtnLabel() {
     return this.loading
       ? i18n("discourse_ai.ai_helper.context_menu.loading")
@@ -62,23 +64,14 @@ export default class ModalDiffModal extends Component {
 
   @action
   async updateResult(result) {
-    // TODO(@keegan)
-    // Temporarily we are removing the animation using the diff streamer
-    // and simply showing the diff streamed without a proper animation
-    // while we figure things out
-    // so that things are not too janky in the meantime.
     this.loading = false;
-    this.isStreaming = true;
 
     if (result.done) {
       this.finalResult = result.result;
     }
 
-    this.showcasedDiff = result.diff;
-
     if (result.done) {
       this.loading = false;
-      this.isStreaming = false;
     }
 
     if (this.args.model.showResultAsDiff) {
@@ -143,7 +136,7 @@ export default class ModalDiffModal extends Component {
         <div {{didInsert this.subscribe}} {{willDestroy this.unsubscribe}}>
           {{#if this.loading}}
             <div class="composer-ai-helper-modal__loading">
-              <CookText @rawText={{@model.selectedText}} />
+              {{~@model.selectedText~}}
             </div>
           {{else}}
             <div
@@ -152,10 +145,13 @@ export default class ModalDiffModal extends Component {
                 "streamable-content"
                 (if this.isStreaming "streaming")
                 (if @model.showResultAsDiff "inline-diff")
+                (if this.diffStreamer.isThinking "thinking")
               }}
             >
-              {{#if @model.showResultAsDiff}}
-                {{htmlSafe this.showcasedDiff}}
+              {{~#if @model.showResultAsDiff~}}
+                <span class="diff-inner">{{htmlSafe
+                    this.diffStreamer.diff
+                  }}</span>
               {{else}}
                 {{#if this.smoothStreamer.isStreaming}}
                   <CookText