feat: replace react-markdown with streamdown for streaming support#172
Open
nickytonline wants to merge 6 commits intomainfrom
Open
feat: replace react-markdown with streamdown for streaming support#172nickytonline wants to merge 6 commits intomainfrom
nickytonline wants to merge 6 commits intomainfrom
Conversation
- Replace react-markdown and remark-gfm dependencies with streamdown - Add isAnimating prop to MarkdownContent component - Add isStreaming prop to BotMessage component - Update component type annotations for better type safety - Update test snapshots to reflect component changes This change enables animated markdown rendering during streaming, improving the user experience when viewing AI responses. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
❌ Deploy Preview for mcp-storybook failed. Why did it fail? →
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces react-markdown with streamdown to enable animated markdown rendering during AI response streaming, improving the user experience when viewing real-time AI responses. The change maintains all existing markdown rendering capabilities while adding streaming animation support.
Changes:
- Replaced
react-markdownandremark-gfmdependencies withstreamdownpackage - Added
isAnimatingprop toMarkdownContentcomponent to control streaming animations - Added
isStreamingprop toBotMessagecomponent and wired it through to trigger animations - Updated component type annotations using
ComponentProps<T>for better type safety - Added Tailwind CSS source directive for streamdown styles
- Updated test snapshots to reflect new streamdown HTML output with styling attributes
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Removed react-markdown and remark-gfm; added streamdown dependency |
| package-lock.json | Updated lockfile with streamdown and its transitive dependencies including updated tailwind-merge |
| src/styles.css | Added @source directive to scan streamdown JavaScript files for Tailwind classes |
| src/components/MarkdownContent.tsx | Replaced ReactMarkdown with Streamdown component; added isAnimating prop; improved type annotations with ComponentProps |
| src/components/BotMessage.tsx | Added isStreaming prop and passed it as isAnimating to MarkdownContent |
| src/components/Chat.tsx | Added isStreaming prop to BotMessage calls, set to true only for the last message during active streaming |
| src/components/snapshots/BotMessage.test.tsx.snap | Updated snapshot to reflect streamdown's HTML output with additional CSS classes and data attributes |
wasaga
approved these changes
Jan 27, 2026
Adds test case to verify that the isStreaming prop is correctly passed from BotMessage to MarkdownContent for animation control. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Regenerated lock file to include all platform-specific optional dependencies for @tailwindcss/oxide. The previous lock file only included Darwin (macOS) platforms, causing npm ci to fail in Linux CI/CD environments. Changes: - Upgraded @tailwindcss packages from 4.1.10 to 4.1.18 - Included all platform-specific optional dependencies (Linux, Windows, etc.) - Removed @parcel/watcher (no longer needed by dependencies) This fixes the "Missing from lock file" errors in CI/CD. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Member
Author
|
Fixing the Linux does for the docker build caused all kinds of issues so going to sort this out later |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This change enables animated markdown rendering during streaming,
improving the user experience when viewing AI responses.
Hard to show in a screenshot, but you'll no longer see partial markdown. It will always be HTML now.
Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com