ComposerRuntime
The composer runtime allows you to view or edit anything related to how new information is added and sent. For instance you can use the composer runtime to read the state, add attachments, update text, send a message, etc.
useComposer
Grabs the nearest composer (whether it’s the edit composer or the thread’s composer):
// Example
import { useComposer } from "@assistant-ui/react";
const composerRuntime = useComposer();
// set the text
composerRuntime.setText("Hello from the composer runtime");
// send whatever is in the composer
composerRuntime.send();
// get the current text in the composer state
const composerState = composerRuntime.getState();
const currentText = composerState.text;ComposerRuntime
path:
type:
getState:
Get the current state of the composer. Includes any data that has been added to the composer.
getAttachmentAccept:
addAttachment:
Given a standard js File object, add it to the composer. A composer can have multiple attachments.
setText:
Set the text of the composer.
setRole:
Set the role of the composer. For instance, if you'd like a specific message to have the 'assistant' role, you can do so here.
setRunConfig:
Set the run config of the composer. This is used to send custom configuration data to the model. Within your backend, you can access this data using the `runConfig` object. Example: ```ts composerRuntime.setRunConfig({ custom: { customField: "customValue" } }); ```
reset:
Reset the composer. This will clear the entire state of the composer, including all text and attachments.
clearAttachments:
Clear all attachments from the composer.
send:
Send a message. This will send whatever text or attachments are in the composer.
cancel:
Cancel the current run. In edit mode, this will exit edit mode.
subscribe:
Listens for changes to the composer state.
getAttachmentByIndex:
Get an attachment by index.
useThreadComposer
Access the thread’s new message composer state:
import { useThreadComposer } from "@assistant-ui/react";
const threadComposerRuntime = useThreadComposer();
// set the text
threadComposerRuntime.setText("Hello from the thread composer runtime");
// send whatever is in the thread composer
threadComposerRuntime.send();
// get the current text in the composer state
const threadComposerState = threadComposerRuntime.getState();
const currentText = threadComposerRuntime.text;ThreadComposerRuntime
path:
type:
getAttachmentAccept:
addAttachment:
Given a standard js File object, add it to the composer. A composer can have multiple attachments.
setText:
Set the text of the composer.
setRole:
Set the role of the composer. For instance, if you'd like a specific message to have the 'assistant' role, you can do so here.
setRunConfig:
Set the run config of the composer. This is used to send custom configuration data to the model. Within your backend, you can access this data using the `runConfig` object. Example: ```ts composerRuntime.setRunConfig({ custom: { customField: "customValue" } }); ```
reset:
Reset the composer. This will clear the entire state of the composer, including all text and attachments.
clearAttachments:
Clear all attachments from the composer.
send:
Send a message. This will send whatever text or attachments are in the composer.
cancel:
Cancel the current run. In edit mode, this will exit edit mode.
subscribe:
Listens for changes to the composer state.
getState:
getAttachmentByIndex:
ThreadComposerState
The state of the thread composer which is the composer the user can interact with at the bottom.
ThreadComposerState
canCancel:
isEditing:
isEmpty:
text:
role:
attachments:
runConfig:
type:
EditComposerState
The state of the edit composer which is the composer the user can edit messages with.