Repository navigation
feat(mobile): copy button on each code block in chat - #34039
Conversation
…chat does Desktop chat shows copy on a Mermaid fence while it is still code and drops it only when the diagram replaces the block.
…ocks don't grow an empty header
|
No actionable comments were generated in the recent review.
|
ELI5
Code blocks in the phone's chat now have their own copy button. You can grab just the command instead of copying the whole reply and trimming it.
What Changed
Before: the only copy button in mobile chat copied the whole message.
After: each code block has a small copy icon in its top-right corner. It copies only that block's code. After a tap the icon turns into a green check for 1.5s, the same feedback as the message copy button. Empty code blocks get no button.
How:
renderCodeinmobile/src/components/mobile-markdown-blocks.tsxlays the block out as a row: the language label and code on the left, and the existingMobileSourceCopyButtonon the right. EveryMobileMarkdownsurface goes through this one renderer, so task comments and the Markdown file preview get the button too, as desktop's markdown preview already does. A Mermaid fence keeps the button while it's still showing as code and loses it when the diagram replaces the block, the same as desktop chat.Why
Copying one command out of a long reply on a phone meant copying everything and editing it down by hand. Desktop chat has had a per-block copy button since #20357.
This builds on #32270 by @radut, the issue's author, and keeps their two commits. My two commits on top:
Linked Issue
Fixes #32280
Linear: STA-11848. Copy for shell commands detected outside code fences is a separate ticket: STA-11907 / #32773.
Visual Proof
iPhone 18 Pro simulator, iOS 27, Safari, in a react-native-web harness of
MobileMarkdownwith chat props. iOS builds draw chat in that web page.Tap, then the check, then the copy icon again after 1.5s:
after-copy.mp4
Testing
I manually tested these changes locally
Automated tests added/updated, or explained why not below
Manual: on the iOS simulator, tapping the first block's button put exactly
pnpm test --filter mobileon the clipboard, and the second block's putgit push -u origin my-branch. A long line still wraps inside the narrower code column.New test:
MobileMarkdown.rendering.test.tsxchecks that each block's button holds only that block's code. It fails on main.Test mocks: five markdown test files mock the button, the same way they already mock
MermaidDiagram.Focused runs: the mobile
src/components,src/session,src/filesandsrc/taskstests pass (485 files), as do the page route grant census,check:code-quality:changedandcheck:react-doctor:changed.AI Disclosure
Review
native.clipboard.writeverb. Every page route that rendersMobileMarkdown(session, tasks, file explorer and preview, source control, review) already declares that permission, and the grant census test passes.expo-clipboard.Agent skill upstream boundary
Notes
The change is mobile only. It touches no desktop, SSH or wire protocol code, so phone and desktop versions can mix freely. PR comment code blocks (
pr-sidebar/CommentMarkdown.tsx) have their own renderer and are left as they are.Checklist
N/Awith reasonpnpm lint,pnpm typecheck,pnpm test, andpnpm buildpass (or CI will cover; local preferred)