@@ -310,14 +310,12 @@ This can be done using the [quick response](/extensions/chatbot/messages#message
-### Using the chat history menu
+### Using the chat history drawer
-The ChatBot history menu contains a log of a user's previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.
-
-By clicking into the history menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
+The chat history drawer can be opened via the hamburger menu in the ChatBot header. In this drawer, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
-
+
When the chat history is still loading, display skeleton items:
@@ -383,16 +381,16 @@ If a message attachment fails, an error message should share the reason for fail
You can enable users to download chat transcripts, for their personal records or to share with others. When users choose to download a transcript, you can choose how you want to configure the behavior in your ChatBot.
-For guidance, refer to our download transcripts demo, which opens a Markdown file for a conversation within a new tab.
+For guidance, refer to our [chat transcripts demo](/extensions/chatbot/overview/demo#chat-transcripts), which opens a Markdown file for a conversation within a new tab.
Choose the download action location that best works for your ChatBot:
#### Download via chat history drawer
-If your ChatBot uses a chat history drawer, you can provide a download option in the [actions menu linked to a previous conversation](/extensions/chatbot/ui#drawer-with-conversation-actions).
+If your ChatBot uses chat history, you can provide a download option in the [actions menu linked to a previous conversation](/extensions/chatbot/ui#drawer-with-conversation-actions).
-
+
#### Download message response action
@@ -405,7 +403,7 @@ To allow users to download individual bot messages, the message actions can incl
#### Download control in header
-If you don't use a chat history drawer, you can place an option to download the transcript for the active chat within the header options menu.
+If you don't use chat history, you can place an option to download the transcript for the active chat within the header options menu.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx
index 1d44899ac..8c9c866da 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx
@@ -80,7 +80,7 @@ export const BasicDemo: FunctionComponent = () => {
showAll && setShowAll(!showAll);
}}
name="basic-inline-radio"
- label="With menu"
+ label="With chat history drawer"
id="menu"
/>
` has 2 sections:
-- `` contains the title and an optional menu toggle or new chat button:
+- `` contains the title and an optional hamburger menu toggle or new chat button:
- `` handles the layout and display of a title or image at different responsive sizes.
- - `` (optional) is placed on the left side of the header and used to toggle a chat history menu.
+ - `` (optional) is placed on the left side of the header and used to toggle a chat history drawer.
- `` (optional) is placed on the left side of the header and used to initiate a new chat.
- `` contains any additional controls:
- The `` component is a standard PatternFly dropdown that matches the ChatBot styles.
@@ -227,8 +227,8 @@ There are a variety of options and customizations you can make to the header, to
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.
-- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
+- **Chat history drawer:** Users can select the hamburger menu toggle to open the [chat history drawer](#chat-history).
+- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [chat history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
- **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.
@@ -339,11 +339,11 @@ This example shows a simplified method of handling the "thinking" animation: aft
```
-## Navigation
+## Chat history
-### Side nav in a drawer
+### Chat history drawer
-The ChatBot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation.
+A user's chat history is contained in an interactive drawer, where they can interact with previous conversations or start a new conversation.
The `` component is a wrapper placed within ``, 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.
@@ -367,14 +367,14 @@ The code structure will look like this:
```
-The conversation history drawer looks different depending on the `displayMode` of the parent ``. (As shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
+The chat history drawer looks different depending on the `displayMode` of the parent `` (as shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
-- `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.
+- `Default` and `docked` display modes display the chat 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 chat 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`.
+In the chat 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`.
@@ -386,7 +386,7 @@ Both the search input field and "New chat" buttons are optional. The `reverseBut
### Drawer with search actions
-You can customize the search experience within the conversation history drawer via the `searchActionStart` and `searchActionEnd` props, which provide additional search controls before and after the input field. These props are useful for adding filtering, sorting, or other search-related functionality.
+You can customize the search experience within the chat history drawer via the `searchActionStart` and `searchActionEnd` props, which provide additional search controls before and after the input field. These props are useful for adding filtering, sorting, or other search-related functionality.
You can also add a visual divider between the drawer head and the title by setting `hasDrawerHeadDivider` to `true`.
@@ -404,15 +404,15 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
### Pinning conversations
-To help users track important conversations, add a "pin" option to the conversation action menus. This action moves a conversation to a dedicated "pinned" section at the top of the history drawer for quick access. Pinned items should contain an "unpin" option, so that users can remove pinned conversations as needed.
+To help users track important conversations, add a "pin" option to the conversation action menus. This action moves a conversation to a dedicated "pinned" section at the top of the chat history drawer for quick access. Pinned items should contain an "unpin" option, so that users can remove pinned conversations as needed.
```js file="./ChatbotHeaderDrawerWithPin.tsx"
```
-### Renaming conversations in history drawer
+### Renaming conversations in chat history drawer
-You can allow users to rename a conversation in the history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:
+You can allow users to rename a conversation in the chat history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:
- When the modal opens, focus is placed at the end of the text input.
- When the modal closes, focus goes back to the action toggle that was previously opened.
@@ -433,7 +433,7 @@ If you're showing a conversation that is already active, you can set the `active
### Resizable drawer
-By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
+By default, the chat history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their chat history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`` props](/components/drawer#props), [`` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
index 8814917f7..a47d413cf 100644
--- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
+++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
@@ -95,7 +95,7 @@ This demo displays a basic ChatBot, which includes:
- Sending a message to the ChatBot.
- Receiving a response from a backend AI tool with a loading message state.
-6. A [``](/extensions/chatbot/ui#navigation) toggled open and closed by the ` in the ``.
+6. A [``](/extensions/chatbot/ui#chat-history) toggled open and closed by the ` in the ``.
7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/extensions/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
@@ -126,7 +126,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
- [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
- Sending a message to the ChatBot.
- Receiving a response from a backend AI tool with a loading message state.
-6. A [``](/extensions/chatbot/ui#navigation) that can be toggled by the ` in the ``.
+6. A [``](/extensions/chatbot/ui#chat-history) that can be toggled by the ` in the ``.
```js file="./EmbeddedChatbot.tsx" isFullscreen
@@ -196,7 +196,7 @@ This demo illustrates how you could add downloadable transcripts to your ChatBot
A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.
-A conversation transcript includes details from the entirety of a ChatBot conversation. To download a sample conversation transcript in this demo, open the chat history menu and click "Download" in the options menu for the conversation.
+A conversation transcript includes details from the entirety of a ChatBot conversation. To download a sample conversation transcript in this demo, open the chat history drawer and click "Download" in the options menu for the conversation.
In this example, file download is implemented with [file-saver](https://www.npmjs.com/package/file-saver).
diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
index 7bef8c63a..e030dcff3 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
+++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
@@ -307,7 +307,7 @@ describe('ChatbotConversationHistoryNav', () => {
isLoading
/>
);
- expect(screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
+ expect(screen.getByRole('dialog', { name: /Loading chatbot chat history/i })).toBeTruthy();
expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
});
diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
index 8da852c9c..d1f2bd533 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
+++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
@@ -84,7 +84,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
activeItemId?: string | number;
/** Callback function for when an item is selected */
onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
- /** Items shown in conversation history */
+ /** Items shown in chat history */
conversations: Conversation[] | { [key: string]: Conversation[] };
/** Additional button props for new chat button. */
newChatButtonProps?: ButtonProps;
diff --git a/packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx b/packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx
index c43149af1..f22c8714d 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx
+++ b/packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx
@@ -4,11 +4,7 @@ import type { FunctionComponent } from 'react';
export const LoadingState: FunctionComponent = ({ screenreaderText, ...rest }: SkeletonProps) => (
-
+
diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx
index fbe3e11d9..2a9055963 100644
--- a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx
+++ b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx
@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
const onMenuToggle = jest.fn();
render();
- fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
+ fireEvent.click(screen.getByRole('button', { name: 'Chat history drawer' }));
expect(onMenuToggle).toHaveBeenCalled();
});
diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx
index 3d54feaa5..c2eef3f9a 100644
--- a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx
+++ b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx
@@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent = ({
className,
onMenuToggle,
tooltipProps,
- menuAriaLabel = 'Chat history menu',
+ menuAriaLabel = 'Chat history drawer',
innerRef,
- tooltipContent = 'Chat history menu',
+ tooltipContent = 'Chat history drawer',
isCompact,
...props
}: ChatbotHeaderMenuProps) => {