Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 51 additions & 22 deletions package-lock.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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)
Expand All @@ -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:
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.

Expand All @@ -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`.

Expand All @@ -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`.

Expand All @@ -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.
Expand All @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
<div className="pf-chatbot__history-loading">
<div className="pf-chatbot__history-loading-block">
<Skeleton

Check failure on line 7 in packages/module/src/ChatbotConversationHistoryNav/LoadingState.tsx

View workflow job for this annotation

GitHub Actions / call-build-lint-test-workflow / lint

Replace `⏎········screenreaderText={screenreaderText·??·'Loading·chatbot·chat·history'}⏎········fontSize="3xl"⏎········{...rest}⏎·····` with `·screenreaderText={screenreaderText·??·'Loading·chatbot·chat·history'}·fontSize="3xl"·{...rest}`
screenreaderText={screenreaderText ?? 'Loading chatbot conversation history'}
screenreaderText={screenreaderText ?? 'Loading chatbot chat history'}
fontSize="3xl"
{...rest}
/>
Comment on lines 7 to 11
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you replace these lines with the following it should resolve the lint error

<Skeleton screenreaderText={screenreaderText ?? 'Loading chatbot chat history'} fontSize="3xl" {...rest} />

You should end up with all the Skeleton stuff on a single line (line 7) rather than on 5 lines (lines 7 through 11)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Expand Down
4 changes: 2 additions & 2 deletions packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
className,
onMenuToggle,
tooltipProps,
menuAriaLabel = 'Chat history menu',
menuAriaLabel = 'Chat history drawer',
innerRef,
tooltipContent = 'Chat history menu',
tooltipContent = 'Chat history drawer',
isCompact,
...props
}: ChatbotHeaderMenuProps) => {
Expand Down
Loading