Message Editing

import { ComposerPrimitive, useAuiState } from "@assistant-ui/react";
...

const Thread = () => {
  return (
    <ThreadPrimitive.Root>
      <ThreadPrimitive.Viewport>
        ...
        <ThreadPrimitive.Messages>
          {({ message }) => {
            // Show our new component during edit mode
            return <MessageWithEditComposer />;
          }}
        </ThreadPrimitive.Messages>
      </ThreadPrimitive.Viewport>
      ...
    </ThreadPrimitive.Root>
  );
};

const UserMessage = () => {
  return (
    <MessagePrimitive.Root>
      ...
      <ActionBarPrimitive.Root>
        ...
        <ActionBarPrimitive.Edit /> {/* <-- add a button to enable edit mode */}
      </ActionBarPrimitive.Root>
    </MessagePrimitive.Root>
  );
};

// define a wrapper component that handles both display and edit mode
const MessageWithEditComposer = () => {
  const isEditing = useAuiState((s) => s.composer.isEditing);
  if (isEditing) return <EditComposer />;
  return <UserMessage />;
};

// define the edit composer component
const EditComposer = () => {
  return (
    // you can return a MessagePrimitive including a ComposerPrimitive, or only a ComposerPrimitive
    <MessagePrimitive.Root>
      ...
      <ComposerPrimitive.Root>
        <ComposerPrimitive.Input />
        <ComposerPrimitive.Cancel />
        <ComposerPrimitive.Send />
      </ComposerPrimitive.Root>
    </MessagePrimitive.Root>
  );
};