📘
This is only applicable to the Meya Orb Web SDK and the Meya Orb Mobile SDK.

The composer is the main input section that a user will use to:

Type and submit text.
Upload files.
Upload photos/images.
Take and upload a photo with their phone's camera (this is only applicable to Meya Orb Mobile SDK).

By default, the input composer will always be shown with the text input field visible. This allows a user to focus the text input field and start typing a message.

Some input components such as the image.ask component will change the composer to show the File and Photo buttons automatically.

Controlling the composer

The composer can be customized in BFML using the composer spec, which has a number of fields that allow you to control what the composer looks like. Here is the composer spec definition:

composer:
  focus: file|image|text|blur
  placeholder: STRING
  collapse_placeholder: STRING
  visibility: collapse|hide|show

In Python the composer spec is defined by the ComposerElementSpec class, and is defined as an optional field in the InteractiveComponent class.

All basic input and output components such as text.ask and text.say components inherit from the InteractiveComponent class, and thus these components can control how the composer behaves.

Visible

In this example the text.say component will set the composer to display the text input with keyboard focus and display a custom placeholder text.

steps:
  - say: How are you doing?
    composer:
      focus: text
      placeholder: What's on your mind...
      visibility: show

Which produces the following:

Collapsed

In this example the text.say component will collapse the composer with custom placeholder text that allows a user to show the text input when they click the composer.

steps:
  - say: Which is your favourite color?
    quick_replies:
      - Red
      - Blue
    composer:
      focus: blur
      placeholder: Type in a color
      visibility: collapse
      collapse_placeholder: Click to type a color

Hidden

In this example the text.say component will hide the composer altogether. Using this you can force a user to select a button/quick reply, or input using the form.

steps:
  - type: meya.text.component.input
    label: Favourite color
    required: true
    placeholder: Type your favourite color...
    quick_replies:
      - text: I don't like color
      - text: What's the meaning of color?
    composer:
      focus: blur
      visibility: hide

File or image

In this example the text.say component will show the composer and give focus to the Photo button. (The same can be done for the File button.)

steps:
  - say: Upload your profile picture...
    quick_replies:
      - No thanks
      - Privacy policy
    composer:
      focus: image
      visibility: show

Default composer config

You can customize the default composer values by specifying the compose config in the Orb config for both the Meya Orb Web SDK and the Meya Orb Mobile SDK.

You can also customize the composer config using the Orb integration settings, here is an example:

type: meya.orb.integration
markdown: true
theme:
  brand_color: '#4989ea'
launcher:
  type: message
  text: Help
collect:
  location: user
composer:
  visibility: show
  placeholder_text: Type here...
  file_button_text: Upload File
  file_send_text: Upload
  image_button_text: Upload Photo
  camera_button_text: Capture
  gallery_button_text: Photo Gallery