Skip to content
Change the site theme
Figma
(information)

Chat Composer

Peer review pending

A Chat Composer is an input made for users to type rich chat messages.


Guidelines

Guidelines page anchor

About Chat Composer

About Chat Composer page anchor

A Chat Composer is an input made for users to type rich chat messages. Chat Composer is best used as one part of larger chat user interface to provide a seamless authoring experience. Within the context of Paste, Chat Composer is most typically used alongside the Chat Log component.

Chat Composer supports a variety of aria attributes which are passed into the content editable region of the component.

  • If the surrounding UI includes a screen reader visible label reference the label element using aria-labelledby.
  • If the surrounding UI does not include a screen reader visible label, use aria-label to describe the input.
  • If the surrounding UI includes additional help or error text use aria-describedby to reference the associated element.

Chat Composer is built on top of the Lexical(link takes you to an external page) editor. Lexical is extensible and follows a declarative approach to configuration via JSX. Developers can leverage a wide variety of existing plugins(link takes you to an external page) via the @twilio-paste/lexical-library package or other sources. Alternatively, developers can write their own custom plugin logic. Plugins are provided to the Chat Composer via the children prop.

Auto Link Plugin page anchor

Chat Composer uses a custom AutoLinkPlugin(link takes you to an external page) internally which you can see being configured here(link takes you to an external page) as a JSX child.

Set a placeholder value using a placeholder prop.

Set an initial value using an initialValue prop. This prop is limited to providing single line strings. For more complicated initial values interact with the Lexical API directly using the config prop and editorState callback.

Restrict the height of the composer using a maxHeight prop.

Set a rich text value using one of the Lexical formatting APIs such as toggleFormat(link takes you to an external page)

Use Chat Composer alongside other Paste components such as Chat Log to build more complex chat UI. This example also makes use of a Lexical plugin AutoScrollPlugin.

yarn add @twilio-paste/chat-composer - or - yarn add @twilio-paste/core
import {ChatComposer} from '@twilio-paste/core/chat-composer';
export const BasicChatComposer = () => (
<ChatComposer
config={{
namespace: 'customer-chat',
onError: (e) => {
throw e;
},
}}
ariaLabel="A basic chat composer"
placeholder="Chat text"
/>
);
PropTypeDescriptionDefault
configLexicalComposerProps['initialConfig']Configuration provided to the Lexical Composer
children?LexicalComposerProps['children]Children provided to the Lexical Composer (i.e. Lexical plugins)
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_COMPOSER'
placeholder?string or JSX.ElementPlaceholder content for the Chat Composer
onChange?(editorState: EditorState, editor: LexicalEditor) => voidCallback invoked when changes occurs within the Chat Composer
initialValue?stringInitial value for the Chat Composer
maxHeight?stringMaximum height for the Chat Composer
(information)
Figma usage guidelines coming soon

You can find the Chat Composer components in the Paste Components library.(link takes you to an external page)


Black lives matter.