fix(chat): copy safely without ClipboardItem

Author: j15z

apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx

@@ -8,6 +8,7 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
+  type ClipboardContent,
   cn,
   Duplicate,
   Split,
@@ -32,7 +33,7 @@ interface MessageActionsProps {
   content: string
   getCopyContent?: () => string
   hasCopyContent?: boolean
-  prepareContentForCopy?: (content: string) => string | Promise<string>
+  prepareContentForCopy?: (content: string) => ClipboardContent
   userQuery?: string
   requestId?: string
   messageId?: string

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/copyable-markdown.test.ts

@@ -123,7 +123,11 @@ describe('toCopyableMarkdown', () => {
       'Read <workspace_resource>{"type":"file","path":"files/The%20Bell%20at%20Low%20Tide.md","title":"The Bell at Low Tide.md"}</workspace_resource>.'
     const refreshWorkspaceFiles = vi.fn().mockResolvedValue(WORKSPACE_FILES)
 
-    await expect(prepareCopyableMarkdown(message, [], refreshWorkspaceFiles)).resolves.toBe(
+    const content = prepareCopyableMarkdown(message, [], refreshWorkspaceFiles)
+    expect(content).not.toBeTypeOf('string')
+    if (typeof content === 'string') throw new Error('Expected deferred clipboard content')
+    expect(content.fallback).toBe('Read The Bell at Low Tide.md.')
+    await expect(content.prepare()).resolves.toBe(
       'Read [The Bell at Low Tide.md](sim:file/file_bell).'
     )
     expect(refreshWorkspaceFiles).toHaveBeenCalledOnce()

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/copyable-markdown.ts

@@ -1,3 +1,4 @@
+import type { ClipboardContent } from '@sim/emcn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { toSimMarkdownLink } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/sim-link'
 import { sanitizeChatDisplayContent } from '@/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-sanitize'
@@ -67,11 +68,15 @@ export function prepareCopyableMarkdown(
   raw: string,
   workspaceFiles: readonly WorkspaceFileRecord[],
   refreshWorkspaceFiles: () => Promise<readonly WorkspaceFileRecord[]>
-): string | Promise<string> {
+): ClipboardContent {
   const initial = serializeCopyableMarkdown(raw, workspaceFiles)
   if (!initial.hasUnresolvedFile) return initial.markdown
 
-  return refreshWorkspaceFiles()
-    .catch(() => workspaceFiles)
-    .then((refreshedFiles) => toCopyableMarkdown(raw, refreshedFiles))
+  return {
+    fallback: initial.markdown,
+    prepare: () =>
+      refreshWorkspaceFiles()
+        .catch(() => workspaceFiles)
+        .then((refreshedFiles) => toCopyableMarkdown(raw, refreshedFiles)),
+  }
 }

packages/emcn/src/hooks/use-copy-to-clipboard.test.ts

@@ -34,7 +34,7 @@ describe('writeTextToClipboard', () => {
       resolveText = resolve
     })
 
-    const result = writeTextToClipboard(text)
+    const result = writeTextToClipboard({ fallback: 'available now', prepare: () => text })
 
     expect(write).toHaveBeenCalledOnce()
     expect(writeText).not.toHaveBeenCalled()
@@ -44,4 +44,22 @@ describe('writeTextToClipboard', () => {
     expect(await blob.text()).toBe('prepared later')
     await result
   })
+
+  it('writes the immediate fallback when ClipboardItem is unavailable', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    vi.stubGlobal('ClipboardItem', undefined)
+    let resolveText: (value: string) => void = () => undefined
+    const text = new Promise<string>((resolve) => {
+      resolveText = resolve
+    })
+    const prepare = vi.fn(() => text)
+
+    const result = writeTextToClipboard({ fallback: 'available now', prepare })
+
+    expect(writeText).toHaveBeenCalledWith('available now')
+    expect(prepare).not.toHaveBeenCalled()
+    await result
+    resolveText('prepared later')
+  })
 })

packages/emcn/src/hooks/use-copy-to-clipboard.ts

@@ -7,24 +7,35 @@ interface UseCopyToClipboardOptions {
   resetMs?: number
 }
 
+export interface DeferredClipboardContent {
+  /** Safe text that can be written immediately when promise-backed writes are unavailable. */
+  fallback: string
+  /** Produces the preferred text when the browser supports promise-backed clipboard items. */
+  prepare: () => Promise<string>
+}
+
+export type ClipboardContent = string | DeferredClipboardContent
+
 interface UseCopyToClipboardReturn {
   copied: boolean
-  copy: (text: string | Promise<string>) => Promise<boolean>
+  copy: (content: ClipboardContent) => Promise<boolean>
 }
 
 /**
  * Starts an async clipboard write while the caller still has transient user activation.
- * Promise-backed text uses `ClipboardItem` so preparation can finish after the write begins.
+ * Deferred text uses `ClipboardItem` when available and an immediate fallback otherwise.
  */
-export function writeTextToClipboard(text: string | Promise<string>): Promise<void> {
-  if (typeof text === 'string') return navigator.clipboard.writeText(text)
+export function writeTextToClipboard(content: ClipboardContent): Promise<void> {
+  if (typeof content === 'string') return navigator.clipboard.writeText(content)
 
   if (typeof ClipboardItem !== 'undefined' && typeof navigator.clipboard.write === 'function') {
-    const blob = text.then((value) => new Blob([value], { type: 'text/plain' }))
+    const blob = Promise.resolve()
+      .then(() => content.prepare())
+      .then((value) => new Blob([value], { type: 'text/plain' }))
     return navigator.clipboard.write([new ClipboardItem({ 'text/plain': blob })])
   }
 
-  return text.then((value) => navigator.clipboard.writeText(value))
+  return navigator.clipboard.writeText(content.fallback)
 }
 
 /**
@@ -49,9 +60,9 @@ export function useCopyToClipboard(
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const copy = useCallback(
-    async (text: string | Promise<string>): Promise<boolean> => {
+    async (content: ClipboardContent): Promise<boolean> => {
       try {
-        await writeTextToClipboard(text)
+        await writeTextToClipboard(content)
         setCopied(true)
         if (timerRef.current) clearTimeout(timerRef.current)
         timerRef.current = setTimeout(() => setCopied(false), resetMs)

packages/emcn/src/index.ts

@@ -33,7 +33,10 @@ export {
   TableHeader,
   TableRow,
 } from './components/table/table'
-export { useCopyToClipboard } from './hooks/use-copy-to-clipboard'
+export {
+  type ClipboardContent,
+  useCopyToClipboard,
+} from './hooks/use-copy-to-clipboard'
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion'
 export * from './icons'
 export { cn } from './lib/cn'