Skip to content

Commit 9ae1deb

Browse files
feat(ChatBotFooter/MessageBar): Add white background variants (#690)
Request from OpenShift AI since they have more complex embedded layouts. Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com>
1 parent 2abe726 commit 9ae1deb

9 files changed

Lines changed: 489 additions & 9 deletions

File tree

packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,15 +131,23 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
131131

132132
```
133133

134+
### Primary color background
135+
136+
This demo displays an embedded ChatBot with a [primary background color](/design-foundations/colors#background-colors). This example includes the same features as the [Embedded ChatBot demo](/patternfly-ai/chatbot/overview/demo/#embedded-chatbot)&mdash;the only differences are that the background color is adjusted via the `isPrimary` prop and some of the sample Messages have changed. You can use the same logic to adjust the background color in any ChatBot layout.
137+
138+
```js file="./WhiteEmbeddedChatbot.tsx" isFullscreen
139+
140+
```
141+
134142
### Display mode switcher
135143

136144
This demo showcases how the ChatBot can be rendered in different display modes to suit various application layouts. It demonstrates how to dynamically change the page structure in response to the user's selection. This demo includes:
137145

138146
1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
139147
2. A conditional page layout that renders the ChatBot for each display mode option:
140-
- **Overlay:** As a floating window on top of the page content.
141-
- **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
142-
- **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
148+
- **Overlay:** As a floating window on top of the page content.
149+
- **Drawer:** Inside an inline PatternFly `<Drawer>` as a side panel.
150+
- **Fullscreen:** As a top-level component that covers the entire screen for an embedded experience.
143151
3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
144152
4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
145153

@@ -170,7 +178,7 @@ Your code structure should look like this:
170178

171179
### Chat transcripts
172180

173-
This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others.
181+
This demo illustrates how you could add downloadable transcripts to your ChatBot, which outline conversation details in a Markdown file. This approach allows users to easily share information from a conversation with others.
174182

175183
A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.
176184

0 commit comments

Comments
 (0)