Add message editing functionality to chat interface

[SannidhyaSah]

What specific problem does this solve?

Who is affected: All users who want to refine their conversation flow and correct mistakes in their messages

When this happens: When users realize they made an error in a previous message, provided unclear instructions, or want to explore a different approach from an earlier point in the conversation

Current behavior: Users can only delete messages (with options for "just this message" or "this and all subsequent messages"), but cannot edit the content of previous messages

Expected behavior: Users should be able to edit their previous messages, with the conversation automatically resetting to that point

Impact: Currently, when users want to correct or refine a previous message, they must:

1. Delete the message and all subsequent conversation
2. Retype the entire corrected message from scratch
3. Lose all the AI responses and progress that came after that message

This wastes time and disrupts the conversation flow, especially for long conversations where users discover they need to clarify or correct something from earlier.

How should this be solved?

What will change:

• Add an "Edit" button/icon next to the existing "Delete" button on user messages
• Implement an inline editing interface that allows users to modify message text
• Show a confirmation dialog before applying edits that will reset the conversation
• Automatically delete all subsequent messages when an edit is confirmed
• Preserve images and other attachments during editing

User interaction:

• Users will see an edit icon (pencil/edit symbol) next to the delete icon on their messages
• Clicking edit will transform the message into an editable text area with the current content
• Users can modify the text and either save or cancel the edit
• Before saving, show a confirmation dialog: "Edit this message and delete all subsequent messages?"
• After confirmation, the message is updated and all subsequent messages are removed
• The conversation can then continue from the edited message

Acceptance Criteria

Given I have a conversation with multiple messages
When I click the edit button on one of my previous messages
Then the message content becomes editable in a text area
And I can modify the text content
And I see save/cancel buttons

Given I have modified a message and click save
When the message has subsequent messages in the conversation
Then I see a confirmation dialog asking "Edit this message and delete all subsequent messages?"
And I can choose to proceed or cancel

Given I confirm the edit operation
When the edit is applied
Then the message content is updated with my changes
And all messages that came after the edited message are deleted
And the conversation history is reset to that point
And I can continue the conversation from the edited message

Given I click cancel during editing
When I'm in edit mode
Then the message returns to its original state
And no changes are made to the conversation

Given I edit a message that has images attached
When I save the edit
Then the images are preserved with the edited text
And the message formatting is maintained

Estimated Effort and Complexity

Size: Medium

Reasoning: This feature requires modifications to both frontend UI components and backend message handling logic. The complexity comes from integrating with the existing message deletion system and ensuring proper state management.

Main challenges:

• Implementing the inline editing UI without disrupting the existing chat layout
• Integrating with the existing message deletion confirmation system
• Ensuring proper state synchronization between frontend and backend
• Handling edge cases like editing messages with images or special formatting

Dependencies:

• Builds on existing deleteMessage functionality in webviewMessageHandler.ts
• Requires modifications to ChatRow.tsx component for the edit UI
• May need updates to message type definitions in packages/types/src/message.ts

Technical Implementation Details (from codebase exploration)

Based on my analysis:

Key files to modify:

• webview-ui/src/components/chat/ChatRow.tsx - Add edit button and inline editing interface
• src/core/webview/webviewMessageHandler.ts - Add editMessage handler similar to existing deleteMessage
• src/shared/WebviewMessage.ts - Add editMessage message type
• webview-ui/src/i18n/locales/*/chat.json - Add translation keys for edit functionality

Current architecture:

• Messages are stored in clineMessages array with timestamp-based identification
• Deletion uses overwriteClineMessages() and overwriteApiConversationHistory() methods
• UI shows delete button only for user messages (message.say === "user_feedback")
• Confirmation dialogs use VSCode's showInformationMessage API

Integration points:

• Leverage existing message deletion logic in webviewMessageHandler.ts lines 856-960
• Reuse confirmation dialog pattern from current delete functionality
• Follow existing message update patterns using messageUpdated event type

Similar patterns in codebase:

• Delete message functionality provides the exact pattern to follow
• Inline editing can follow patterns from other editable components in the settings views
• Message state management follows established patterns in ExtensionStateContext.tsx

Technical Considerations

The implementation should:

• Maintain consistency with existing UI patterns and VSCode design guidelines
• Ensure proper accessibility with keyboard navigation support
• Handle concurrent editing scenarios gracefully
• Preserve message metadata (timestamps, images, etc.) during editing
• Follow the existing error handling patterns

Trade-offs and Risks

Alternatives considered:

• Fork conversation instead of deleting subsequent messages: More complex to implement and could confuse users with branching conversations
• Allow editing without confirmation: Risk of accidental data loss

Potential risks:

• Users might accidentally lose important conversation history
• Increased UI complexity in the chat interface
• Need to ensure edit functionality doesn't interfere with ongoing AI responses

Mitigation:

• Clear confirmation dialogs prevent accidental edits
• Consistent with existing delete functionality users are already familiar with
• Edit button only appears on user messages, not AI responses

[daniel-lxs]

Related: #3053

[SannidhyaSah]

Related: #3053

@daniel-lxs that seems inactive. I'll just create my own and open a new pr . Easier for me to work on a new fresh one than trying to rebase such an old one .

[SannidhyaSah]

🚀 Implementation Complete!

I've successfully implemented the message editing functionality requested in this issue.

Pull Request Created: #4727

Summary of Implementation

The feature includes:

• ✅ Edit button next to delete button on user messages
• ✅ Inline editing with textarea and save/cancel buttons
• ✅ Keyboard shortcuts (Ctrl/Cmd+Enter to save, Escape to cancel)
• ✅ Confirmation dialog before deleting subsequent messages
• ✅ Automatic checkpoint restoration when available
• ✅ Image and attachment preservation during editing
• ✅ Complete internationalization across all supported locales
• ✅ Comprehensive test coverage

Technical Details

Files Modified:

• webview-ui/src/components/chat/ChatRow.tsx - UI implementation
• src/core/webview/webviewMessageHandler.ts - Backend message handling
• src/shared/WebviewMessage.ts - Message type definitions
• webview-ui/src/i18n/locales/*/common.json - Translations

Key Features:

• Leverages existing delete message infrastructure for robust subsequent message removal
• Integrates with checkpoint system for automatic file restoration
• Follows established UI patterns and accessibility guidelines
• Maintains consistency with existing codebase architecture

The PR is currently in draft status and ready for review. All acceptance criteria from the original issue have been met and thoroughly tested.