Merge pull request #818 from edonehoo/iss796

docs(chatbot): Updates docs to ensure chat history drawer is consistently named.

Author: thatblindgeye

package-lock.json

@@ -40,7 +40,7 @@ Explore our documentation, which covers both the components you'll need to build
     - [Toggle](/extensions/chatbot/ui#toggle)
     - [Header](/extensions/chatbot/ui#header)
     - [Footer](/extensions/chatbot/ui#footer)
-    - [Navigation](/extensions/chatbot/ui#navigation)
+    - [Chat history drawer](/extensions/chatbot/ui#chat-history)
     - [Modals](/extensions/chatbot/ui#modals)
 - Messages: Components that customize features related to the conversation  
     - [Bot and user messages](/extensions/chatbot/messages)

packages/module/patternfly-docs/content/extensions/chatbot/chatbot.md

@@ -15,8 +15,8 @@ import "./images.css"
 </div>
 
 1. **Container:** The window that contains the entire ChatBot experience and all of its components.
-1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions.
-1. **Chat history menu:** A menu that contains a history of previous chats.
+1. **Header:** A persistent region at the top of the ChatBot window that contains chat history, branding, and actions.
+1. **Chat history drawer:** A menu used to access previous chats.
 1. **Options menu:** A menu that contains settings that are relevant to your product. This typically includes display options (more details in the [ChatBot variations section](#variations)) and other general settings (more details in the [ChatBot settings and preferences section](#chatbot-settings-and-preferences)).
 1. **Messages:** Elements of the conversation between a ChatBot and user. More details can be found in the [message guidelines](#messages).
 1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
@@ -288,7 +288,7 @@ When a ChatBot is launched via an AI-supported action, the action should be sent
 
 Each time a user begins a new chat, display a [welcome message](#welcome-message), with prompts that provide initial suggestions and indicate the actions that the ChatBot can take.
 
-The default approach for users to create a new chat is by clicking the "New chat" button (which contains a "pen to square" icon) placed at the top of the [chat history menu](#using-the-chat-history-menu). 
+The default approach for users to create a new chat is by clicking the "New chat" button (which contains a "pen to square" icon) placed at the top of the [chat history drawer](#using-the-chat-history-drawer). 
 
 <div class="ws-docs-content-img">
 ![A blue "New chat" button at the top right of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg)
@@ -310,14 +310,12 @@ This can be done using the [quick response](/extensions/chatbot/messages#message
 ![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
 </div>
 
-### 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.
 
 <div class="ws-docs-content-img">
-![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
+![Chat history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
 </div>
 
 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).
 
 <div class="ws-docs-content-img">
-![Expanded menu for previous chat in the history window, which shows a download option.](./img/download-chat-history.svg)
+![Expanded menu for previous chat in the chat history drawer, which shows a download option.](./img/download-chat-history.svg)
 </div>
 
 #### 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. 
 
 <div class="ws-docs-content-img">
 ![Download transcript action within the ChatBot header options menu.](./img/download-header.svg)

packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -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"
         />
         <Checkbox

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -189,9 +189,9 @@ The ChatBot header is persistent, and contains the title for the ChatBot window,
 
 The `<ChatbotHeader>` has 2 sections:
 
-- `<ChatbotHeaderMain>` contains the title and an optional menu toggle or new chat button:
+- `<ChatbotHeaderMain>` contains the title and an optional hamburger menu toggle or new chat button:
   - `<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.
+  - `<ChatbotHeaderMenu>` (optional) is placed on the left side of the header and used to toggle a chat history drawer.
   - `<ChatbotHeaderNewChatButton>` (optional) is placed on the left side of the header and used to initiate a new chat.
 - `<ChatbotHeaderActions>` contains any additional controls:
   - The `<ChatbotHeaderSelectorDropdown>` 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 `<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.
 
@@ -367,14 +367,14 @@ The code structure will look like this:
 </Chatbot>
 ```
 
-The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (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 `<Chatbot>` (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 [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
 

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.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 [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#chat-history) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
 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 [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#chat-history) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
 ```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).
 

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -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();
   });
 

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.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;

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -4,11 +4,7 @@ import type { FunctionComponent } from 'react';
 export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
   <div className="pf-chatbot__history-loading">
     <div className="pf-chatbot__history-loading-block">
-      <Skeleton
-        screenreaderText={screenreaderText ?? 'Loading chatbot conversation history'}
-        fontSize="3xl"
-        {...rest}
-      />
+      <Skeleton screenreaderText={screenreaderText ?? 'Loading chatbot chat history'} fontSize="3xl" {...rest} />
     </div>
     <div className="pf-chatbot__history-loading-block">
       <Skeleton fontSize="sm" width="70%" {...rest} />

packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
   it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
     const onMenuToggle = jest.fn();
     render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat history drawer' }));
 
     expect(onMenuToggle).toHaveBeenCalled();
   });