Streaming

Author: Sg312

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

@@ -189,10 +189,11 @@ export function ThinkingBlock({
             isExpanded ? 'mt-1 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
           )}
         >
-          <div className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-muted)] leading-none [&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-none [&_*]:!m-0 [&_*]:!p-0 [&_*]:!mb-0 [&_*]:!mt-0 [&_p]:!m-0 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_code]:!text-[11px] [&_ul]:!pl-4 [&_ul]:!my-0 [&_ol]:!pl-4 [&_ol]:!my-0 [&_li]:!my-0 [&_li]:!py-0 [&_br]:!leading-[0.5]'>
-            <CopilotMarkdownRenderer content={content} />
+          {/* Use simple pre tag during streaming for smooth performance */}
+          <pre className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-muted)] leading-[1.15rem]'>
+            {content}
             <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[var(--text-muted)]' />
-          </div>
+          </pre>
         </div>
       </div>
     )
@@ -228,6 +229,7 @@ export function ThinkingBlock({
           isExpanded ? 'mt-1 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
         )}
       >
+        {/* Use markdown renderer for completed content */}
         <div className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-muted)] leading-none [&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-none [&_*]:!m-0 [&_*]:!p-0 [&_*]:!mb-0 [&_*]:!mt-0 [&_p]:!m-0 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_code]:!text-[11px] [&_ul]:!pl-4 [&_ul]:!my-0 [&_ol]:!pl-4 [&_ol]:!my-0 [&_li]:!my-0 [&_li]:!py-0 [&_br]:!leading-[0.5]'>
           <CopilotMarkdownRenderer content={content} />
         </div>

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

@@ -151,28 +151,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     }, [message.content])
 
     // Parse special tags from message content (options, plan)
-    // During streaming, also check content blocks since message.content may not be updated yet
+    // Only parse after streaming is complete to avoid affecting streaming smoothness
     const parsedTags = useMemo(() => {
-      if (isUser) return null
-
-      // Try message.content first
-      if (message.content) {
-        const parsed = parseSpecialTags(message.content)
-        if (parsed.options) return parsed
-      }
-
-      // During streaming, check content blocks for options
-      if (message.contentBlocks && message.contentBlocks.length > 0) {
-        for (const block of message.contentBlocks) {
-          if (block.type === 'text' && block.content) {
-            const parsed = parseSpecialTags(block.content)
-            if (parsed.options) return parsed
-          }
-        }
-      }
+      if (isUser || isStreaming) return null
 
+      // Only parse when not streaming - options should appear after message completes
       return message.content ? parseSpecialTags(message.content) : null
-    }, [message.content, message.contentBlocks, isUser])
+    }, [message.content, isUser, isStreaming])
 
     // Get sendMessage from store for continuation actions
     const sendMessage = useCopilotStore((s) => s.sendMessage)
@@ -196,12 +181,14 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
         if (block.type === 'text') {
           const isLastTextBlock =
             index === message.contentBlocks!.length - 1 && block.type === 'text'
-          // Clean content for this text block - strip special tags and excessive newlines
-          const parsed = parseSpecialTags(block.content)
-          const cleanBlockContent = parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
+          // During streaming, use raw content for smooth performance
+          // Only strip special tags after streaming completes
+          const cleanBlockContent = isStreaming
+            ? block.content.replace(/\n{3,}/g, '\n\n')
+            : parseSpecialTags(block.content).cleanContent.replace(/\n{3,}/g, '\n\n')
 
-          // Skip if no content after stripping tags
-          if (!cleanBlockContent.trim()) return null
+          // Skip if no content after stripping tags (only when not streaming)
+          if (!isStreaming && !cleanBlockContent.trim()) return null
 
           // Use smooth streaming for the last text block if we're streaming
           const shouldUseSmoothing = isStreaming && isLastTextBlock
@@ -508,14 +495,14 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               </div>
             )}
 
-            {/* Options selector when agent presents choices - streams in but disabled until complete */}
-            {parsedTags?.options && Object.keys(parsedTags.options).length > 0 && (
+            {/* Options selector when agent presents choices - only shown after streaming completes */}
+            {!isStreaming && parsedTags?.options && Object.keys(parsedTags.options).length > 0 && (
               <OptionsSelector
                 options={parsedTags.options}
                 onSelect={handleOptionSelect}
                 disabled={isSendingMessage}
-                enableKeyboardNav={isLastMessage && parsedTags.optionsComplete === true}
-                streaming={!parsedTags.optionsComplete}
+                enableKeyboardNav={isLastMessage}
+                streaming={false}
               />
             )}
           </div>