Skip to content
Change the site theme
Figma
(information)

Chat Log

Design assets pending
Peer review pending

A Chat Log is a collection of Chat components for displaying conversations between people.


Guidelines

Guidelines page anchor

About Chat Log

About Chat Log page anchor

A Chat Log is a way to display conversations between people and can include complex content like attachments. The chat can be between two or more people.

The Chat Log package includes these main components:

  • ChatLog
  • ChatMessage
  • ChatBubble
  • ChatBookend
  • ChatEvent
  • ChatAttachment
  • ChatMessageMeta

To ensure the chat is accessible, only use the Chat components within a ChatLog component and use ChatMessage to wrap ChatBubbles and ChatMessageMeta components together.

The only other accessibility requirement is providing the ChatMessageMeta a descriptive label via the aria-label React prop.

The ChatLog component has role=”log” which means that any new messages added to it are announced by assistive technology.

A basic message is simply text sent from a chat participant and is built with the ChatMessage and ChatBubble components. It can either be inbound or outbound.

Inbound

Inbound page anchor

Message with Message Meta

Message with Message Meta page anchor

Use Message Meta to append additional information to a message such as the name of the sender, the time, or a read receipt.

ChatMessageMeta should be a child of ChatMessage so that the text and meta information are correctly grouped together for assistive technologies. It also needs a readable aria-label that summarizes what the meta information says.

A message can include an attachment. If sent with additional text, the attachment should be in its own ChatBubble.

ChatMessages can contain multiple ChatBubbles and ChatMessageMetas.

Chat Events are for things that can happen during the chat, like someone joining or the chat transferring to a different agent.

Chat Bookends are for when the chat starts, ends, and the day when the chat spans multiple days.

This example combines all the separate features displayed previously into one example. It shows how all the features work together harmoniously through composition.

yarn add @twilio-paste/chat-log - or - yarn add @twilio-paste/core
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</ChatMessageMetaItem>
<ChatMessageMetaItem>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>
);
};
ChatAttachment
ChatAttachment page anchor
PropTypeDescriptionDefault
attachmentIconNonNullable<React.ReactNode>Specify a Paste Icon or Spinner to be displayed in the Attachment
childrenNonNullable<React.ReactNode>
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_ATTACHMENT'
ChatAttachmentDescription
ChatAttachmentDescription page anchor
PropTypeDescriptionDefault
childrenstring
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_ATTACHMENT_DESCRIPTION'

ChatAttachmentLink inherits the same props as Anchor as well as the following:

PropTypeDescriptionDefault
hrefstringA URL to route to
childrenstring
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_ATTACHMENT_LINK'
PropTypeDescriptionDefault
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_BOOKEND'
PropTypeDescriptionDefault
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_BOOKEND_ITEM'
PropTypeDescriptionDefault
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_BUBBLE'
PropTypeDescriptionDefault
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_EVENT'
PropTypeDescriptionDefault
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_LOG'
PropTypeDescriptionDefault
variant'inbound', 'outbound'The variant of the message
children?React.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_MESSAGE'
PropTypeDescriptionDefault
aria-labelstringA label that summarizes the content of the ChatMessageMeta
childrenNonNullable<React.ReactNode>
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_MESSAGE_META'
PropTypeDescriptionDefault
childrenNonNullable<React.ReactNode>
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CHAT_MESSAGE_META_ITEM'
Information icon

Chat Log components are not in the Paste Component Library yet

To find the Stage 1 components, see the Conversations UI Kit Figma file(link takes you to an external page).


Black lives matter.