feat: add quote selection feature to chat UI

- Add text selection detection with floating quote button in Markdown component
- Implement quote preview above ChatTextArea with dismiss control
- Add keyboard shortcut support (Cmd/Ctrl+Shift+Q) for quick quoting
- Format quoted text with [context] wrapper for AI context
- Add comprehensive tests for quote selection functionality
- Add translation strings for quote feature

Closes #8837

Author: roomote

src/i18n/locales/en/common.json

@@ -181,6 +181,10 @@
 		"task_prompt": "What should Roo do?",
 		"task_placeholder": "Type your task here"
 	},
+	"chat": {
+		"quotePreview": "Quote",
+		"quoteSelection": "Quote"
+	},
 	"customModes": {
 		"errors": {
 			"yamlParseError": "Invalid YAML in .roomodes file at line {{line}}. Please check for:\n• Proper indentation (use spaces, not tabs)\n• Matching quotes and brackets\n• Valid YAML syntax",

src/shared/ExtensionMessage.ts

@@ -70,6 +70,7 @@ export interface ExtensionMessage {
 		| "theme"
 		| "workspaceUpdated"
 		| "invoke"
+		| "addQuoteToComposer"
 		| "messageUpdated"
 		| "mcpServers"
 		| "enhancedPrompt"

src/shared/WebviewMessage.ts

@@ -35,6 +35,7 @@ export interface WebviewMessage {
 		| "deleteApiConfiguration"
 		| "loadApiConfiguration"
 		| "loadApiConfigurationById"
+		| "addQuoteToComposer"
 		| "renameApiConfiguration"
 		| "getListApiConfiguration"
 		| "customInstructions"

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

@@ -1092,7 +1092,7 @@ export const ChatRowContent = ({
 								<span style={{ fontWeight: "bold" }}>{t("chat:text.rooSaid")}</span>
 							</div>
 							<div className="pl-6">
-								<Markdown markdown={message.text} partial={message.partial} />
+								<Markdown markdown={message.text} partial={message.partial} messageTs={message.ts} />
 								{message.images && message.images.length > 0 && (
 									<div style={{ marginTop: "10px" }}>
 										{message.images.map((image, index) => (
@@ -1201,7 +1201,7 @@ export const ChatRowContent = ({
 								{title}
 							</div>
 							<div className="border-l border-green-600/30 ml-2 pl-4 pb-1">
-								<Markdown markdown={message.text} />
+								<Markdown markdown={message.text} messageTs={message.ts} />
 							</div>
 						</>
 					)
@@ -1355,7 +1355,7 @@ export const ChatRowContent = ({
 								</div>
 							)}
 							<div style={{ paddingTop: 10 }}>
-								<Markdown markdown={message.text} partial={message.partial} />
+								<Markdown markdown={message.text} partial={message.partial} messageTs={message.ts} />
 							</div>
 						</>
 					)
@@ -1441,7 +1441,11 @@ export const ChatRowContent = ({
 									{title}
 								</div>
 								<div style={{ color: "var(--vscode-charts-green)", paddingTop: 10 }}>
-									<Markdown markdown={message.text} partial={message.partial} />
+									<Markdown
+										markdown={message.text}
+										partial={message.partial}
+										messageTs={message.ts}
+									/>
 								</div>
 							</div>
 						)
@@ -1460,6 +1464,7 @@ export const ChatRowContent = ({
 							<div className="flex flex-col gap-2 ml-6">
 								<Markdown
 									markdown={message.partial === true ? message?.text : followUpData?.question}
+									messageTs={message.ts}
 								/>
 								<FollowUpSuggest
 									suggestions={followUpData?.suggest}

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

@@ -51,6 +51,9 @@ interface ChatTextAreaProps {
 	// Edit mode props
 	isEditMode?: boolean
 	onCancel?: () => void
+	// Quote selection props
+	quotedText?: string
+	onClearQuote?: () => void
 }
 
 export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
@@ -71,6 +74,8 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 			modeShortcutText,
 			isEditMode = false,
 			onCancel,
+			quotedText,
+			onClearQuote,
 		},
 		ref,
 	) => {
@@ -913,6 +918,31 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					"flex flex-col gap-1 bg-editor-background outline-none border border-none box-border",
 					isEditMode ? "p-2 w-full" : "relative px-1.5 pb-1 w-[calc(100%-16px)] ml-auto mr-auto",
 				)}>
+				{/* Quote preview above text area */}
+				{quotedText && !isEditMode && (
+					<div className="mx-1.5 mb-1 p-2 bg-vscode-textCodeBlock-background rounded border border-vscode-widget-border relative">
+						<button
+							className="absolute top-1 right-1 p-1 hover:bg-vscode-toolbar-hoverBackground rounded"
+							onClick={() => onClearQuote?.()}
+							aria-label="Clear quote">
+							<span className="codicon codicon-close text-xs" />
+						</button>
+						<div className="text-xs text-vscode-descriptionForeground mb-1">{t("chat:quotePreview")}</div>
+						<div className="text-xs max-h-20 overflow-y-auto pr-6">
+							{quotedText
+								.split("\n")
+								.slice(0, 3)
+								.map((line, idx) => (
+									<div key={idx} className="text-vscode-foreground opacity-75">
+										{line}
+									</div>
+								))}
+							{quotedText.split("\n").length > 3 && (
+								<div className="text-vscode-descriptionForeground">...</div>
+							)}
+						</div>
+					</div>
+				)}
 				<div className={cn(!isEditMode && "relative")}>
 					<div
 						className={cn("chat-text-area", !isEditMode && "relative", "flex", "flex-col", "outline-none")}

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

@@ -197,6 +197,7 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	>(undefined)
 	const [isCondensing, setIsCondensing] = useState<boolean>(false)
 	const [showAnnouncementModal, setShowAnnouncementModal] = useState(false)
+	const [quotedText, setQuotedText] = useState<string>("")
 	const everVisibleMessagesTsRef = useRef<LRUCache<number, boolean>>(
 		new LRUCache({
 			max: 100,
@@ -783,6 +784,17 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			const message: ExtensionMessage = e.data
 
 			switch (message.type) {
+				case "addQuoteToComposer":
+					// Handle quote from message selection
+					if (message.text) {
+						// Format the quoted text with [context] wrapper
+						const formattedQuote = `[context]\n${message.text
+							.split("\n")
+							.map((line) => `> ${line}`)
+							.join("\n")}\n[/context]\n`
+						setQuotedText(formattedQuote)
+					}
+					break
 				case "action":
 					switch (message.action!) {
 						case "didBecomeVisible":
@@ -1720,6 +1732,28 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 	// Add keyboard event handler
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
+			// Check for Command/Ctrl + Shift + Q for quote selection
+			if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "q") {
+				event.preventDefault()
+
+				// Get current text selection
+				const selection = window.getSelection()
+				if (selection && !selection.isCollapsed) {
+					const selectedText = selection.toString().trim()
+					if (selectedText) {
+						// Format the quoted text with [context] wrapper
+						const formattedQuote = `[context]\n${selectedText
+							.split("\n")
+							.map((line) => `> ${line}`)
+							.join("\n")}\n[/context]\n`
+						setQuotedText(formattedQuote)
+
+						// Clear the selection
+						selection.removeAllRanges()
+					}
+				}
+			}
+
 			// Check for Command/Ctrl + Period (with or without Shift)
 			// Using event.key to respect keyboard layouts (e.g., Dvorak)
 			if ((event.metaKey || event.ctrlKey) && event.key === ".") {
@@ -1992,7 +2026,12 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				placeholderText={placeholderText}
 				selectedImages={selectedImages}
 				setSelectedImages={setSelectedImages}
-				onSend={() => handleSendMessage(inputValue, selectedImages)}
+				onSend={() => {
+					// Include quoted text when sending
+					const finalMessage = quotedText ? quotedText + inputValue : inputValue
+					handleSendMessage(finalMessage, selectedImages)
+					setQuotedText("") // Clear quote after sending
+				}}
 				onSelectImages={selectImages}
 				shouldDisableImages={shouldDisableImages}
 				onHeightChange={() => {
@@ -2003,6 +2042,8 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 				mode={mode}
 				setMode={setMode}
 				modeShortcutText={modeShortcutText}
+				quotedText={quotedText}
+				onClearQuote={() => setQuotedText("")}
 			/>
 
 			{isProfileDisabled && (