feat: Add shift-click to append suggestions to text area

When a user shift-clicks a suggestion, the text is now appended to the current text area content instead of being sent immediately. This allows users to:
- Build complex prompts by combining multiple suggestions
- Edit suggestions before sending them
- Reuse parts of previous suggestions

The implementation passes the mouse event through the component chain and checks for the shift key before deciding whether to append or send the message.

Author: samhvw8

webview-ui/src/__mocks__/lucide-react.ts

@@ -4,4 +4,5 @@ export const Check = () => React.createElement("div")
 export const ChevronsUpDown = () => React.createElement("div")
 export const Loader = () => React.createElement("div")
 export const X = () => React.createElement("div")
+export const Copy = () => React.createElement("div")
 export const Database = (props: any) => React.createElement("span", { "data-testid": "database-icon", ...props })

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

@@ -33,7 +33,7 @@ interface ChatRowProps {
 	isStreaming: boolean
 	onToggleExpand: () => void
 	onHeightChange: (isTaller: boolean) => void
-	onSuggestionClick?: (answer: string) => void
+	onSuggestionClick?: (answer: string, event?: React.MouseEvent) => void
 }
 
 interface ChatRowContentProps extends Omit<ChatRowProps, "onHeightChange"> {}

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

@@ -1055,8 +1055,15 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					isLast={index === groupedMessages.length - 1}
 					onHeightChange={handleRowHeightChange}
 					isStreaming={isStreaming}
-					onSuggestionClick={(answer: string) => {
-						handleSendMessage(answer, [])
+					onSuggestionClick={(answer: string, event?: React.MouseEvent) => {
+						if (event?.shiftKey) {
+							// Always append to existing text, don't overwrite
+							setInputValue((currentValue) => {
+								return currentValue !== "" ? `${currentValue} \n${answer}` : answer
+							})
+						} else {
+							handleSendMessage(answer, [])
+						}
 					}}
 				/>
 			)

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

@@ -1,17 +1,18 @@
 import { useCallback } from "react"
 import { cn } from "../../lib/utils"
 import { Button } from "../ui/button"
+import { Copy } from "lucide-react"
 
 interface FollowUpSuggestProps {
 	suggestions?: string[]
-	onSuggestionClick?: (answer: string) => void
+	onSuggestionClick?: (answer: string, event?: React.MouseEvent) => void
 	ts: number
 }
 
 const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1 }: FollowUpSuggestProps) => {
 	const handleSuggestionClick = useCallback(
-		(suggestion: string) => {
-			onSuggestionClick?.(suggestion)
+		(suggestion: string, event: React.MouseEvent) => {
+			onSuggestionClick?.(suggestion, event)
 		},
 		[onSuggestionClick],
 	)
@@ -26,14 +27,31 @@ const FollowUpSuggest = ({ suggestions = [], onSuggestionClick, ts = 1 }: Follow
 			<div className="h-full scrollbar-thin scrollbar-thumb-vscode-scrollbarSlider-background scrollbar-track-transparent">
 				<div className={cn("flex gap-2.5 pb-2 flex-col h-full")}>
 					{suggestions.map((suggestion) => (
-						<div key={`${suggestion}-${ts}`} className="w-full">
+						<div key={`${suggestion}-${ts}`} className="w-full relative group">
 							<Button
 								variant="secondary"
-								className="w-full text-left whitespace-normal break-words h-auto min-h-[28px] py-2 justify-start"
-								onClick={() => handleSuggestionClick(suggestion)}
+								className="w-full text-left whitespace-normal break-words h-auto min-h-[28px] py-2 justify-start pr-8"
+								onClick={(event) => handleSuggestionClick(suggestion, event)}
 								aria-label={suggestion}>
 								<span className="text-left">{suggestion}</span>
 							</Button>
+							<div
+								className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity"
+								onClick={(e) => {
+									e.stopPropagation();
+									// Simulate shift-click by directly calling the handler with shiftKey=true
+									onSuggestionClick?.(suggestion, { ...e, shiftKey: true });
+								}}
+								title="Copy to input (same as Shift+Click)"
+							>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-6 w-6 p-1 hover:bg-vscode-button-hoverBackground"
+								>
+									<Copy className="h-4 w-4" />
+								</Button>
+							</div>
 						</div>
 					))}
 				</div>