Issue #14 - [FEATURE] Add Copy Button to Code Blocks

[rogelio-cmj]

Current Behavior

Code blocks are rendered through the markdown-it library with syntax highlighting via highlight.js in the Block component. When users want to copy code, they must:

Reproduction Steps:

1. Launch the Chatbox application
2. Send a message asking for code (e.g., "Write a Python function to calculate fibonacci numbers")
3. Wait for the AI response containing a code block
4. Observe: There is no dedicated copy button, and users must rely on manual text selection which can be imprecise

Expected Behavior

Each rendered code block should display a copy button that allows users to copy the code content with a single click. The button should provide visual feedback confirming the copy action.

Acceptance Criteria:

• A copy button appears on each code block in assistant messages
• Clicking the copy button copies the code content (without syntax highlighting HTML) to the system clipboard
• A visual indicator (such as a toast notification or button state change) confirms the copy action
• The copy button has appropriate styling that makes it visible but not intrusive
• The copy functionality works for code blocks in all supported languages

Steps To Test

1. Start the application and create a new chat session
2. Send a message requesting code: "Write a JavaScript function to reverse a string"
3. Wait for the AI response with a code block
4. Verify a copy button is visible on the code block
5. Click the copy button
6. Verify you see a confirmation (toast notification or button feedback)
7. Paste into a text editor (Ctrl+V or Cmd+V)
8. Confirm the code content was copied correctly without HTML markup

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx