> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Composer

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.

> [tab] Example
>
> [Composer component](https://botpress.github.io/docs-examples/iframe.html?args=\&globals=\&id=composer--primary)

> [tab] Code
>
> ```jsx App.jsx wrap theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
> import { Composer, useWebchat } from '@botpress/webchat'
>
> function App() {
>   const { client, clientState } = useWebchat({ clientId: '$CLIENT_ID$' }) // Insert your Client ID here
>
>   return (
>     <Composer
>       disableComposer={false}
>       isReadOnly={false}
>       allowFileUpload={true}
>       connected={clientState !== 'disconnected'}
>       sendMessage={client?.sendMessage}
>       uploadFile={client?.uploadFile}
>       composerPlaceholder="Type a message..."
>       showPoweredBy={true}
>       footer={'[⚡️ by Botpress](https://botpress.com/?from=webchat)'}
>     />
>   )
> }
> ```

> [!NOTE]
>
> Although you can use the `Composer` as a standalone component, we recommend using it within the [Container](https://botpress.com/docs/webchat/react-library/components/container.md) component and alongside the [Header](https://botpress.com/docs/webchat/react-library/components/header.md) and [MessageList](https://botpress.com/docs/webchat/react-library/components/message-list.md) 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.