feat: Add message editing functionality to chat interface (#4703)

[SannidhyaSah]

Description

Fixes #4703

This PR implements a comprehensive message editing feature that allows users to edit their previous messages in the chat interface, with the conversation automatically resetting to that point. When checkpoints are enabled, it also restores files to the closest checkpoint before the edited message.

Changes Made

Frontend - UI Components

• webview-ui/src/components/chat/ChatRow.tsx:
  • Added edit button with hover effect in top-right corner of user messages
  • Implemented edit mode with textarea for message editing
  • Added keyboard shortcuts (Ctrl/Cmd+Enter to save, Escape to cancel)
  • Fixed button styling (small icons, 18x18px, opacity transition)
  • Fixed double border issue in edit mode

Backend - Message Handler

• src/core/webview/webviewMessageHandler.ts:

  • Added complete editMessage case handler
  • Implemented checkpoint-aware editing logic
  • Added automatic file restoration to previous checkpoint
  • Added confirmation dialog with checkpoint warnings
  • Imported ClineMessage type and checkpointRestore function

• src/shared/WebviewMessage.ts:

  • Added editMessage message type to WebviewMessage interface

Translations

• webview-ui/src/i18n/locales/*/common.json:
  • Added "actions": { "edit": "Edit", "delete": "Delete" } section across all supported locales

Features Implemented

✅ Basic Message Editing

• Edit button appears on hover (top-right corner)
• Click edit → textarea appears with current message content
• Save/Cancel buttons with proper translations
• Keyboard shortcuts support

✅ Message History Management

• Deletes all messages after the edited one
• Updates both UI messages (clineMessages) and API conversation history
• Maintains message timestamps and metadata

✅ Checkpoint Integration

• Identifies checkpoints that will be affected by editing
• Finds closest checkpoint before the edited message
• Shows warning about checkpoint removal in confirmation dialog
• Automatically restores files to previous checkpoint state

✅ User Experience

• Confirmation dialog before destructive actions
• Clear, concise messaging
• Visual feedback with hover effects
• Maintains images/attachments during editing

Testing

• All existing tests pass
• Added comprehensive test coverage for new functionality
• Manual testing completed:
  • Edit button appears and functions correctly
  • Inline editing with textarea works
  • Confirmation dialog shows appropriate warnings
  • Message history is properly updated
  • Checkpoint restoration works when enabled
  • Images and attachments are preserved
  • All translations are properly applied

Verification of Acceptance Criteria

• Edit button next to delete button: ✅ Added edit icon that appears on hover
• Inline editing interface: ✅ Textarea with save/cancel buttons
• Confirmation dialog: ✅ Shows dialog before deleting subsequent messages
• Message content update: ✅ Updates message and removes subsequent ones
• Image preservation: ✅ Maintains images during editing
• Cancel functionality: ✅ Returns to original state on cancel
• Keyboard shortcuts: ✅ Ctrl/Cmd+Enter to save, Escape to cancel
• Checkpoint integration: ✅ Restores files to previous checkpoint when available

Screenshots/Demo

demo.edit.-.Made.with.Clipchamp.mp4

Checklist

• Code follows project style guidelines
• Self-review completed
• Comments added for complex logic
• All translations updated across supported locales
• No breaking changes
• Accessibility checked (keyboard navigation works)
• Type checking passes
• All tests pass
• Manual testing completed

Technical Implementation Details

The implementation leverages existing infrastructure:

• Delete Message Logic: Reuses the robust existing delete message functionality for removing subsequent messages
• Checkpoint System: Integrates with the existing checkpoint system for file restoration
• Translation System: Follows established i18n patterns
• UI Patterns: Consistent with existing button styling and interaction patterns

Trade-offs and Considerations

• Destructive Action: Editing a message removes all subsequent conversation history, but this is clearly communicated to users
• Checkpoint Dependency: File restoration only works when checkpoints are enabled, which is documented in the confirmation dialog
• Performance: Minimal impact as it reuses existing optimized deletion and restoration logic

This implementation provides a solid foundation for message editing while maintaining consistency with existing codebase patterns and user experience expectations.

---

Important

Add message editing functionality to chat interface with UI, backend, and translation updates, including tests.

• Frontend - UI Components:
  • ChatRow.tsx: Added edit button, edit mode with textarea, keyboard shortcuts, and fixed styling issues.
• Backend - Message Handler:
  • webviewMessageHandler.ts: Added editMessage handler, checkpoint-aware editing logic, and file restoration.
  • WebviewMessage.ts: Added editMessage type.
• Translations:
  • Updated common.json in multiple locales to include "edit" and "delete" actions.
• Testing:
  • Added tests for editMessage in webviewMessageHandler.test.ts and ChatView.test.tsx.

^{This description was created by for 39e790a. You can customize this summary. It will automatically update as commits are pushed.}

[hannesrudolph]

HECK YES @mrubens WE NEED THIS

[BrucyJuicy]

This is a MUST HAVE feature. Every LLM chat got an Edit button.
Now Roo Code will have it as well.

Great Job 😎👌

[hannesrudolph]

✅ Security review comments have been addressed in commit 6ebc1fd:

1. Enhanced URL sanitization in the Thumbnails component:

   • Added comprehensive validation to reject dangerous protocols (javascript:, vbscript:, data:text/html, etc.)
   • Added pattern matching to detect and reject embedded scripts and event handlers
   • Added length limit (5MB) for data URIs to prevent DoS attacks
   • Fixed handleImageClick to use sanitized URL instead of original URL

2. Improved data URI validation:

   • Only allows specific image formats: png, jpg, jpeg, gif, webp, svg+xml
   • Validates proper base64 encoding format
   • Rejects any non-image data URIs

The changes ensure that only safe, properly formatted image data URIs can be rendered, preventing both XSS and redirect attacks flagged by GitHub Advanced Security.

[daniel-lxs]

I noticed the edited messages were being duplicated when the task is resumed:

I notified @SannidhyaSah, moving to "changes requested" in the meantime.

[hannesrudolph]

stale