Description
When NPMChat generates code snippets or command-line instructions, users currently have to manually select and copy the content. This can be inconvenient, especially for longer snippets.
Adding a Quick Copy button for every code block would improve usability and provide a smoother developer experience.
Describe the Solution You'd Like
Implement a reusable Copy button that appears in the top-right corner of every code block.
The feature should:
- Display a copy icon/button on hover or always be visible.
- Copy the entire code block with a single click.
- Show a temporary "Copied!" confirmation message or icon change.
- Work consistently across all supported code languages.
- Support both light and dark themes.
Benefits
- Improves developer productivity.
- Reduces manual text selection.
- Provides a familiar experience similar to modern documentation sites.
- Enhances overall usability with minimal implementation effort.
Acceptance Criteria
- Every code block displays a Copy button.
- Clicking the button copies the complete code snippet.
- A success indicator is shown after copying.
- Existing chat functionality remains unchanged.
- Feature works across desktop and mobile layouts.
Describe Alternatives You've Considered
- Manually selecting and copying code snippets.
- Using browser context menu options.
- Adding keyboard shortcuts only, which are less discoverable for new users.
Additional Context
This is a lightweight quality-of-life feature that improves the user experience without modifying the chat logic or message rendering pipeline. The implementation can reuse a single component for all code blocks, making it easy to maintain and extend.
Labels
feature, enhancement, good first issue, GSSOC'26
Description
When NPMChat generates code snippets or command-line instructions, users currently have to manually select and copy the content. This can be inconvenient, especially for longer snippets.
Adding a Quick Copy button for every code block would improve usability and provide a smoother developer experience.
Describe the Solution You'd Like
Implement a reusable Copy button that appears in the top-right corner of every code block.
The feature should:
Benefits
Acceptance Criteria
Describe Alternatives You've Considered
Additional Context
This is a lightweight quality-of-life feature that improves the user experience without modifying the chat logic or message rendering pipeline. The implementation can reuse a single component for all code blocks, making it easy to maintain and extend.
Labels
feature, enhancement, good first issue, GSSOC'26