feat(desktop): add copy buttons for blockquote and code blocks with i…

[twfhyr]

What

Adds copy buttons with icon + tooltip to blockquote and code blocks in assistant chat messages.

• BlockquoteCopyButton: New React component using HugeiconsIcon (Copy01Icon/Tick02Icon) + Radix Tooltip, matching the CopyResponseButton pattern in ChatBubble.tsx
• CodeBlock copy button: Upgraded from plain text ("Copy"/"Copied!") to the same icon + tooltip pattern for consistency
• Hover-to-reveal: Blockquote copy button is hidden by default, fades in on hover via CSS opacity transition (no visual noise at rest)
• Copied feedback: Both buttons switch to a green checkmark icon + "Copied!" tooltip on click, reverting after 1.5s
• Shared tooltip styles: .chat-copy-tooltip with z-index: 9999 and dedicated animation keyframes

Why

Issue #574 — users often want to copy a single block (command, code snippet, config) from an assistant response, not the entire message. Code blocks had a copy button but used plain text. Blockquotes had no copy button at all.

Testing

• pnpm --filter @antseed/desktop run typecheck:renderer passes
• pnpm --filter @antseed/desktop run build:renderer passes
• Visual verification requires running the desktop app (pnpm --filter @antseed/desktop run dev) and checking:
  • Code blocks show a clipboard icon in the header with "Copy" tooltip, switching to checkmark + "Copied!" on click
  • Blockquotes show a copy icon in the top-right corner on hover, same click behavior
  • Message-level copy (existing response action bar) still works unchanged
• No unit tests exist for chat-utils.tsx (none existed prior to this change either)

Checklist

• pnpm run build
• pnpm run test
• Breaking changes documented — no breaking changes
  ~

[SheferKagan]

QA note: copy support currently seems focused on blockquotes and fenced code blocks, but inline code/text pills should be covered as well. For example, branch names like feat/chat-message-replies are rendered as small text boxes/pills and should have their own easy copy affordance too.\n\nThis may not be the only remaining gap, but I wanted to flag this specific case for now.

[twfhyr]

Thanks for flagging this. Inline code spans now have their own copy button too.

What was added:

• InlineCodeCopyButton component -- same icon + tooltip pattern as blockquote/code block, but with a smaller 12px icon suited to inline text
• Inline <code> elements are wrapped in a <span class="chat-inline-code-wrap"> with a hover-reveal copy button positioned to the right of the pill (left: 100%, vertically centered)
• Uses opacity: 0 → opacity: 1 transition with pointer-events: none/auto toggling, consistent with the blockquote pattern
• No layout shift -- the button is absolutely positioned so it doesn't affect line height or spacing when hidden or revealed

This covers the branch name / text pill case you mentioned (e.g. feat/chat-message-replies). If there are other copyable elements you'd like covered, let me know.

[SheferKagan]

Thanks for jumping on the inline-code case so quickly. I pulled the PR branch and tried it locally. The feature itself is definitely useful, but I noticed one keyboard navigation issue that I think we should clean up before merging.

If I tab through the rendered message without using the mouse, focus eventually lands on one of the inline-code copy buttons, but the button itself is still hidden. The tooltip shows up with Copy, so something is clearly focused, but there’s no visible button/focus target on screen. From a keyboard user’s point of view it feels like focus just disappeared.

Steps I used:

1. Render a message with inline code, for example:
   • feat/chat-message-replies
   • pnpm install
   • git status --short
2. Don’t hover the message with the mouse.
3. Press Tab through the chat UI.
4. You’ll eventually see the Copy tooltip appear, but the copy button itself is not visible.

I think this is happening because the inline copy button is hidden with opacity: 0 / pointer-events: none. That hides it from the mouse, but the actual <button> is still reachable with the keyboard.

Could you adjust this so that whenever the button receives keyboard focus, it becomes visible too? Something like showing it on :focus-within / :focus-visible, plus a clear focus style, would probably be enough.

One smaller UX note: the inline button is positioned at left: 100%, so in dense text it can feel a bit cramped next to the following punctuation/prose. Might be worth checking that case too, especially on narrow widths.

Overall I like the direction here — code block copy looks good and the inline-code support is a useful addition. I just don’t want us to merge an invisible focus target into the chat UI.

[SheferKagan]

Code-structure concern: this feels like it reinvents the copy-button pattern instead of extending the one we already have.

CopyResponseButton already has the clipboard write, copied state, timeout cleanup, icon switch, and Radix tooltip pattern. This PR adds new separate implementations for inline code, blockquotes, and code blocks, each with their own copy state/tooltip/timer logic.

Can we extract the existing behavior into a shared copy button/hook and reuse it here? That would keep the interaction consistent and avoid drift between four different copy implementations.

[twfhyr]

Thanks for the thorough review — both issues are now addressed in the latest push (cba0e35).

Keyboard focus visibility

The inline-code and blockquote copy buttons were hidden with opacity: 0 / pointer-events: none but still keyboard-focusable, which made focus appear to vanish when tabbing. This is now fixed:

• Inline code: .chat-inline-code-wrap:hover .chat-inline-code-copy-btn now also matches .chat-inline-code-copy-btn:focus-visible, so the button appears on keyboard focus with a visible focus ring.
• Blockquote: The .chat-blockquote-header now appears on :focus-within (not just :hover), so tabbing into the copy button reveals the whole header.
• Code block: Already always visible, but added :focus-visible with a focus ring for consistency.
• All three button types get outline: 2px solid var(--accent-blue, #3b82f6); outline-offset: 1px; on focus-visible for a clear, consistent focus indicator.

Shared copy hook / deduplication

All four copy implementations (inline code, blockquote, code block, and the existing CopyResponseButton) now share a single useCopyToClipboard hook extracted from the original CopyResponseButton logic:

• useCopyToClipboard(text, timeout) — manages copied state, timer cleanup, and clipboard write.
• CopyButton component — renders the icon + Radix tooltip, used by inline code, blockquote, and code block.
• CopyResponseButton — refactored to use useCopyToClipboard internally while keeping its own styling and layout.

Net change: 49 insertions, 103 deletions. No more duplicated timer/state/tooltip logic.

Re: the left: 100% spacing concern on narrow widths — I kept it as-is for now since it avoids layout shift in the common case, but happy to add a small margin-left: 2px or switch to a different positioning approach if you'd prefer.