Docs

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.

     
    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)'}
    />
  )
}

    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.