Skip to content

feat: add copy button to code blocks in agent output#1598

Merged
adboio merged 1 commit intoPostHog:mainfrom
reverb256:fix/1499-copy-button-code-blocks
Apr 9, 2026
Merged

feat: add copy button to code blocks in agent output#1598
adboio merged 1 commit intoPostHog:mainfrom
reverb256:fix/1499-copy-button-code-blocks

Conversation

@reverb256
Copy link
Copy Markdown
Contributor

Problem

When the agent outputs code blocks (e.g. SQL queries, shell commands), there is no way to copy the code without manually selecting it.

Fixes #1499

Solution

Added a hover-to-reveal copy button to the CodeBlock component used by MarkdownRenderer. The button:

  • Appears in the top-right corner on hover (group-hover)
  • Uses the same Copy/Check icon pattern from @phosphor-icons/react already used in AgentMessage.tsx
  • Copies code text to clipboard via navigator.clipboard.writeText
  • Shows a ✓ checkmark for 2 seconds after copying
  • Uses IconButton from @radix-ui/themes for consistent styling

Files Changed

  • apps/code/src/renderer/components/CodeBlock.tsx — wrapped in relative div with group class, added IconButton with copy logic

Adds a hover-to-reveal copy button on code blocks rendered
by the MarkdownRenderer. Uses the same Copy/Check icon pattern
already used in AgentMessage.tsx.

The button appears on hover (group-hover) in the top-right
corner of the code block. Click copies the code text to
clipboard and shows a checkmark for 2 seconds.

Fixes PostHog#1499
Copy link
Copy Markdown
Contributor

@adboio adboio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀🦔❤️

Copy link
Copy Markdown
Contributor

adboio commented Apr 9, 2026

Merge activity

  • Apr 9, 8:53 PM UTC: Graphite couldn't merge this PR because it failed for an unknown reason (Fast-forward merges are not supported for forked repositories. Please create a branch in the target repository in order to merge).

@adboio adboio merged commit fc5b70e into PostHog:main Apr 9, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

add "copy" button to code blocks in agent output

2 participants