Chatbot container

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 response 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:

A <ChatbotConversationHistoryNav> toggled open and closed by the <ChatbotHeaderMenu> in the <ChatbotHeader>.

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 and masthead
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>]/patternfly-ai/chatbot/chatbot-messages) and an initial bot message with response 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

*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

*required
Name	Type	Description
closedToggleIcon	() => JSX.Element	An image displayed in the chatbot toggle when it is closed
isChatbotVisible	boolean	Flag indicating visibility of the chatbot appended to the toggle
onToggleChatbot	() => void	Callback fired when toggle button is clicked
toggleButtonLabel	string	Accessible label for the toggle button
toolTipLabel	React.ReactNode	Contents of the tooltip applied to the toggle button
tooltipProps	Omit<TooltipProps, 'content'>	Props spread to the PF Tooltip component

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

*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

*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

*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
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
hasAttachButton	boolean	true	Flag to disable/enable the Attach button
hasMicrophoneButton	boolean		Flag to enable the Microphone button
isSendButtonDisabled	boolean		Flag to provide manual control over whether send button is disabled

*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

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

*required
Name	Type	Description
contentrequired	string	Message content
rolerequired	'user' \| 'bot'	Role of the user sending the message
actions	{ positive?: ActionProps; negative?: ActionProps; copy?: ActionProps; share?: ActionProps; listen?: ActionProps; }	Props for message actions, such as feedback (positive or negative), copy button, share, and listen
attachmentId	string	Unique identifier of file attached to the message
attachmentName	string	Name of file attached to the message
avatar	string	Avatar src for the user
avatarAltText	string	Alt text placed on the avatar
id	string	Unique id for message
isLoading	boolean	Set this to true if message is being loaded
name	string	Name of the user
onAttachmentClick	() => void	Callback for when attachment label is clicked
onAttachmentClose	(attachmentId: string) => void	Callback for when attachment label is closed
sources	SourcesCardProps
timestamp	string	Timestamp for the message

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