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 @@ -8,6 +8,8 @@ source: design-guidelines

import "./images.css"

**Note:** These guidelines are specific to ChatBot. Before implementing AI-enabled features, review PatternFly's [AI design language guidelines](/ai/design-language), which cover foundational requirements for AI disclosure, iconography, and color that apply across all Red Hat products.

## Elements

<div class="ws-docs-content-img">
Expand Down Expand Up @@ -256,14 +258,12 @@ If necessary for brand consistency, you can customize the toggle shape and icon.

#### Masthead toggle

When the ChatBot toggle is a masthead utility, use the fa-comments icon:
You can also add a ChatBot toggle as an action in the masthead:

<div class="ws-docs-content-img">
![ChatBot toggle in a masthead.](./img/masthead-toggle.svg)
</div>

The exception to this is if you have a specific icon that aligns with your product or ChatBot branding.

When there is an unread message from the ChatBot, a notification count should be displayed, and the badge should be styled as unread.

<div class="ws-docs-content-img">
Expand All @@ -272,7 +272,7 @@ When there is an unread message from the ChatBot, a notification count should be

### Launching a ChatBot from page content

If a UI element within the page content is an AI/ChatBot-supported feature, the ChatBot should be launched when users select the clearly-identified action. These kinds of actions should display your ChatBot's logo beside a label that clearly communicates the intention of the AI action.
If a UI element within the page content is an AI/ChatBot-supported feature, the ChatBot should be launched when users select the clearly-identified action. These kinds of actions should display the [UI robot icon](/ai/design-language#robot-icon) beside a text label that clearly communicates the intention of the action (for example, "Chat with AI" or "Ask with AI").

<div class="ws-docs-content-img">
![Menu item for an AI action that launches a ChatBot.](./img/ai-action-inpage.svg)
Expand Down
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

hey! for this one, can we please swap the icon for this menu action item? brand made a set of icons to pair with certain terms so the "troubleshoot with ai" used a lil edit and sparkle icon! https://www.figma.com/design/CDhQHbVI1F9h8fSslswfh1/Red-Hat-icon-library?node-id=5230-97&t=IagRf0qpkZaAlOfP-1

Image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

sure I can! Is there any case in which the icon for an in-page action would be the robot?

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

@edonehoo no use cases for the inpage action to be a robot! the robot is exclusively used to indicate that you are launching a chat interface or actively in a chat message string with the bot/ai

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.
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

howdy! we also added in all of the bot avatar color options that can either be chosen at random by the system or is chosen by that product area on the backend. The user however, cannot choose to select a new bot color in their settings. the black and plain background color that you have for all of these examples is great by default - just wasnt sure if you wanted to add in a section on avatar selection https://www.figma.com/design/MSr6kVEOuAxmPOkjg7x8PO/PatternFly-6--Patterns---Extensions?m=auto&node-id=5190-8049&t=G6tnRYXjme51DH22-1

Image

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

hm good point, we do have these on https://staging.patternfly.org/ai/design-language, which I link to in a general note at the top of this doc, but I can add a separate callout for the avatars to link to that

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.
483 changes: 260 additions & 223 deletions packages/module/patternfly-docs/content/extensions/chatbot/img/docked.svg
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.
339 changes: 191 additions & 148 deletions packages/module/patternfly-docs/content/extensions/chatbot/img/drawer.svg
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
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.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Loading