fix(mothership): stop chat perf decay from permanently-animated streamed messages

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type ComponentPropsWithoutRef, memo, useEffect, useMemo, useRef } from 'react'
+import { type ComponentPropsWithoutRef, memo, useEffect, useMemo, useRef, useState } from 'react'
 import { Streamdown } from 'streamdown'
 import 'streamdown/styles.css'
 // prismjs core must load before its language components — they register on the
@@ -53,17 +53,42 @@ const PROSE_CLASSES = cn(
 
 /**
  * Soft fade for newly revealed text. Paired with {@link useSmoothText}, which
- * paces the reveal: `sep: 'char'` fades each character as the pacer exposes it
- * (so a growing trailing word never re-animates), and `stagger: 0` keeps the
- * cadence driven by the pacer rather than an overlapping per-token delay ramp.
+ * paces the reveal; `stagger: 0` keeps the cadence driven by the pacer rather
+ * than an overlapping per-token delay ramp — every span revealed in one tick
+ * fades as a unit, so `sep: 'word'` looks identical to `sep: 'char'` while
+ * creating ~5x fewer spans. That span count is the dominant mid-stream cost:
+ * the animate plugin rebuilds a span per token for the WHOLE trailing block on
+ * every reveal tick, so per-char wrapping of a long paragraph meant thousands
+ * of hast nodes + React elements reconciled ~40x/sec. Streamdown's
+ * prev-content tracking keeps a word that grows across two ticks from
+ * re-fading (its continuation renders unfaded), and the pacer's word-boundary
+ * snapping makes such splits rare to begin with.
  */
 const STREAM_ANIMATION = {
   animation: 'fadeIn',
   duration: 220,
   stagger: 0,
-  sep: 'char',
+  sep: 'word',
 } as const
 
+/**
+ * How long after the reveal fully settles before the animated tree is dropped.
+ * Must exceed {@link STREAM_ANIMATION}'s 220ms duration so the last characters
+ * finish fading at full opacity before their spans are swapped for plain text.
+ */
+const ANIMATION_DRAIN_MS = 300
+
+/**
+ * Once a segment has revealed this many characters, new text stops fading in;
+ * the word-paced reveal itself is unchanged. Fade cost scales with segment
+ * length — every reveal tick rebuilds a span per word for the WHOLE trailing
+ * markdown block — so on an unbroken wall of text it eventually swamps the
+ * frame budget (measured: ~9k-char single paragraphs spent ~30% of main-thread
+ * time in long tasks) while the fade itself is imperceptible detail that deep
+ * into a reply.
+ */
+const FADE_MAX_REVEALED_CHARS = 6000
+
 function startsInlineWord(value: string): boolean {
   return /^[A-Za-z0-9_(]/.test(value)
 }
@@ -306,19 +331,51 @@ function ChatContentInner({
   }, [isRevealing])
 
   /**
-   * One-way latch: once a message has streamed in this mount, keep rendering it
-   * through Streamdown's streaming/animation pipeline for the rest of its life.
-   * Drives `mode`, `animated`, AND `isAnimating` together — all three must stay
-   * constant across the completion boundary. Streamdown removes the per-word
-   * `<span>` wrappers (and re-parses the whole message) the instant `isAnimating`
-   * goes false, so wiring `isAnimating` to `isRevealing` (which flips at
-   * completion) reintroduces the streaming→static flash this latch exists to
-   * prevent. Content is stable once revealed, so a permanently-true
-   * `isAnimating` never re-fades anything.
+   * Streaming-tree lifecycle. While a message streams (and until its reveal
+   * drains), it renders through Streamdown's streaming/animated pipeline, whose
+   * animate plugin wraps every character in its own `<span data-sd-animate>` —
+   * thousands of DOM nodes per streamed message. Holding that tree forever made
+   * long sessions progressively laggier until a refresh (which renders the same
+   * transcript static). `animationDrained` flips one-way
+   * {@link ANIMATION_DRAIN_MS} after the reveal settles and swaps to the static
+   * pipeline; the drain window lets the last 220ms fades finish so the swap
+   * trades identical pixels, unlike flipping at `isRevealing`'s edge, which cut
+   * running fades short (the old completion flash).
+   *
+   * The swap must REMOUNT Streamdown (via `key`), not just flip its props:
+   * Streamdown's default element components are memoized on className + source
+   * position (`E`/`qe` in streamdown 2.5), so a re-parse of unchanged content
+   * without the animate plugin bails at every unoverridden element (`p`,
+   * `strong`, `tr`, headings, …) and leaves the stale per-char span DOM in
+   * place. Remounting also converges the settled DOM byte-for-byte with what a
+   * reloaded transcript renders.
+   *
+   * The drain is deliberately one-way: a stream that resumes afterwards
+   * (reconnect/continuation) reveals paced but unfaded, because re-arming
+   * mounts a fresh animate plugin with no prev-content tracking, which would
+   * re-fade the entire already-visible message.
    */
   const streamedThisSession = useRef(false)
   if (isStreaming) streamedThisSession.current = true
-  const keepStreamingTree = isRevealing || streamedThisSession.current
+
+  const [animationDrained, setAnimationDrained] = useState(false)
+  useEffect(() => {
+    if (isRevealing || animationDrained || !streamedThisSession.current) return
+    const timeout = setTimeout(() => setAnimationDrained(true), ANIMATION_DRAIN_MS)
+    return () => clearTimeout(timeout)
+  }, [isRevealing, animationDrained])
+
+  const streamingTree = (isRevealing || streamedThisSession.current) && !animationDrained
+
+  /**
+   * One-way fade cutoff (see {@link FADE_MAX_REVEALED_CHARS}). Latched so a
+   * sanitize-induced content shrink back across the boundary cannot re-arm
+   * `animated` — a fresh animate plugin has no prev-content tracking and would
+   * re-fade the entire visible segment.
+   */
+  const fadeCutoffRef = useRef(false)
+  if (streamedContent.length > FADE_MAX_REVEALED_CHARS) fadeCutoffRef.current = true
+  const fadeActive = streamingTree && !fadeCutoffRef.current
 
   useEffect(() => {
     const handler = (e: Event) => {
@@ -392,9 +449,10 @@ function ChatContentInner({
                 className={cn(PROSE_CLASSES, '[&>:first-child]:mt-0 [&>:last-child]:mb-0')}
               >
                 <Streamdown
-                  mode={keepStreamingTree ? undefined : 'static'}
-                  animated={keepStreamingTree ? STREAM_ANIMATION : false}
-                  isAnimating={keepStreamingTree}
+                  key={streamingTree ? 'stream' : 'static'}
+                  mode={streamingTree ? undefined : 'static'}
+                  animated={fadeActive ? STREAM_ANIMATION : false}
+                  isAnimating={streamingTree}
                   components={MARKDOWN_COMPONENTS}
                 >
                   {group.markdown}
@@ -418,9 +476,10 @@ function ChatContentInner({
   return (
     <div className={cn(PROSE_CLASSES, '[&>:first-child]:mt-0 [&>:last-child]:mb-0')}>
       <Streamdown
-        mode={keepStreamingTree ? undefined : 'static'}
-        animated={keepStreamingTree ? STREAM_ANIMATION : false}
-        isAnimating={keepStreamingTree}
+        key={streamingTree ? 'stream' : 'static'}
+        mode={streamingTree ? undefined : 'static'}
+        animated={fadeActive ? STREAM_ANIMATION : false}
+        isAnimating={streamingTree}
         components={MARKDOWN_COMPONENTS}
       >
         {streamedContent}