From 6e0ca8f2ac90724481e8ba8f2b4fde4f5585db18 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 16 Jan 2026 10:11:26 -0500 Subject: [PATCH 1/2] docs(design-guidelines): Adds guidance for starting new chats. --- .../extensions/chatbot/design-guidelines.md | 34 +++++++---- .../chatbot/img/new-chat-in-nav.svg | 21 +++++++ .../chatbot/img/starting-new-chat.svg | 56 +++++++++++++++++++ 3 files changed, 99 insertions(+), 12 deletions(-) create mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-in-nav.svg create mode 100644 packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md index 14140e502..edda949df 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md @@ -16,7 +16,7 @@ import "./images.css" 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. **History menu:** A menu that contains a conversation history of previous chats. +1. **Chat history menu:** A menu that contains a history of 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. @@ -43,7 +43,7 @@ import "./images.css" At the start of a new chat, you should welcome your users to the ChatBot with a greeting. -If you have user details from their account information, you can personalize this greeting with their username or name. If you don't have this information, or if you'd prefer to not use their personal details, you should instead introduce the ChatBot: +As much as possible, the suggested prompts should consider the user’s location in the service or application, or the situation their project is undergoing. If you have user details from their account information, you can personalize this greeting with their username or name. If you don't have this information, or if you'd prefer to not use their personal details, you should instead introduce the ChatBot:
![Welcome messages.](./img/welcome-message.svg) @@ -256,11 +256,21 @@ When a ChatBot is launches via an AI-supported action, the action should be sent ![User message in ChatBot for an AI action command.](./img/ai-action-message.svg)
-### Starting a new conversation +### Starting a new chat -Each time a user begins a new conversation, display a [welcome message, with prompts](#welcome-message) that help them learn what the ChatBot can help with. +The default approach for users to create a new chat is by using the **New chat** button at the top of the [chat history menu](#using-the-chat-history-menu). The "pen to square" icon is used to identify new chat actions. -As much as possible, the suggested prompts should consider the user’s location in the service or application, or the situation their project is undergoing. +
+![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg) +
+ +Alternatively, you can choose to surface the button as an icon button in the header (using the "pen to square" icon) or as a menu item in the options menu. + +
+![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/starting-new-chat.svg) +
+ +Each time a user begins a new chat, display a [welcome message, with prompts](#welcome-message) that help them learn what the ChatBot can help with. ### Executing user requests @@ -272,9 +282,9 @@ 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) -### Using the conversation history menu +### Using the chat history menu -The ChatBot history menu contains a log of a users' previous chats. Clicking the menu icon opens a side drawer in the ChatBot window. +The chat history menu contains a log of a users' previous ChatBot conversations. 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. @@ -282,13 +292,13 @@ By clicking into the history menu, users can search through previous conversatio ![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg) -When the conversation history is still loading, display skeleton items: +When the chat history is still loading, display skeleton items:
![Chat history items loading.](./img/loading-state.svg)
-If there's an error loading the conversation history, display an error screen with steps for resolving the error: +If there's an error loading the chat history, display an error screen with steps for resolving the error:
![Error state in chat history.](./img/error-state.svg) @@ -349,9 +359,9 @@ For guidance, refer to our download transcripts demo, which opens a Markdown fil Choose the download action location that best works for your ChatBot: -#### Download via conversation history drawer +#### Download via chat history drawer -If your ChatBot uses a conversation 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 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).
![Expanded menu for previous chat in the history window, which shows a download option.](./img/download-chat-history.svg) @@ -367,7 +377,7 @@ To allow users to download individual bot messages, the message actions can incl #### Download control in header -If you don't use a conversation 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 a chat history drawer, you can place an option to download the transcript for the active chat within the header options menu.
![Download transcript action within the ChatBot header options menu.](./img/download-header.svg) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-in-nav.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-in-nav.svg new file mode 100644 index 000000000..5741c75ec --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/new-chat-in-nav.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg new file mode 100644 index 000000000..16048be40 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 3f98a48dd61a6738749f89165815ad3a2a70d2ef Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 20 Jan 2026 13:26:19 -0500 Subject: [PATCH 2/2] A few changes. --- .../extensions/chatbot/design-guidelines.md | 12 +++--- .../chatbot/img/starting-new-chat.svg | 41 ++++++++++--------- 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md index edda949df..885a11c78 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/design-guidelines.md @@ -258,20 +258,20 @@ When a ChatBot is launches via an AI-supported action, the action should be sent ### Starting a new chat -The default approach for users to create a new chat is by using the **New chat** button at the top of the [chat history menu](#using-the-chat-history-menu). The "pen to square" icon is used to identify new chat actions. +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).
-![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg) +![A blue "New chat" button at the top right of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg)
-Alternatively, you can choose to surface the button as an icon button in the header (using the "pen to square" icon) or as a menu item in the options menu. +Alternatively, you can choose to surface the "New chat" button as an icon button in the header. For this approach, the "pen to square" icon is displayed in the button and a "New chat" tooltip should appear on hover and focus.
-![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/starting-new-chat.svg) +![An icon button is placed at the start of the ChatBot header, prior to a hamburger menu. It contains the visual of a pen placed within a square and is in a hover state, with a darker gray background and a black tooltip that says "New chat."](./img/starting-new-chat.svg)
-Each time a user begins a new chat, display a [welcome message, with prompts](#welcome-message) that help them learn what the ChatBot can help with. - ### Executing user requests Instead of automatically initiating what sounds like a request from a user, the ChatBot should ask users to confirm or deny their intent. This differentiates moments where users are simply asking about feasibility, rather than actually making a request. diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg b/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg index 16048be40..9afb379cd 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg +++ b/packages/module/patternfly-docs/content/extensions/chatbot/img/starting-new-chat.svg @@ -1,5 +1,6 @@ - - + + + @@ -7,8 +8,9 @@ - - + + + @@ -17,25 +19,21 @@ - - - + + + + + + + - - - - - - - - - - - - + + + + - + @@ -52,5 +50,8 @@ + + +