You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
+18-1Lines changed: 18 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -44,7 +44,8 @@ ChatbotHeaderMenu,
44
44
ChatbotHeaderTitle,
45
45
ChatbotHeaderActions,
46
46
ChatbotHeaderSelectorDropdown,
47
-
ChatbotHeaderOptionsDropdown
47
+
ChatbotHeaderOptionsDropdown,
48
+
ChatbotHeaderCloseButton
48
49
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
49
50
50
51
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:
130
131
131
132
```
132
133
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.
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