Chatbot container

Container

The PatternFly chatbot is a separate window that overlays or is embedded within other UI content. This container can be shown and hidden via the chatbot toggle.

The <Chatbot> component is the container that encompasses the chatbot experience. It adapts to various display modes (overlay/default, docked, fullscreen, and embedded) and supports both light and dark themes.

The "embedded" display mode is meant to be used within a PatternFly page or other container within your product.

Content and message box

The <ChatbotContent> component is the container that is placed within the <Chatbot>, between the <ChatbotHeader> and <ChatbotFooter>.

<ChatbotContent> usually contains a <ChatbotMessageBox> for displaying messages.

Your code structure should look like this:

<Chatbot>
  <ChatbotHeader ... />
  <ChatbotContent>
    <ChatbotMessageBox>
    ...
    <ChatbotMessageBox>
  </ChatbotContent>
  <ChatbotFooter ... />
</Chatbot>

Welcome prompt

To introduce users to the chatbot experience, a welcome prompt can fill the message box before they input their first message. This brief message should follow our conversation design guidelines to welcome users to the chatbot experience and encourage them to interact.

To provide users with a more specific direction, you can also include optional welcome prompts.

Show welcome prompts

Hello, Chatbot User
How may I help you today?

Helpful prompt for Topic 1

Helpful prompt for Topic 2

Props

Chatbot

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content to be displayed in the chatbot
className	string		Custom classname for the Chatbot component
displayMode	ChatbotDisplayMode	ChatbotDisplayMode.default	Display Mode for the Chatbot
isVisible	boolean	true	Visibility flag for the chatbot

ChatbotContent

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content to be displayed in the chatbot
className	string		Custom classname for the ChatbotContent component

MessageBox

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content to be displayed in the message box
className	string		Custom classname for the MessageBox component

ChatbotWelcomePrompt

*required
Name	Type	Description
descriptionrequired	string	Welcome message
titlerequired	string	Title for the welcome message
className	string	Custom classname for the WelcomePrompt component
prompts	WelcomePrompt[]	Custom basic prompts to help users coming for the first time to chatbot

WelcomePrompt

*required
Name	Type	Description
messagerequired	string	Message for the welcome prompt
onClick	() => void	Callback handler for the onClick event for welcome prompt
title	string	Title for the welcome prompt

View source on GitHub