feat: replace react-markdown with streamdown for streaming support

package.json

@@ -10,7 +10,7 @@
     "test": "vitest run",
     "test:ci": "vitest run --coverage",
     "lint": "eslint --fix",
-    "format": "prettier --write",
+    "format": "prettier --write .",
     "format:check": "prettier --check . && eslint .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "npm ci && storybook build"
@@ -44,9 +44,8 @@
     "openai": "^4.103.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.6",
+    "streamdown": "^2.1.0",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",

src/components/BotMessage.test.tsx

@@ -466,4 +466,23 @@ describe('BotMessage', () => {
       expect(mockExecCommand).toHaveBeenCalledWith('copy')
     }
   })
+
+  it('passes isStreaming prop to MarkdownContent for animation control', () => {
+    const message: Message = {
+      id: 'msg-1',
+      content: 'Streaming message content...',
+      timestamp: '2025-07-06T12:00:00Z',
+      status: 'sent',
+    }
+
+    const { container } = render(
+      <BotMessage message={message} isStreaming={true} />,
+    )
+
+    const markdownContainer = container.querySelector('[data-raw-markdown]')
+    expect(markdownContainer).toBeInTheDocument()
+    expect(markdownContainer?.getAttribute('data-raw-markdown')).toBe(
+      'Streaming message content...',
+    )
+  })
 })

src/components/BotMessage.tsx

@@ -21,9 +21,14 @@ export interface Message extends Omit<AssistantStreamEvent, 'type'> {
 export interface BotMessageProps {
   message: Message
   fileAnnotations?: Array<AnnotatedFile>
+  isStreaming?: boolean
 }
 
-export function BotMessage({ message, fileAnnotations = [] }: BotMessageProps) {
+export function BotMessage({
+  message,
+  fileAnnotations = [],
+  isStreaming = false,
+}: BotMessageProps) {
   const [imageErrors, setImageErrors] = useState<Set<string>>(new Set())
   const processedContent = replaceSandboxUrls(message.content, fileAnnotations)
 
@@ -71,7 +76,7 @@ export function BotMessage({ message, fileAnnotations = [] }: BotMessageProps) {
           <div data-raw-markdown={processedContent}>
             <MarkdownContent
               content={processedContent}
-              fileAnnotations={fileAnnotations}
+              isAnimating={isStreaming}
             />
           </div>
 

src/components/Chat.tsx

@@ -317,6 +317,7 @@ export function Chat() {
                       status: 'sent',
                     }}
                     fileAnnotations={[event.annotation]}
+                    isStreaming={false}
                   />
                 )
               } else if ('type' in event && event.type === 'error') {
@@ -332,6 +333,7 @@ export function Chat() {
                       status: 'sent',
                     }}
                     fileAnnotations={event.fileAnnotations || []}
+                    isStreaming={streaming && idx === renderEvents.length - 1}
                   />
                 )
               } else if ('type' in event && event.type === 'user') {
@@ -369,6 +371,9 @@ export function Chat() {
                           timestamp: getTimestamp(),
                           status: 'sent',
                         }}
+                        isStreaming={
+                          streaming && idx === renderEvents.length - 1
+                        }
                       />
                     )
                   } else {

src/components/MarkdownContent.tsx

@@ -1,15 +1,17 @@
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Streamdown } from 'streamdown'
 import { toast } from 'sonner'
-import type { AnnotatedFile } from '@/lib/utils/code-interpreter'
+import type { ComponentProps } from 'react'
 import { CodeBlock } from '@/components/CodeBlock'
 
 type MarkdownContentProps = {
   content: string
-  fileAnnotations?: Array<AnnotatedFile>
+  isAnimating?: boolean
 }
 
-export function MarkdownContent({ content }: MarkdownContentProps) {
+export function MarkdownContent({
+  content,
+  isAnimating = false,
+}: MarkdownContentProps) {
   const handleCopySuccess = () => {
     toast.success('Copied code snippet to clipboard')
   }
@@ -20,10 +22,10 @@ export function MarkdownContent({ content }: MarkdownContentProps) {
 
   return (
     <div className="prose prose-sm dark:prose-invert max-w-none break-words">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
+      <Streamdown
+        isAnimating={isAnimating}
         components={{
-          pre: ({ children, ...props }) => (
+          pre: ({ children, ...props }: ComponentProps<'pre'>) => (
             <CodeBlock
               onCopySuccess={handleCopySuccess}
               onCopyError={handleCopyError}
@@ -32,15 +34,15 @@ export function MarkdownContent({ content }: MarkdownContentProps) {
               {children}
             </CodeBlock>
           ),
-          code: ({ ...props }) => (
+          code: ({ ...props }: ComponentProps<'code'>) => (
             <code className="break-words whitespace-pre-wrap" {...props} />
           ),
-          table: ({ ...props }) => (
+          table: ({ ...props }: ComponentProps<'table'>) => (
             <div className="overflow-x-auto my-4">
               <table {...props} />
             </div>
           ),
-          a: ({ href, children, ...props }) => (
+          a: ({ href, children, ...props }: ComponentProps<'a'>) => (
             <a
               href={href}
               className="break-words"
@@ -54,7 +56,7 @@ export function MarkdownContent({ content }: MarkdownContentProps) {
         }}
       >
         {content}
-      </ReactMarkdown>
+      </Streamdown>
     </div>
   )
 }