fix(stream): add shared StreamingText component for smooth streaming animation

Author: waleedlatif1

apps/sim/app/chat/components/message/message.tsx

@@ -3,6 +3,7 @@
 import { memo, useMemo, useState } from 'react'
 import { Check, Copy, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
+import { StreamingText } from '@/components/ui/streaming-text'
 import {
   ChatFileDownload,
   ChatFileDownloadAll,
@@ -42,6 +43,8 @@ function EnhancedMarkdownRenderer({ content }: { content: string }) {
   return <MarkdownRenderer content={content} />
 }
 
+const renderMarkdown = (content: string) => <EnhancedMarkdownRenderer content={content} />
+
 export const ClientChatMessage = memo(
   function ClientChatMessage({ message }: { message: ChatMessage }) {
     const [isCopied, setIsCopied] = useState(false)
@@ -188,7 +191,11 @@ export const ClientChatMessage = memo(
                       {JSON.stringify(cleanTextContent, null, 2)}
                     </pre>
                   ) : (
-                    <EnhancedMarkdownRenderer content={cleanTextContent as string} />
+                    <StreamingText
+                      content={cleanTextContent as string}
+                      isStreaming={!!message.isStreaming}
+                      renderer={renderMarkdown}
+                    />
                   )}
                 </div>
               </div>

apps/sim/app/chat/hooks/use-chat-streaming.ts

@@ -70,7 +70,7 @@ export function useChatStreaming() {
   const accumulatedTextRef = useRef<string>('')
   const lastStreamedPositionRef = useRef<number>(0)
   const audioStreamingActiveRef = useRef<boolean>(false)
-  const lastDisplayedPositionRef = useRef<number>(0) // Track displayed text in synced mode
+  const lastDisplayedPositionRef = useRef<number>(0)
 
   const stopStreaming = (setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>) => {
     if (abortControllerRef.current) {
@@ -374,6 +374,7 @@ export function useChatStreaming() {
                   messageId,
                   chunk: contentChunk.substring(0, 20),
                 })
+
                 setMessages((prev) =>
                   prev.map((msg) =>
                     msg.id === messageId ? { ...msg, content: accumulatedText } : msg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { StreamingIndicator } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming'
+import { StreamingIndicator, StreamingText } from '@/components/ui/streaming-text'
 
 interface ChatAttachment {
   id: string
@@ -89,6 +89,8 @@ const WordWrap = ({ text }: { text: string }) => {
   )
 }
 
+const renderWordWrap = (content: string) => <WordWrap text={content} />
+
 /**
  * Renders a chat message with optional file attachments
  */
@@ -170,7 +172,11 @@ export function ChatMessage({ message }: ChatMessageProps) {
   return (
     <div className='w-full max-w-full overflow-hidden pl-[2px] opacity-100 transition-opacity duration-200'>
       <div className='whitespace-pre-wrap break-words font-[470] font-season text-[var(--text-primary)] text-sm leading-[1.25rem]'>
-        <WordWrap text={formattedContent} />
+        <StreamingText
+          content={formattedContent}
+          isStreaming={!!message.isStreaming}
+          renderer={renderWordWrap}
+        />
         {message.isStreaming && <StreamingIndicator />}
       </div>
     </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/smooth-streaming/smooth-streaming.tsx

@@ -1,100 +1,22 @@
-import { memo, useEffect, useRef, useState } from 'react'
-import { cn } from '@/lib/core/utils/cn'
+import { memo } from 'react'
+import { StreamingIndicator, StreamingText } from '@/components/ui/streaming-text'
 import { CopilotMarkdownRenderer } from '../markdown-renderer'
 
-/** Character animation delay in milliseconds */
-const CHARACTER_DELAY = 3
+export { StreamingIndicator }
 
-/** Props for the StreamingIndicator component */
-interface StreamingIndicatorProps {
-  /** Optional class name for layout adjustments */
-  className?: string
-}
-
-/** Shows animated dots during message streaming when no content has arrived */
-export const StreamingIndicator = memo(({ className }: StreamingIndicatorProps) => (
-  <div className={cn('flex h-[1.25rem] items-center text-muted-foreground', className)}>
-    <div className='flex space-x-0.5'>
-      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms] [animation-duration:1.2s]' />
-      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms] [animation-duration:1.2s]' />
-      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms] [animation-duration:1.2s]' />
-    </div>
-  </div>
-))
-
-StreamingIndicator.displayName = 'StreamingIndicator'
+const renderCopilotMarkdown = (content: string) => <CopilotMarkdownRenderer content={content} />
 
 /** Props for the SmoothStreamingText component */
 interface SmoothStreamingTextProps {
-  /** Content to display with streaming animation */
   content: string
-  /** Whether the content is actively streaming */
   isStreaming: boolean
 }
 
-/** Displays text with character-by-character animation for smooth streaming */
+/** Copilot-specific streaming text that renders with CopilotMarkdownRenderer */
 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])
-
     return (
-      <div className='min-h-[1.25rem] max-w-full'>
-        <CopilotMarkdownRenderer content={displayedContent} />
-      </div>
+      <StreamingText content={content} isStreaming={isStreaming} renderer={renderCopilotMarkdown} />
     )
   },
   (prevProps, nextProps) => {

apps/sim/components/ui/index.ts

@@ -51,5 +51,6 @@ export {
 } from './select'
 export { Separator } from './separator'
 export { Skeleton } from './skeleton'
+export { StreamingIndicator, StreamingText } from './streaming-text'
 export { TagInput } from './tag-input'
 export { ToolCallCompletion, ToolCallExecution } from './tool-call'

apps/sim/components/ui/streaming-text.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { memo, type ReactNode, useEffect, useRef, useState } from 'react'
+import { cn } from '@/lib/core/utils/cn'
+
+/** Target characters to advance per animation frame (~30 chars/frame at 60fps ≈ 1800 chars/sec) */
+const CHARS_PER_FRAME = 30
+
+/** Props for the StreamingIndicator component */
+interface StreamingIndicatorProps {
+  className?: string
+}
+
+/** Shows animated dots during message streaming when no content has arrived */
+export const StreamingIndicator = memo(({ className }: StreamingIndicatorProps) => (
+  <div className={cn('flex h-[1.25rem] items-center text-muted-foreground', className)}>
+    <div className='flex space-x-0.5'>
+      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms] [animation-duration:1.2s]' />
+      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms] [animation-duration:1.2s]' />
+      <div className='h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms] [animation-duration:1.2s]' />
+    </div>
+  </div>
+))
+
+StreamingIndicator.displayName = 'StreamingIndicator'
+
+/** Props for the StreamingText component */
+interface StreamingTextProps {
+  content: string
+  isStreaming: boolean
+  renderer?: (content: string) => ReactNode
+}
+
+/** Default renderer: plain span with whitespace-pre-wrap */
+function DefaultRenderer({ content }: { content: string }) {
+  return <span className='whitespace-pre-wrap'>{content}</span>
+}
+
+/** Displays text with character-by-character animation using rAF batching for smooth streaming */
+export const StreamingText = memo(
+  ({ content, isStreaming, renderer }: StreamingTextProps) => {
+    const [displayedContent, setDisplayedContent] = useState(() => (isStreaming ? '' : content))
+    const contentRef = useRef(content)
+    const rafRef = useRef<number | 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 nextIndex = Math.min(currentIndex + CHARS_PER_FRAME, currentContent.length)
+              setDisplayedContent(currentContent.slice(0, nextIndex))
+              indexRef.current = nextIndex
+              rafRef.current = requestAnimationFrame(animateText)
+            } else {
+              isAnimatingRef.current = false
+            }
+          }
+
+          if (!isAnimatingRef.current) {
+            if (rafRef.current) {
+              cancelAnimationFrame(rafRef.current)
+            }
+            isAnimatingRef.current = true
+            rafRef.current = requestAnimationFrame(animateText)
+          }
+        }
+      } else {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current)
+        }
+        setDisplayedContent(content)
+        indexRef.current = content.length
+        isAnimatingRef.current = false
+      }
+
+      return () => {
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current)
+        }
+        isAnimatingRef.current = false
+      }
+    }, [content, isStreaming])
+
+    return (
+      <div className='min-h-[1.25rem] max-w-full'>
+        {renderer ? renderer(displayedContent) : <DefaultRenderer content={displayedContent} />}
+      </div>
+    )
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.content === nextProps.content &&
+      prevProps.isStreaming === nextProps.isStreaming &&
+      prevProps.renderer === nextProps.renderer
+    )
+  }
+)
+
+StreamingText.displayName = 'StreamingText'