Composer

import { ComposerPrimitive } from "@assistant-ui/react";
 
// creating a new message
const Composer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Attachments />
    <ComposerPrimitive.AddAttachment />
    <ComposerPrimitive.Input />
    <ComposerPrimitive.Send />
  </ComposerPrimitive.Root>
);
 
// editing an existing message
const EditComposer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Input />
    <ComposerPrimitive.Send />
    <ComposerPrimitive.Cancel />
  </ComposerPrimitive.Root>
);

import { useComposerSend } from "@assistant-ui/react";
 
const Send = () => {
  const send = useComposerSend();
 
  const handleSubmit = (e: FormEvent) => {
    // send action is not available
    if (!send) return;
 
    e.preventDefault();
    send();
  };
 
  return <form onSubmit={handleSubmit}>...</form>;
};

import { useComposerCancel } from "@assistant-ui/react";
 
const Cancel = () => {
  const cancel = useComposerCancel();
 
  // cancel action is not available
  if (!cancel) return null;
 
  return <button onClick={cancel}>Cancel</button>;
};

<Composer.If editing>{/* rendered if message is being edited */}</Composer.If>

import { useComposerIf } from "@assistant-ui/react";
 
const Composer = () => {
  const isEditing = useComposerIf((c) => c.isEditing);
 
  return isEditing ? <Editing /> : <NotEditing />;
};