Message Editing

import { ComposerPrimitive } from "@assistant-ui/react";
...
 
const Thread = () => {
  return (
    <ThreadPrimitive.Root>
      <ThreadPrimitive.Viewport>
        ...
        <ThreadPrimitive.Messages components={{
          ...,
          EditComposer, // <-- Show our new component during edit mode
        }} />
      </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 new 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>
  );
};