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.
​
footer
string
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.