The Chat Context component offers real-time customer communication with React. It contains a chat panel that shows key metrics and metadata, as well as a live chat panel to conduct the conversation. The Chat Context component is composed of several sub-components that are detailed here.
The Chat Context 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 "Transcript" 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 Chat Context.
Chat context overlay
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 Context 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 Emoji Picker 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 emojis Buttons and the Send Button. This region may be used to provided additional actions such as pre-built phrases.
The following demo includes all of the individual components and regions documented above.