Add animated streaming to AI chat panel via Streamdown 2.2+

[sshtomar]

Feature request

The AI chat panel currently renders streaming text without animation. Streamdown 2.2+ (marimo already depends on at ^1.3.0) ships with built-in per-word animation and a streaming caret that would make the chat experience significantly smoother.

Current behavior

MarkdownRenderer passes content to <Streamdown> without animated, isAnimating, or caret props. Text appears as raw token dumps — functional but flat compared to ChatGPT, Claude.ai, and Cursor, which all use per-word fade/blur-in animations.

Proposed change

1. Upgrade streamdown from ^1.3.0 to ^2.2.0
2. Add isStreaming prop to MarkdownRenderer
3. Enable animation + caret during active streaming

The diff is small:

// markdown-renderer.tsx
export const MarkdownRenderer = memo(({ content, isStreaming }: {
  content: string;
  isStreaming?: boolean;
}) => {
  return (
    <Streamdown
      components={COMPONENTS}
      className="mo-markdown-renderer"
      animated={{
        animation: "blurIn",
        duration: 200,
        easing: "ease-out",
        sep: "word",
      }}
      isAnimating={isStreaming}
      caret={isStreaming ? "block" : undefined}
    >
      {content}
    </Streamdown>
  );
});

// chat-panel.tsx, line ~206
case "text":
  return <MarkdownRenderer key={i} content={part.text} isStreaming={isLast && isLoading} />;

Why blurIn

For fast models (200+ tokens/sec), multiple tokens arrive per React commit. blurIn combines opacity + blur-to-sharp which masks batch arrivals better than pure fadeIn. The caret (block) adds a blinking cursor at the streaming edge via CSS ::after pseudo-element with zero extra DOM nodes.

References

• Streamdown 2.2 animation docs
• Streamdown 2.2 changelog
• Per-word animation discussion

[mscolnick]

@sshtomar this sounds like a great change. would you be open to the contribution? no worries if not.

[sshtomar]

@mscolnick Yes, would love to take this up!