Chatbot conversation history

Conversation history navigation

The chatbot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation.

The <ChatbotConversationHistoryNav> component is a wrapper placed within <Chatbot>, which contains all other chatbot components in drawerContent. There is a focus trap so users can only tab within the drawer while it is open.

The code structure will look like this:

<Chatbot> <ChatbotConversationHistoryNav ... drawerContent={ <> <ChatbotContent> <ChatbotMessageBox> ... <ChatbotMessageBox> </ChatbotContent> <ChatbotFooter ... /> </> }> </ChatbotConversationHistoryNav> </Chatbot>

The conversation history drawer looks different depending on the displayMode of the parent <Chatbot>. (As shown in the main chatbot demo.):

  • Default and docked display modes display the conversation history on top of the rest of the chatbot content, with a PatternFly backdrop between the drawer panel and drawer content.
  • Fullscreen and embedded display modes display the conversation history in line with the drawer content.

Drawer with search and "new chat" button

In the conversation history drawer, users can search previous chatbot conversations via an input field. To customize the placeholder text, use searchInputPlaceholder. Provide an aria label via searchInputAriaLabel.

They can also start new conversations via a "New chat" button. To customize the button label, use newChatButtonText.

Both the search input field and "New chat" buttons are optional.

Drawer content

Drawer with conversation actions

Actions can be added to conversations with menuItems. Optionally, you can also add a className to the menu via menuClassName, change the default aria-label and tooltip content via label, or add an onSelect callback for when a user selects an item.

Drawer content

Props

ChatbotConversationHistoryNav

*required
NameTypeDefaultDescription
conversationsrequiredConversation[] | { [key: string]: Conversation[] }Items shown in conversation history
displayModerequiredChatbotDisplayModeDisplay mode of chatbot
isDrawerOpenrequiredbooleanFlag to indicate whether drawer is open
onDrawerTogglerequired(event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => voidFunction called to toggle drawer
setIsDrawerOpenrequired(bool: boolean) => voidFunction called to close drawer
activeItemIdstring | number
drawerContentReact.ReactNodeContent wrapped by conversation history nav
handleTextInputChange(value: string) => voidA callback for when the input value changes. Omit to hide input field
newChatButtonTextstring'New chat'Text shown in blue button
onNewChat() => voidCallback function for when blue button is clicked. Omit to hide blue "new chat button"
onSelectActiveItem(event?: React.MouseEvent, itemId?: string | number) => voidCallback function for when an item is selected
searchInputAriaLabelstring'Filter menu items'Aria label for search input
searchInputPlaceholderstring'Search...'Placeholder for search input

Conversation

*required
NameTypeDefaultDescription
idrequiredstringConversation id
textrequiredstringConversation
iconReact.ReactNodeConversation icon
labelstringTooltip content and aria-label applied to conversation options dropdown
menuClassNamestringOptional classname applied to conversation options dropdown
menuItemsReact.ReactNodeDropdown items rendered in conversation options dropdown
noIconbooleanFlag for no icon
onSelect(event?: React.MouseEvent, value?: string | number) => voidCallback for when user selects item.