Merge pull request #793 from edonehoo/iss437

docs(design-guidelines): Adds guidelines around starting new chats.

Author: andrew-ronaldson

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: 
 
 <div class="ws-docs-content-img">
 ![Welcome messages.](./img/welcome-message.svg)
@@ -284,11 +284,21 @@ When a ChatBot is launched via an AI-supported action, the action should be sent
 ![User message in ChatBot for an AI action command.](./img/ai-action-message.svg)
 </div>
 
-### 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.
+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.
 
-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. 
+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). 
+
+<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)
+</div>
+
+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.
+
+<div class="ws-docs-content-img">
+![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)
+</div>
 
 ### Executing user requests
 
@@ -300,7 +310,7 @@ 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 conversation history menu
+### Using the chat history menu
 
 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.
 
@@ -310,13 +320,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)
 </div>
 
-When the conversation history is still loading, display skeleton items:
+When the chat history is still loading, display skeleton items:
 
 <div class="ws-docs-content-img">
 ![Chat history items loading.](./img/loading-state.svg)
 </div>
 
-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:
 
 <div class="ws-docs-content-img">
 ![Error state in chat history.](./img/error-state.svg)
@@ -377,9 +387,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).
 
 <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)
@@ -395,7 +405,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. 
 
 <div class="ws-docs-content-img">
 ![Download transcript action within the ChatBot header options menu.](./img/download-header.svg)