Chat

The Chat component offers real-time customer communication. It contains a chat panel that shows key metrics and metadata, as well as a live chat panel to conduct the conversation. The Chat component is composed of several sub-components that are detailed here.

For more information on how to use the features and props for this component, check out the developer documentation.

The Chat component contains a header region dedicated for the ChatHeader component, which accepts a title and icon representing the current chat. Additionally, an actions region can be leveraged to offer a series of actions for the Chat. For instance, including a Transcripts Button could allow a user to toggle a ChatTranscript within the utilities region of the Chat component. Other actions may transfer the interaction, email transcripts, or end the chat.

In the live conversation area, transcripts of the Chat (such as bot transcripts prior to an agent’s involvement) are collapsed. At the start of the interaction, transcript height occupies ¾ of the chat panel by default. If all transcripts do not fit in this area, an "Earlier transcripts" action may be added to the ChatHeader.

The transcripts should be toggled on/off via an action in the ChatHeader and then rendered within the utilities region of the Chat component.

This overlay presents metadata collected prior to the live chat. Similar to transcripts, it should have a dynamic height with a max-height equaling to 2/3 of the chat panel. Pass a SuggestedReplyPicker component to the suggestedReplyPicker property on the Chat component in order to use this feature.

The live chat is composed by a MessageList component that uses typing indicators that shows an ellipsis as the customer types characters. Since the customer has not yet submitted the message, the ellipsis bubble has a dynamic width. Each message has a timestamp that appears once the customer submits their message. There are also system messages that can be added to the Chat that signify events such as a user leaving or entering a chat, or the chat ending. Messages themselves may contain images, links, or downloadable attachments.

Any time a user scrolls up the Chat feed and loses sight of the latest message in the Chat, the Scroll to latest message icon appears at the bottom of the live chat region. Upon selecting this icon, the Chat feed rolls to reveal the latest message at the bottom of the chat panel. The action tied to this icon is not associated with new messages only; it functions anytime the user loses sight of the latest message in the conversation.

The ChatComposer component remains at the bottom of the chat panel and can accept user input as text that will be sent into the chat as the next message. Users are allowed to attach images or other attachments to their messages before sending. Emojis may optionally be used in the ChatComposer as well, represented via the EmojiPicker component. When a message is delivered, the system can display a Delivered message. Once it is opened by a customer, Delivered becomes Opened. Timestamps are left-aligned for both the user and the customer.

The ChatComposer component accepts children that will render in between the attachments and emoji Buttons and the Send Button. This region may be used to provided additional actions such as pre-built phrases.

NameTypeDefaultDescription
body*ReactElement<>Wrapper of message groups, system messages, type ahead
footer*ReactElement<>Wrapper of conversation input, emojis, attachments
header*ReactElement<>Header of conversation pane
bannerBannerPropschat banner
refRef<HTMLElement>ref to the element
suggestedReplyPickerReactElement<>Wrapper of suggested replies
utilityReactNodeUtility - This is used by utility container internally. It has predefined styles and visible conditionally based on utility prop is