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

Chat Log

Version 5.2.1GithubStorybookPeer review pending

Chat log is a collection of components that allow users to read a series of messages over time.

Installation

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

Usage

Usage page anchor
import {
  ChatLog,
  ChatMessage,
  ChatMessageMeta,
  ChatMessageMetaItem,
  ChatBubble,
  ChatBookend,
  ChatBookendItem,
} from '@twilio-paste/core/chat-log';

export const Basic = () => {
  return (
    <ChatLog>
      <ChatMessage variant="inbound">
        <ChatBubble>Ahoy!</ChatBubble>
        <ChatMessageMeta aria-label="said by Gibby Radki 4 minutes ago">
          <ChatMessageMetaItem>Gibby Radki ・ 4 minutes ago</ChatMessageMetaItem>
        </ChatMessageMeta>
      </ChatMessage>
      <ChatMessage variant="outbound">
        <ChatBubble>Howdy!</ChatBubble>
        <ChatMessageMeta aria-label="said by you 2 minutes ago">
          <ChatMessageMetaItem>2 minutes ago</ChatMessageMetaItem>
        </ChatMessageMeta>
        <ChatMessageMeta aria-label="(read)">
          <ChatMessageMetaItem>Read</ChatMessageMetaItem>
        </ChatMessageMeta>
      </ChatMessage>
    </ChatLog>
  );
};

Props

Props page anchor

ChatBubble

ChatBubble page anchor

element

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

Type
string
Default
CHAT_BUBBLE

ChatMessage

ChatMessage page anchor

variant RequiredRequired

Type
MessageVariants
Default
null

element

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

Type
string
Default
CHAT_MESSAGE

ChatMessageMeta

ChatMessageMeta page anchor

aria-label RequiredRequired

Defines a string value that labels the current element.

Type
string
Default
null

element

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

Type
string
Default
CHAT_MESSAGE_META

ChatMessageMetaItem

ChatMessageMetaItem page anchor

element

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

Type
string
Default
CHAT_MESSAGE_META_ITEM

ChatLog

ChatLog page anchor

element

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

Type
string
Default
CHAT_LOG

ComposerAttachmentCard

ComposerAttachmentCard page anchor

element

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

Type
string
Default
COMPOSER_ATTACHMENT_CARD

i18nDismissLabel

Accessible label for the dismiss button if dismissable

Type
string
Default
Remove attachment

onDismiss

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

Type
() => void
Default
null

ChatAttachment

ChatAttachment 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_ATTACHMENT

ChatAttachmentLink 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_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 }

ChatAttachmentDescription

ChatAttachmentDescription page anchor

element

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

Type
string
Default
CHAT_ATTACHMENT_DESCRIPTION

ChatBookend

ChatBookend page anchor

element

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

Type
string
Default
CHAT_BOOKEND

ChatBookendItem

ChatBookendItem page anchor

element

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

Type
string
Default
CHAT_BOOKEND_ITEM

ChatEvent

ChatEvent page anchor

element

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

Type
string
Default
CHAT_EVENT

ChatLogger

ChatLogger page anchor

chats RequiredRequired

Array of chats in the log. Use with useChatLogger()

Type
Chat[]
Default
'CHAT_ATTACHMENT'