Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(chatbot): Updates design guidelines with new info. #411

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
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 @@ -12,11 +12,13 @@ It is important to leverage AI in a way that improves the experiences of your us

_Only use this ChatBot when it adds value to your users' experiences._ Don't use it simply for the sake of novelty—your users will only be excited to interact with a new ChatBot feature if it directly helps them reach their goals.

## How to use the ChatBot
## ChatBot demos

To illustrate the capabilities of the ChatBot, we offer a few demos:
To illustrate the capabilities of the ChatBot, including more complex interaction patterns, we've created these demos:
- [Basic ChatBot](/patternfly-ai/chatbot/overview/demo#basic-chatbot)
- [Embedded ChatBot](/patternfly-ai/chatbot/overview/demo#embedded-chatbot)
- [Comparing ChatBots](/patternfly-ai/chatbot/overview/demo/#comparing-chatbots)
- [Message feedback](/patternfly-ai/chatbot/messages/demo#message-feedback)
- [ChatBot attachments via file upload](/patternfly-ai/chatbot/messages/demo#attach-via-upload-button-in-message-bar)
- [ChatBot attachments via built-in menu](/patternfly-ai/chatbot/messages/demo#attach-via-menu-of-options-in-message-bar)

Expand All @@ -31,6 +33,7 @@ Explore our documentation, which covers both ChatBot UI components and message-r
- [Header](/patternfly-ai/chatbot/ui#header)
- [Footer](/patternfly-ai/chatbot/ui#footer)
- [Navigation](/patternfly-ai/chatbot/ui#navigation)
- [Modals](/patternfly-ai/chatbot/ui#modals)
- Messages
- [Bot and user messages](/patternfly-ai/chatbot/messages)
- [File attachments](/patternfly-ai/chatbot/messages#attachments)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,16 @@ source: design-guidelines

import "./images.css"

## Elements
## Elements

<div class="ws-docs-content-img">
<div class="ws-docs-content-img" >
![Main elements of a ChatBot.](./img/chatbot-elements.svg)
</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. **Navigation:** A menu that contains navigational options, including access to the conversation history.
1. **Options menu:** Contains display options and other settings. More details can be found in the [ChatBot variations section](#variations).
1. **Options menu:** Contains display options (more details in the [ChatBot variations section](#variations)) and other settings (more details in the [ChatBOt settings and preferences section](#chatbot-settings-and-preferences)).

Choose a reason for hiding this comment

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

wonder if it would be helpful to mention that the options menu can be customized to the products preference. for example i dont think send feedback or help has to be included

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.
1. **Footer:** A persistent region at the bottom of the ChatBot window that contains the message bar and the footnote.
Expand All @@ -37,9 +37,26 @@ import "./images.css"
1. **Timestamp:** The relative or absolute time that a message was sent.
1. **Label:** Labels ChatBot messages as "AI."
1. **Quick responses:** Programmable, clickable actions that allow users to quickly answer questions from the ChatBot.
1. **Sources:** Cards that link to documentation or other external resources. When multiple sources are included, users can paginate through the different options.
1. **Response actions:** Actions that allow users to interact with a bot message. these typically include providing feedback, copying, sharing, or reading aloud, but [custom message actions](/patternfly-ai/chatbot/messages#custom-message-actions) are also supported.

#### Source tiles

A ChatBot can share relevant sources with users, like documentation that could provide the information a user is searching for. These sources will be contained in a single tile, which users can paginate through and select to navigate to other resources.

To provide users with enough context, sources should have descriptive titles and descriptions. The title is limited to 1 line and the body is limited to 2 lines.

<div class="ws-docs-content-img">
![Bot message that include multiple source tiles.](./img/source-tile.svg)
</div>

#### Quick start tiles

A ChatBot can share a link to a [quick start](/extensions/quick-starts) that will help users complete a given task. Users can either select **Start** or the tile's title to initiate the linked quick start.

<div class="ws-docs-content-img">
![Bot message that links a quick start tile.](./img/chatbot-quickstarts-tile.svg)
</div>

### Message bar

To message the ChatBot, users can type directly into the message bar in the footer or click any included actions.
Expand Down Expand Up @@ -126,6 +143,12 @@ When there is an unread message from the ChatBot, a notification badge should be
![Toggle with notification badge.](./img/chatbot-toggle-notification.svg)
</div>

If necessary for brand consistency, you can customize the toggle shape and icon.

<div class="ws-docs-content-img">
![Different toggle shapes and icons.](./img/toggle-customizations.svg)
</div>

### Using the navigation menu

The ChatBot navigation menu primarily contains a users' conversation history with the ChatBot. Clicking the menu icon opens a side drawer in the ChatBot window.
Expand All @@ -136,6 +159,20 @@ By clicking into the navigation menu, users can search through previous conversa
![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
</div>

### ChatBot settings and preferences

Users can access ChatBot settings and preferences via the options menu.

<div class="ws-docs-content-img">
![ChatBot options menu dropdown.](./img/settings-menu.svg)
</div>

Within the settings menu, users can select their preferences for a variety of ChatBot features, like theme or language. You can also support additional content management here, like adding or deleting chats. This menu can be customized to meet the needs of your ChatBot's users.

<div class="ws-docs-content-img">
![ChatBot global settings menu.](./img/chatbot-settings.svg)
</div>

### Attaching files

Using [the attach button](/patternfly-ai/chatbot/overview/design-guidelines#message-bar) in the message bar, users can [attach files](/patternfly-ai/chatbot/messages#file-attachments) to their message to share with the ChatBot.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading