feat(ui): Implement in-place message editing with re-response

[bzqzheng]

Add Message Editing Functionality

Overview

This PR introduces message editing, allowing users to revise their prior inputs and view regenerated AI responses. It enables iterative prompt refinement and A/B testing of message variations.

Key Features

• Edit Button: Hover-to-reveal button on user messages
• Inline Editing: Seamless textarea interface with smooth transitions
• Save/Cancel: Save changes or discard edits with intuitive controls
• Cmd+Enter Shortcut: Instantly saves and re-prompts the AI
• AI Re-response: Triggers new AI response after edits
• Message Pruning: Editing any message (e.g. message 2 of 5) prunes all subsequent messages
• Visual Feedback: Loading indicators, edit mode, and “edited” labels
• Context Preservation: Maintains coherent conversation flow after edit-triggered regeneration

References

• Previous PR

[bzqzheng]

Goose UI in editing mode.

[spencrmartin]

Can we eventually aim to just re-emulate the chat input section within this component? @zanesq I can add it to the backlog if you want to push out

[DOsinga]

I like this. I wonder if we should prune though and not create a new conversation?

[bzqzheng]

I like this. I wonder if we should prune though and not create a new conversation?

Can you clarify what you meant by "prune through" a conversation?
I may not haven' been clear in the PR description: when a message is edited and saved, all preceding messages are preserved, and all subsequent messages are deleted/pruned.
This differs slightly from ChatGPT's behavior, which preserves subsequent messages even after edits.

[DOsinga]

yeah, I meant and alternative is to start a new conversation with the messages before and the new edited message -

[zanesq]

Thanks, I tried it locally and was able to edit a previous message and continue.

[zanesq]

Instead of a two-step process with setTimout that can lead to race conditions can you try something like this instead?

import { useState, useCallback, useEffect } from 'react';

// Add state to track pending edited message
const [pendingEdit, setPendingEdit] = useState<{ id: string; content: string } | null>(null);

const onMessageUpdate = useCallback(
  (messageId: string, newContent: string) => {
    const messageIndex = messages.findIndex((msg) => msg.id === messageId);
    if (messageIndex !== -1) {
      // Truncate history up to the message to edit
      const history = messages.slice(0, messageIndex);
      setMessages(history);
      // Instead of setTimeout, set pendingEdit which will be handled in useEffect
      setPendingEdit({ id: messageId, content: newContent });
    }
  },
  [messages, setMessages]
);

// Listen for pending edit and append message after messages updated
useEffect(() => {
  if (pendingEdit) {
    const updatedMessage = createUserMessage(pendingEdit.content);
    append(updatedMessage);
    setPendingEdit(null); // Reset after processing
  }
}, [pendingEdit, append]);

[bzqzheng]

updated!

[zanesq]

On edit all messages after (and including) the edited one are removed, and a new message is appended. Seems like some people might expect the following bot responses to still be there so we should warn of this destructive behavior (could be some small text at the bottom of the edit textarea?)

[bzqzheng]

This is actually the intended behavior and follows the (almost) same UX pattern used by ChatGPT and Grok.

• ChatGPT/Grok also supports conversation branching; the latest branch will not have any messages after the edited message
• Gemini only supports editing the latest message

The reasoning behind this approach is that editing a message fundamentally changes the context of the conversation, and the LLM's responses that followed the original message may not be relevant or accurate given the new context. By removing subsequent messages, we ensure the convo flows naturally from the edited point and prevents context confusion.

[jamadeo]

Hey @bzqzheng , still interested in getting this in? Seems useful!

[bzqzheng]

Hey @bzqzheng , still interested in getting this in? Seems useful!

yes, will update this PR this upcoming weekend.

[zanesq]

Thanks taking a look will pull in main also