nandi/ori · 0021-copy-paste-completions-and-code-blocks.yaml

nandi/oripublic⑂ Fork 0

⑂ 3d1f70c3b1e0d8c9a0b27adcc1bd1a9f053c050e

0021-copy-paste-completions-and-code-blocks.yaml · 187 lines · 7.2 KBYAML    Blame HistoryRaw
Add copy-paste functionality for code blocks and completion widgets   1# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
3title: Add copy-paste functionality for completion widgets and code blocks
4state: open
name: k33g
email: ph.charriere@gmail.com
8createdAt: 2026-09-18T00:00:00.000Z
9updatedAt: 2026-09-18T00:00:00.000Z
- feature
- enhancement
- usability
Add the ability to copy-paste each generated completion widget and code portions/blocks individually.
## Problem Statement
Users need to quickly copy agent responses, code snippets, and individual completion widgets without selecting text manually. This is a common UX pattern in modern AI chat interfaces.
## Requirements
### Completion Widgets
- Each completion widget (thought, tool call result, plan, etc.) should have a copy button
- Copy button appears on hover or always visible (design decision)
- Clicking copies the entire widget content to clipboard
- Visual feedback when copied (checkmark, tooltip, color change)
- Preserve formatting when copying (plain text or markdown)
### Code Blocks
- Every code block should have a dedicated copy button
- Button positioned in top-right corner of code block (standard pattern)
- Copy raw code without syntax highlighting markup
- Support for inline code spans (optional - may be too small for button)
- Language label displayed alongside copy button
### Multi-line Text Blocks
- Bash command outputs
- File content previews
- Error messages
- Log outputs
- Any multi-line formatted text
## User Experience
### Visual Design
- **Copy button icon**: clipboard icon or "Copy" text
- **Position**: Top-right corner of widget/block (consistent placement)
- **Visibility**: 
  - Always visible (simpler)
  - OR show on hover (cleaner UI)
- **Feedback states**:
  - Default: clipboard icon
  - Hover: subtle highlight
  - Click: changes to checkmark icon
  - After 2s: reverts to clipboard icon
- **Tooltip**: "Copy" (before), "Copied!" (after)
### Interaction Flow
User hovers over code block
→ Copy button appears/highlights
→ User clicks copy button
→ Content copied to clipboard
→ Button shows checkmark + "Copied!" tooltip
→ After 2 seconds, button reverts to default
## Implementation Considerations
### Frontend (React)
- Use Clipboard API (`navigator.clipboard.writeText()`)
- Fallback for older browsers (`document.execCommand('copy')`)
- Component: `<CopyButton content={text} />`
- State management for "copied" feedback
- Debounce multiple rapid clicks
### Code Block Integration
- Monaco editor code blocks: extract raw text
- Markdown code blocks: access pre-rendered content
- Syntax highlighted blocks: strip HTML/CSS, keep plain text
### Content Processing
- **Code blocks**: Copy raw code, preserve indentation
- **Thought widgets**: Copy plain text or markdown?
- **Tool calls**: Copy JSON formatted or pretty-printed?
- **Structured output**: Preserve structure (JSON, YAML, etc.)
- **Tables**: Copy as markdown table or TSV/CSV?
### Security & Privacy
- Only copy visible content (no hidden data)
- Sanitize content before copying (no script injection)
- Respect clipboard permissions (prompt if needed)
- No automatic clipboard access (user-initiated only)
## Widget Types to Support
| Widget Type | Copy Format | Priority |
|------------|-------------|----------|
| Code blocks | Raw code | High |
| Thought bubbles | Plain text | High |
| Tool call output | Formatted text | High |
| File previews | Full content | Medium |
| Error messages | Plain text | Medium |
| Bash commands | Command only | Medium |
| Bash output | Output text | Medium |
| Plans | Markdown | Low |
| JSON responses | Formatted JSON | Low |
| Tables | Markdown table | Low |
## Example UI Mock
┌─────────────────────────────────────────────┐
│ Thought: Analyzing the codebase...   [📋]   │
│ I'll search for the authentication logic... │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ JavaScript                            [📋]   │
├─────────────────────────────────────────────┤
│ function authenticate(user, pass) {         │
│   return bcrypt.compare(pass, user.hash);   │
└─────────────────────────────────────────────┘
┌─────────────────────────────────────────────┐
│ Bash Output                           [✓]   │
├─────────────────────────────────────────────┤
│ Tests passed: 42                            │
│ Coverage: 87%                               │
└─────────────────────────────────────────────┘
## Accessibility
- Button has proper ARIA label: `aria-label="Copy code"`
- Keyboard accessible: Tab to button, Enter/Space to activate
- Screen reader announces "Copied to clipboard"
- Focus visible indicator on keyboard navigation
- Sufficient color contrast for button (WCAG AA)
## Testing Considerations
- Test clipboard API support detection
- Test fallback mechanism
- Test with different content types (code, JSON, markdown)
- Test with large content (>1MB)
- Test rapid successive clicks
- Test keyboard navigation
- Cross-browser testing (Chrome, Firefox, Safari, Edge)
- Mobile touch interaction testing
## Related Features
- Could add "Copy all" button for entire conversation
- Export conversation as markdown with all code blocks
- Share snippet functionality (copy + generate shareable link)
- Syntax highlighting preservation option
## Open Questions
- Should copy button be always visible or show on hover?
- Should we support "copy as markdown" vs "copy as plain text" toggle?
- Should inline code (`inline`) have copy buttons or only blocks?
- Maximum content size for clipboard operations?
- Should we track copy events for analytics/UX improvements?
- Mobile long-press behavior (native context menu vs custom)?
## Similar Implementations
- GitHub code blocks (hover, top-right corner)
- ChatGPT code blocks (always visible, next to language label)
- VS Code (inline copy button on hover)
- Stack Overflow (copy button on code blocks)
- Claude.ai web interface (copy button on responses)
## Priority
High - Essential usability feature for developer workflows
## Related Issues
- Could integrate with Monaco editor's native copy functionality
- Related to file tree operations (copy file path, copy file content)

Add copy-paste functionality for code blocks and completion widgets 7895c1d k33g yesterday	1	# Managed by IssueSpec. Hand edits are welcome; keep the schema valid.
	2	id: 21
	3	title: Add copy-paste functionality for completion widgets and code blocks
	4	state: open
	5	author:
	6	name: k33g
	7	email: ph.charriere@gmail.com
	8	createdAt: 2026-09-18T00:00:00.000Z
	9	updatedAt: 2026-09-18T00:00:00.000Z
	10	labels:
	11	- feature
	12	- enhancement
	13	- ui
	14	- usability
	15	body: \|
	16	Add the ability to copy-paste each generated completion widget and code portions/blocks individually.
	17
	18	## Problem Statement
	19
	20	Users need to quickly copy agent responses, code snippets, and individual completion widgets without selecting text manually. This is a common UX pattern in modern AI chat interfaces.
	21
	22	## Requirements
	23
	24	### Completion Widgets
	25	- Each completion widget (thought, tool call result, plan, etc.) should have a copy button
	26	- Copy button appears on hover or always visible (design decision)
	27	- Clicking copies the entire widget content to clipboard
	28	- Visual feedback when copied (checkmark, tooltip, color change)
	29	- Preserve formatting when copying (plain text or markdown)
	30
	31	### Code Blocks
	32	- Every code block should have a dedicated copy button
	33	- Button positioned in top-right corner of code block (standard pattern)
	34	- Copy raw code without syntax highlighting markup
	35	- Support for inline code spans (optional - may be too small for button)
	36	- Language label displayed alongside copy button
	37
	38	### Multi-line Text Blocks
	39	- Bash command outputs
	40	- File content previews
	41	- Error messages
	42	- Log outputs
	43	- Any multi-line formatted text
	44
	45	## User Experience
	46
	47	### Visual Design
	48	- Copy button icon: clipboard icon or "Copy" text
	49	- Position: Top-right corner of widget/block (consistent placement)
	50	- Visibility:
	51	- Always visible (simpler)
	52	- OR show on hover (cleaner UI)
	53	- Feedback states:
	54	- Default: clipboard icon
	55	- Hover: subtle highlight
	56	- Click: changes to checkmark icon
	57	- After 2s: reverts to clipboard icon
	58	- Tooltip: "Copy" (before), "Copied!" (after)
	59
	60	### Interaction Flow
	61	```
	62	User hovers over code block
	63	→ Copy button appears/highlights
	64	→ User clicks copy button
65	→ Content copied to clipboard
66	→ Button shows checkmark + "Copied!" tooltip
67	→ After 2 seconds, button reverts to default
68	```
69
70	## Implementation Considerations
71
72	### Frontend (React)
73	- Use Clipboard API (`navigator.clipboard.writeText()`)
74	- Fallback for older browsers (`document.execCommand('copy')`)
75	- Component: `<CopyButton content={text} />`
76	- State management for "copied" feedback
77	- Debounce multiple rapid clicks
78
79	### Code Block Integration
80	- Monaco editor code blocks: extract raw text
81	- Markdown code blocks: access pre-rendered content
82	- Syntax highlighted blocks: strip HTML/CSS, keep plain text
83
84	### Content Processing
85	- Code blocks: Copy raw code, preserve indentation
86	- Thought widgets: Copy plain text or markdown?
87	- Tool calls: Copy JSON formatted or pretty-printed?
88	- Structured output: Preserve structure (JSON, YAML, etc.)
89	- Tables: Copy as markdown table or TSV/CSV?
90
91	### Security & Privacy
92	- Only copy visible content (no hidden data)
93	- Sanitize content before copying (no script injection)
94	- Respect clipboard permissions (prompt if needed)
95	- No automatic clipboard access (user-initiated only)
96
97	## Widget Types to Support
98
99	\| Widget Type \| Copy Format \| Priority \|
100	\|------------\|-------------\|----------\|
101	\| Code blocks \| Raw code \| High \|
102	\| Thought bubbles \| Plain text \| High \|
103	\| Tool call output \| Formatted text \| High \|
104	\| File previews \| Full content \| Medium \|
105	\| Error messages \| Plain text \| Medium \|
106	\| Bash commands \| Command only \| Medium \|
107	\| Bash output \| Output text \| Medium \|
108	\| Plans \| Markdown \| Low \|
109	\| JSON responses \| Formatted JSON \| Low \|
110	\| Tables \| Markdown table \| Low \|
111
112	## Example UI Mock
113
114	```
115	┌─────────────────────────────────────────────┐
116	│ Thought: Analyzing the codebase... [📋] │
117	│ │
118	│ I'll search for the authentication logic... │
119	└─────────────────────────────────────────────┘
120
121	┌─────────────────────────────────────────────┐
122	│ JavaScript [📋] │
123	├─────────────────────────────────────────────┤
124	│ function authenticate(user, pass) { │
125	│ return bcrypt.compare(pass, user.hash); │
126	│ } │
127	└─────────────────────────────────────────────┘
128
129	┌─────────────────────────────────────────────┐
130	│ Bash Output [✓] │
131	├─────────────────────────────────────────────┤
132	│ Tests passed: 42 │
133	│ Coverage: 87% │
134	└─────────────────────────────────────────────┘
135	```
136
137	## Accessibility
138
139	- Button has proper ARIA label: `aria-label="Copy code"`
140	- Keyboard accessible: Tab to button, Enter/Space to activate
141	- Screen reader announces "Copied to clipboard"
142	- Focus visible indicator on keyboard navigation
143	- Sufficient color contrast for button (WCAG AA)
144
145	## Testing Considerations
146
147	- Test clipboard API support detection
148	- Test fallback mechanism
149	- Test with different content types (code, JSON, markdown)
150	- Test with large content (>1MB)
151	- Test rapid successive clicks
152	- Test keyboard navigation
153	- Cross-browser testing (Chrome, Firefox, Safari, Edge)
154	- Mobile touch interaction testing
155
156	## Related Features
157
158	- Could add "Copy all" button for entire conversation
159	- Export conversation as markdown with all code blocks
160	- Share snippet functionality (copy + generate shareable link)
161	- Syntax highlighting preservation option
162
163	## Open Questions
164
165	- Should copy button be always visible or show on hover?
166	- Should we support "copy as markdown" vs "copy as plain text" toggle?
167	- Should inline code (`inline`) have copy buttons or only blocks?
168	- Maximum content size for clipboard operations?
169	- Should we track copy events for analytics/UX improvements?
170	- Mobile long-press behavior (native context menu vs custom)?
171
172	## Similar Implementations
173
174	- GitHub code blocks (hover, top-right corner)
175	- ChatGPT code blocks (always visible, next to language label)
176	- VS Code (inline copy button on hover)
177	- Stack Overflow (copy button on code blocks)
178	- Claude.ai web interface (copy button on responses)
179
180	## Priority
181
182	High - Essential usability feature for developer workflows
183
184	## Related Issues
185
186	- Could integrate with Monaco editor's native copy functionality
187	- Related to file tree operations (copy file path, copy file content)