fix(chat): preserve clipboard activation

Author: j15z

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

@@ -66,12 +66,12 @@ export const MessageActions = memo(function MessageActions({
     }
   }, [])
 
-  const copyToClipboard = async () => {
+  const copyToClipboard = () => {
     const contentToCopy = getCopyContent?.() ?? content
     if (!contentToCopy) return
-    const markdown = (await prepareContentForCopy?.(contentToCopy)) ?? contentToCopy
-    if (!markdown) return
-    await copyMessage(markdown)
+    const markdown = prepareContentForCopy?.(contentToCopy) ?? contentToCopy
+    if (typeof markdown === 'string' && !markdown) return
+    void copyMessage(markdown)
   }
 
   const copyRequestId = async () => {

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

@@ -129,14 +129,14 @@ describe('toCopyableMarkdown', () => {
     expect(refreshWorkspaceFiles).toHaveBeenCalledOnce()
   })
 
-  it('does not refresh metadata when all workspace resources already resolve', async () => {
+  it('does not refresh metadata when all workspace resources already resolve', () => {
     const message =
       '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()
 
-    await expect(
-      prepareCopyableMarkdown(message, WORKSPACE_FILES, refreshWorkspaceFiles)
-    ).resolves.toBe('Read [The Bell at Low Tide.md](sim:file/file_bell).')
+    expect(prepareCopyableMarkdown(message, WORKSPACE_FILES, refreshWorkspaceFiles)).toBe(
+      'Read [The Bell at Low Tide.md](sim:file/file_bell).'
+    )
     expect(refreshWorkspaceFiles).not.toHaveBeenCalled()
   })
 

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

@@ -63,14 +63,15 @@ export function toCopyableMarkdown(
   return serializeCopyableMarkdown(raw, workspaceFiles).markdown
 }
 
-export async function prepareCopyableMarkdown(
+export function prepareCopyableMarkdown(
   raw: string,
   workspaceFiles: readonly WorkspaceFileRecord[],
   refreshWorkspaceFiles: () => Promise<readonly WorkspaceFileRecord[]>
-): Promise<string> {
+): string | Promise<string> {
   const initial = serializeCopyableMarkdown(raw, workspaceFiles)
   if (!initial.hasUnresolvedFile) return initial.markdown
 
-  const refreshedFiles = await refreshWorkspaceFiles().catch(() => workspaceFiles)
-  return toCopyableMarkdown(raw, refreshedFiles)
+  return refreshWorkspaceFiles()
+    .catch(() => workspaceFiles)
+    .then((refreshedFiles) => toCopyableMarkdown(raw, refreshedFiles))
 }

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

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { writeTextToClipboard } from './use-copy-to-clipboard'
+
+interface MockClipboardItem {
+  items: Record<string, Blob | Promise<Blob>>
+}
+
+describe('writeTextToClipboard', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('writes prepared text directly', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+
+    await writeTextToClipboard('ready')
+
+    expect(writeText).toHaveBeenCalledWith('ready')
+  })
+
+  it('starts a ClipboardItem write before promised text resolves', async () => {
+    const write = vi.fn().mockResolvedValue(undefined)
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { write, writeText } })
+    vi.stubGlobal(
+      'ClipboardItem',
+      class {
+        constructor(readonly items: Record<string, Blob | Promise<Blob>>) {}
+      }
+    )
+    let resolveText: (value: string) => void = () => undefined
+    const text = new Promise<string>((resolve) => {
+      resolveText = resolve
+    })
+
+    const result = writeTextToClipboard(text)
+
+    expect(write).toHaveBeenCalledOnce()
+    expect(writeText).not.toHaveBeenCalled()
+    const [clipboardItems] = write.mock.calls[0] as [MockClipboardItem[]]
+    resolveText('prepared later')
+    const blob = await clipboardItems[0].items['text/plain']
+    expect(await blob.text()).toBe('prepared later')
+    await result
+  })
+})

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

@@ -9,7 +9,22 @@ interface UseCopyToClipboardOptions {
 
 interface UseCopyToClipboardReturn {
   copied: boolean
-  copy: (text: string) => Promise<boolean>
+  copy: (text: string | Promise<string>) => 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.
+ */
+export function writeTextToClipboard(text: string | Promise<string>): Promise<void> {
+  if (typeof text === 'string') return navigator.clipboard.writeText(text)
+
+  if (typeof ClipboardItem !== 'undefined' && typeof navigator.clipboard.write === 'function') {
+    const blob = text.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))
 }
 
 /**
@@ -34,9 +49,9 @@ export function useCopyToClipboard(
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const copy = useCallback(
-    async (text: string): Promise<boolean> => {
+    async (text: string | Promise<string>): Promise<boolean> => {
       try {
-        await navigator.clipboard.writeText(text)
+        await writeTextToClipboard(text)
         setCopied(true)
         if (timerRef.current) clearTimeout(timerRef.current)
         timerRef.current = setTimeout(() => setCopied(false), resetMs)