refactor(emcn): share copy code header appearance

Author: Bill Leoutsakos

apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx

@@ -88,10 +88,7 @@ const COMPONENTS = {
           <span className='font-sans text-[var(--text-tertiary)] text-xs'>
             {codeProps.className?.replace('language-', '') || 'code'}
           </span>
-          <CopyCodeButton
-            code={extractTextContent(codeContent)}
-            className='text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]'
-          />
+          <CopyCodeButton code={extractTextContent(codeContent)} appearance='code-header' />
         </div>
         <pre className='overflow-x-auto bg-[var(--surface-5)] p-4 font-mono text-[var(--text-primary)]'>
           {codeContent}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx

@@ -315,10 +315,7 @@ const MARKDOWN_COMPONENTS = {
       <div className='not-prose my-6 overflow-hidden rounded-lg border border-[var(--border)]'>
         <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-4)] px-4 py-2 dark:bg-[var(--surface-4)]'>
           <span className='text-[var(--text-tertiary)] text-xs'>{language || 'code'}</span>
-          <CopyCodeButton
-            code={codeString}
-            className='-mr-2 text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]'
-          />
+          <CopyCodeButton code={codeString} appearance='code-header' className='-mr-2' />
         </div>
         <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[var(--code-bg)]'>
           <pre className='m-0 overflow-x-auto whitespace-pre p-4 font-mono text-[var(--text-primary)] text-small leading-[21px]'>

packages/emcn/src/components/code/copy-code-button.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it, vi } from 'vitest'
+import { CopyCodeButton } from './copy-code-button'
+
+describe('CopyCodeButton', () => {
+  it.each(['default', 'code-header'] as const)(
+    'names the icon-only button in the %s appearance',
+    (appearance) => {
+      const markup = renderToStaticMarkup(<CopyCodeButton code='example' appearance={appearance} />)
+
+      expect(markup).toContain('aria-label="Copy code"')
+      expect(markup).toContain('type="button"')
+    }
+  )
+
+  it('copies code, swaps to the check icon, and keeps its accessible name', async () => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    const originalClipboard = Object.getOwnPropertyDescriptor(navigator, 'clipboard')
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText },
+    })
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+
+    try {
+      await act(async () => {
+        root.render(<CopyCodeButton code='example' appearance='code-header' />)
+      })
+      const button = host.querySelector('button')
+      expect(button?.getAttribute('aria-label')).toBe('Copy code')
+      expect(button?.querySelector('svg rect')).not.toBeNull()
+
+      await act(async () => {
+        button?.click()
+      })
+
+      expect(writeText).toHaveBeenCalledExactlyOnceWith('example')
+      expect(button?.querySelector('svg rect')).toBeNull()
+      expect(button?.querySelector('svg path')).not.toBeNull()
+      expect(button?.getAttribute('aria-label')).toBe('Copy code')
+    } finally {
+      await act(async () => root.unmount())
+      host.remove()
+      if (originalClipboard) Object.defineProperty(navigator, 'clipboard', originalClipboard)
+      else Reflect.deleteProperty(navigator, 'clipboard')
+    }
+  })
+})

packages/emcn/src/components/code/copy-code-button.tsx

@@ -1,25 +1,44 @@
 'use client'
 
+import { cva, type VariantProps } from 'class-variance-authority'
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard'
 import { Button, Check, Duplicate } from '../../index'
 import { cn } from '../../lib/cn'
 
+const copyCodeButtonVariants = cva('flex items-center gap-1 rounded px-1.5 py-0.5 text-xs', {
+  variants: {
+    appearance: {
+      default: '',
+      'code-header':
+        'text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
+    },
+  },
+  defaultVariants: {
+    appearance: 'default',
+  },
+})
+
 interface CopyCodeButtonProps {
   code: string
   className?: string
+  /** Use the muted copy action treatment in code block headers. */
+  appearance?: VariantProps<typeof copyCodeButtonVariants>['appearance']
 }
 
-export function CopyCodeButton({ code, className }: CopyCodeButtonProps) {
+export function CopyCodeButton({ code, className, appearance }: CopyCodeButtonProps) {
   const { copied, copy } = useCopyToClipboard()
 
   return (
     <Button
       type='button'
+      aria-label='Copy code'
       variant='ghost'
       onClick={() => copy(code)}
-      className={cn('flex items-center gap-1 rounded px-1.5 py-0.5 text-xs', className)}
+      className={cn(copyCodeButtonVariants({ appearance }), className)}
     >
       {copied ? <Check className='size-3.5' /> : <Duplicate className='size-3.5' />}
     </Button>
   )
 }
+
+export { copyCodeButtonVariants }

packages/emcn/src/components/index.ts

@@ -117,7 +117,7 @@ export {
   calculateGutterWidth,
   getCodeEditorProps,
 } from './code/code'
-export { CopyCodeButton } from './code/copy-code-button'
+export { CopyCodeButton, copyCodeButtonVariants } from './code/copy-code-button'
 export { highlight, languages } from './code/prism'
 export { CollapsibleCard, type CollapsibleCardProps } from './collapsible-card/collapsible-card'
 export {