Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Chat Composer

Peer review pending

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

Version 5.1.1
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/chat-composer - or - yarn add @twilio-paste/core

Usage

Usage page anchor
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"
  />
);

Props

Props page anchor

ChatComposer

ChatComposer page anchor

config RequiredRequired

Utilize the Lexical API directly

Type
Readonly<{ editor__DEPRECATED?: LexicalEditor | null | undefined; namespace: string; nodes?: readonly (Klass<LexicalNode> | { replace: Klass<LexicalNode>; with: <T extends new (...args: any) => any>(node: InstanceType<...>) => LexicalNode; })[] | undefined; onError: (error: Error, editor: LexicalEditor) => void; edi...
Default
null

disabled

Type
boolean
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CHAT_COMPOSER

initialValue

Type
string
Default
null

maxHeight

Type
| string | number | (string & {}) | (MaxHeightOptions | null)[] | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }
Default
null

onChange

Type
( editorState: EditorState, editor: LexicalEditor, tags: Set<string> ) => void
Default
null