Skip to content

Commit 62acb76

Browse files
authored
feat(demo): Demo for drawer mode with display mode switcher (#601)
Adds demo for inline drawer functionality with display mode switcher to overlay and full screen.
1 parent 3a1bda0 commit 62acb76

File tree

3 files changed

+504
-1
lines changed

3 files changed

+504
-1
lines changed

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ ChatbotHeaderMenu,
4444
ChatbotHeaderTitle,
4545
ChatbotHeaderActions,
4646
ChatbotHeaderSelectorDropdown,
47-
ChatbotHeaderOptionsDropdown
47+
ChatbotHeaderOptionsDropdown,
48+
ChatbotHeaderCloseButton
4849
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
4950

5051
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -130,6 +131,22 @@ This demo displays a ChatBot in a static, inline drawer. This demo includes:
130131

131132
```
132133

134+
### Display mode switcher
135+
136+
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:
137+
138+
1. The ability to switch between overlay, drawer, and fullscreen modes using the [`<ChatbotHeaderOptionsDropdown>`](/patternfly-ai/chatbot/ui#header-options) in the header.
139+
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.
143+
3. Logic to show or hide the `<ChatbotToggle>` button, which is only present in the default overlay mode.
144+
4. A [basic ChatBot](#basic-chatbot) with a header, welcome prompt, and message bar to populate the different layouts.
145+
146+
```js file="./ChatbotDisplayMode.tsx" isFullscreen
147+
148+
```
149+
133150
### Comparing ChatBots
134151

135152
To let users compare how different ChatBots respond to the same prompt, you can add multiple ChatBots within the same window. The following demo illustrates a comparison view pattern that allows users to toggle between different conversations in a single ChatBot window.

0 commit comments

Comments
 (0)