Header sections
The chatbot header is persistent, and contains the title for the chatbot window, as well as any related controls and actions.
The <ChatbotHeader> has 2 sections:
<ChatbotHeaderMain>contains the title and an optional menu toggle:<ChatbotHeaderTitle>handles the layout and display of a title or image at different responsive sizes.<ChatbotHeaderMenu>(optional) is placed on the left side of the header and used to toggle a chat history menu.
<ChatbotHeaderActions>contains any additional controls:- The
<ChatbotHeaderSelectorDropdown>component is a standard PatternFly dropdown that matches the chatbot styles. - The
<ChatbotHeaderOptionsDropdown>component is a dropdown with a menu toggle that is intended to be used to update chatbot settings (like the display mode).
- The
Your <ChatbotHeader> code structure should look like this:
<ChatbotHeader>
<ChatbotHeaderMain>
<ChatbotHeaderMenu ... />
<ChatbotHeaderTitle ... />
</ChatbotHeaderMain>
<ChatbotHeaderActions>
<ChatbotHeaderSelectorDropdown ... />
<ChatbotHeaderOptionsDropdown ... />
</ChatbotHeaderActions>
</ChatbotHeader>Header title
By default, <HeaderTitle> renders any children that are passed in. Optionally, you can pass in a displayMode, showOnEmbedded, showOnDocked, showOnFullScreen, and/or showOnDefault to render content conditionally.
Display mode
Default
Header options
There are a variety of options and customizations you can make to the header, to adjust how information is displayed, or to add additional controls.
In this example, select the respective checkbox to toggle these features:
- Menu: Users can select the menu toggle to open a menu of additional options or actions.
- Left-aligned logo
- Centered logo
- Selector dropdown: Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
- Options dropdown: Users can select chatbot options from a menu. For example, they can switch between chatbot display modes.
Variant
Chatbot Extension
Props
ChatbotHeader
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content to be displayed in the chatbot header | |
| className | string | Custom classname for the header component |
ChatbotHeaderMain
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Menu and/or chatbot header components | |
| className | string | Custom classname for the header component |
ChatbotHeaderMenu
| Name | Type | Default | Description |
|---|---|---|---|
| onMenuTogglerequired | () => void | Callback function to attach to menu toggle on top right of chatbot header. | |
| className | string | Custom classname for the header component | |
| menuAriaLabel | string | 'Toggle menu' | Aria label for menu |
| tooltipProps | TooltipProps | Props spread to the PF Tooltip component wrapping the display mode dropdown |
ChatbotHeaderActions
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content to be displayed in the chatbot header | |
| className | string | Custom classname for the header component |
ChatbotHeaderTitle
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content to be displayed in the chatbot header | |
| className | string | Custom classname for the header component | |
| displayMode | ChatbotDisplayMode | Display mode of chatbot, in case you want to conditionally show a title | |
| showOnDefault | React.ReactNode | string | Content to display by default; this will be shown if a case is not explicitly set | |
| showOnDocked | React.ReactNode | string | Content to display on docked screen | |
| showOnEmbedded | React.ReactNode | string | Content to display on overlay screen | |
| showOnFullScreen | React.ReactNode | string | Content to display on full screen |
ChatbotHeaderOptionsDropdown
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content to be displayed in the chatbot header | |
| className | string | Custom classname for the header component | |
| menuToggleAriaLabel | string | 'Chatbot options' | Aria label for menu toggle |
| tooltipProps | TooltipProps | Props spread to the PF Tooltip component wrapping the display mode dropdown |
ChatbotHeaderSelectorDropdown
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Content to be displayed in the chatbot header | |
| valuerequired | string | Value of the selected dropdown item | |
| className | string | Custom classname for the header component | |
| menuToggleAriaLabel | string | Aria label for menu toggle | |
| tooltipContent | string | 'Chatbot selector' | Text displayed in Tooltip wrapping the display mode dropdown |
| tooltipProps | TooltipProps | Props spread to the PF Tooltip component wrapping the display mode dropdown |
