> ## 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.

<Panel>
  <Tabs>
    <Tab title="Example">
      <iframe src="https://botpress.github.io/docs-examples/iframe.html?args=&globals=&id=composer--primary" title="Composer component" className="w-full rounded-xl" height="500px" />
    </Tab>

    <Tab title="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)'}
          />
        )
      }
      ```
    </Tab>
  </Tabs>
</Panel>

<Note>
  Although you can use the `Composer` as a standalone component, we recommend using it within the [Container](./container) component and alongside the [Header](./header) and [MessageList](./message-list) components.
</Note>

## Props

<ResponseField name="disableComposer" type="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.
</ResponseField>

<ResponseField name="isReadOnly" type="boolean">
  Removes the composer completely when set to `true`. This is useful for displaying messages without allowing user
  input.
</ResponseField>

<ResponseField name="allowFileUpload" type="boolean">
  Enables or disables the file upload button.
</ResponseField>

<ResponseField name="connected" type="boolean">
  Indicates whether Webchat is currently connected. When `false`, a modal appears prompting the user to retry by
  reloading the page.
</ResponseField>

<ResponseField name="sendMessage" type="(payload: Message) => void">
  A callback function for sending messages composed by the user.
</ResponseField>

<ResponseField name="uploadFile" type="(file: File) => Promise<{ fileUrl: string; name: string; type: FileType }>">
  Handles the file upload logic and returns file metadata upon success.
</ResponseField>

<ResponseField name="composerPlaceholder" type="string">
  Placeholder text displayed in the input area. Comes from the configuration.
</ResponseField>

<ResponseField name="footer" type="string">
  Displays a footer at the bottom of the Composer.
</ResponseField>

<ResponseField name="inputRef" type="Ref<HTMLTextAreaElement>">
  Provides a ref to the text input element. Useful for focusing or manipulating the input programmatically.
</ResponseField>