Skip to content

Commit 6e0ca8f

Browse files
committed
docs(design-guidelines): Adds guidance for starting new chats.
1 parent 83ca13b commit 6e0ca8f

File tree

3 files changed

+99
-12
lines changed

3 files changed

+99
-12
lines changed

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

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import "./images.css"
1616

1717
1. **Container:** The window that contains the entire ChatBot experience and all of its components.
1818
1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions.
19-
1. **History menu:** A menu that contains a conversation history of previous chats.
19+
1. **Chat history menu:** A menu that contains a history of previous chats.
2020
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)).
2121
1. **Messages:** Elements of the conversation between a ChatBot and user. More details can be found in the [message guidelines](#messages).
2222
1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
@@ -43,7 +43,7 @@ import "./images.css"
4343

4444
At the start of a new chat, you should welcome your users to the ChatBot with a greeting.
4545

46-
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:
46+
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:
4747

4848
<div class="ws-docs-content-img">
4949
![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
256256
![User message in ChatBot for an AI action command.](./img/ai-action-message.svg)
257257
</div>
258258

259-
### Starting a new conversation
259+
### Starting a new chat
260260

261-
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.
261+
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.
262262

263-
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.
263+
<div class="ws-docs-content-img">
264+
![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg)
265+
</div>
266+
267+
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.
268+
269+
<div class="ws-docs-content-img">
270+
![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/starting-new-chat.svg)
271+
</div>
272+
273+
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.
264274

265275
### Executing user requests
266276

@@ -272,23 +282,23 @@ This can be done using the [quick response](/extensions/chatbot/messages#message
272282
![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
273283
</div>
274284

275-
### Using the conversation history menu
285+
### Using the chat history menu
276286

277-
The ChatBot history menu contains a log of a users' previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.
287+
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.
278288

279289
By clicking into the history menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
280290

281291
<div class="ws-docs-content-img">
282292
![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
283293
</div>
284294

285-
When the conversation history is still loading, display skeleton items:
295+
When the chat history is still loading, display skeleton items:
286296

287297
<div class="ws-docs-content-img">
288298
![Chat history items loading.](./img/loading-state.svg)
289299
</div>
290300

291-
If there's an error loading the conversation history, display an error screen with steps for resolving the error:
301+
If there's an error loading the chat history, display an error screen with steps for resolving the error:
292302

293303
<div class="ws-docs-content-img">
294304
![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
349359

350360
Choose the download action location that best works for your ChatBot:
351361

352-
#### Download via conversation history drawer
362+
#### Download via chat history drawer
353363

354-
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).
364+
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).
355365

356366
<div class="ws-docs-content-img">
357367
![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
367377

368378
#### Download control in header
369379

370-
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.
380+
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.
371381

372382
<div class="ws-docs-content-img">
373383
![Download transcript action within the ChatBot header options menu.](./img/download-header.svg)

0 commit comments

Comments
 (0)