Composer

The user interface to add new messages or edit existing ones.

Anatomy

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>
);

API Reference

Root

Containts all parts of the composer.

This primitive renders a <form> element unless asChild is set.

Input

The text input field for the user to type a new message.

This primitive renders a <textarea> element unless asChild is set.

Keyboard Shortcuts

Send

The button to send the message.

This primitive renders a <button> element unless asChild is set.

Cancel

Sends a cancel action.

In edit composers, this action exits the edit mode.
In thread composers, this action stops the current run.

This primitive renders a <button> element unless asChild is set.

Attachments

Renders attachments. This primitive renders a separate component for each attachment.

AddAttachment

Renders a button to add an attachment.

This primitive renders a <button> element unless asChild is set.

If

Renders children if a condition is met.

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