Skip to content

feat(ui): Add copy button for code blocks in mothership #4033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheodoreSpeaks merged 5 commits into from
Apr 8, 2026
Merged

feat(ui): Add copy button for code blocks in mothership #4033

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e079c82
Add copy button for code blocks in mothership
TheodoreSpeaks Apr 8, 2026
0413d87
Move to shared copy code button
TheodoreSpeaks Apr 8, 2026
c386595
Handle react node case for copy
TheodoreSpeaks Apr 8, 2026
cf9de44
fix(copy-button): address PR review feedback
TheodoreSpeaks Apr 8, 2026
6ed3bcc
Fix lint
TheodoreSpeaks Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Move to shared copy code button
  • Loading branch information
@TheodoreSpeaks
TheodoreSpeaks committed Apr 8, 2026
commit 0413d8770307771b6a1c2bca4402abafd8ca8bdd
33 changes: 4 additions & 29 deletions apps/sim/app/chat/components/message/components/markdown-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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) {
Expand Down Expand Up @@ -131,6 +105,7 @@ function createCustomComponents(LinkComponent: typeof LinkWithPreview) {
</span>
<CopyCodeButton
code={typeof codeContent === 'string' ? codeContent : String(codeContent ?? '')}
Comment thread
TheodoreSpeaks marked this conversation as resolved.
Outdated
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'>
Expand Down
37 changes: 7 additions & 30 deletions ...ce/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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]',
Expand Down Expand Up @@ -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)]'
/>
Comment thread
TheodoreSpeaks marked this conversation as resolved.
</div>
<div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[var(--code-bg)]'>
<pre
Expand Down
33 changes: 33 additions & 0 deletions apps/sim/components/ui/copy-code-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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])
Comment thread
TheodoreSpeaks marked this conversation as resolved.
Outdated
Comment thread
TheodoreSpeaks marked this conversation as resolved.
Outdated

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>
)
}
Loading