The Composer component is where the user writes messages before sending them to the bot. It provides a text area for input, file uploads, and a speech-to-text option.
Although you can use the Composer as a standalone component, we recommend using it within the Container component and alongside the Header and MessageList components.

Props

disableComposer
boolean
Disables the input field and sending capabilities when set to true. Disabling the composer is useful when you want to prevent user input temporarily, such as during a loading state or when waiting for a response from the bot.
isReadOnly
boolean
Removes the composer completely when set to true. This is useful for displaying messages without allowing user input.
allowFileUpload
boolean
Enables or disables the file upload button.
connected
boolean
Indicates whether Webchat is currently connected. When false, a modal appears prompting the user to retry by reloading the page.
sendMessage
(payload: Message) => void
A callback function for sending messages composed by the user.
uploadFile
(file: File) => Promise<{ fileUrl: string; name: string; type: FileType }>
Handles the file upload logic and returns file metadata upon success.
composerPlaceholder
string
Placeholder text displayed in the input area. Comes from the configuration.
Displays a footer at the bottom of the Composer.
inputRef
Ref<HTMLTextAreaElement>
Provides a ref to the text input element. Useful for focusing or manipulating the input programmatically.