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. If you are looking for a chat between a human and an AI please refer to AIChatLog.
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.
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.
The useChatLogger hook provides a hook based approach to managing chat state. It is best used with the <ChatLogger /> component.
useChatLogger returns 4 things:
- An array of
chats. - A
pushmethod used to add a chat, optionally with a custom ID - A
popmethod used to remove a chat, optionally via its ID. - A
clearmethod used to remove all chats.
The <ChatLogger /> component handles rendering the chats it is passed via props. It handles how chats enter and leave the UI.
const { chats }= useChatLogger();
return <ChatLogger chats={chats} />;
You can push or pop a chat based on an action or event. In this example it's based on a button click:
Keep content as concise as possible given the space constraints.
To convey an error related to whether a message was sent, use Help Text inside the Message Meta. Limit the message to a single sentence and focus on how the user can resolve the issue. Offer a link-style retry button when applicable.
To convey an error related to other actions taken in the Chat Log, like a file upload validation error, use a Toast at the top of the individual chat window.
To convey an error that applies to the whole page, not just a particular Chat Log, use a page-level Callout or Alert.