Better alignment and icons for FollowUpSuggest

Author: brunobergher

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

@@ -45,7 +45,17 @@ import { McpExecution } from "./McpExecution"
 import { ChatTextArea } from "./ChatTextArea"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import { useSelectedModel } from "../ui/hooks/useSelectedModel"
-import { ChevronRight, ChevronDown, Eye, FileDiff, ListTree, User, Edit, Trash2 } from "lucide-react"
+import {
+	ChevronRight,
+	ChevronDown,
+	Eye,
+	FileDiff,
+	ListTree,
+	User,
+	Edit,
+	Trash2,
+	MessageCircleQuestionMark,
+} from "lucide-react"
 import { cn } from "@/lib/utils"
 
 interface ChatRowProps {
@@ -303,10 +313,7 @@ export const ChatRowContent = ({
 				]
 			case "followup":
 				return [
-					<span
-						className="codicon codicon-question"
-						style={{ color: normalColor, marginBottom: "-1.5px" }}
-					/>,
+					<MessageCircleQuestionMark className="w-4" />,
 					<span style={{ color: normalColor, fontWeight: "bold" }}>{t("chat:questions.hasQuestion")}</span>,
 				]
 			default:
@@ -1472,18 +1479,18 @@ export const ChatRowContent = ({
 									{title}
 								</div>
 							)}
-							<div style={{ paddingTop: 10, paddingBottom: 15 }}>
+							<div className="flex flex-col gap-2 ml-6">
 								<Markdown
 									markdown={message.partial === true ? message?.text : followUpData?.question}
 								/>
+								<FollowUpSuggest
+									suggestions={followUpData?.suggest}
+									onSuggestionClick={onSuggestionClick}
+									ts={message?.ts}
+									onCancelAutoApproval={onFollowUpUnmount}
+									isAnswered={isFollowUpAnswered}
+								/>
 							</div>
-							<FollowUpSuggest
-								suggestions={followUpData?.suggest}
-								onSuggestionClick={onSuggestionClick}
-								ts={message?.ts}
-								onCancelAutoApproval={onFollowUpUnmount}
-								isAnswered={isFollowUpAnswered}
-							/>
 						</>
 					)
 				case "auto_approval_max_req_reached": {

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react"
-import { Edit } from "lucide-react"
+import { ClipboardCopy } from "lucide-react"
 
 import { Button, StandardTooltip } from "@/components/ui"
 
@@ -108,10 +108,12 @@ export const FollowUpSuggest = ({
 				const isFirstSuggestion = index === 0
 
 				return (
-					<div key={`${suggestion.answer}-${ts}`} className="w-full relative group">
+					<div
+						key={`${suggestion.answer}-${ts}`}
+						className="bg-vscode-editor-background rounded-sm w-full relative group">
 						<Button
 							variant="outline"
-							className="text-left whitespace-normal break-words w-full h-auto py-3 justify-start pr-8"
+							className="text-left whitespace-normal break-words w-full h-auto px-3 py-2 justify-start pr-8"
 							onClick={(event) => handleSuggestionClick(suggestion, event)}
 							aria-label={suggestion.answer}>
 							{suggestion.answer}
@@ -131,7 +133,7 @@ export const FollowUpSuggest = ({
 						)}
 						<StandardTooltip content={t("chat:followUpSuggest.copyToInput")}>
 							<div
-								className="absolute top-0 right-0 opacity-0 group-hover:opacity-100 transition-opacity"
+								className="absolute cursor-pointer top-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
 								onClick={(e) => {
 									e.stopPropagation()
 									// Cancel the auto-approve timer when edit button is clicked
@@ -140,9 +142,7 @@ export const FollowUpSuggest = ({
 									// Simulate shift-click by directly calling the handler with shiftKey=true.
 									onSuggestionClick?.(suggestion, { ...e, shiftKey: true })
 								}}>
-								<Button variant="ghost" size="icon">
-									<Edit />
-								</Button>
+								<ClipboardCopy className="w-4" />
 							</div>
 						</StandardTooltip>
 					</div>