Skip to content

Conversation

@roomote
Copy link

@roomote roomote bot commented Sep 8, 2025

Summary

This PR addresses Issue #7788 by implementing three UX improvements for the chat message editing experience:

  1. Click-to-edit for past messages - Users can now click directly on message text to enter edit mode
  2. ESC-to-cancel while editing - Pressing ESC now cancels the edit and restores original content
  3. Padding consistency - Fixed padding mismatch between past and queued message editors

Changes

Click-to-Edit Implementation

  • Made the message text container clickable in ChatRow.tsx
  • Added hover effect (hover:bg-vscode-list-hoverBackground) for better UX
  • Prevents editing while streaming to avoid conflicts
  • Uses existing handleEditClick() function with proper event propagation control

ESC-to-Cancel Implementation

  • Added ESC key handler in ChatTextArea.tsx for edit mode
  • Checks for composition state to avoid conflicts with IME
  • Calls onCancel callback when ESC is pressed
  • Follows the same pattern as queued messages for consistency

Padding Fix

  • Removed the p-2 wrapper padding from edit container in ChatRow.tsx
  • Adjusted right padding to pr-[72px] in edit mode to accommodate cancel button
  • Now matches the queued editor's px-2 padding for visual consistency

Testing

  • ✅ All existing tests pass (999 passed, 1 skipped)
  • ✅ Linting passes with no warnings
  • ✅ Type checking passes
  • ✅ Manual testing confirms all three features work as expected

Acceptance Criteria Met

  • ✅ Clicking on past message text enters edit mode with caret at end and images preserved
  • ✅ Pressing ESC cancels edit and restores original content/images without sending
  • ✅ Edit textarea padding visually matches queued-message editor
  • ✅ Enter (without Shift) still saves; pencil and trash buttons still work
  • ✅ Queued-message editor behavior remains unchanged

Fixes #7788


Important

Adds click-to-edit, ESC-to-cancel, and padding consistency for chat messages in ChatRow.tsx and ChatTextArea.tsx.

  • Behavior:
    • Click-to-edit: Users can click on message text to enter edit mode in ChatRow.tsx.
    • ESC-to-cancel: ESC key cancels edit and restores content in ChatTextArea.tsx.
    • Padding consistency: Adjusted padding in ChatRow.tsx and ChatTextArea.tsx for visual consistency.
  • Functions:
    • handleEditClick(): Initiates edit mode in ChatRow.tsx.
    • onCancel: Cancels edit mode in ChatTextArea.tsx.
  • UI Changes:
    • Added hover effect for clickable message text in ChatRow.tsx.
    • Adjusted padding to match queued editor's style in ChatRow.tsx and ChatTextArea.tsx.

This description was created by Ellipsis for c9897de. You can customize this summary. It will automatically update as commits are pushed.

- 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
@roomote roomote bot requested review from cte, jr and mrubens as code owners September 8, 2025 18:37
@dosubot dosubot bot added size:S This PR changes 10-29 lines, ignoring generated files. UI/UX UI/UX related or focused labels Sep 8, 2025
) : (
<div className="flex justify-between">
<div className="flex-grow px-2 py-1 wrap-anywhere">
<div
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clickable message text container now calls handleEditClick correctly. Consider adding accessibility attributes (e.g., role='button' and an appropriate aria-label) to improve keyboard navigation and screen reader support.

Copy link
Author

@roomote roomote bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewing my own code is like looking in a mirror after writing it at 3 AM - equally horrifying and enlightening.

<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"
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding an aria-label attribute here for better accessibility. Screen reader users would benefit from knowing this area is clickable for editing:

Suggested change
className="flex-grow px-2 py-1 wrap-anywhere cursor-pointer hover:bg-vscode-list-hoverBackground rounded transition-colors"
<div
className="flex-grow px-2 py-1 wrap-anywhere cursor-pointer hover:bg-vscode-list-hoverBackground rounded transition-colors"
aria-label={t("chat:queuedMessages.clickToEdit")}
onClick={(e) => {

"overflow-x-hidden",
"overflow-y-auto",
"pr-9",
isEditMode ? "pr-[72px]" : "pr-9",
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency, could we use the same unit here? Currently mixing px and rem units:

Suggested change
isEditMode ? "pr-[72px]" : "pr-9",
isEditMode ? "pr-[4.5rem]" : "pr-9",

This would make the spacing more maintainable and consistent with the design system.

handleEditClick()
}
}}
title={t("chat:queuedMessages.clickToEdit")}>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This reuses the queued messages translation key. Would it be clearer to have a dedicated key like chat:pastMessages.clickToEdit for future maintenance? This way, if we need different text for past vs queued messages, we won't break anything.

@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Sep 8, 2025
@dosubot dosubot bot added size:M This PR changes 30-99 lines, ignoring generated files. and removed size:S This PR changes 10-29 lines, ignoring generated files. labels Sep 8, 2025
@hannesrudolph hannesrudolph moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Sep 8, 2025
@hannesrudolph hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Sep 8, 2025
Copy link
Member

@daniel-lxs daniel-lxs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 8, 2025
@mrubens mrubens merged commit 195f4eb into main Sep 9, 2025
12 checks passed
@mrubens mrubens deleted the feat/click-edit-esc-cancel-padding branch September 9, 2025 02:50
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Sep 9, 2025
@github-project-automation github-project-automation bot moved this from PR [Needs Prelim Review] to Done in Roo Code Roadmap Sep 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer PR - Needs Preliminary Review size:M This PR changes 30-99 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

Chat: Click-to-edit past messages and ESC-to-cancel; match edit padding to queued editor

5 participants