feat: add copy-to-clipboard toolbar for message bubbles by arpan7sarkar · Pull Request #783 · Nano-Collective/nanocoder

arpan7sarkar · 2026-08-04T05:13:46Z

Description

Adds a "Copy" button to both user prompt bubbles and AI response bubbles in the VS Code extension's chat panel (closes #746). Hovering over a message bubble reveals a subtle clipboard icon (bottom-right for user messages, bottom-left for agent messages); clicking it copies the raw markdown text via navigator.clipboard.writeText() and briefly swaps the icon for a checkmark to confirm the copy.

Screencast_20260803_234750.webm

For streamed agent responses, the copy button always reads the latest in-progress text (via a dataset.rawText kept in sync on each chunk) rather than a stale snapshot, so copying mid-stream works correctly.

Type of Change

New feature
Bug fix
Breaking change
Documentation update

Changeset

Added a changeset (pnpm changeset) describing this change for the changelog

nanocoder-vscode is listed in .changeset/config.json's ignore array, so no changeset is needed for this package.

Testing

Automated Tests

New features include passing
All existing tests pass (pnpm test:format, pnpm test:lint)
Tests cover both success and error scenarios

chat-panel.js is a plain DOM script with no existing test harness/spec coverage in this extension, so no automated test was added for the UI behavior. Verified pnpm run test:format and pnpm run
test:lint both pass.

Manual Testing

[x ] Tested with Ollama
[ x] Tested with OpenRouter
[ x] Tested with OpenAI-compatible API
Tested MCP integration

Built and installed the extension locally (pnpm run build:vscode) and confirmed it activates
correctly and the copy button rendechat panel. Full end-to-endmessage-send testing against a live provider is still pending on my end.

Checklist

Code follows project style gu
Self-review completed
Documentation updated (if needed)
No breaking changes (or clear
Appropriate logging added using structured logging (see CONTRIBUTING.md#logging) — n/a, no new logging paths introduced

…icks Body (if you want more detail): - Catch navigator.clipboard.writeText() rejections and show an error state instead of an unhandled promise rejection - Reset via .finally() using a closure timer instead of storing state on the DOM element - Disable pointer-events on the copy toolbar while hidden so hovering near a message can't trigger an accidental copy

Copilot

Pull request overview

Adds a hover-revealed copy-to-clipboard action on message bubbles in the VS Code extension chat panel, enabling quick copying of raw markdown for both user prompts and agent responses (including in-progress streamed output).

Changes:

Adds a reusable createCopyToolbar() and wraps message bubbles to show a copy icon on hover.
Ensures streamed agent responses copy the latest text by keeping wrapper.dataset.rawText synced per chunk.
Updates the generated Tailwind CSS output and adds a changeset entry for the main package changelog.

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.

File	Description
plugins/vscode/media/chat-panel.js	Adds wrapper + hover toolbar and hooks copy behavior into both static and streamed message rendering paths.
plugins/vscode/media/chat-panel.css	Updates generated Tailwind output to include new utility classes used by the toolbar (e.g., pointer-events, sizing, variants).
.changeset/add-vscode-copy-button.md	Records the feature in the monorepo changelog as a patch-level change.

Files not reviewed (1)

plugins/vscode/media/chat-panel.css: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+		btn.addEventListener('click', () => {
+			const text = getText();
+			if (!text) return;
+			navigator.clipboard.writeText(text).then(() => {
+				btn.innerHTML = ICONS.success;
+				btn.title = 'Copied!';
+			}).catch(() => {
+				btn.innerHTML = ICONS.error;
+				btn.title = 'Copy failed';
+			}).finally(() => {
+				clearTimeout(resetTimer);
+				resetTimer = setTimeout(() => {
+					btn.innerHTML = ICONS.clipboard;
+					btn.title = 'Copy';
+				}, 1500);
+			});
+		});


+		const btn = document.createElement('button');
+		btn.className = 'flex items-center justify-center bg-transparent border-none cursor-pointer text-vscode-fg opacity-60 hover:opacity-100 p-1 rounded hover:bg-vscode-toolbarHover [&_svg]:mr-0';
+		btn.title = 'Copy';
+		btn.innerHTML = ICONS.clipboard;


arpan7sarkar · 2026-08-04T07:34:31Z

@akramcodez Check out this pr and tell me if any changes are needed , thanks

akramcodez · 2026-08-04T08:42:07Z

@arpan7sarkar Thanks for the contribution! I really like the overall implementation, especially the use of dataset.rawText to keep the copy button in sync with streamed responses. That's a clean solution for the mid-stream copy problem and makes sure users always copy the latest response rather than a stale snapshot.

I went through the issue, the implementation, and the user flow, and I have a few comments before I'd be comfortable approving this.

1. Missing Clipboard API Guard

What is wrong:

The copy button click handler assumes navigator.clipboard is always available.

Why is it wrong:

In some VS Code webview environments (or older runtimes), navigator.clipboard can be unavailable. Calling navigator.clipboard.writeText(...) in that case throws synchronously before the Promise is created, meaning the current .catch() block never runs and the UI won't enter the error state.

Where is it wrong:

plugins/vscode/media/chat-panel.js inside createCopyToolbar().

What should be done:

Guard against navigator.clipboard being unavailable and wrap the whole operation in a try/catch (preferably using async/await) so the button always shows the correct success or failure state.

2. Accessibility & Button Semantics

What is wrong:

The icon-only button doesn't specify type="button" and doesn't have an accessible name.

Why is it wrong:

Without an explicit button type, it could behave as a submit button if this UI is ever placed inside a form. Since the button only contains an SVG icon, screen readers also have no way of announcing its purpose.

Where is it wrong:

plugins/vscode/media/chat-panel.js inside createCopyToolbar().

What should be done:

Set:

btn.type = 'button'
btn.setAttribute('aria-label', 'Copy message')

to improve accessibility and future-proof the component.

3. Missing Test Coverage

What is wrong:

The new functionality currently relies entirely on manual verification.

Why is it wrong:

This PR introduces two important behaviors:

Copying static user/assistant messages.
Copying in-progress streamed responses using dataset.rawText.

Without automated coverage, future refactors could accidentally break the streamed-copy logic without anyone noticing.

What should be done:

I'd recommend adding tests covering:

Copying a normal message.
Copying an in-progress streamed response (ensuring the latest dataset.rawText is copied).
Clipboard failure path (button enters the error state).

4. UI Suggestion (Non-blocking)

This isn't a blocker, but I think the current placement of the copy button looks a little disconnected from the message bubble. It feels more like a floating action than metadata associated with that specific message.

Since Nanocoder already persists conversations, I think we could make better use of the bottom area of each message by displaying both the copy action and the local timestamp.

For example:

User message

┌──────────────┐
│ Hello        │
└──────────────┘
    2:34 PM  📋

Assistant message

┌─────────────────────────────┐
│ Hello! I am Nanocoder...    │
└─────────────────────────────┘
📋  2:34 PM

This keeps the layout balanced:

User messages: Copy button → Timestamp
Assistant messages: Timestamp → Copy button

I think this has a few advantages:

The copy action feels naturally attached to the message instead of floating beside it.
Users can immediately see when each prompt and response was sent.
Since conversations are already saved in history, users would still see the local timestamp when reopening previous chats, providing useful context about when a conversation happened.
It also leaves room for future message actions without changing the overall layout.

Overall, I think this is a really nice feature and the streaming solution is well thought out. Once the clipboard guard, accessibility improvements, and some automated coverage are added, I'd be happy to approve it. The timestamp suggestion is non-blocking, but I think it would make the overall chat experience feel much more polished.

… accessibility attributes

arpan7sarkar · 2026-08-04T09:51:14Z

Hey @akramcodez I looked into the best way to add these tests and wanted to flag something before just doing it.

chat-panel.js is a single top-level IIFE with no exports and no module system, and there's currently no test setup for this file at all (no DOM environment, nothing wired up). To actually test the copy-to-clipboard behavior (normal copy, streamed copy reading the live dataset.rawText, and the clipboard-failure state) against the real code, I need some way to run it in a fake DOM from Node.

I looked into jsdom for this — it's the standard tool for testing browser DOM code from Node, dev-only (never ships in the extension bundle or CLI), and it's what most projects reach for instead of hand-rolling a fake DOM. The alternative is writing our own minimal DOM stub with Node's built-in vm module, which avoids a new dependency but means we maintain that fake DOM ourselves and it'll quietly drift out of sync as chat-panel.js grows.

Do I have the go-ahead to add jsdom as a devDependency for this, or is there a different testing approach you'd prefer for this package?

arpan7sarkar · 2026-08-04T10:02:11Z

I have added the timestamp chat messages.

…nd timestamp display

…o feat/copy-btn

akramcodez · 2026-08-04T15:20:53Z

@arpan7sarkar Great work! Just a couple of small suggestions:

Could you remove the unnecessary code comments?
The timestamp and copy button look slightly misaligned. Could you align them so the bottom metadata row looks cleaner and more polished?

arpan7sarkar · 2026-08-04T16:02:04Z

Hey @akramcodez ,
I have fixed the allignment issue

and removed unnecessary commits now you can merge it thanks.

will-lamerton · 2026-08-05T07:06:40Z

Thanks for this PR - feel free to add yourself as a contributor to our website via a PR which I will approve :)

https://nanocollective.org/contributors
https://github.com/Nano-Collective/organisation

arpan7sarkar · 2026-08-05T13:06:57Z

Hi , @will-lamerton I have added the pr to add me as contributor here Nano-Collective/organisation#89 (comment) ,
I also have added another pr do check it out , #789

arpan7sarkar added 3 commits August 4, 2026 00:05

feat: add copy-to-clipboard toolbar for message bubbles

061b4e1

chore: add changeset for vscode copy-to-clipboard feature

9224e0e

Copilot AI lite review requested due to automatic review settings August 4, 2026 05:13

arpan7sarkar requested review from Avtrkrb, akramcodez and will-lamerton as code owners August 4, 2026 05:13

Copilot started reviewing on behalf of arpan7sarkar August 4, 2026 05:14 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

Merge branch 'Nano-Collective:main' into feat/copy-btn

032706b

feat: enhance copy button functionality with clipboard API checks and…

83856d5

… accessibility attributes

arpan7sarkar added 2 commits August 4, 2026 15:32

feat: implement message footer with copy-to-clipboard functionality a…

bb743d6

…nd timestamp display

Merge branch 'feat/copy-btn' of github.com:arpan7sarkar/nanocoder int…

4046490

…o feat/copy-btn

style(vscode): trim comments and fixed message footer alignment

03bbbe8

will-lamerton merged commit 1b398c4 into Nano-Collective:main Aug 5, 2026
1 check passed

arpan7sarkar mentioned this pull request Aug 5, 2026

Add Arpan Sarkar as a contributor with details and photo Nano-Collective/organisation#89

Merged

Navigation Menu

Uh oh!

Uh oh!

feat: add copy-to-clipboard toolbar for message bubbles - #783

feat: add copy-to-clipboard toolbar for message bubbles#783
will-lamerton merged 8 commits into
Nano-Collective:mainfrom
arpan7sarkar:feat/copy-btn

arpan7sarkar commented Aug 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

akramcodez commented Aug 4, 2026

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

akramcodez commented Aug 4, 2026 •

edited

Loading

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

Uh oh!

will-lamerton commented Aug 5, 2026

Uh oh!

arpan7sarkar commented Aug 5, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

arpan7sarkar commented Aug 4, 2026

Description

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

akramcodez commented Aug 4, 2026

1. Missing Clipboard API Guard

2. Accessibility & Button Semantics

3. Missing Test Coverage

4. UI Suggestion (Non-blocking)

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

akramcodez commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arpan7sarkar commented Aug 4, 2026

Uh oh!

Uh oh!

will-lamerton commented Aug 5, 2026

Uh oh!

arpan7sarkar commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

akramcodez commented Aug 4, 2026 •

edited

Loading

arpan7sarkar commented Aug 5, 2026 •

edited

Loading