Skip to content

Add copy-to-clipboard button on code blocks in MarkdownBlock #105

Description

@alimaandev

Summary

desktop/src/components/chat/MarkdownBlock.tsx renders syntax-highlighted code blocks (highlight.js), but there is no per-code-block copy button. MessageBubble already has a copy button for whole messages (see useCopyButton in MessageBubble.tsx).

Goal

Add a small copy button in the top-right corner of each <pre>\ code block rendered by MarkdownBlock. Reuse the same clipboard fallback pattern used in MessageBubble.tsx (navigator.clipboard with execCommand fallback).

Tasks

  • Add a copy button overlay on code blocks
  • Show a transient 'Copied' state for ~1.5s
  • Reuse the existing copy helper pattern — do not add a new util

Acceptance criteria

  • Clicking copy on a code block copies only that block's code
  • Button shows 'Copied' feedback then reverts
  • Existing message copy behavior unchanged

Labels

good first issue, help wanted

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions