@patternfly/chatbot 2.2.0-prerelease.31 → 2.2.0-prerelease.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cjs/Chatbot/Chatbot.d.ts +2 -1
  2. package/dist/cjs/Chatbot/Chatbot.js +1 -0
  3. package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +1 -1
  4. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
  5. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
  6. package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +15 -7
  7. package/dist/css/main.css +28 -3
  8. package/dist/css/main.css.map +1 -1
  9. package/dist/esm/Chatbot/Chatbot.d.ts +2 -1
  10. package/dist/esm/Chatbot/Chatbot.js +1 -0
  11. package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +1 -1
  12. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
  13. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
  14. package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +15 -7
  15. package/package.json +4 -2
  16. package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +67 -62
  17. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +11 -0
  18. package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +453 -0
  19. package/src/Chatbot/Chatbot.scss +19 -0
  20. package/src/Chatbot/Chatbot.tsx +2 -1
  21. package/src/ChatbotContent/ChatbotContent.scss +1 -0
  22. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +2 -0
  23. package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +1 -1
  24. package/src/ChatbotFooter/ChatbotFooter.scss +9 -0
  25. package/src/ChatbotHeader/ChatbotHeader.scss +2 -1
  26. package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +23 -7
  27. package/src/ChatbotHeader/ChatbotHeaderTitle.tsx +7 -2
  28. package/src/MessageBar/MessageBar.scss +3 -3
  29. package/src/MessageBox/MessageBox.scss +1 -0
@@ -17,7 +17,8 @@ export declare enum ChatbotDisplayMode {
17
17
  default = "default",
18
18
  embedded = "embedded",
19
19
  docked = "docked",
20
- fullscreen = "fullscreen"
20
+ fullscreen = "fullscreen",
21
+ drawer = "drawer"
21
22
  }
22
23
  declare const Chatbot: React.ForwardRefExoticComponent<ChatbotProps & React.RefAttributes<HTMLDivElement>>;
23
24
  export default Chatbot;
@@ -26,6 +26,7 @@ var ChatbotDisplayMode;
26
26
  ChatbotDisplayMode["embedded"] = "embedded";
27
27
  ChatbotDisplayMode["docked"] = "docked";
28
28
  ChatbotDisplayMode["fullscreen"] = "fullscreen";
29
+ ChatbotDisplayMode["drawer"] = "drawer";
29
30
  })(ChatbotDisplayMode || (exports.ChatbotDisplayMode = ChatbotDisplayMode = {}));
30
31
  const ChatbotBase = (_a) => {
31
32
  var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
@@ -88,7 +88,7 @@ const ChatbotConversationHistoryNav = (_a) => {
88
88
  react_1.default.createElement(react_core_1.DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
89
89
  react_1.default.createElement(react_core_1.DrawerContentBody, Object.assign({}, drawerContentBodyProps),
90
90
  react_1.default.createElement(react_1.default.Fragment, null,
91
- react_1.default.createElement("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
91
+ react_1.default.createElement("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked || displayMode === Chatbot_1.ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
92
92
  drawerContent)))));
93
93
  };
94
94
  exports.ChatbotConversationHistoryNav = ChatbotConversationHistoryNav;
@@ -11,8 +11,10 @@ export interface ChatbotHeaderTitleProps {
11
11
  showOnFullScreen?: React.ReactNode | string;
12
12
  /** Content to display on docked screen */
13
13
  showOnDocked?: React.ReactNode | string;
14
- /** Content to display on overlay screen */
14
+ /** Content to display on embedded screen */
15
15
  showOnEmbedded?: React.ReactNode | string;
16
+ /** Content to display in drawer mode */
17
+ showOnDrawer?: React.ReactNode | string;
16
18
  /** Content to display by default; this will be shown if a case is not explicitly set */
17
19
  showOnDefault?: React.ReactNode | string;
18
20
  }
@@ -7,9 +7,9 @@ exports.ChatbotHeaderTitle = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const react_core_1 = require("@patternfly/react-core");
9
9
  const Chatbot_1 = require("../Chatbot/Chatbot");
10
- const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDefault }) => {
10
+ const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDrawer, showOnDefault }) => {
11
11
  const renderChildren = () => {
12
- if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
12
+ if (displayMode) {
13
13
  /* eslint-disable indent */
14
14
  switch (displayMode) {
15
15
  case Chatbot_1.ChatbotDisplayMode.fullscreen:
@@ -18,6 +18,8 @@ const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen
18
18
  return showOnDocked !== null && showOnDocked !== void 0 ? showOnDocked : showOnDefault;
19
19
  case Chatbot_1.ChatbotDisplayMode.embedded:
20
20
  return showOnEmbedded !== null && showOnEmbedded !== void 0 ? showOnEmbedded : showOnDefault;
21
+ case Chatbot_1.ChatbotDisplayMode.drawer:
22
+ return showOnDrawer !== null && showOnDrawer !== void 0 ? showOnDrawer : showOnDefault;
21
23
  default:
22
24
  return showOnDefault;
23
25
  }
@@ -17,31 +17,39 @@ describe('ChatbotHeaderTitle', () => {
17
17
  expect(container.querySelector('.custom-header-class')).toBeTruthy();
18
18
  });
19
19
  it('should render title for default display mode', () => {
20
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
20
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.default, showOnDefault: "Default header title" }));
21
21
  expect(react_2.screen.getByText('Default header title')).toBeTruthy();
22
22
  });
23
23
  it('should render title for docked display mode', () => {
24
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
24
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDocked: "Docked header title" }));
25
25
  expect(react_2.screen.getByText('Docked header title')).toBeTruthy();
26
26
  });
27
27
  it('should fallback to default title when docked display mode title is not configured', () => {
28
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
28
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDefault: "Default header title" }));
29
29
  expect(react_2.screen.getByText('Default header title')).toBeTruthy();
30
30
  });
31
31
  it('should render title for embedded display mode', () => {
32
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
32
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnEmbedded: "Embedded header title" }));
33
33
  expect(react_2.screen.getByText('Embedded header title')).toBeTruthy();
34
34
  });
35
35
  it('should fallback to default title when embedded display mode title is not configured', () => {
36
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
36
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnDefault: "Default header title" }));
37
37
  expect(react_2.screen.getByText('Default header title')).toBeTruthy();
38
38
  });
39
39
  it('should render title for fullscreen display mode', () => {
40
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
40
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnFullScreen: "Fullscreen header title", className: "custom-header-class" }));
41
41
  expect(react_2.screen.getByText('Fullscreen header title')).toBeTruthy();
42
42
  });
43
43
  it('should fallback to default title when fullscreen display mode title is not configured', () => {
44
- (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
44
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnDefault: "Default header title" }));
45
+ expect(react_2.screen.getByText('Default header title')).toBeTruthy();
46
+ });
47
+ it('should render title for drawer display mode', () => {
48
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.drawer, showOnDrawer: "Drawer header title", className: "custom-header-class" }));
49
+ expect(react_2.screen.getByText('Drawer header title')).toBeTruthy();
50
+ });
51
+ it('should fallback to default title when drawer display mode title is not configured', () => {
52
+ (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.drawer, showOnDefault: "Default header title" }));
45
53
  expect(react_2.screen.getByText('Default header title')).toBeTruthy();
46
54
  });
47
55
  });
package/dist/css/main.css CHANGED
@@ -144,6 +144,21 @@
144
144
  border-radius: unset;
145
145
  }
146
146
 
147
+ .pf-chatbot--drawer {
148
+ inset-block-end: 0;
149
+ inset-inline-end: 0;
150
+ padding: 0;
151
+ width: 100%;
152
+ height: 100%;
153
+ border-radius: 0;
154
+ box-shadow: none;
155
+ border-left: var(--pf-t--global--border--width--divider--default) solid;
156
+ border-color: var(--pf-t--global--border--color--default);
157
+ }
158
+ .pf-chatbot--drawer .pf-chatbot-container {
159
+ border-radius: var(--pf-t--global--border--radius--sharp);
160
+ }
161
+
147
162
  .pf-chatbot__alert {
148
163
  position: sticky;
149
164
  top: var(--pf-t--global--spacer--lg);
@@ -164,6 +179,7 @@
164
179
  }
165
180
 
166
181
  @media screen and (min-width: 64rem) {
182
+ .pf-chatbot--drawer .pf-chatbot__content,
167
183
  .pf-chatbot--fullscreen .pf-chatbot__content,
168
184
  .pf-chatbot--embedded .pf-chatbot__content {
169
185
  display: flex;
@@ -284,9 +300,11 @@
284
300
  height: 100vh;
285
301
  }
286
302
 
303
+ .pf-chatbot--drawer .pf-chatbot__history.pf-v6-c-drawer,
287
304
  .pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer {
288
305
  height: 100vh;
289
306
  }
307
+ .pf-chatbot--drawer .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body,
290
308
  .pf-chatbot--fullscreen .pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
291
309
  width: 100%;
292
310
  }
@@ -303,6 +321,7 @@
303
321
  }
304
322
 
305
323
  .pf-chatbot--docked .pf-chatbot__history .pf-chatbot__drawer-backdrop,
324
+ .pf-chatbot--drawer .pf-chatbot__history .pf-chatbot__drawer-backdrop,
306
325
  .pf-chatbot--embedded .pf-chatbot__history .pf-chatbot__drawer-backdrop,
307
326
  .pf-chatbot--fullscreen .pf-chatbot__history .pf-chatbot__drawer-backdrop {
308
327
  border-radius: unset;
@@ -367,6 +386,10 @@
367
386
  padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
368
387
  }
369
388
 
389
+ .pf-chatbot--drawer .pf-chatbot__footer-container {
390
+ padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
391
+ }
392
+
370
393
  .pf-chatbot__header-container {
371
394
  display: grid;
372
395
  }
@@ -423,6 +446,7 @@
423
446
  display: none;
424
447
  }
425
448
  }
449
+ .pf-chatbot--drawer .pf-chatbot__header,
426
450
  .pf-chatbot--docked .pf-chatbot__header {
427
451
  background-color: var(--pf-t--chatbot--background);
428
452
  }
@@ -1610,9 +1634,9 @@
1610
1634
  }
1611
1635
 
1612
1636
  .pf-chatbot__message-textarea {
1613
- --pf-v6-c-form-control--before--BorderStyle: none;
1614
- --pf-v6-c-form-control--after--BorderStyle: none;
1615
- resize: none;
1637
+ --pf-v6-c-form-control--before--BorderStyle: none !important;
1638
+ --pf-v6-c-form-control--after--BorderStyle: none !important;
1639
+ resize: none !important;
1616
1640
  background-color: transparent;
1617
1641
  font-size: var(--pf-t--global--font--size--md);
1618
1642
  line-height: 1.5rem;
@@ -1725,6 +1749,7 @@
1725
1749
 
1726
1750
  @media screen and (min-width: 64rem) {
1727
1751
  .pf-chatbot--embedded .pf-chatbot__messagebox,
1752
+ .pf-chatbot--drawer .pf-chatbot__messagebox,
1728
1753
  .pf-chatbot--fullscreen .pf-chatbot__messagebox {
1729
1754
  max-width: 60rem;
1730
1755
  width: 100%;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACvMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AC5CJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;ACvIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AC7FF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxFN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;ADtCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC5HJ;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;ACxIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AClFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AC7FF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxFN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
@@ -17,7 +17,8 @@ export declare enum ChatbotDisplayMode {
17
17
  default = "default",
18
18
  embedded = "embedded",
19
19
  docked = "docked",
20
- fullscreen = "fullscreen"
20
+ fullscreen = "fullscreen",
21
+ drawer = "drawer"
21
22
  }
22
23
  declare const Chatbot: React.ForwardRefExoticComponent<ChatbotProps & React.RefAttributes<HTMLDivElement>>;
23
24
  export default Chatbot;
@@ -20,6 +20,7 @@ export var ChatbotDisplayMode;
20
20
  ChatbotDisplayMode["embedded"] = "embedded";
21
21
  ChatbotDisplayMode["docked"] = "docked";
22
22
  ChatbotDisplayMode["fullscreen"] = "fullscreen";
23
+ ChatbotDisplayMode["drawer"] = "drawer";
23
24
  })(ChatbotDisplayMode || (ChatbotDisplayMode = {}));
24
25
  const ChatbotBase = (_a) => {
25
26
  var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
@@ -82,7 +82,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
82
82
  React.createElement(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
83
83
  React.createElement(DrawerContentBody, Object.assign({}, drawerContentBodyProps),
84
84
  React.createElement(React.Fragment, null,
85
- React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
85
+ React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
86
86
  drawerContent)))));
87
87
  };
88
88
  export default ChatbotConversationHistoryNav;
@@ -11,8 +11,10 @@ export interface ChatbotHeaderTitleProps {
11
11
  showOnFullScreen?: React.ReactNode | string;
12
12
  /** Content to display on docked screen */
13
13
  showOnDocked?: React.ReactNode | string;
14
- /** Content to display on overlay screen */
14
+ /** Content to display on embedded screen */
15
15
  showOnEmbedded?: React.ReactNode | string;
16
+ /** Content to display in drawer mode */
17
+ showOnDrawer?: React.ReactNode | string;
16
18
  /** Content to display by default; this will be shown if a case is not explicitly set */
17
19
  showOnDefault?: React.ReactNode | string;
18
20
  }
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { SplitItem } from '@patternfly/react-core';
3
3
  import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
4
- export const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDefault }) => {
4
+ export const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDrawer, showOnDefault }) => {
5
5
  const renderChildren = () => {
6
- if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
6
+ if (displayMode) {
7
7
  /* eslint-disable indent */
8
8
  switch (displayMode) {
9
9
  case ChatbotDisplayMode.fullscreen:
@@ -12,6 +12,8 @@ export const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFul
12
12
  return showOnDocked !== null && showOnDocked !== void 0 ? showOnDocked : showOnDefault;
13
13
  case ChatbotDisplayMode.embedded:
14
14
  return showOnEmbedded !== null && showOnEmbedded !== void 0 ? showOnEmbedded : showOnDefault;
15
+ case ChatbotDisplayMode.drawer:
16
+ return showOnDrawer !== null && showOnDrawer !== void 0 ? showOnDrawer : showOnDefault;
15
17
  default:
16
18
  return showOnDefault;
17
19
  }
@@ -12,31 +12,39 @@ describe('ChatbotHeaderTitle', () => {
12
12
  expect(container.querySelector('.custom-header-class')).toBeTruthy();
13
13
  });
14
14
  it('should render title for default display mode', () => {
15
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
15
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: "Default header title" }));
16
16
  expect(screen.getByText('Default header title')).toBeTruthy();
17
17
  });
18
18
  it('should render title for docked display mode', () => {
19
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
19
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: "Docked header title" }));
20
20
  expect(screen.getByText('Docked header title')).toBeTruthy();
21
21
  });
22
22
  it('should fallback to default title when docked display mode title is not configured', () => {
23
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
23
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: "Default header title" }));
24
24
  expect(screen.getByText('Default header title')).toBeTruthy();
25
25
  });
26
26
  it('should render title for embedded display mode', () => {
27
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
27
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: "Embedded header title" }));
28
28
  expect(screen.getByText('Embedded header title')).toBeTruthy();
29
29
  });
30
30
  it('should fallback to default title when embedded display mode title is not configured', () => {
31
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
31
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: "Default header title" }));
32
32
  expect(screen.getByText('Default header title')).toBeTruthy();
33
33
  });
34
34
  it('should render title for fullscreen display mode', () => {
35
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
35
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: "Fullscreen header title", className: "custom-header-class" }));
36
36
  expect(screen.getByText('Fullscreen header title')).toBeTruthy();
37
37
  });
38
38
  it('should fallback to default title when fullscreen display mode title is not configured', () => {
39
- render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
39
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: "Default header title" }));
40
+ expect(screen.getByText('Default header title')).toBeTruthy();
41
+ });
42
+ it('should render title for drawer display mode', () => {
43
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.drawer, showOnDrawer: "Drawer header title", className: "custom-header-class" }));
44
+ expect(screen.getByText('Drawer header title')).toBeTruthy();
45
+ });
46
+ it('should fallback to default title when drawer display mode title is not configured', () => {
47
+ render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.drawer, showOnDefault: "Default header title" }));
40
48
  expect(screen.getByText('Default header title')).toBeTruthy();
41
49
  });
42
50
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "2.2.0-prerelease.31",
3
+ "version": "2.2.0-prerelease.32",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -71,7 +71,9 @@
71
71
  "victory-create-container": "^37.1.1",
72
72
  "victory-cursor-container": "^37.1.1",
73
73
  "victory-tooltip": "^37.1.1",
74
- "victory-bar": "^37.1.1"
74
+ "victory-bar": "^37.1.1",
75
+ "@segment/analytics-next": "^1.76.0",
76
+ "posthog-js": "^1.194.4"
75
77
  },
76
78
  "overrides": {
77
79
  "puppeteer": "^23.6.1",
@@ -12,9 +12,10 @@ source: Analytics
12
12
  # These are found through the sourceProps function provided in patternfly-docs.source.js
13
13
  sortValue: 4
14
14
  ---
15
+
15
16
  import "../../images.css"
16
17
 
17
- To gain more insight into the ways that your users interact with your ChatBot, you can add support for **analytics**. To add analytics tracking, you can refer to this guide and configure tracking for the interactions you care about most.
18
+ To gain more insight into the ways that your users interact with your ChatBot, you can add support for **analytics**. To add analytics tracking, you can refer to this guide and configure tracking for the interactions you care about most.
18
19
 
19
20
  ## Elements
20
21
 
@@ -27,6 +28,7 @@ This following diagram shows the main components of ChatBot analytics tracking c
27
28
  The user code (1) first calls the static `getTrackingProviders()` method (3) which initializes the tracking providers (4). This returns an instance of the `trackingAPI` (2), which can then subsequently be used to emit analytics events.
28
29
 
29
30
  Note that user code only interacts with:
31
+
30
32
  - `trackingAPI` (including `identify`, `trackPageview`, `trackSingleItem`)
31
33
  - `TrackingRegistry` (including `getTrackingProviders`)
32
34
 
@@ -34,43 +36,43 @@ Note that user code only interacts with:
34
36
 
35
37
  ### Setup
36
38
 
37
- 1. Before you can use the `trackingAPI`, you must first supply the API keys of the respective providers.
38
-
39
- ```nolive
40
- const initProps: InitProps = {
41
- segmentKey: 'TODO-key', // TODO add your key here
42
- // segmentCdn: 'https://my.org/cdn', // Set up segment cdn (optional)
43
- // segmentIntegrations: { // Provide Segment integrations (optional)
44
- // 'Segment.io': {
45
- // apiHost: 'my.api.host/api/v1',
46
- // protocol: 'https'
47
- // }
48
- },
49
-
50
- posthogKey: 'TODO-key',
51
- umamiKey: 'TODO-key',
52
- umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
53
- something: 'test',
54
- console: 'true' // Console provider
55
- };
56
- ```
39
+ 1. Before you can use the `trackingAPI`, you must first supply the API keys of the respective providers.
40
+
41
+ ```nolive
42
+ const initProps: InitProps = {
43
+ segmentKey: 'TODO-key', // TODO add your key here
44
+ // segmentCdn: 'https://my.org/cdn', // Set up segment cdn (optional)
45
+ // segmentIntegrations: { // Provide Segment integrations (optional)
46
+ // 'Segment.io': {
47
+ // apiHost: 'my.api.host/api/v1',
48
+ // protocol: 'https'
49
+ // }
50
+ },
51
+
52
+ posthogKey: 'TODO-key',
53
+ umamiKey: 'TODO-key',
54
+ umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
55
+ something: 'test',
56
+ console: 'true' // Console provider
57
+ };
58
+ ```
57
59
 
58
60
  1. Once this is done, you can create an instance of the `trackingAPI` and start sending events.
59
61
 
60
- ```nolive
61
- const trackingAPI = getTrackingProviders(initProps);
62
- ```
62
+ ```nolive
63
+ const trackingAPI = getTrackingProviders(initProps);
64
+ ```
63
65
 
64
- 1. One of your first events should identify the user in some way, such as a UUID that stays consistent for the same user.
66
+ 1. One of your first events should identify the user in some way, such as a UUID that stays consistent for the same user.
65
67
 
66
- ```nolive
67
- const trackingAPI = getTrackingProviders(initProps);
68
- trackingAPI.identify('user-123'); // TODO get real user id
69
- // Track the page that is currently visited. Best put into a react effect (see below)
70
- trackingAPI.trackPageView();
71
- // Track a single Event
72
- trackingAPI.trackSingleItem("MyEvent", { response: 'Good response' })
73
- ```
68
+ ```nolive
69
+ const trackingAPI = getTrackingProviders(initProps);
70
+ trackingAPI.identify('user-123'); // TODO get real user id
71
+ // Track the page that is currently visited. Best put into a react effect (see below)
72
+ trackingAPI.trackPageView();
73
+ // Track a single Event
74
+ trackingAPI.trackSingleItem("MyEvent", { response: 'Good response' })
75
+ ```
74
76
 
75
77
  #### Tracking providers
76
78
 
@@ -85,7 +87,7 @@ const initProps: InitProps = {
85
87
  console: true
86
88
  ```
87
89
 
88
- ##### Modifying providers
90
+ ##### Modifying providers
89
91
 
90
92
  If you know upfront that you only want to use 1 of the supported providers, you can modify `getTrackingProviders()` and remove all other providers in the providers array.
91
93
 
@@ -100,13 +102,14 @@ When using the providers you need to add additional dependencies to your package
100
102
  ##### Adding providers
101
103
 
102
104
  To add another analytics provider, you need to implement 2 interfaces, `TrackingSpi` and `trackingApi`.
105
+
103
106
  1. It is easiest to start by copying the `ConsoleTrackingProvider`
104
107
  1. The first thing you should do is to provide a correct value in `getKey()`
105
108
  1. Once you are happy enough with the implementation, add it to the array of providers in `getTrackingProviders()`
106
109
 
107
110
  ### Page flow tracking
108
111
 
109
- To understand how users move through their ChatBot journey, you can track their page flow.
112
+ To understand how users move through their ChatBot journey, you can track their page flow.
110
113
 
111
114
  To add tracking to each page view, use the `trackPageView()` method.
112
115
 
@@ -126,7 +129,7 @@ export const useTrackPageFlow = (): void => {
126
129
 
127
130
  ### Event tracking
128
131
 
129
- To get more specific insight into how users are interacting with the UI, you can track single events, including button clicks, form submissions, and so on.
132
+ To get more specific insight into how users are interacting with the UI, you can track single events, including button clicks, form submissions, and so on.
130
133
 
131
134
  To add tracking to an interaction of your choice, use the `trackSingleItem` method.
132
135
 
@@ -135,6 +138,7 @@ trackingAPI.trackSingleItem(eventName, propertyDict)
135
138
  ```
136
139
 
137
140
  This method takes 2 parameters:
141
+
138
142
  - `eventName`: The unique name of the event. To differentiate different events that use the same name, you'll need to add an additional property.
139
143
  - `propertyDict`: A dict with key-value pairs that represent important properties of the event. If there are none, this value can be empty.
140
144
 
@@ -151,19 +155,20 @@ trackingAPI.trackSingleItem(Event_Name, {
151
155
  ```
152
156
 
153
157
  Parameters to pass with the `trackSingleItem` method can include:
154
- - `outcome`: Communicates if the form was submitted or cancelled.
158
+
159
+ - `outcome`: Communicates if the form was submitted or cancelled.
155
160
  - `success`: Used for a "submit" outcome to communicate if the submission was successful for not in the backend.
156
161
  - `error`: Used for a "submit" outcome to communicate the error message associated with a failed submission. Try to remove extraneous parts of the message, like part of a container-name.
157
- - `properties`: Any additional properties from the form, to be tracked for analytics.
162
+ - `properties`: Any additional properties from the form, to be tracked for analytics.
158
163
  - Use your judgement to determine what will be useful for your analytics.
159
- - Highly specific data, like names provided by the user or description text input, should not be tracked.
164
+ - Highly specific data, like names provided by the user or description text input, should not be tracked.
160
165
  - Less personal data, like deployment replica count or memory server size, is more likely to help you understand your users.
161
166
 
162
167
  ## Examples
163
168
 
164
169
  To better understand the analytics tracking process, here are 3 examples of what you could see in an analytics tool.
165
170
 
166
- For all 3 tools, consider the following example, where the users has started a ChatBot and taken actions 1-5 in order:
171
+ For all 3 tools, consider the following example, where the user has started a ChatBot and taken actions 1-5 in order:
167
172
 
168
173
  <div class="ws-docs-content-img" style="width:60%">
169
174
  ![Events done in the ChatBot](../../img/analytics-example.svg)
@@ -179,36 +184,36 @@ This pattern of actions will be applied to the following 3 analytics tools.
179
184
 
180
185
  1. Segment
181
186
 
182
- - [Segment](https://segment.com/) shows all user events in its source debugger:
187
+ - [Segment](https://segment.com/) shows all user events in its source debugger:
188
+
189
+ <div class="ws-docs-content-img" style="width:70%">
190
+ ![Events displayed in the Segment debugger](../../img/segment.svg)
191
+ </div>
183
192
 
184
- <div class="ws-docs-content-img" style="width:70%">
185
- ![Events displayed in the Segment debugger](../../img/segment.svg)
186
- </div>
187
-
188
- - 1-5: User actions with the newest event at the top.
189
- - 6-7: You can also see the results of `identify` (6) and `trackPageView` (7).
190
- - If you clicked on an event, you would also see the properties.
193
+ - 1-5: User actions with the newest event at the top.
194
+ - 6-7: You can also see the results of `identify` (6) and `trackPageView` (7).
195
+ - If you clicked on an event, you would also see the properties.
191
196
 
192
- - **Note**: When using the Segment provider, you may also want to set the `segmentCdn` and `segmentIntegrations` initialization properties.
197
+ - **Note**: When using the Segment provider, you may also want to set the `segmentCdn` and `segmentIntegrations` initialization properties.
193
198
 
194
199
  1. Umami
195
200
 
196
- - In [Umami](https://umami.is/), events are visible within **Website** / **Events**.
197
- - The list is similar to Segment, with different formatting:
201
+ - In [Umami](https://umami.is/), events are visible within **Website** / **Events**.
202
+ - The list is similar to Segment, with different formatting:
198
203
 
199
- <div class="ws-docs-content-img">
200
- ![Events in Umami](../../img/umami.svg)
201
- </div>
204
+ <div class="ws-docs-content-img">
205
+ ![Events in Umami](../../img/umami.svg)
206
+ </div>
202
207
 
203
- - 1-5: User actions with the newest event at the top.
208
+ - 1-5: User actions with the newest event at the top.
204
209
 
205
- 3. PostHog
210
+ 1. PostHog
206
211
 
207
- - In [PostHog](https://posthog.com/), events are located in the **Activity** section.
208
- - PostHog integrates deeper in the provided code, so there are more default events tracked:
212
+ - In [PostHog](https://posthog.com/), events are located in the **Activity** section.
213
+ - PostHog integrates deeper in the provided code, so there are more default events tracked:
209
214
 
210
- <div class="ws-docs-content-img">
211
- ![Events in PostHog](../../img/posthog.svg)
212
- </div>
215
+ <div class="ws-docs-content-img">
216
+ ![Events in PostHog](../../img/posthog.svg)
217
+ </div>
213
218
 
214
- - 1-5: User actions with the newest event at the top.
219
+ - 1-5: User actions with the newest event at the top.
@@ -108,6 +108,17 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
108
108
 
109
109
  ```
110
110
 
111
+ ### Inline drawer ChatBot
112
+
113
+ This demo displays a ChatBot in a static, inline drawer. This demo includes:
114
+
115
+ 1. An empty [PatternFly page](/components/page) with a sidebar and masthead.
116
+ 2. A [basic ChatBot](#basic-chatbot), placed beside the page content. It does not overlay the page content, cannot be minimized, and does not allow you to change the display mode by default.
117
+
118
+ ```js file="./ChatbotInDrawer.tsx" isFullscreen
119
+
120
+ ```
121
+
111
122
  ### Comparing ChatBots
112
123
 
113
124
  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.