ComposerRuntime

`useThreadComposer`

Access the thread’s new message composer:

import { useThreadComposer } from "@assistant-ui/react";
 
const composer = useThreadComposer();
const text = useThreadComposer((m) => m.text);

ComposerState

text:

string

The current text of the composer.

setText:

(text: string) => void

A function to set the text of the composer.

attachments:

readonly Attachment[]

The current attachments of the composer.

addAttachment:

(attachment: Attachment) => void

A function to add an attachment to the composer.

removeAttachment:

(attachmentId: string) => void

A function to remove an attachment from the composer.

reset:

() => void

A function to reset the composer.

canCancel:

true

Whether the composer can be canceled.

isEditing:

true

Whether the composer is in edit mode.

send:

() => void

A function to send the message.

cancel:

() => void

A function to cancel the run.

focus:

() => void

A function to focus the composer.

onFocus:

(listener: () => void) => Unsubscribe

A function to subscribe to focus events.

`useComposer`

Grabs the nearest composer state (whether it’s the edit composer or the thread’s new message composer):

import { useComposer } from "@assistant-ui/react";
 
const composer = useComposer();
const text = useComposer((m) => m.text);

ComposerRuntime

useThreadComposer

ComposerState

text:

setText:

attachments:

addAttachment:

removeAttachment:

reset:

canCancel:

isEditing:

send:

cancel:

focus:

onFocus:

useComposer

On this page

`useThreadComposer`

`useComposer`