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

Chat Log

Version 5.2.2GithubStorybookPeer 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" | ... 38 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" | ... 39 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" | ... 39 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" | ... 39 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" | ... 39 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" | ... 39 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" | ... 39 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" | ... 39 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" | ... 38 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" | ... 38 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" | ... 38 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" | ... 38 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" | ... 38 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" | ... 38 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" | ... 38 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" | ... 38 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'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.