feat(markdown): migrate from react-markdown to streamdown

waleedlatif1 · waleedlatif1 · commit 87e50be8299e · 2026-02-10T22:22:54.000-08:00
diff --git a/apps/sim/app/changelog/components/timeline-list.tsx b/apps/sim/app/changelog/components/timeline-list.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React from 'react'
-import ReactMarkdown from 'react-markdown'
+import { Streamdown } from 'streamdown'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
@@ -145,75 +145,58 @@ export default function ChangelogList({ initialEntries }: Props) {
           <div
             className={`${inter.className} prose prose-sm dark:prose-invert max-w-none prose-headings:font-semibold prose-a:text-brand-primary prose-headings:text-foreground prose-p:text-muted-foreground prose-a:no-underline hover:prose-a:underline`}
           >
-            <ReactMarkdown
+            <Streamdown
               components={{
-                h2: ({ children, ...props }) =>
+                h2: ({ children }: any) =>
                   isContributorsLabel(children) ? null : (
                     <h3
                       className={`${soehne.className} mt-5 mb-2 font-medium text-[13px] text-foreground tracking-tight`}
-                      {...props}
                     >
                       {children}
                     </h3>
                   ),
-                h3: ({ children, ...props }) =>
+                h3: ({ children }: any) =>
                   isContributorsLabel(children) ? null : (
                     <h4
                       className={`${soehne.className} mt-4 mb-1 font-medium text-[13px] text-foreground tracking-tight`}
-                      {...props}
                     >
                       {children}
                     </h4>
                   ),
-                ul: ({ children, ...props }) => (
-                  <ul className='mt-2 mb-3 space-y-1.5' {...props}>
-                    {children}
-                  </ul>
-                ),
-                li: ({ children, ...props }) => {
+                ul: ({ children }: any) => <ul className='mt-2 mb-3 space-y-1.5'>{children}</ul>,
+                li: ({ children }: any) => {
                   const text = String(children)
                   if (/^\s*contributors\s*:?\s*$/i.test(text)) return null
                   return (
-                    <li className='text-[13px] text-muted-foreground leading-relaxed' {...props}>
+                    <li className='text-[13px] text-muted-foreground leading-relaxed'>
                       {children}
                     </li>
                   )
                 },
-                p: ({ children, ...props }) =>
+                p: ({ children }: any) =>
                   /^\s*contributors\s*:?\s*$/i.test(String(children)) ? null : (
-                    <p
-                      className='mb-3 text-[13px] text-muted-foreground leading-relaxed'
-                      {...props}
-                    >
+                    <p className='mb-3 text-[13px] text-muted-foreground leading-relaxed'>
                       {children}
                     </p>
                   ),
-                strong: ({ children, ...props }) => (
-                  <strong className='font-medium text-foreground' {...props}>
-                    {children}
-                  </strong>
+                strong: ({ children }: any) => (
+                  <strong className='font-medium text-foreground'>{children}</strong>
                 ),
-                code: ({ children, ...props }) => (
-                  <code
-                    className='rounded bg-muted px-1 py-0.5 font-mono text-foreground text-xs'
-                    {...props}
-                  >
+                code: ({ children }: any) => (
+                  <code className='rounded bg-muted px-1 py-0.5 font-mono text-foreground text-xs'>
                     {children}
                   </code>
                 ),
                 img: () => null,
-                a: ({ className, ...props }: any) => (
-                  <a
-                    {...props}
-                    className={`underline ${className ?? ''}`}
-                    target='_blank'
-                    rel='noreferrer'
-                  />
+                a: ({ href, children }: any) => (
+                  <a href={href} className='underline' target='_blank' rel='noreferrer'>
+                    {children}
+                  </a>
                 ),
               }}
             >
               {cleanMarkdown(entry.content)}
-            </ReactMarkdown>
+            </Streamdown>
           </div>
         </div>
       ))}
diff --git a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
@@ -1,6 +1,5 @@
 import React, { type HTMLAttributes, memo, type ReactNode, useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Streamdown } from 'streamdown'
 import { Tooltip } from '@/components/emcn'
 
 export function LinkWithPreview({ href, children }: { href: string; children: React.ReactNode }) {
@@ -23,8 +22,6 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
   )
 }
 
-const REMARK_PLUGINS = [remarkGfm]
-
 function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
   return {
     p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
@@ -209,9 +206,7 @@ const MarkdownRenderer = memo(function MarkdownRenderer({
 
   return (
     <div className='space-y-4 break-words font-sans text-[#0D0D0D] text-base leading-relaxed dark:text-gray-100'>
-      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={components}>
-        {processedContent}
-      </ReactMarkdown>
+      <Streamdown components={components}>{processedContent}</Streamdown>
     </div>
   )
 })
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
@@ -14,7 +14,7 @@ import {
   User,
 } from 'lucide-react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
-import ReactMarkdown from 'react-markdown'
+import { Streamdown } from 'streamdown'
 import {
   Breadcrumb,
   Button,
@@ -895,7 +895,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 About this Workflow
               </h3>
               <div className='max-w-none space-y-2'>
-                <ReactMarkdown
+                <Streamdown
                   components={{
                     p: ({ children }) => (
                       <p className='mb-2 font-sans text-muted-foreground text-sm leading-[1.4rem] last:mb-0'>
@@ -962,7 +962,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                   }}
                 >
                   {template.details.about}
-                </ReactMarkdown>
+                </Streamdown>
               </div>
             </div>
           )}
@@ -1076,7 +1076,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     {/* Creator bio */}
                     {template.creator.details?.about && (
                       <div className='max-w-none'>
-                        <ReactMarkdown
+                        <Streamdown
                           components={{
                             p: ({ children }) => (
                               <p className='mb-2 font-sans text-muted-foreground text-sm leading-[1.4rem] last:mb-0'>
@@ -1101,7 +1101,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                           }}
                         >
                           {template.creator.details.about}
-                        </ReactMarkdown>
+                        </Streamdown>
                       </div>
                     )}
                   </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -1,8 +1,6 @@
 import { memo, useCallback, useMemo } from 'react'
-import ReactMarkdown from 'react-markdown'
 import type { NodeProps } from 'reactflow'
-import remarkBreaks from 'remark-breaks'
-import remarkGfm from 'remark-gfm'
+import { Streamdown } from 'streamdown'
 import { cn } from '@/lib/core/utils/cn'
 import { BLOCK_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -300,13 +298,45 @@ function getEmbedInfo(url: string): EmbedInfo | null {
   return null
 }
 
+/**
+ * Converts single newlines to GFM hard breaks (trailing double space)
+ * so freeform note text preserves line breaks without remark-breaks.
+ * Leaves double newlines (paragraph breaks) and code fences untouched.
+ */
+function softBreaks(text: string): string {
+  const lines = text.split('\n')
+  const result: string[] = []
+  let inCodeFence = false
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (/^```/.test(line.trimStart())) inCodeFence = !inCodeFence
+
+    if (inCodeFence || i === lines.length - 1) {
+      result.push(line)
+      continue
+    }
+
+    const nextLine = lines[i + 1]
+    const isBlankNext = nextLine.trim() === ''
+    const isBlankCurrent = line.trim() === ''
+
+    if (isBlankCurrent || isBlankNext) {
+      result.push(line)
+    } else {
+      result.push(line.endsWith('  ') ? line : `${line}  `)
+    }
+  }
+
+  return result.join('\n')
+}
+
 /**
  * Compact markdown renderer for note blocks with tight spacing
  */
 const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }) {
   return (
-    <ReactMarkdown
-      remarkPlugins={[remarkGfm, remarkBreaks]}
+    <Streamdown
       components={{
         p: ({ children }: any) => (
           <p className='mb-1 break-words text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0'>
@@ -469,8 +499,8 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
         ),
       }}
     >
-      {content}
-    </ReactMarkdown>
+      {softBreaks(content)}
+    </Streamdown>
   )
 })
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx
@@ -2,12 +2,9 @@
 
 import React, { memo, useCallback, useState } from 'react'
 import { Check, Copy } from 'lucide-react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import { Streamdown } from 'streamdown'
 import { Code, Tooltip } from '@/components/emcn'
 
-const REMARK_PLUGINS = [remarkGfm]
-
 /**
  * Recursively extracts text content from React elements
  * @param element - React node to extract text from
@@ -313,17 +310,15 @@ const markdownComponents = {
 
 /**
  * CopilotMarkdownRenderer renders markdown content with custom styling
- * Optimized for LLM chat: tight spacing, memoized components, isolated state
+ * Uses Streamdown for streaming-optimized rendering with incomplete markdown handling
  *
  * @param props - Component props
  * @returns Rendered markdown content
  */
 function CopilotMarkdownRenderer({ content }: CopilotMarkdownRendererProps) {
   return (
     <div className='max-w-full break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.4] dark:font-[470] [&_*]:max-w-full [&_a]:break-all [&_code:not(pre_code)]:break-words [&_li]:break-words [&_p]:break-words'>
-      <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={markdownComponents}>
-        {content}
-      </ReactMarkdown>
+      <Streamdown components={markdownComponents}>{content}</Streamdown>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx
@@ -1,10 +1,7 @@
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import { CopilotMarkdownRenderer } from '../markdown-renderer'
 
-/** Character animation delay in milliseconds */
-const CHARACTER_DELAY = 3
-
 /** Props for the StreamingIndicator component */
 interface StreamingIndicatorProps {
   /** Optional class name for layout adjustments */
@@ -26,74 +23,22 @@ StreamingIndicator.displayName = 'StreamingIndicator'
 
 /** Props for the SmoothStreamingText component */
 interface SmoothStreamingTextProps {
-  /** Content to display with streaming animation */
+  /** Content to display with streaming-aware rendering */
   content: string
-  /** Whether the content is actively streaming */
+  /** Whether the content is actively streaming (kept for API compatibility) */
   isStreaming: boolean
 }
 
-/** Displays text with character-by-character animation for smooth streaming */
+/**
+ * Displays streamed text using Streamdown's native incomplete markdown handling.
+ * Streamdown gracefully renders partial markdown (unclosed bold, links, code fences)
+ * so no character-by-character buffering is needed.
+ */
 export const SmoothStreamingText = memo(
-  ({ content, isStreaming }: SmoothStreamingTextProps) => {
-    const [displayedContent, setDisplayedContent] = useState(() => (isStreaming ? '' : content))
-    const contentRef = useRef(content)
-    const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-    const indexRef = useRef(isStreaming ? 0 : content.length)
-    const isAnimatingRef = useRef(false)
-
-    useEffect(() => {
-      contentRef.current = content
-
-      if (content.length === 0) {
-        setDisplayedContent('')
-        indexRef.current = 0
-        return
-      }
-
-      if (isStreaming) {
-        if (indexRef.current < content.length) {
-          const animateText = () => {
-            const currentContent = contentRef.current
-            const currentIndex = indexRef.current
-
-            if (currentIndex < currentContent.length) {
-              const newDisplayed = currentContent.slice(0, currentIndex + 1)
-              setDisplayedContent(newDisplayed)
-              indexRef.current = currentIndex + 1
-              timeoutRef.current = setTimeout(animateText, CHARACTER_DELAY)
-            } else {
-              isAnimatingRef.current = false
-            }
-          }
-
-          if (!isAnimatingRef.current) {
-            if (timeoutRef.current) {
-              clearTimeout(timeoutRef.current)
-            }
-            isAnimatingRef.current = true
-            animateText()
-          }
-        }
-      } else {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current)
-        }
-        setDisplayedContent(content)
-        indexRef.current = content.length
-        isAnimatingRef.current = false
-      }
-
-      return () => {
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current)
-        }
-        isAnimatingRef.current = false
-      }
-    }, [content, isStreaming])
-
+  ({ content }: SmoothStreamingTextProps) => {
     return (
       <div className='min-h-[1.25rem] max-w-full'>
-        <CopilotMarkdownRenderer content={displayedContent} />
+        <CopilotMarkdownRenderer content={content} />
       </div>
     )
   },
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx
diff --git a/apps/sim/package.json b/apps/sim/package.json
diff --git a/bun.lock b/bun.lock
