AI Chat Log

An AI Chat Log is a way to display conversations between a user and AI. If you are looking for a chat between 2 or more humans, please refer to Chat Log.

The AI Chat Log package includes these main components:

• AIChatLog
• AIChatMessage
• AIChatMessageAuthor
• AIChatMessageBody
• AIChatMessageActionGroup
• AIChatMessageActionCard
• AIChatMessageLoading

To ensure the chat is accessible, only use the AI Chat components within an AIChatLog component and use AIChatMessage to wrap AIChatMessageBody, AIChatMessageActionGroup and components together.

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

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

A message must include the author and body. Any message text from a user or a bot must be contained within the AIChatMessageBody component. Due to lengthy AI responses, the chat layout is top-down.

The AIChatMessageBody component has two sizes, size="default" and size="fullScreen". The fullScreen size is used where the ChatLog is displayed in the full width of the page where larger font size is needed.

Message actions can be used to provide quick responses or actions to the user.

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

Each item within AIChatMessageActionGroup should be wrapped with AIChatMessageActionCard. It is recommended to use reset button variants for content within AIChatMessageActionCard.

Actions can still be added in AIChatMessageBody which are returned from the AI response.

Use the AIChatMessageLoading component to indicate that the bot is typing or processing a response. During this time no user input should be accepted. No new messages should be added to a chat until the AI operation is finished processing.

The SkeletonLoader lengths vary on each render to give a more natural pending message body interaction.

The AIChatMessageBody component has an optional animated prop that can be used to apply a typewriter animation to the text. This should only be applied to the messages received from the AI.

It also accepts onAnimationStart and onAnimationEnd props to trigger actions when the animation starts and ends allowing additional logic such as scrolling to be implemented.

If you are using a Markdown parser to render the message body we recommend using markdown-to-jsx. It allows you to pass in Paste components to replace specific markdown elements. You can view our implementation for the Paste Assistant for an example. AIChatMessageBody implementation, Markdown options implementation

AIChatMessageAuthor can be customized by passing an icon, image, or string to the avatarIcon, avatarSrc, or avatarName props. Learn more about the API.

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

The useAIChatLogger hook provides a hook-based approach to managing AI chat state. It is best used with the <AIChatLogger /> component.

useAIChatLogger returns 4 things:

• An array of aiChats.
• A push method used to add a chat, optionally with a custom ID.
• A pop method used to remove a chat, optionally via its ID.
• A clear method used to remove all chats.

The <AIChatLogger /> component handles rendering the chats it is passed via props. It handles how chats enter and leave the UI.

const { aiChats } = useAIChatLogger(); return <AIChatLogger aiChats={aiChats} />; 

You can push or pop a chat based on an action or event. In this example it's based on a button click:

Keep any generated responses from the AI contained in the AIChatMessageBody component. Each chat message should only have one AIChatMessageBody component.

• Don’t accumulate error states in one screen, just display one error at a time, starting with the most critical one, until the user recovers.
• Check content guidelines for error states.
• Include another way for users to contact support if the error persists.

An error generating or regenerating a response

• Use a Callout to show an inline error.
• The Callout should replace the body message if no response was generated, or appear between the AIChatMessageBody and the AIChatMessageActionGroup if the response is incomplete.
• Include an in-chat action to recover (For example: regenerate or try again)
• Include a way for users to contact support if the error persists.

An error when clicking on an Action that generates an AI response

• The Callout is placed under the response and action
• Include another way for users to contact support if the error persists.

An error when clicking actions on AI messages (clicking buttons, links)

• Use Help text error variant for actions not directly tied to generating a response or continuing the conversation, such as copying text or rating a response.

An error sending a message

• The error is placed in the Message Action Card
• Include an action to recover

Chat History Errors, Timeouts, Network errors...etc.

• An Alert will be placed above the Chat Composer
• The Alert will be dismissed once the user refreshes the page or when the error is resolved