Ui

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

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { memo, useCallback, useState } from 'react'
 import { Check, Copy } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -28,55 +28,95 @@ const getTextContent = (element: React.ReactNode): string => {
   return ''
 }
 
-// Global layout fixes for markdown content inside the copilot panel
-if (typeof document !== 'undefined') {
-  const styleId = 'copilot-markdown-fix'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      /* Prevent any markdown content from expanding beyond the panel */
-      .copilot-markdown-wrapper,
-      .copilot-markdown-wrapper * {
-        max-width: 100% !important;
-      }
-
-      .copilot-markdown-wrapper p,
-      .copilot-markdown-wrapper li {
-        overflow-wrap: anywhere !important;
-        word-break: break-word !important;
-      }
-
-      .copilot-markdown-wrapper a {
-        overflow-wrap: anywhere !important;
-        word-break: break-all !important;
-      }
-
-      .copilot-markdown-wrapper code:not(pre code) {
-        white-space: normal !important;
-        overflow-wrap: anywhere !important;
-        word-break: break-word !important;
-      }
-
-      /* Reduce top margin for first heading (e.g., right after thinking block) */
-      .copilot-markdown-wrapper > h1:first-child,
-      .copilot-markdown-wrapper > h2:first-child,
-      .copilot-markdown-wrapper > h3:first-child,
-      .copilot-markdown-wrapper > h4:first-child {
-        margin-top: 0.25rem !important;
-      }
-    `
-    document.head.appendChild(style)
-  }
+/**
+ * Maps common language aliases to supported viewer languages
+ */
+const LANGUAGE_MAP: Record<string, 'javascript' | 'json' | 'python'> = {
+  js: 'javascript',
+  javascript: 'javascript',
+  jsx: 'javascript',
+  ts: 'javascript',
+  typescript: 'javascript',
+  tsx: 'javascript',
+  json: 'json',
+  python: 'python',
+  py: 'python',
+  code: 'javascript',
 }
 
 /**
- * Link component with hover preview tooltip
- * Displays full URL on hover for better UX
- * @param props - Component props with href and children
- * @returns Link element with tooltip preview
+ * Normalizes a language string to a supported viewer language
  */
-function LinkWithPreview({ href, children }: { href: string; children: React.ReactNode }) {
+function normalizeLanguage(lang: string): 'javascript' | 'json' | 'python' {
+  const normalized = (lang || '').toLowerCase()
+  return LANGUAGE_MAP[normalized] || 'javascript'
+}
+
+/**
+ * Props for the CodeBlock component
+ */
+interface CodeBlockProps {
+  /** Code content to display */
+  code: string
+  /** Language identifier from markdown */
+  language: string
+}
+
+/**
+ * CodeBlock component with isolated copy state
+ * Prevents full markdown re-renders when copy button is clicked
+ */
+const CodeBlock = memo(function CodeBlock({ code, language }: CodeBlockProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    if (code) {
+      navigator.clipboard.writeText(code)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }, [code])
+
+  const viewerLanguage = normalizeLanguage(language)
+  const displayLanguage = language === 'code' ? viewerLanguage : language
+
+  return (
+    <div className='mt-2.5 mb-2.5 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)] text-sm'>
+      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-3 py-1'>
+        <span className='font-season text-[var(--text-muted)] text-xs'>{displayLanguage}</span>
+        <button
+          onClick={handleCopy}
+          className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-tertiary)]'
+          title='Copy'
+          type='button'
+        >
+          {copied ? (
+            <Check className='h-3 w-3' strokeWidth={2} />
+          ) : (
+            <Copy className='h-3 w-3' strokeWidth={2} />
+          )}
+        </button>
+      </div>
+      <Code.Viewer
+        code={code.replace(/\n+$/, '')}
+        showGutter
+        language={viewerLanguage}
+        className='m-0 min-h-0 rounded-none border-0 bg-transparent'
+      />
+    </div>
+  )
+})
+
+/**
+ * Link component with hover preview tooltip
+ */
+const LinkWithPreview = memo(function LinkWithPreview({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
   return (
     <Tooltip.Root delayDuration={300}>
       <Tooltip.Trigger asChild>
@@ -94,7 +134,7 @@ function LinkWithPreview({ href, children }: { href: string; children: React.Rea
       </Tooltip.Content>
     </Tooltip.Root>
   )
-}
+})
 
 /**
  * Props for the CopilotMarkdownRenderer component
@@ -104,275 +144,199 @@ interface CopilotMarkdownRendererProps {
   content: string
 }
 
+/**
+ * Static markdown component definitions - optimized for LLM chat spacing
+ * Tighter spacing compared to traditional prose for better chat UX
+ */
+const markdownComponents = {
+  // Paragraphs - tight spacing, no margin on last
+  p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p className='mb-1.5 font-base font-season text-[var(--text-primary)] text-sm leading-[1.4] last:mb-0 dark:font-[470]'>
+      {children}
+    </p>
+  ),
+
+  // Headings - minimal margins for chat context
+  h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h1 className='mt-2 mb-1 font-season font-semibold text-base text-[var(--text-primary)] first:mt-0'>
+      {children}
+    </h1>
+  ),
+  h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h2 className='mt-2 mb-1 font-season font-semibold text-[15px] text-[var(--text-primary)] first:mt-0'>
+      {children}
+    </h2>
+  ),
+  h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3 className='mt-1.5 mb-0.5 font-season font-semibold text-sm text-[var(--text-primary)] first:mt-0'>
+      {children}
+    </h3>
+  ),
+  h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h4 className='mt-1.5 mb-0.5 font-season font-semibold text-sm text-[var(--text-primary)] first:mt-0'>
+      {children}
+    </h4>
+  ),
+
+  // Lists - compact spacing
+  ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul
+      className='my-1 space-y-0.5 pl-5 font-base font-season text-[var(--text-primary)] dark:font-[470]'
+      style={{ listStyleType: 'disc' }}
+    >
+      {children}
+    </ul>
+  ),
+  ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol
+      className='my-1 space-y-0.5 pl-5 font-base font-season text-[var(--text-primary)] dark:font-[470]'
+      style={{ listStyleType: 'decimal' }}
+    >
+      {children}
+    </ol>
+  ),
+  li: ({ children }: React.LiHTMLAttributes<HTMLLIElement>) => (
+    <li
+      className='font-base font-season text-sm text-[var(--text-primary)] leading-[1.4] dark:font-[470]'
+      style={{ display: 'list-item' }}
+    >
+      {children}
+    </li>
+  ),
+
+  // Code blocks - handled by CodeBlock component
+  pre: ({ children }: React.HTMLAttributes<HTMLPreElement>) => {
+    let codeContent: React.ReactNode = children
+    let language = 'code'
+
+    if (
+      React.isValidElement<{ className?: string; children?: React.ReactNode }>(children) &&
+      children.type === 'code'
+    ) {
+      const childElement = children as React.ReactElement<{
+        className?: string
+        children?: React.ReactNode
+      }>
+      codeContent = childElement.props.children
+      language = childElement.props.className?.replace('language-', '') || 'code'
+    }
+
+    let actualCodeText = ''
+    if (typeof codeContent === 'string') {
+      actualCodeText = codeContent
+    } else if (React.isValidElement(codeContent)) {
+      actualCodeText = getTextContent(codeContent)
+    } else if (Array.isArray(codeContent)) {
+      actualCodeText = codeContent
+        .map((child) =>
+          typeof child === 'string'
+            ? child
+            : React.isValidElement(child)
+              ? getTextContent(child)
+              : ''
+        )
+        .join('')
+    } else {
+      actualCodeText = String(codeContent || '')
+    }
+
+    return <CodeBlock code={actualCodeText} language={language} />
+  },
+
+  // Inline code
+  code: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement> & { className?: string }) => (
+    <code
+      className='whitespace-normal break-all rounded border border-[var(--border-1)] bg-[var(--surface-1)] px-1 py-0.5 font-mono text-[0.85em] text-[var(--text-primary)]'
+      {...props}
+    >
+      {children}
+    </code>
+  ),
+
+  // Text formatting
+  strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className='font-semibold text-[var(--text-primary)]'>{children}</strong>
+  ),
+  b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
+    <b className='font-semibold text-[var(--text-primary)]'>{children}</b>
+  ),
+  em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
+    <em className='text-[var(--text-primary)] italic'>{children}</em>
+  ),
+  i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
+    <i className='text-[var(--text-primary)] italic'>{children}</i>
+  ),
+
+  // Blockquote - compact
+  blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
+    <blockquote className='my-1.5 border-[var(--border-1)] border-l-2 py-0.5 pl-3 font-season text-[var(--text-secondary)] text-sm italic'>
+      {children}
+    </blockquote>
+  ),
+
+  // Horizontal rule
+  hr: () => <hr className='my-3 border-[var(--divider)] border-t' />,
+
+  // Links
+  a: ({ href, children }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+    <LinkWithPreview href={href || '#'}>{children}</LinkWithPreview>
+  ),
+
+  // Tables - compact
+  table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
+    <div className='my-2 max-w-full overflow-x-auto'>
+      <table className='min-w-full table-auto border border-[var(--border-1)] font-season text-xs'>
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <thead className='bg-[var(--surface-5)] text-left dark:bg-[var(--surface-4)]'>
+      {children}
+    </thead>
+  ),
+  tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+    <tbody className='divide-y divide-[var(--border-1)]'>{children}</tbody>
+  ),
+  tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr className='border-[var(--border-1)] border-b'>{children}</tr>
+  ),
+  th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+    <th className='border-[var(--border-1)] border-r px-2 py-1 align-top font-base text-[var(--text-secondary)] last:border-r-0 dark:font-[470]'>
+      {children}
+    </th>
+  ),
+  td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+    <td className='break-words border-[var(--border-1)] border-r px-2 py-1 align-top font-base text-[var(--text-primary)] last:border-r-0 dark:font-[470]'>
+      {children}
+    </td>
+  ),
+
+  // Images
+  img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img src={src} alt={alt || 'Image'} className='my-2 h-auto max-w-full rounded-md' {...props} />
+  ),
+}
+
 /**
  * CopilotMarkdownRenderer renders markdown content with custom styling
- * Supports GitHub-flavored markdown, code blocks with syntax highlighting,
- * tables, links with preview, and more
+ * Optimized for LLM chat: tight spacing, memoized components, isolated state
  *
  * @param props - Component props
  * @returns Rendered markdown content
  */
-export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRendererProps) {
-  const [copiedCodeBlocks, setCopiedCodeBlocks] = useState<Record<string, boolean>>({})
-
-  useEffect(() => {
-    const timers: Record<string, NodeJS.Timeout> = {}
-
-    Object.keys(copiedCodeBlocks).forEach((key) => {
-      if (copiedCodeBlocks[key]) {
-        timers[key] = setTimeout(() => {
-          setCopiedCodeBlocks((prev) => ({ ...prev, [key]: false }))
-        }, 2000)
-      }
-    })
-
-    return () => {
-      Object.values(timers).forEach(clearTimeout)
-    }
-  }, [copiedCodeBlocks])
-
-  const markdownComponents = useMemo(
-    () => ({
-      p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-2 font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0 dark:font-[470]'>
-          {children}
-        </p>
-      ),
-
-      h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)]'>
-          {children}
-        </h1>
-      ),
-      h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl'>
-          {children}
-        </h2>
-      ),
-      h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg'>
-          {children}
-        </h3>
-      ),
-      h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-base'>
-          {children}
-        </h4>
-      ),
-
-      ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
-        <ul
-          className='mt-1 mb-1 space-y-1.5 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
-          style={{ listStyleType: 'disc' }}
-        >
-          {children}
-        </ul>
-      ),
-      ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
-        <ol
-          className='mt-1 mb-1 space-y-1.5 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
-          style={{ listStyleType: 'decimal' }}
-        >
-          {children}
-        </ol>
-      ),
-      li: ({
-        children,
-        ordered,
-      }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
-        <li
-          className='font-base font-season text-[var(--text-primary)] dark:font-[470]'
-          style={{ display: 'list-item' }}
-        >
-          {children}
-        </li>
-      ),
-
-      pre: ({ children }: React.HTMLAttributes<HTMLPreElement>) => {
-        let codeContent: React.ReactNode = children
-        let language = 'code'
-
-        if (
-          React.isValidElement<{ className?: string; children?: React.ReactNode }>(children) &&
-          children.type === 'code'
-        ) {
-          const childElement = children as React.ReactElement<{
-            className?: string
-            children?: React.ReactNode
-          }>
-          codeContent = childElement.props.children
-          language = childElement.props.className?.replace('language-', '') || 'code'
-        }
-
-        let actualCodeText = ''
-        if (typeof codeContent === 'string') {
-          actualCodeText = codeContent
-        } else if (React.isValidElement(codeContent)) {
-          actualCodeText = getTextContent(codeContent)
-        } else if (Array.isArray(codeContent)) {
-          actualCodeText = codeContent
-            .map((child) =>
-              typeof child === 'string'
-                ? child
-                : React.isValidElement(child)
-                  ? getTextContent(child)
-                  : ''
-            )
-            .join('')
-        } else {
-          actualCodeText = String(codeContent || '')
-        }
-
-        const codeText = actualCodeText || 'code'
-        const codeBlockKey = `${language}-${codeText.substring(0, 30).replace(/\s/g, '-')}-${codeText.length}`
-
-        const showCopySuccess = copiedCodeBlocks[codeBlockKey] || false
-
-        const handleCopy = () => {
-          const textToCopy = actualCodeText
-          if (textToCopy) {
-            navigator.clipboard.writeText(textToCopy)
-            setCopiedCodeBlocks((prev) => ({ ...prev, [codeBlockKey]: true }))
-          }
-        }
-
-        const normalizedLanguage = (language || '').toLowerCase()
-        const viewerLanguage: 'javascript' | 'json' | 'python' =
-          normalizedLanguage === 'json'
-            ? 'json'
-            : normalizedLanguage === 'python' || normalizedLanguage === 'py'
-              ? 'python'
-              : 'javascript'
-
-        return (
-          <div className='mt-6 mb-6 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)] text-sm'>
-            <div className='flex items-center justify-between border-[var(--border-1)] border-b px-4 py-1.5'>
-              <span className='font-season text-[var(--text-muted)] text-xs'>
-                {language === 'code' ? viewerLanguage : language}
-              </span>
-              <button
-                onClick={handleCopy}
-                className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-tertiary)]'
-                title='Copy'
-              >
-                {showCopySuccess ? (
-                  <Check className='h-3 w-3' strokeWidth={2} />
-                ) : (
-                  <Copy className='h-3 w-3' strokeWidth={2} />
-                )}
-              </button>
-            </div>
-            <Code.Viewer
-              code={actualCodeText.replace(/\n+$/, '')}
-              showGutter
-              language={viewerLanguage}
-              className='m-0 min-h-0 rounded-none border-0 bg-transparent'
-            />
-          </div>
-        )
-      },
-
-      code: ({
-        inline,
-        className,
-        children,
-        ...props
-      }: React.HTMLAttributes<HTMLElement> & { className?: string; inline?: boolean }) => {
-        if (inline) {
-          return (
-            <code
-              className='whitespace-normal break-all rounded border border-[var(--border-1)] bg-[var(--surface-1)] px-1 py-0.5 font-mono text-[0.9em] text-[var(--text-primary)]'
-              {...props}
-            >
-              {children}
-            </code>
-          )
-        }
-        return (
-          <code className={className} {...props}>
-            {children}
-          </code>
-        )
-      },
-
-      strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <strong className='font-semibold text-[var(--text-primary)]'>{children}</strong>
-      ),
-
-      b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <b className='font-semibold text-[var(--text-primary)]'>{children}</b>
-      ),
-
-      em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <em className='text-[var(--text-primary)] italic'>{children}</em>
-      ),
-
-      i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <i className='text-[var(--text-primary)] italic'>{children}</i>
-      ),
-
-      blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <blockquote className='my-4 border-[var(--border-1)] border-l-4 py-1 pl-4 font-season text-[var(--text-secondary)] italic'>
-          {children}
-        </blockquote>
-      ),
-
-      hr: () => <hr className='my-8 border-[var(--divider)] border-t' />,
-
-      a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
-        <LinkWithPreview href={href || '#'} {...props}>
-          {children}
-        </LinkWithPreview>
-      ),
-
-      table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
-        <div className='my-3 max-w-full overflow-x-auto'>
-          <table className='min-w-full table-auto border border-[var(--border-1)] font-season text-xs'>
-            {children}
-          </table>
-        </div>
-      ),
-      thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <thead className='bg-[var(--surface-5)] text-left dark:bg-[var(--surface-4)]'>
-          {children}
-        </thead>
-      ),
-      tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <tbody className='divide-y divide-[var(--border-1)]'>{children}</tbody>
-      ),
-      tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-        <tr className='border-[var(--border-1)] border-b transition-colors hover:bg-[var(--surface-5)] dark:hover:bg-[var(--surface-4)]/60'>
-          {children}
-        </tr>
-      ),
-      th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
-        <th className='border-[var(--border-1)] border-r px-2.5 py-1.5 align-top font-base text-[var(--text-secondary)] last:border-r-0 dark:font-[470]'>
-          {children}
-        </th>
-      ),
-      td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
-        <td className='break-words border-[var(--border-1)] border-r px-2.5 py-1.5 align-top font-base text-[var(--text-primary)] last:border-r-0 dark:font-[470]'>
-          {children}
-        </td>
-      ),
-
-      img: ({ src, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-        <img
-          src={src}
-          alt={alt || 'Image'}
-          className='my-3 h-auto max-w-full rounded-md'
-          {...props}
-        />
-      ),
-    }),
-    [copiedCodeBlocks]
-  )
-
+function CopilotMarkdownRenderer({ content }: CopilotMarkdownRendererProps) {
   return (
-    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] dark:font-[470]'>
+    <div className='max-w-full break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.4] [&_*]:max-w-full [&_a]:break-all [&_code:not(pre_code)]:break-words [&_li]:break-words [&_p]:break-words dark:font-[470]'>
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {content}
       </ReactMarkdown>
     </div>
   )
 }
+
+export default memo(CopilotMarkdownRenderer)

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

@@ -44,22 +44,6 @@ export const StreamingIndicator = memo(() => (
 
 StreamingIndicator.displayName = 'StreamingIndicator'
 
-/**
- * InlineStreamingDots shows small animated dots inline with text
- * Used at the end of streaming content to indicate more is coming
- */
-const InlineStreamingDots = memo(() => (
-  <span className='ml-1 inline-flex items-center align-middle'>
-    <span className='inline-flex space-x-0.5'>
-      <span className='inline-block h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:0ms] [animation-duration:1.2s]' />
-      <span className='inline-block h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:150ms] [animation-duration:1.2s]' />
-      <span className='inline-block h-1 w-1 animate-bounce rounded-full bg-muted-foreground [animation-delay:300ms] [animation-duration:1.2s]' />
-    </span>
-  </span>
-))
-
-InlineStreamingDots.displayName = 'InlineStreamingDots'
-
 /**
  * Props for the SmoothStreamingText component
  */
@@ -68,8 +52,6 @@ interface SmoothStreamingTextProps {
   content: string
   /** Whether the content is actively streaming */
   isStreaming: boolean
-  /** Whether to show inline streaming dots at the end of content. Defaults to true. */
-  showIndicator?: boolean
 }
 
 /**
@@ -110,7 +92,7 @@ function calculateAdaptiveDelay(displayedLength: number, totalLength: number): n
  * @returns Streaming text with smooth animation
  */
 export const SmoothStreamingText = memo(
-  ({ content, isStreaming, showIndicator = true }: SmoothStreamingTextProps) => {
+  ({ content, isStreaming }: SmoothStreamingTextProps) => {
     const [displayedContent, setDisplayedContent] = useState('')
     const contentRef = useRef(content)
     const rafRef = useRef<number | null>(null)
@@ -178,23 +160,15 @@ export const SmoothStreamingText = memo(
       }
     }, [content, isStreaming])
 
-    // Show inline dots when streaming and we have some content displayed (if enabled)
-    const showInlineDots = showIndicator && isStreaming && displayedContent.length > 0
-
     return (
-      <div className='relative min-h-[1.25rem] max-w-full overflow-hidden'>
+      <div className='min-h-[1.25rem] max-w-full'>
         <CopilotMarkdownRenderer content={displayedContent} />
-        {showInlineDots && <InlineStreamingDots />}
       </div>
     )
   },
   (prevProps, nextProps) => {
     // Prevent re-renders during streaming unless content actually changed
-    return (
-      prevProps.content === nextProps.content &&
-      prevProps.isStreaming === nextProps.isStreaming &&
-      prevProps.showIndicator === nextProps.showIndicator
-    )
+    return prevProps.content === nextProps.content && prevProps.isStreaming === nextProps.isStreaming
   }
 )
 

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

@@ -1,25 +1,152 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { ChevronUp } from 'lucide-react'
-import CopilotMarkdownRenderer from './markdown-renderer'
 
 /**
  * Max height for thinking content before internal scrolling kicks in
  */
-const THINKING_MAX_HEIGHT = 200
+const THINKING_MAX_HEIGHT = 150
+
+/**
+ * Height threshold before gradient fade kicks in
+ */
+const GRADIENT_THRESHOLD = 100
 
 /**
  * Interval for auto-scroll during streaming (ms)
  */
-const SCROLL_INTERVAL = 100
+const SCROLL_INTERVAL = 50
 
 /**
  * Timer update interval in milliseconds
  */
 const TIMER_UPDATE_INTERVAL = 100
 
+/**
+ * Thinking text streaming - much faster than main text
+ * Essentially instant with minimal delay
+ */
+const THINKING_DELAY = 0.5
+const THINKING_CHARS_PER_FRAME = 3
+
+/**
+ * Props for the SmoothThinkingText component
+ */
+interface SmoothThinkingTextProps {
+  content: string
+  isStreaming: boolean
+}
+
+/**
+ * SmoothThinkingText renders thinking content with fast streaming animation
+ * Uses gradient fade at top when content is tall enough
+ */
+const SmoothThinkingText = memo(
+  ({ content, isStreaming }: SmoothThinkingTextProps) => {
+    const [displayedContent, setDisplayedContent] = useState('')
+    const [showGradient, setShowGradient] = useState(false)
+    const contentRef = useRef(content)
+    const textRef = useRef<HTMLDivElement>(null)
+    const rafRef = useRef<number | null>(null)
+    const indexRef = useRef(0)
+    const lastFrameTimeRef = useRef<number>(0)
+    const isAnimatingRef = useRef(false)
+
+    useEffect(() => {
+      contentRef.current = content
+
+      if (content.length === 0) {
+        setDisplayedContent('')
+        indexRef.current = 0
+        return
+      }
+
+      if (isStreaming) {
+        if (indexRef.current < content.length && !isAnimatingRef.current) {
+          isAnimatingRef.current = true
+          lastFrameTimeRef.current = performance.now()
+
+          const animateText = (timestamp: number) => {
+            const currentContent = contentRef.current
+            const currentIndex = indexRef.current
+            const elapsed = timestamp - lastFrameTimeRef.current
+
+            if (elapsed >= THINKING_DELAY) {
+              if (currentIndex < currentContent.length) {
+                // Reveal multiple characters per frame for faster streaming
+                const newIndex = Math.min(currentIndex + THINKING_CHARS_PER_FRAME, currentContent.length)
+                const newDisplayed = currentContent.slice(0, newIndex)
+                setDisplayedContent(newDisplayed)
+                indexRef.current = newIndex
+                lastFrameTimeRef.current = timestamp
+              }
+            }
+
+            if (indexRef.current < currentContent.length) {
+              rafRef.current = requestAnimationFrame(animateText)
+            } else {
+              isAnimatingRef.current = false
+            }
+          }
+
+          rafRef.current = requestAnimationFrame(animateText)
+        }
+      } else {
+        // Streaming ended - show full content immediately
+        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])
+
+    // Check if content height exceeds threshold for gradient
+    useEffect(() => {
+      if (textRef.current && isStreaming) {
+        const height = textRef.current.scrollHeight
+        setShowGradient(height > GRADIENT_THRESHOLD)
+      } else {
+        setShowGradient(false)
+      }
+    }, [displayedContent, isStreaming])
+
+    // Apply vertical gradient fade at the top only when content is tall enough
+    const gradientStyle =
+      isStreaming && showGradient
+        ? {
+            maskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 30%, black 100%)',
+          }
+        : undefined
+
+    return (
+      <div
+        ref={textRef}
+        className='whitespace-pre-wrap font-season text-[12px] text-[var(--text-muted)] leading-[1.4]'
+        style={gradientStyle}
+      >
+        {displayedContent}
+      </div>
+    )
+  },
+  (prevProps, nextProps) => {
+    return prevProps.content === nextProps.content && prevProps.isStreaming === nextProps.isStreaming
+  }
+)
+
+SmoothThinkingText.displayName = 'SmoothThinkingText'
+
 /**
  * Props for the ThinkingBlock component
  */
@@ -113,14 +240,14 @@ export function ThinkingBlock({
       const isNearBottom = distanceFromBottom <= 20
 
       const delta = scrollTop - lastScrollTopRef.current
-      const movedUp = delta < -2
+      const movedUp = delta < -1
 
       if (movedUp && !isNearBottom) {
         setUserHasScrolledAway(true)
       }
 
-      // Re-stick if user scrolls back to bottom
-      if (userHasScrolledAway && isNearBottom) {
+      // Re-stick if user scrolls back to bottom with intent
+      if (userHasScrolledAway && isNearBottom && delta > 10) {
         setUserHasScrolledAway(false)
       }
 
@@ -134,7 +261,6 @@ export function ThinkingBlock({
   }, [isExpanded, userHasScrolledAway])
 
   // Smart auto-scroll: always scroll to bottom while streaming unless user scrolled away
-  // This matches the main chat behavior in useScrollManagement
   useEffect(() => {
     if (!isStreaming || !isExpanded || userHasScrolledAway) return
 
@@ -142,16 +268,14 @@ export function ThinkingBlock({
       const container = scrollContainerRef.current
       if (!container) return
 
-      // Always scroll to bottom during streaming (like main chat does)
-      // User can break out by scrolling up, which sets userHasScrolledAway
       programmaticScrollRef.current = true
       container.scrollTo({
         top: container.scrollHeight,
-        behavior: 'smooth',
+        behavior: 'auto',
       })
       window.setTimeout(() => {
         programmaticScrollRef.current = false
-      }, 150)
+      }, 16)
     }, SCROLL_INTERVAL)
 
     return () => window.clearInterval(intervalId)
@@ -238,15 +362,11 @@ export function ThinkingBlock({
         <div
           ref={scrollContainerRef}
           className={clsx(
-            'overflow-y-auto transition-all duration-300 ease-in-out',
-            isExpanded ? 'mt-1.5 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
+            'overflow-y-auto transition-all duration-150 ease-out',
+            isExpanded ? 'mt-1.5 max-h-[150px] opacity-100' : 'max-h-0 opacity-0'
           )}
         >
-          {/* Render markdown during streaming with thinking text styling */}
-          <div className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-[1.3] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-[11px] [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 [&_br]:!leading-[0.5] [&_table]:!my-2 [&_th]:!px-2 [&_th]:!py-1 [&_th]:!text-[11px] [&_td]:!px-2 [&_td]:!py-1 [&_td]:!text-[11px] whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-muted)]'>
-            <CopilotMarkdownRenderer content={content} />
-            <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[var(--text-muted)]' />
-          </div>
+          <SmoothThinkingText content={content} isStreaming={isStreaming && !hasFollowingContent} />
         </div>
       </div>
     )
@@ -278,13 +398,13 @@ export function ThinkingBlock({
       <div
         ref={scrollContainerRef}
         className={clsx(
-          'overflow-y-auto transition-all duration-300 ease-in-out',
-          isExpanded ? 'mt-1.5 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
+          'overflow-y-auto transition-all duration-150 ease-out',
+          isExpanded ? 'mt-1.5 max-h-[150px] opacity-100' : 'max-h-0 opacity-0'
         )}
       >
-        {/* Use markdown renderer for completed content */}
-        <div className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-[1.3] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-[11px] [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 [&_br]:!leading-[0.5] [&_table]:!my-2 [&_th]:!px-2 [&_th]:!py-1 [&_th]:!text-[11px] [&_td]:!px-2 [&_td]:!py-1 [&_td]:!text-[11px] whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-muted)]'>
-          <CopilotMarkdownRenderer content={content} />
+        {/* Completed thinking text - dimmed */}
+        <div className='whitespace-pre-wrap font-season text-[12px] text-[var(--text-muted)] leading-[1.4]'>
+          {content}
         </div>
       </div>
     </div>

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

@@ -209,7 +209,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           const blockKey = `text-${index}-${block.timestamp || index}`
 
           return (
-            <div key={blockKey} className='w-full max-w-full overflow-hidden'>
+            <div key={blockKey} className='w-full max-w-full'>
               {shouldUseSmoothing ? (
                 <SmoothStreamingText content={cleanBlockContent} isStreaming={isStreaming} />
               ) : (
@@ -485,8 +485,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks}
 
-            {/* Only show streaming indicator when no content has arrived yet */}
-            {isStreaming && !hasVisibleContent && <StreamingIndicator />}
+            {/* Always show streaming indicator at the end while streaming */}
+            {isStreaming && <StreamingIndicator />}
 
             {message.errorType === 'usage_limit' && (
               <div className='flex gap-1.5'>

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

@@ -221,7 +221,7 @@ function PlanSteps({
               </span>
               <div className='min-w-0 flex-1 text-[12px] text-[var(--text-secondary)] leading-[18px] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[11px] [&_p]:m-0 [&_p]:text-[12px] [&_p]:leading-[18px]'>
                 {streaming && isLastStep ? (
-                  <SmoothStreamingText content={title} isStreaming={true} showIndicator={false} />
+                  <SmoothStreamingText content={title} isStreaming={true} />
                 ) : (
                   <CopilotMarkdownRenderer content={title} />
                 )}
@@ -363,7 +363,7 @@ export function OptionsSelector({
               )}
             >
               {streaming ? (
-                <SmoothStreamingText content={option.title} isStreaming={true} showIndicator={false} />
+                <SmoothStreamingText content={option.title} isStreaming={true} />
               ) : (
                 <CopilotMarkdownRenderer content={option.title} />
               )}
@@ -1066,7 +1066,7 @@ function SubAgentContent({
       <div
         ref={scrollContainerRef}
         className={clsx(
-          'overflow-y-auto transition-all duration-300 ease-in-out',
+          'overflow-y-auto transition-all duration-150 ease-out',
           isExpanded ? 'mt-1.5 max-h-[200px] opacity-100' : 'max-h-0 opacity-0'
         )}
       >
@@ -1326,7 +1326,7 @@ function SubagentContentRenderer({
 
       <div
         className={clsx(
-          'overflow-hidden transition-all duration-300 ease-in-out',
+          'overflow-hidden transition-all duration-150 ease-out',
           isExpanded ? 'mt-1.5 max-h-[5000px] opacity-100' : 'max-h-0 opacity-0'
         )}
       >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-scroll-management.ts

@@ -39,49 +39,42 @@ export function useScrollManagement(
   const [userHasScrolledDuringStream, setUserHasScrolledDuringStream] = useState(false)
   const programmaticScrollInProgressRef = useRef(false)
   const lastScrollTopRef = useRef(0)
-  const lastScrollHeightRef = useRef(0)
-  const rafIdRef = useRef<number | null>(null)
   const scrollBehavior: 'auto' | 'smooth' = options?.behavior ?? 'smooth'
   const stickinessThreshold = options?.stickinessThreshold ?? 100
 
+  /**
+   * Scrolls the container to the bottom with smooth animation
+   */
   const getScrollContainer = useCallback((): HTMLElement | null => {
+    // Prefer the element with the ref (our scrollable div)
     if (scrollAreaRef.current) return scrollAreaRef.current
     return null
   }, [])
 
-  /**
-   * Scrolls the container to the bottom
-   * Uses 'auto' for streaming to prevent jitter, 'smooth' for user actions
-   */
-  const scrollToBottom = useCallback(
-    (forceInstant = false) => {
-      const scrollContainer = getScrollContainer()
-      if (!scrollContainer) return
+  const scrollToBottom = useCallback(() => {
+    const scrollContainer = getScrollContainer()
+    if (!scrollContainer) return
 
-      programmaticScrollInProgressRef.current = true
-      scrollContainer.scrollTo({
-        top: scrollContainer.scrollHeight,
-        behavior: forceInstant ? 'auto' : scrollBehavior,
-      })
-      // Reset flag after scroll completes
-      window.setTimeout(
-        () => {
-          programmaticScrollInProgressRef.current = false
-        },
-        forceInstant ? 16 : 200
-      )
-    },
-    [getScrollContainer, scrollBehavior]
-  )
+    programmaticScrollInProgressRef.current = true
+    scrollContainer.scrollTo({
+      top: scrollContainer.scrollHeight,
+      behavior: scrollBehavior,
+    })
+    // Best-effort reset; not all browsers fire scrollend reliably
+    window.setTimeout(() => {
+      programmaticScrollInProgressRef.current = false
+    }, 200)
+  }, [getScrollContainer, scrollBehavior])
 
   /**
-   * Handles scroll events to track user position
+   * Handles scroll events to track user position and show/hide scroll button
    */
   const handleScroll = useCallback(() => {
     const scrollContainer = getScrollContainer()
     if (!scrollContainer) return
 
     if (programmaticScrollInProgressRef.current) {
+      // Ignore scrolls we initiated
       return
     }
 
@@ -93,18 +86,21 @@ export function useScrollManagement(
 
     if (isSendingMessage) {
       const delta = scrollTop - lastScrollTopRef.current
-      const movedUp = delta < -2
+      const movedUp = delta < -2 // small hysteresis to avoid noise
+      const movedDown = delta > 2
 
       if (movedUp) {
+        // Any upward movement breaks away from sticky during streaming
         setUserHasScrolledDuringStream(true)
       }
 
-      // Re-stick if user scrolls back to bottom
-      if (userHasScrolledDuringStream && nearBottom && delta > 2) {
+      // If the user has broken away and scrolls back down to the bottom, re-stick
+      if (userHasScrolledDuringStream && movedDown && nearBottom) {
         setUserHasScrolledDuringStream(false)
       }
     }
 
+    // Track last scrollTop for direction detection
     lastScrollTopRef.current = scrollTop
   }, [getScrollContainer, isSendingMessage, userHasScrolledDuringStream, stickinessThreshold])
 
@@ -113,80 +109,95 @@ export function useScrollManagement(
     const scrollContainer = getScrollContainer()
     if (!scrollContainer) return
 
-    scrollContainer.addEventListener('scroll', handleScroll, { passive: true })
+    const handleUserScroll = () => {
+      handleScroll()
+    }
+
+    scrollContainer.addEventListener('scroll', handleUserScroll, { passive: true })
+
+    if ('onscrollend' in scrollContainer) {
+      scrollContainer.addEventListener('scrollend', handleScroll, { passive: true })
+    }
+
+    // Initialize state
+    window.setTimeout(handleScroll, 100)
+    // Initialize last scroll position
     lastScrollTopRef.current = scrollContainer.scrollTop
-    lastScrollHeightRef.current = scrollContainer.scrollHeight
 
     return () => {
-      scrollContainer.removeEventListener('scroll', handleScroll)
+      scrollContainer.removeEventListener('scroll', handleUserScroll)
+      if ('onscrollend' in scrollContainer) {
+        scrollContainer.removeEventListener('scrollend', handleScroll)
+      }
     }
   }, [getScrollContainer, handleScroll])
 
-  // Scroll on new user message
+  // Smart auto-scroll: only scroll if user hasn't intentionally scrolled up during streaming
   useEffect(() => {
     if (messages.length === 0) return
 
     const lastMessage = messages[messages.length - 1]
-    if (lastMessage?.role === 'user') {
-      setUserHasScrolledDuringStream(false)
+    const isNewUserMessage = lastMessage?.role === 'user'
+
+    const shouldAutoScroll =
+      isNewUserMessage ||
+      (isSendingMessage && !userHasScrolledDuringStream) ||
+      (!isSendingMessage && isNearBottom)
+
+    if (shouldAutoScroll) {
       scrollToBottom()
     }
-  }, [messages, scrollToBottom])
+  }, [messages, isNearBottom, isSendingMessage, userHasScrolledDuringStream, scrollToBottom])
+
+  // Reset user scroll state when streaming starts or when user sends a message
+  useEffect(() => {
+    const lastMessage = messages[messages.length - 1]
+    if (lastMessage?.role === 'user') {
+      setUserHasScrolledDuringStream(false)
+      programmaticScrollInProgressRef.current = false
+      const scrollContainer = getScrollContainer()
+      if (scrollContainer) {
+        lastScrollTopRef.current = scrollContainer.scrollTop
+      }
+    }
+  }, [messages, getScrollContainer])
 
   // Reset user scroll state when streaming completes
   const prevIsSendingRef = useRef(false)
   useEffect(() => {
     if (prevIsSendingRef.current && !isSendingMessage) {
       setUserHasScrolledDuringStream(false)
-      // Final scroll to ensure we're at bottom
-      if (isNearBottom) {
-        scrollToBottom()
-      }
     }
     prevIsSendingRef.current = isSendingMessage
-  }, [isSendingMessage, isNearBottom, scrollToBottom])
+  }, [isSendingMessage])
 
-  // While streaming, use RAF to check for content changes and scroll
-  // This is more efficient than setInterval and syncs with browser rendering
+  // While streaming and not broken away, keep pinned to bottom
   useEffect(() => {
-    if (!isSendingMessage || userHasScrolledDuringStream) {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current)
-        rafIdRef.current = null
-      }
-      return
-    }
+    if (!isSendingMessage || userHasScrolledDuringStream) return
 
-    const checkAndScroll = () => {
+    const intervalId = window.setInterval(() => {
       const scrollContainer = getScrollContainer()
-      if (!scrollContainer) {
-        rafIdRef.current = requestAnimationFrame(checkAndScroll)
-        return
+      if (!scrollContainer) return
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight
+      const nearBottom = distanceFromBottom <= stickinessThreshold
+      if (nearBottom) {
+        scrollToBottom()
       }
+    }, 100)
 
-      const { scrollHeight } = scrollContainer
-      // Only scroll if content height actually changed
-      if (scrollHeight !== lastScrollHeightRef.current) {
-        lastScrollHeightRef.current = scrollHeight
-        // Use instant scroll during streaming to prevent jitter
-        scrollToBottom(true)
-      }
-
-      rafIdRef.current = requestAnimationFrame(checkAndScroll)
-    }
-
-    rafIdRef.current = requestAnimationFrame(checkAndScroll)
-
-    return () => {
-      if (rafIdRef.current) {
-        cancelAnimationFrame(rafIdRef.current)
-        rafIdRef.current = null
-      }
-    }
-  }, [isSendingMessage, userHasScrolledDuringStream, getScrollContainer, scrollToBottom])
+    return () => window.clearInterval(intervalId)
+  }, [
+    isSendingMessage,
+    userHasScrolledDuringStream,
+    getScrollContainer,
+    scrollToBottom,
+    stickinessThreshold,
+  ])
 
   return {
     scrollAreaRef,
-    scrollToBottom: () => scrollToBottom(false),
+    scrollToBottom,
   }
 }