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
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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)
Expand Down Expand Up @@ -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)
</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.
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.
<div class="ws-docs-content-img">
![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg)
</div>

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.

<div class="ws-docs-content-img">
![A blue "new chat" button at the top of a drawer labeled "Chat history".](./img/starting-new-chat.svg)
</div>

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

Expand All @@ -272,23 +282,23 @@ 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 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.

<div class="ws-docs-content-img">
![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)
Expand Down Expand Up @@ -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).

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

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