Skip to content

Latest commit

 

History

History
471 lines (382 loc) · 16.5 KB

index.mdx

File metadata and controls

471 lines (382 loc) · 16.5 KB
Raw
title package description slug
Chat Log
@twilio-paste/chat-log
A Chat Log is a collection of Chat components for displaying conversations between people.
/components/chat-log/

import {graphql} from 'gatsby'; import {Anchor} from '@twilio-paste/anchor'; import {Avatar} from '@twilio-paste/avatar'; import {Box} from '@twilio-paste/box'; import { ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, ChatBookend, ChatBookendItem, ChatBubble, ChatEvent, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem, } from '@twilio-paste/chat-log'; import Changelog from '@twilio-paste/chat-log/CHANGELOG.md'; import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; import {HelpText} from '@twilio-paste/help-text'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';

import {SidebarCategoryRoutes} from '../../../constants'; import { basicInboundMessage, basicOutboundMessage, inboundMessageMeta, outboundMessageMeta, inboundMessageAttachment, outboundMessageAttachment, inboundComplexMessage, outboundComplexMessage, basicChatEvent, basicChatBookend, kitchenSink, } from '../../../component-examples/ChatLogExamples.ts';

export const pageQuery = graphql{ allPasteComponent(filter: {name: {eq: "@twilio-paste/chat-log"}}) { edges { node { name description status version } } } mdx(frontmatter: {slug: {eq: "/components/chat-log/"}}) { fileAbsolutePath frontmatter { slug title description } headings { depth value } } allAirtable(filter: {data: {Feature: {eq: "Chat Log"}}}) { edges { node { data { Documentation Figma Design_committee_review Engineer_committee_review Code status } } } } };

<LivePreview scope={{ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar}} language="jsx"> {<ChatLog> <ChatMessage variant='inbound'> <ChatBubble> Hello, what can I help you with? </ChatBubble> <ChatMessageMeta aria-label="said by Gibby Radki at 3:35 PM"> <ChatMessageMetaItem> <Avatar name="Gibby Radki" size="sizeIcon20" /> Gibby Radki ・ 3:35 PM </ChatMessageMetaItem> </ChatMessageMeta> </ChatMessage> <ChatMessage variant='outbound'> <ChatBubble> Hi! What is your return policy? </ChatBubble> <ChatMessageMeta aria-label="said by you at 3:35 PM"> <ChatMessageMetaItem>3:35 PM</ChatMessageMetaItem> </ChatMessageMeta> </ChatMessage> </ChatLog>}

Guidelines

About Chat Log

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

Accessibility

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.

Examples

Basic Message

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

<LivePreview scope={{ChatLog, ChatMessage, ChatBubble}} language="jsx" noInline> {basicInboundMessage}

Outbound

<LivePreview scope={{ChatLog, ChatMessage, ChatBubble}} language="jsx" noInline> {basicOutboundMessage}

Message with Message Meta

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.

Inbound

<LivePreview scope={{ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, Avatar}} language="jsx" noInline

{inboundMessageMeta}

Outbound

<LivePreview scope={{ChatLog, ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem}} language="jsx" noInline> {outboundMessageMeta}

Message with Attachment

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

Inbound

<LivePreview scope={{ ChatLog, ChatMessage, ChatBubble, ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, DownloadIcon, }} language="jsx" noInline

{inboundMessageAttachment}

Outbound

<LivePreview scope={{ ChatLog, ChatMessage, ChatBubble, ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, DownloadIcon, }} language="jsx" noInline

{outboundMessageAttachment}

Complex Message

ChatMessages can contain multiple ChatBubbles and ChatMessageMetas.

Inbound

<LivePreview scope={{ ChatLog, ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem, DownloadIcon, Avatar, }} language="jsx" noInline

{inboundComplexMessage}

Outbound

<LivePreview scope={{ ChatLog, ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, ChatBubble, ChatMessage, ChatMessageMeta, ChatMessageMetaItem, DownloadIcon, }} language="jsx" noInline

{outboundComplexMessage}

Chat Event

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

<LivePreview scope={{ChatLog, ChatEvent}} language="jsx" noInline> {basicChatEvent}

Chat Bookend

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

<LivePreview scope={{ChatLog, ChatBookend, ChatBookendItem}} language="jsx" noInline> {basicChatBookend}

Kitchen Sink

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

<LivePreview scope={{ ChatAttachment, ChatAttachmentDescription, ChatAttachmentLink, ChatBookend, ChatBookendItem, ChatBubble, ChatEvent, ChatLog, ChatMessage, ChatMessageMeta, ChatMessageMetaItem, Avatar, DownloadIcon, Box, }} language="jsx" noInline

{kitchenSink}

Usage Guide

API

Installation

yarn add @twilio-paste/chat-log - or - yarn add @twilio-paste/core

Usage

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

ChatAttachment
Prop Type Description Default
attachmentIcon NonNullable<React.ReactNode> Specify a Paste Icon or Spinner to be displayed in the Attachment
children NonNullable<React.ReactNode>
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_ATTACHMENT'
ChatAttachmentDescription
Prop Type Description Default
children string
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_ATTACHMENT_DESCRIPTION'
ChatAttachmentLink

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

Prop Type Description Default
href string A URL to route to
children string
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_ATTACHMENT_LINK'
ChatBookend
Prop Type Description Default
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_BOOKEND'
ChatBookendItem
Prop Type Description Default
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_BOOKEND_ITEM'
ChatBubble
Prop Type Description Default
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_BUBBLE'
ChatEvent
Prop Type Description Default
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_EVENT'
ChatLog
Prop Type Description Default
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_LOG'
ChatMessage
Prop Type Description Default
variant 'inbound', 'outbound' The variant of the message
children? React.ReactNode
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_MESSAGE'
ChatMessageMeta
Prop Type Description Default
aria-label string A label that summarizes the content of the ChatMessageMeta
children NonNullable<React.ReactNode>
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_MESSAGE_META'
ChatMessageMetaItem
Prop Type Description Default
children NonNullable<React.ReactNode>
element? string Overrides the default element name to apply unique styles with the Customization Provider 'CHAT_MESSAGE_META_ITEM'

Figma

Figma usage guidelines coming soon You can find the Chat Log components in{' '} the Paste Components library .