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.):
Defaultanddockeddisplay 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.Fullscreenandembeddeddisplay 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 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 in header
This example illustrates how to use aria-expanded and the <ChatbotHeaderMenu> with the drawer.
Props
ChatbotConversationHistoryNav
| Name | Type | Default | Description |
|---|---|---|---|
| conversationsrequired | Conversation[] | { [key: string]: Conversation[] } | Items shown in conversation history | |
| displayModerequired | ChatbotDisplayMode | Display mode of chatbot | |
| isDrawerOpenrequired | boolean | Flag to indicate whether drawer is open | |
| onDrawerTogglerequired | (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void | Function called to toggle drawer | |
| activeItemId | string | number | ||
| drawerContent | React.ReactNode | Content wrapped by conversation history nav | |
| handleTextInputChange | (value: string) => void | A callback for when the input value changes. Omit to hide input field | |
| newChatButtonText | string | 'New chat' | Text shown in blue button |
| onNewChat | () => void | Callback function for when blue button is clicked. Omit to hide blue "new chat button" | |
| onSelectActiveItem | (event?: React.MouseEvent, itemId?: string | number) => void | Callback function for when an item is selected | |
| searchInputAriaLabel | string | 'Filter menu items' | Aria label for search input |
| searchInputPlaceholder | string | 'Search...' | Placeholder for search input |
Conversation
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Conversation id | |
| textrequired | string | Conversation | |
| icon | React.ReactNode | Conversation icon | |
| label | string | Tooltip content and aria-label applied to conversation options dropdown | |
| menuClassName | string | Optional classname applied to conversation options dropdown | |
| menuItems | React.ReactNode | Dropdown items rendered in conversation options dropdown | |
| noIcon | boolean | Flag for no icon | |
| onSelect | (event?: React.MouseEvent, value?: string | number) => void | Callback for when user selects item. |
