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.

Compact ChatBot

This demo displays a basic compact ChatBot

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>.

Inline drawer ChatBot

This demo displays a ChatBot in a static, inline drawer. This demo includes:

An empty PatternFly page with a sidebar and masthead.
A basic ChatBot, placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.

Note: The inline drawer ChatBot is built to fit and perform within a drawer, but the implementation of the drawer is up to you. This drawer can look different for each product, but will often be placed to the side of the page, inline with the page content.

Comparing ChatBots

To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.

Your code structure should look like this:

<Page ... >
  <div className="pf-chatbot__compare-container">
    <Compare ... />
    <ChatbotFooter ... >
      <MessageBar ... />
    </ChatbotFooter>
  </div>
</Page>

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
isCompact	boolean	Density of information within the 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	Default	Description
descriptionrequired	string		Welcome message
titlerequired	string		Title for the welcome message
className	string		Custom classname for the WelcomePrompt component
isCompact	boolean	false
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	Description
children	React.ReactNode	Children for the Footer that supports MessageBar and FootNote components
className	string	Custom classname for the Footer component
isCompact	boolean

MessageBar

*required
Name	Type	Description
onSendMessagerequired	(message: string \| number) => void	Callback to get the value of input message by user
allowedFileTypes	Accept	Specifies the file types accepted by the attachment upload component. Files that don't match the accepted types will be disabled in the file picker. For example, allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
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; tooltipProps?: Omit<TooltipProps, 'content'>; }; stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> }; send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> }; microphone?: { tooltipContent?: { active?: string; inactive?: string }; language?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'>; }; }	Prop to allow passage of additional props to buttons
className	string	Class Name for the MessageBar component
displayMode	ChatbotDisplayMode	Display mode of chatbot, if you want to message bar to resize when the display mode changes
dropzoneProps	DropzoneOptions	Additional props passed to react-dropzone
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	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
innerRef	React.Ref<HTMLTextAreaElement>	Ref applied to message bar textarea, for use with focus or other custom behaviors
isAttachmentDisabled	boolean	Whether attachments are disabled
isCompact	boolean	Whether message bar is compact
isSendButtonDisabled	boolean	Flag to provide manual control over whether send button is disabled
listeningText	string	Placeholder text when listening
maxFiles	number	Max number of files allowed
maxSize	number	Max file size allowed
minSize	number	Minimum file size allowed
onAttach	<T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void	Callback when file(s) are attached
onAttachRejected	(fileRejections: FileRejection[], event: DropEvent) => void	Callback function for AttachButton when an attachment fails
onChange	(event: React.ChangeEvent<HTMLTextAreaElement>, value: string \| number) => void	A callback for when the text area value changes.
placeholder	string	Placeholder for message input
validator	<T extends File>(file: T) => FileError \| readonly FileError[] \| null	Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information

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	Default	Description
childrenrequired	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	'Scrollable message log'	Custom aria-label for scrollable portion of message box
className	string		Custom classname for the MessageBox component
enableSmartScroll	boolean	false	Flag to enable automatic scrolling when new messages are added
Deprecated: innerRef	React.Ref<HTMLDivElement>		innerRef has been deprecated. Use ref instead. Ref applied to message box
onScrollToBottomClick	() => void		Click handler for additional logic for when scroll to bottom jump button is clicked
onScrollToTopClick	() => void		Click handler for additional logic for when scroll to top jump button is clicked
position	'top' \| 'bottom'	'top'	Modifier that controls how content in MessageBox is positioned within the container

Message

*required
Name	Type	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
additionalRehypePlugins	PluggableList	Additional rehype plugins passed from the consumer
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	Label for the English word "AI," used to tag messages with role "bot"
cancelWord	string	Label for the English word "Cancel" used in edit mode.
codeBlockProps	{ /** Aria label applied to code blocks / 'aria-label'?: string; /* Class name applied to code blocks / className?: string; /* Whether code blocks are expandable / isExpandable?: boolean; /* Length of text initially shown in expandable code blocks; defaults to 10 characters / maxLength?: number; /* Additional props passed to expandable section if isExpandable is applied / expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>; /* Additional props passed to expandable toggle if isExpandable is applied / expandableSectionToggleProps?: ExpandableSectionToggleProps; /* Link text applied to expandable toggle when expanded / expandedText?: string; /* Link text applied to expandable toggle when collapsed */ collapsedText?: string; }	Props for code blocks
content	string	Message content
editFormProps	FormProps	Props for edit form
editPlaceholder	string	Placeholder for edit input
error	AlertProps	Optional inline error message that can be displayed in the message
extraContent	MessageExtraContent	Extra Message content
hasRoundAvatar	boolean	Whether avatar is round
id	string	Unique id for message
innerRef	Ref<HTMLDivElement>	Ref applied to message
isCompact	boolean	Sets message to compact styling.
isEditable	boolean	Whether message is in edit mode
isLiveRegion	boolean	Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology.
isLoading	boolean	Set this to true if message is being loaded
linkProps	ButtonProps	Props for links
loadingWord	string	Label for the English "Loading message," displayed to screenreaders when loading a message
name	string	Name of the user
onEditCancel	(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback functionf or when edit cancel update button is clicked
onEditUpdate	(event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void	Callback function for when edit mode update button is clicked
openLinkInNewTab	boolean	Whether to open links in message in new tab.
quickResponseContainerProps	Omit<LabelGroupProps, 'ref'>	Props for quick responses container
quickResponses	QuickResponse[]	Props for quick responses
quickStarts	{ quickStart: QuickStart; onSelectQuickStart: (id?: string) => void; minuteWord?: string; minuteWordPlural?: string; prerequisiteWord?: string; prerequisiteWordPlural?: string; quickStartButtonAriaLabel?: string; className?: string; onClick?: () => void; action?: QuickstartAction; }	Props for QuickStart card
sources	SourcesCardProps	Sources for message
tableProps	Required<Pick<TableProps, 'aria-label'>> & TableProps	Props for table message. It is important to include a detailed aria-label that describes the purpose of the table.
timestamp	string	Timestamp for the message
updateWord	string	Label for the English word "Update" used in edit mode.
userFeedbackComplete	Omit<UserFeedbackCompleteProps, 'ref'>	Props for user feedback response
userFeedbackForm	Omit<UserFeedbackProps, 'ref'>	Props for user feedback card

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.

CompareProps

*required
Name	Type	Description
firstChildrequired	React.ReactNode	First of two children to render
firstChildDisplayNamerequired	string	Display name for first child, used in mobile toggle
secondChildrequired	React.ReactNode	Second of two children to render
secondChildDisplayNamerequired	string	Display name for second child, used in mobile toggle
onToggleClick	(event: MouseEvent \| React.MouseEvent<any, MouseEvent> \| React.KeyboardEvent<Element>) => void	Callback for when mobile toggle is used
toggleGroupAriaLabel	string	Aria label for mobile toggle group

Edit this page on GitHub