Chatbot container

Basic chatbot

This demo displays a basic chatbot, which includes:

  1. The <ChatbotToggle> that controls the <Chatbot> container.
  2. A <ChatbotHeader> with all built sub-components laid out, including a <ChatbotHeaderTitle> that changes its presentation depending on the display mode.
  3. The ability to swap display modes via <ChatbotHeaderOptionsDropdown>
  4. <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
  1. 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.
  1. A <ChatbotConversationHistoryNav> toggled open and closed by the <ChatbotHeaderMenu> in the <ChatbotHeader>.
Basic chatbot screenshot

Embedded chatbot

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

  1. A PatternFly page with a sidebar and masthead
  2. A <Chatbot> container.
  3. A <ChatbotHeader> with all built sub-components laid out, including a <ChatbotHeaderTitle>
  4. <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
  5. 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.
  6. A <ChatbotConversationHistoryNav> that can be toggled by the <ChatbotHeaderMenu> in the <ChatbotHeader>.
Embedded chatbot screenshot

Props

Chatbot

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent to be displayed in the chatbot
classNamestringCustom classname for the Chatbot component
displayModeChatbotDisplayModeChatbotDisplayMode.defaultDisplay Mode for the Chatbot
isVisiblebooleantrueVisibility flag for the chatbot

ChatbotToggle

*required
NameTypeDefaultDescription
closedToggleIcon() => JSX.ElementAn image displayed in the chatbot toggle when it is closed
isChatbotVisiblebooleanFlag indicating visibility of the chatbot appended to the toggle
onToggleChatbot() => voidCallback fired when toggle button is clicked
toggleButtonLabelstringAccessible label for the toggle button
toolTipLabelReact.ReactNodeContents of the tooltip applied to the toggle button
tooltipPropsOmit<TooltipProps, 'content'>Props spread to the PF Tooltip component

ChatbotContent

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent to be displayed in the chatbot
classNamestringCustom classname for the ChatbotContent component

ChatbotWelcomePrompt

*required
NameTypeDefaultDescription
descriptionrequiredstringWelcome message
titlerequiredstringTitle for the welcome message
classNamestringCustom classname for the WelcomePrompt component
promptsWelcomePrompt[]Custom basic prompts to help users coming for the first time to chatbot

ChatbotFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren for the Footer that supports MessageBar and FootNote components
classNamestringCustom classname for the Footer component

MessageBar

*required
NameTypeDefaultDescription
onSendMessagerequired(message: string) => voidCallback to get the value of input message by user
alwayShowSendButtonbooleanFlag to always to show the send button. By default send button is shown when there is a message in the input field
attachMenuPropsMessageBarWithAttachMenuPropsProps to enable a menu that opens when the Attach button is clicked, instead of the attachment window
classNamestringClass Name for the MessageBar component
handleAttach(data: File[], event: DropEvent) => voidCallback function for when attach button is used to upload a file
hasAttachButtonbooleantrueFlag to disable/enable the Attach button
hasMicrophoneButtonbooleanFlag to enable the Microphone button
isSendButtonDisabledbooleanFlag to provide manual control over whether send button is disabled

ChatbotFootnote

*required
NameTypeDefaultDescription
labelrequiredstringLabel to show for the footnote
classNamestringCustom classname for the Footnote component
popoverChatbotFootnotePopoverConfig for the popover which opens up when footnote is clicked

MessageBox

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeContent to be displayed in the message box
announcementstringContent that can be announced, such as a new message, for screen readers
ariaLabelstring'Scrollable message log'Custom aria-label for scrollable portion of message box
classNamestringCustom classname for the MessageBox component

Message

*required
NameTypeDefaultDescription
contentrequiredstringMessage 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
attachmentIdstringUnique identifier of file attached to the message
attachmentNamestringName of file attached to the message
avatarstringAvatar src for the user
idstringUnique id for message
isLoadingbooleanSet this to true if message is being loaded
namestringName of the user
onAttachmentClick() => voidCallback for when attachment label is clicked
onAttachmentClose(attachmentId: string) => voidCallback for when attachment label is closed
sourcesSourcesCardProps
timestampstringTimestamp for the message

MessageBarWithAttachMenuProps

*required
NameTypeDefaultDescription
attachMenuItemsrequiredReact.ReactNodeItems in menu
isAttachMenuOpenrequiredbooleanFlag to enable whether attach menu is open
onAttachMenuInputChangerequired(value: string) => voidA callback for when the input value in the menu changes.
onAttachMenuToggleClickrequired() => voidA callback for when the attachment menu toggle is clicked
setIsAttachMenuOpenrequired(isOpen: boolean) => voidCallback to close attach menu
attachMenuInputPlaceholderstringPlaceholder for search input
onAttachMenuOnOpenChangeKeysstring[]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) => voidCallback to change the open state of the menu. Triggered by clicking outside of the menu.
onAttachMenuSelect(event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidFunction callback called when user selects item in menu.