Move to shared copy code button

Author: Theodore Li

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

@@ -1,14 +1,8 @@
-import React, {
-  type HTMLAttributes,
-  memo,
-  type ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react'
+import React, { type HTMLAttributes, memo, type ReactNode, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { Check, Copy, Tooltip } from '@/components/emcn'
+import { Tooltip } from '@/components/emcn'
+import { CopyCodeButton } from '@/components/ui/copy-code-button'
 
 export function LinkWithPreview({ href, children }: { href: string; children: React.ReactNode }) {
   return (
@@ -30,26 +24,6 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
   )
 }
 
-function CopyCodeButton({ code }: { code: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }, [code])
-
-  return (
-    <button
-      type='button'
-      onClick={handleCopy}
-      className='flex items-center gap-1 rounded px-1.5 py-0.5 text-gray-400 text-xs transition-colors hover:bg-gray-700 hover:text-gray-200'
-    >
-      {copied ? <Check className='size-3.5' /> : <Copy className='size-3.5' />}
-    </button>
-  )
-}
-
 const REMARK_PLUGINS = [remarkGfm]
 
 function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
@@ -131,6 +105,7 @@ function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
             </span>
             <CopyCodeButton
               code={typeof codeContent === 'string' ? codeContent : String(codeContent ?? '')}
+              className='text-gray-400 hover:bg-gray-700 hover:text-gray-200'
             />
           </div>
           <pre className='overflow-x-auto p-4 font-mono text-gray-200 dark:text-gray-100'>

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

@@ -1,21 +1,15 @@
 'use client'
 
-import {
-  Children,
-  type ComponentPropsWithoutRef,
-  isValidElement,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react'
+import { Children, type ComponentPropsWithoutRef, isValidElement, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import 'prismjs/components/prism-typescript'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-markup'
 import '@/components/emcn/components/code/code.css'
-import { Check, Checkbox, Copy, highlight, languages } from '@/components/emcn'
+import { Checkbox, highlight, languages } from '@/components/emcn'
+import { CopyCodeButton } from '@/components/ui/copy-code-button'
 import { cn } from '@/lib/core/utils/cn'
 import {
   PendingTagIndicator,
@@ -50,26 +44,6 @@ function extractTextContent(node: React.ReactNode): string {
   return ''
 }
 
-function CopyCodeButton({ code }: { code: string }) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }, [code])
-
-  return (
-    <button
-      type='button'
-      onClick={handleCopy}
-      className='flex items-center gap-1 rounded px-1.5 py-0.5 text-[var(--text-tertiary)] text-xs transition-colors hover:bg-[var(--surface-4)] hover:text-[var(--text-secondary)]'
-    >
-      {copied ? <Check className='size-3.5' /> : <Copy className='size-3.5' />}
-    </button>
-  )
-}
-
 const PROSE_CLASSES = cn(
   'prose prose-base dark:prose-invert max-w-none',
   'font-[family-name:var(--font-inter)] antialiased break-words font-[430] tracking-[0]',
@@ -154,7 +128,10 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
       <div className='not-prose my-6 overflow-hidden rounded-lg border border-[var(--divider)]'>
         <div className='flex items-center justify-between border-[var(--divider)] 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} />
+          <CopyCodeButton
+            code={codeString}
+            className='text-[var(--text-tertiary)] hover:bg-[var(--surface-4)] hover:text-[var(--text-secondary)]'
+          />
         </div>
         <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[var(--code-bg)]'>
           <pre

apps/sim/components/ui/copy-code-button.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { Check, Copy } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+
+interface CopyCodeButtonProps {
+  code: string
+  className?: string
+}
+
+export function CopyCodeButton({ code, className }: CopyCodeButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [code])
+
+  return (
+    <button
+      type='button'
+      onClick={handleCopy}
+      className={cn(
+        'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs transition-colors',
+        className
+      )}
+    >
+      {copied ? <Check className='size-3.5' /> : <Copy className='size-3.5' />}
+    </button>
+  )
+}