feat: add click-to-edit, ESC-to-cancel, and fix padding consistency for chat messages (RooCodeInc#7790)

* feat: add click-to-edit, ESC-to-cancel, and fix padding consistency

- Enable click-to-edit for past messages by making message text clickable
- Add ESC key handler to cancel edit mode in ChatTextArea
- Fix padding consistency between past and queued message editors
- Adjust right padding for edit mode to accommodate cancel button

Fixes RooCodeInc#7788

* fix: adjust padding and layout for ChatTextArea in edit mode

* refactor: replace hardcoded pr-[72px] with standard Tailwind pr-20 class

---------

Co-authored-by: Roo Code <[email protected]>
Co-authored-by: Hannes Rudolph <[email protected]>
Co-authored-by: daniel-lxs <[email protected]>

Author: 4 people

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

@@ -1172,9 +1172,10 @@ export const ChatRowContent = ({
 					)
 				case "user_feedback":
 					return (
-						<div className="bg-vscode-editor-background border rounded-xs p-1 overflow-hidden whitespace-pre-wrap">
+						<div
+							className={`bg-vscode-editor-background border rounded-xs overflow-hidden whitespace-pre-wrap ${isEditing ? "p-0" : "p-1"}`}>
 							{isEditing ? (
-								<div className="flex flex-col gap-2 p-2">
+								<div className="flex flex-col gap-2">
 									<ChatTextArea
 										inputValue={editedContent}
 										setInputValue={setEditedContent}
@@ -1195,7 +1196,15 @@ export const ChatRowContent = ({
 								</div>
 							) : (
 								<div className="flex justify-between">
-									<div className="flex-grow px-2 py-1 wrap-anywhere">
+									<div
+										className="flex-grow px-2 py-1 wrap-anywhere cursor-pointer hover:bg-vscode-list-hoverBackground rounded transition-colors"
+										onClick={(e) => {
+											e.stopPropagation()
+											if (!isStreaming) {
+												handleEditClick()
+											}
+										}}
+										title={t("chat:queuedMessages.clickToEdit")}>
 										<Mention text={message.text} withShadow />
 									</div>
 									<div className="flex">

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

@@ -903,20 +903,8 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		return (
 			<div
 				className={cn(
-					"relative",
-					"flex",
-					"flex-col",
-					"gap-1",
-					"bg-editor-background",
-					"px-1.5",
-					"pb-1",
-					"outline-none",
-					"border",
-					"border-none",
-					"w-[calc(100%-16px)]",
-					"ml-auto",
-					"mr-auto",
-					"box-border",
+					"relative flex flex-col gap-1 bg-editor-background outline-none border border-none box-border",
+					isEditMode ? "p-2 w-full" : "px-1.5 pb-1 w-[calc(100%-16px)] ml-auto mr-auto",
 				)}>
 				<div className="relative">
 					<div
@@ -1005,11 +993,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 										: isDraggingOver
 											? "border-2 border-dashed border-vscode-focusBorder"
 											: "border border-transparent",
-									"px-[8px]",
-									"py-1.5",
-									"pr-9",
+									"pl-2",
+									"py-2",
+									isEditMode ? "pr-20" : "pr-9",
 									"z-10",
 									"forced-color-adjust-none",
+									"rounded",
 								)}
 								style={{
 									color: "transparent",
@@ -1030,7 +1019,15 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									updateHighlights()
 								}}
 								onFocus={() => setIsFocused(true)}
-								onKeyDown={handleKeyDown}
+								onKeyDown={(e) => {
+									// Handle ESC to cancel in edit mode
+									if (isEditMode && e.key === "Escape" && !e.nativeEvent?.isComposing) {
+										e.preventDefault()
+										onCancel?.()
+										return
+									}
+									handleKeyDown(e)
+								}}
 								onKeyUp={handleKeyUp}
 								onBlur={handleBlur}
 								onPaste={handlePaste}
@@ -1054,7 +1051,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									"text-vscode-editor-font-size",
 									"leading-vscode-editor-line-height",
 									"cursor-text",
-									"py-1.5 px-2",
+									"py-2 pl-2",
 									isFocused
 										? "border border-vscode-focusBorder outline outline-vscode-focusBorder"
 										: isDraggingOver
@@ -1071,7 +1068,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									"resize-none",
 									"overflow-x-hidden",
 									"overflow-y-auto",
-									"pr-9",
+									isEditMode ? "pr-20" : "pr-9",
 									"flex-none flex-grow",
 									"z-[2]",
 									"scrollbar-none",
@@ -1080,7 +1077,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								onScroll={() => updateHighlights()}
 							/>
 
-							<div className="absolute top-1 right-1 z-30">
+							<div className="absolute top-2 right-2 z-30">
 								<StandardTooltip content={t("chat:enhancePrompt")}>
 									<button
 										aria-label={t("chat:enhancePrompt")}
@@ -1102,7 +1099,7 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								</StandardTooltip>
 							</div>
 
-							<div className="absolute bottom-1 right-1 z-30">
+							<div className="absolute bottom-2 right-2 z-30">
 								{isEditMode && (
 									<StandardTooltip content={t("chat:cancel.title")}>
 										<button
@@ -1147,9 +1144,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 
 							{!inputValue && (
 								<div
-									className="absolute left-2 z-30 pr-9 flex items-center h-8 font-vscode-font-family text-vscode-editor-font-size leading-vscode-editor-line-height"
+									className={cn(
+										"absolute left-2 z-30 flex items-center h-8 font-vscode-font-family text-vscode-editor-font-size leading-vscode-editor-line-height",
+										isEditMode ? "pr-20" : "pr-9",
+									)}
 									style={{
-										bottom: "0.25rem",
+										bottom: "0.75rem",
 										color: "color-mix(in oklab, var(--vscode-input-foreground) 50%, transparent)",
 										userSelect: "none",
 										pointerEvents: "none",