feat: Quote selection to reply with icon overlay (#8837) #8838

SannidhyaSah · 2025-10-26T08:39:53Z

Related GitHub Issue

Closes: #8837

Roo Code Task Context (Optional)

No Roo Code task context for this PR

Description

This PR implements the "Quote selection to reply" feature for the chat UI, enabling users to select text within a message and quote it in their response.

Implementation approach:

Added selection detection scoped to single messages via data-message-ts attributes on message containers
Floating icon-only overlay button (codicon-quote) appears near the selection when valid
Compact quote preview above the composer with dismiss control
Standardized context block format [context]\n> line1\n> line2\n[/context] prepended to outgoing messages
Keyboard shortcut: Cmd/Ctrl+Shift+Q to capture current selection
Overlay hides on scroll, blur, and selection changes for clean UX

Key design decisions:

Used useCallback for stable selection helpers to satisfy React hook dependencies
Fixed positioning for overlay to work with virtualized message lists
1000-character clamp on quoted text to prevent excessive payloads
Plain text rendering in preview to avoid XSS risks

Files changed:

webview-ui/src/components/chat/ChatView.tsx: Core selection logic, overlay, preview, and injection
webview-ui/src/components/chat/ChatRow.tsx: Added data-message-ts attribute for selection scoping

Test Procedure

Automated tests:

cd webview-ui && npx vitest run

All existing tests pass (92 test files, 1094 tests passed).

Manual testing:

Select text within a single message → quote overlay appears
Select across multiple messages → overlay does not appear
Click quote button → preview appears above composer
Click dismiss X → preview disappears
Send message with active quote → context block prepended correctly
Use Cmd/Ctrl+Shift+Q → captures selection as quote
Scroll while overlay visible → overlay hides

Lint validation:

pnpm lint

All lint checks pass (11 tasks successful).

Pre-Submission Checklist

Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
Scope: My changes are focused on the linked issue (one major feature/fix per PR).
Self-Review: I have performed a thorough self-review of my code.
Testing: New and/or updated tests have been added to cover my changes (if applicable).
Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Before:
No quote selection feature.

After:
Icon-only quote overlay appears near selection:

Codicon quote glyph in a rounded blue tile
Positioned just above the selected text
Accessible via aria-label and keyboard shortcut

Quote preview above composer:

Compact strip with quote icon, truncated text, and dismiss button
Clears after send

Documentation Updates

No documentation updates are required.

Additional Notes

The feature is entirely client-side and integrates cleanly with the existing virtualized message list. Future enhancements could include:

i18n for the "Quote selection" aria-label
Message metadata (author/timestamp) in preview
Context menu fallback for additional accessibility

Get in Touch

Discord username not provided

Important

Introduces a "Quote selection to reply" feature in chat, allowing users to quote selected text with an overlay button and keyboard shortcut, implemented in ChatView.tsx and ChatRow.tsx.

Behavior:
- Adds "Quote selection to reply" feature in ChatView.tsx and ChatRow.tsx.
- Users can select text in a message to quote it in their response.
- Floating overlay button appears near selection; quote preview shown above composer.
- Supports Cmd/Ctrl+Shift+Q shortcut for quoting selection.
- Overlay hides on scroll, blur, or selection changes.
Implementation:
- Uses data-message-ts for selection scoping in ChatRow.tsx.
- asContextBlock() formats quoted text in ChatView.tsx.
- Handles selection and overlay logic with useCallback and useState in ChatView.tsx.
- Limits quoted text to 1000 characters to prevent excessive payloads.
UI/UX:
- Quote overlay button uses codicon-quote icon.
- Quote preview includes dismiss button and plain text rendering to avoid XSS.
- Adjusts overlay position based on selection bounding box.

^{This description was created by}^{for 6a3c407. You can customize this summary. It will automatically update as commits are pushed.}

Use codicon-quote glyph in a rounded tile; keep aria-label for a11y. Wrap selection-scoping helpers in useCallback and add deps to satisfy lint. Ensure message containers carry data-message-ts for selection scoping.

roomote · 2025-10-26T08:40:15Z

Review Complete

No issues found. The implementation is clean and well-structured:

✅ Uses useCallback correctly with proper dependencies
✅ Handles edge cases appropriately (empty selections, cross-message selections)
✅ Integrates cleanly with existing message sending logic
✅ Provides proper accessibility attributes
✅ Prevents XSS with plain text rendering
✅ Limits quote length to prevent excessive payloads

Follow Along on Roo Code Cloud

ellipsis-dev · 2025-10-26T08:42:24Z

webview-ui/src/components/chat/ChatView.tsx

+			{quoteOverlay.visible && (
+				<button
+					type="button"
+					aria-label="Quote selection"


Consider making the ARIA label for the quote overlay button translatable (e.g. using t('chat:quoteSelection')) instead of the hardcoded "Quote selection" to support i18n.

Suggested change

aria-label="Quote selection"

aria-label={t('chat:quoteSelection')}

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

ellipsis-dev · 2025-10-26T08:42:24Z

webview-ui/src/components/chat/ChatView.tsx

+						<div className="text-sm whitespace-pre-wrap flex-1 max-h-20 overflow-hidden">{activeQuote}</div>
+						<button
+							type="button"
+							aria-label="Dismiss quote"


Similarly, the dismiss button uses a hardcoded ARIA label "Dismiss quote". Please update this to use a translatable string (e.g. t('chat:dismissQuote')).

Suggested change

aria-label="Dismiss quote"

aria-label={t('chat:dismissQuote')}

^{This comment was generated because it violated a code review rule: irule_C0ez7Rji6ANcGkkX.}

SannidhyaSah · 2025-10-26T08:42:34Z

Looks something like this

daniel-lxs · 2025-10-29T19:19:14Z

Hey @brunobergher can you take a quick look at this one UI-wise?

brunobergher · 2025-10-30T11:14:16Z

I don't understand what problem this is trying to solve. #8837 asks for the functionality without necessarily explaining who is it for or how it's used.

From what I'm able to see I don't support this one at all, but I'm curious to understand more.

SannidhyaSah · 2025-10-30T11:24:53Z

I don't understand what problem this is trying to solve. #8837 asks for the functionality without necessarily explaining who is it for or how it's used.

From what I'm able to see I don't support this one at all, but I'm curious to understand more.

Just is a feature port from Cline that allows you to do this. It helps us quote the exact context we want to return to the agent when going back and forth with it. More of a UX feature if anything.

Screen.Recording.2025-10-30.at.4.50.46.PM.mov

brunobergher · 2025-10-30T11:35:20Z

Ooh, I see now, thanks for explaining. Yeah, this makes sense.

I'm not sure I'd port it over directly though. I'd tweak it to:

Not use a dedicate quote UI like WhatsApp, but instead just put the append the text content input with the quoted text + proper formatting. This allows users to tweak the quoted text afterwards if needed, and to mix it into their message (eg some new text, then the quote, then more text), which I suspect is useful whn trying to explain to the model what you want to do. It also aligns the behavior with the "Explain with Roo Code" and "Fix with Roo Code" actions from elsewhere in VS Code.
In the trigger button, use something more standard like our menus, with the label "Quote in a message"

feat(chat): icon-only selection overlay for quote + stable hooks

6a3c407

Use codicon-quote glyph in a rounded tile; keep aria-label for a11y. Wrap selection-scoping helpers in useCallback and add deps to satisfy lint. Ensure message containers carry data-message-ts for selection scoping.

SannidhyaSah requested review from cte, jr and mrubens as code owners October 26, 2025 08:39

github-project-automation bot added this to Roo Code Roadmap and Roo Code Roadmap Oct 26, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Oct 26, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Oct 26, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused labels Oct 26, 2025

ellipsis-dev bot reviewed Oct 26, 2025

View reviewed changes

roomote bot approved these changes Oct 26, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Oct 26, 2025

daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Oct 29, 2025

hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Oct 29, 2025

SannidhyaSah closed this by deleting the head repository Nov 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Quote selection to reply with icon overlay (#8837) #8838

feat: Quote selection to reply with icon overlay (#8837) #8838

Uh oh!

SannidhyaSah commented Oct 26, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot commented Oct 26, 2025 •

edited

Loading

Uh oh!

ellipsis-dev bot Oct 26, 2025

Uh oh!

ellipsis-dev bot Oct 26, 2025

Uh oh!

SannidhyaSah commented Oct 26, 2025 •

edited

Loading

Uh oh!

daniel-lxs commented Oct 29, 2025

Uh oh!

brunobergher commented Oct 30, 2025

Uh oh!

SannidhyaSah commented Oct 30, 2025

Uh oh!

brunobergher commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	aria-label="Quote selection"
	aria-label={t('chat:quoteSelection')}

	aria-label="Dismiss quote"
	aria-label={t('chat:dismissQuote')}

feat: Quote selection to reply with icon overlay (#8837) #8838

feat: Quote selection to reply with icon overlay (#8837) #8838

Uh oh!

Conversation

SannidhyaSah commented Oct 26, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related GitHub Issue

Roo Code Task Context (Optional)

Description

Test Procedure

Pre-Submission Checklist

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

Uh oh!

roomote bot commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review Complete

Uh oh!

ellipsis-dev bot Oct 26, 2025

Choose a reason for hiding this comment

Uh oh!

ellipsis-dev bot Oct 26, 2025

Choose a reason for hiding this comment

Uh oh!

SannidhyaSah commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

daniel-lxs commented Oct 29, 2025

Uh oh!

brunobergher commented Oct 30, 2025

Uh oh!

SannidhyaSah commented Oct 30, 2025

Uh oh!

brunobergher commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

SannidhyaSah commented Oct 26, 2025 •

edited by ellipsis-dev bot

Loading

roomote bot commented Oct 26, 2025 •

edited

Loading

SannidhyaSah commented Oct 26, 2025 •

edited

Loading