Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Chat Composer

Version 5.2.0GithubStorybookPeer review pending

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

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

editorInstanceRef

Type
MutableRefObject<LexicalEditor | null>
Default
null

element

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

Type
string
Default
CHAT_COMPOSER

fontSize

Type
"inherit" | "100%" | "fontSize10" | "fontSize20" | "fontSize30" | "fontSize40" | "fontSize50" | "fontSize60" | "fontSize70" | "fontSize80" | "fontSize90" | "fontSize100" | "fontSize110" | ... 5 more ... | { ...; }
Default
null

initialValue

Type
string
Default
null

lineHeight

Type
"inherit" | "unset" | "lineHeight0" | "lineHeight05" | "lineHeight10" | "lineHeight20" | "lineHeight30" | "lineHeight40" | "lineHeight50" | "lineHeight60" | "lineHeight70" | ... 8 more ... | { ...; }
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

ChatComposerActionGroup

ChatComposerActionGroup page anchor

element

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

Type
string
Default
'CHAT_COMPOSER_ACTION_GROUP'

ChatComposerAttachmentGroup

ChatComposerAttachmentGroup page anchor

columns

Sets the number of columns in the attachment grid

Type
| number | (number | null)[] | { [x: string]: number | undefined; [x: number]: number | undefined }
Default
2

element

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

Type
string
Default
'CHAT_COMPOSER_ATTACHMENT_GROUP'

ChatComposerContainer

ChatComposerContainer page anchor

element

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

Type
string
Default
'CHAT_COMPOSER_CONTAINER'

maxHeight

Sets the maximum height of the composer before scrolling

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

variant

Styling of the container

Type
"default" | "contained"
Default
'default'

ChatComposerAttachmentCard

ChatComposerAttachmentCard page anchor

attachmentIcon RequiredRequired

Pass an icon to use for the attachment message. DownloadIcon recommended

Type
NonNullable<ReactNode>
Default
null

element

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

Type
string
Default
CHAT_COMPOSER_ATTACHMENT_CARD

i18nDismissLabel

Accessible label for the dismiss button if dismissable

Type
string
Default
Remove attachment

onDismiss

Function to run when ChatComposerAttachmentCard is dismissed. Adds a close button

Type
() => void
Default
null

ChatComposerAttachmentDescription

ChatComposerAttachmentDescription page anchor

element

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

Type
string
Default
CHAT_COMPOSER_ATTACHMENT_DESCRIPTION

ChatComposerAttachmentLink page anchor

href RequiredRequired

A URL to route to.

Type
string
Default
null

columnGap

Responsive prop of Space tokens for the CSS column-gap property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

display

Responsive style prop for the CSS display property

Type
| Display | (Display | null | undefined)[] | { [x: string]: Display | undefined; [x: number]: Display | undefined }

element

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

Type
string
Default
CHAT_COMPOSER_ATTACHMENT_LINK

height

Responsive style prop of Size Tokens for for the CSS height property

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

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

margin

Responsive prop of Space tokens for the CSS margin property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginBottom

Responsive prop of Space tokens for the CSS margin-bottom property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginLeft

Responsive prop of Space tokens for the CSS margin-left property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginRight

Responsive prop of Space tokens for the CSS margin-right property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginTop

Responsive prop of Space tokens for the CSS margin-top property

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginX

Responsive prop of Space tokens for the CSS margin-left and margin-right properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

marginY

Responsive prop of Space tokens for the CSS margin-top and margin-bottom properties

Type
"auto" | "space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | ... 28 more ... | { ...; }

maxHeight

Responsive style prop of Size Tokens for for the CSS max-height property

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

maxWidth

Responsive style prop of Size Tokens for for the CSS max-width property

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

minHeight

Responsive style prop of Size Tokens for for the CSS min-height property

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

minWidth

Responsive style prop of Size Tokens for for the CSS min-width property

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

overflow

Type
| Overflow | (Overflow | null | undefined)[] | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }

overflowX

Type
| OverflowX | (OverflowX | null | undefined)[] | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }

overflowY

Type
| OverflowY | (OverflowY | null | undefined)[] | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }

padding

Responsive prop of Space tokens for the CSS padding property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingBottom

Responsive prop of Space tokens for the CSS padding-bottom property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingLeft

Responsive prop of Space tokens for the CSS padding-left property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingRight

Responsive prop of Space tokens for the CSS padding-right property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingTop

Responsive prop of Space tokens for the CSS padding-top property

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingX

Responsive prop of Space tokens for the CSS padding-left and padding-right properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

paddingY

Responsive prop of Space tokens for the CSS padding-top and padding-bottom properties

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

rel

Sets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten.

Type
string
Default
null

rowGap

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

showExternal

Shows the link external icon.

Type
boolean

size

Responsive style prop of Size Tokens for for the CSS width and height properties

Type
string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }

tabIndex

Sets the anchor tabIndex attribute.

Type
AnchorTabIndexes
Default
null

target

If external href, defaults to '_blank'. Can be overwritten.

Type
AnchorTargets
Default
null

variant

Sets the styled Anchor variant

Type
AnchorVariants
Default
'default'

verticalAlign

Responsive style prop for the CSS vertical-align property

Type
VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }

width

Responsive style prop of Size Tokens for the CSS width property

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