mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-06 08:18:39 +00:00
feat: add click-to-edit, ESC-to-cancel, and fix padding consistency for chat messages (#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 #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 <roomote@roocode.com> Co-authored-by: Hannes Rudolph <hrudolph@gmail.com> Co-authored-by: daniel-lxs <ricciodaniel98@gmail.com>
This commit is contained in:
roomote[bot]
GitHub
parent
76c6745649
commit
195f4eb245
2 changed files with 36 additions and 27 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue