[Enhancement] 代码块添加一键复制功能

[Clawiee]

Pre-checks

• I have searched existing issues and this is none.

Feature Request

Enhancement: Add one-click copy button to code blocks in chat messages

Problem Description

Currently, when the AI agent outputs code blocks in chat, users need to manually select and copy the code. This is inconvenient, especially for long code snippets.

Expected Behavior

Add a "Copy" button in the top-right corner of every code block, similar to GitHub's implementation:

┌─────────────────────────────────────┐
│ JavaScript                     📋  │  ← Copy button in top-right
├─────────────────────────────────────┤
│ function hello() {                 │
│   console.log("Hello, Clawith!");  │
│ }                                   │
└─────────────────────────────────────┘

Key Features

Feature	Description
Copy Button	Icon button in top-right corner
Hover State	Button appears/emphasized on code block hover
Click Feedback	Button changes to checkmark briefly after copying
Tooltip	Show "Copy code" on hover

Implementation Suggestions

1. Frontend Component: Modify the code block renderer in the chat UI
2. Copy Logic: Use navigator.clipboard.writeText() API
3. Feedback: Temporarily change button icon to "Copied!" for 2 seconds
4. Styling: Position absolute in top-right, semi-transparent background

Example UX Flow

1. User hovers over code block → Copy button appears
2. User clicks Copy button → Code copied to clipboard
3. Button shows checkmark + "Copied!" for 2 seconds
4. Button reverts to normal state

Related

This is a common feature in modern chat interfaces (ChatGPT, Claude, GitHub, etc.) that significantly improves code sharing experience.

Labels: enhancement, ui, user-experience