feat: add click-to-edit, ESC-to-cancel, and fix padding consistency for chat messages

[ghost]

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 for c9897de. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

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.

[ghost]

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

[ghost]

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) => {

[ghost]

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.

[ghost]

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.

[daniel-lxs]

LGTM