Overview

Basic ChatBot

This demo displays a basic ChatBot, which includes:

The <ChatbotToggle> that controls the <Chatbot> container.
A <ChatbotHeader> with all built sub-components laid out, including a <ChatbotHeaderTitle> that changes its presentation depending on the display mode.
The ability to swap display modes via <ChatbotHeaderOptionsDropdown>
<ChatbotContent> and <MessageBox> with:

A <ChatbotWelcomePrompt>
An initial user <Message> and an initial bot message with message actions.
Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a scrollToBottomRef

A <ChatbotFooter> with a <ChatbotFootNote> and a <MessageBar> that contains the abilities of:

Speech to text.
Sending a message to the ChatBot.
Receiving a response from a backend AI tool with a loading message state.

A <ChatbotConversationHistoryNav> toggled open and closed by the <ChatbotHeaderMenu> in the <ChatbotHeader>.
A "Skip to chatbot" button that allows you to skip to the chatbot content via the PatternFly skip to content component. To display this button you must tab into the main window.

Embedded ChatBot

This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed within a page in your product. This demo includes:

A PatternFly page with a sidebar, "Skip to chatbot" button, and masthead. To display the "Skip to chatbot" button you must tab into the main window.
A <Chatbot> container.
A <ChatbotHeader> with all built sub-components laid out, including a <ChatbotHeaderTitle>
<ChatbotContent> and <MessageBox> with:
- A <ChatbotWelcomePrompt>
- An initial user <Message> and an initial bot message with message actions.
- Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a scrollToBottomRef
A <ChatbotFooter> with a <ChatbotFootNote> and a <MessageBar> that contains the abilities of:
- Speech to text.
- Sending a message to the ChatBot.
- Receiving a response from a backend AI tool with a loading message state.
A <ChatbotConversationHistoryNav> that can be toggled by the <ChatbotHeaderMenu> in the <ChatbotHeader>.

Props

Chatbot

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content to be displayed in the chatbot
ariaLabel	string	Custom aria label applied to focusable container
className	string	Custom classname for the Chatbot component
displayMode	ChatbotDisplayMode	Display Mode for the Chatbot
innerRef	React.Ref<HTMLDivElement>	Ref applied to chatbot
isVisible	boolean	Visibility flag for the chatbot

ChatbotToggle

*required
Name	Type	Description
tooltipLabelrequired	React.ReactNode	Contents of the tooltip applied to the toggle button
className	string	Class name applied to toggle
closedToggleIcon	() => JSX.Element	An image displayed in the chatbot toggle when it is closed
innerRef	React.Ref<HTMLButtonElement>	Ref applied to toggle
isChatbotVisible	boolean	Flag indicating visibility of the chatbot appended to the toggle
isRound	boolean	Whether toggle is a circle
onToggleChatbot	() => void	Callback fired when toggle button is clicked
openIconTestId	string	Test id applied to default open icon
toggleButtonLabel	string	Accessible label for the toggle button
tooltipProps	Omit<TooltipProps, 'content'>	Props spread to the PF Tooltip component

ChatbotContent

*required
Name	Type	Default	Description
childrenrequired	React.ReactNode		Content to be displayed in the chatbot
className	string		Custom classname for the ChatbotContent 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
testId	string	Custom test id for the WelcomePrompt component

ChatbotFooter

*required
Name	Type	Default	Description
children	React.ReactNode		Children for the Footer that supports MessageBar and FootNote components
className	string		Custom classname for the Footer component

MessageBar

*required
Name	Type	Default	Description
onSendMessagerequired	(message: string) => void		Callback to get the value of input message by user
alwayShowSendButton	boolean		Flag to always to show the send button. By default send button is shown when there is a message in the input field
attachMenuProps	MessageBarWithAttachMenuProps		Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window
buttonProps	{ attach?: { tooltipContent?: string; props?: ButtonProps; inputTestId?: string }; stop?: { tooltipContent?: string; props?: ButtonProps }; send?: { tooltipContent?: string; props?: ButtonProps }; microphone?: { tooltipContent?: { active?: string; inactive?: string }; language?: string; props?: ButtonProps; }; }		Prop to allow passage of additional props to buttons
className	string		Class Name for the MessageBar component
handleAttach	(data: File[], event: DropEvent) => void		Callback function for when attach button is used to upload a file
handleStopButton	(event: React.MouseEvent<HTMLButtonElement>) => void		Callback function for when stop button is clicked
hasAttachButton	boolean	true	Flag to disable/enable the Attach button
hasMicrophoneButton	boolean		Flag to enable the Microphone button
hasStopButton	boolean		Flag to enable the Stop button, used for streaming content
isSendButtonDisabled	boolean		Flag to provide manual control over whether send button is disabled
onChange	(event: React.ChangeEvent<HTMLDivElement>, value: string) => void		A callback for when the text area value changes.

ChatbotFootnote

*required
Name	Type	Description
labelrequired	string	Label to show for the footnote
className	string	Custom classname for the Footnote component
popover	ChatbotFootnotePopover	Config for the popover which opens up when footnote is clicked

MessageBox

*required
Name	Type	Description
childrenrequired	React.ReactNode	Content to be displayed in the message box
announcement	string	Content that can be announced, such as a new message, for screen readers
ariaLabel	string	Custom aria-label for scrollable portion of message box
className	string	Custom classname for the MessageBox component
innerRef	React.Ref<HTMLDivElement>	Ref applied to message box
position	'top' \| 'bottom'	Modifier that controls how content in MessageBox is positioned within the container

Message

*required
Name	Type	Default	Description
avatarrequired	string		Avatar src for the user
rolerequired	'user' \| 'bot'		Role of the user sending the message
actions	{ [key: string]: ActionProps; }		Props for message actions, such as feedback (positive or negative), copy button, share, and listen
attachments	MessageAttachment[]		Array of attachments attached to a message
avatarProps	Omit<AvatarProps, 'alt'>		Any additional props applied to the avatar, for additional customization
botWord	string	'AI'	Label for the English word "AI," used to tag messages with role "bot"
codeBlockProps	{ 'aria-label'?: string; className?: string; }
content	string		Message content
hasRoundAvatar	boolean	true	Whether avatar is round
id	string		Unique id for message
isLoading	boolean		Set this to true if message is being loaded
loadingWord	string	'Loading message'	Label for the English "Loading message," displayed to screenreaders when loading a message
name	string		Name of the user
quickResponseContainerProps	Omit<LabelGroupProps, 'ref'>	{ numLabels: 5 }	Props for quick responses container
quickResponses	QuickResponse[]		Props for quick responses
sources	SourcesCardProps		Sources for message
timestamp	string		Timestamp for the message

MessageBarWithAttachMenuProps

*required
Name	Type	Description
attachMenuItemsrequired	React.ReactNode	Items in menu
isAttachMenuOpenrequired	boolean	Flag to enable whether attach menu is open
onAttachMenuInputChangerequired	(value: string) => void	A callback for when the input value in the menu changes.
onAttachMenuToggleClickrequired	() => void	A callback for when the attachment menu toggle is clicked
setIsAttachMenuOpenrequired	(isOpen: boolean) => void	Callback to close attach menu
attachMenuInputPlaceholder	string	Placeholder for search input
onAttachMenuOnOpenChangeKeys	string[]	Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable.
onAttachMenuOpenChange	(isOpen: boolean) => void	Callback to change the open state of the menu. Triggered by clicking outside of the menu.
onAttachMenuSelect	(event?: React.MouseEvent<Element, MouseEvent>, value?: string \| number) => void	Function callback called when user selects item in menu.

Edit this page on GitHub