@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.
- package/dist/cjs/Chatbot/Chatbot.d.ts +2 -1
- package/dist/cjs/Chatbot/Chatbot.js +1 -0
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +1 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
- package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.test.js +15 -7
- package/dist/css/main.css +28 -3
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Chatbot/Chatbot.d.ts +2 -1
- package/dist/esm/Chatbot/Chatbot.js +1 -0
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +1 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.d.ts +3 -1
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.js +4 -2
- package/dist/esm/ChatbotHeader/ChatbotHeaderTitle.test.js +15 -7
- package/package.json +4 -2
- package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +67 -62
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +11 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +453 -0
- package/src/Chatbot/Chatbot.scss +19 -0
- package/src/Chatbot/Chatbot.tsx +2 -1
- package/src/ChatbotContent/ChatbotContent.scss +1 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +2 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +1 -1
- package/src/ChatbotFooter/ChatbotFooter.scss +9 -0
- package/src/ChatbotHeader/ChatbotHeader.scss +2 -1
- package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx +23 -7
- package/src/ChatbotHeader/ChatbotHeaderTitle.tsx +7 -2
- package/src/MessageBar/MessageBar.scss +3 -3
- 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
|
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
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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%;
|
package/dist/css/main.css.map
CHANGED
@@ -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;;;
|
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
|
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
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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.
|
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
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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
|
-
|
61
|
-
|
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
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
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
|
-
|
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
|
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
|

|
@@ -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
|
-
|
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
|
+

|
191
|
+
</div>
|
183
192
|
|
184
|
-
|
185
|
-
|
186
|
-
|
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
|
-
|
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
|
-
|
197
|
-
|
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
|
-
|
200
|
-
|
201
|
-
|
204
|
+
<div class="ws-docs-content-img">
|
205
|
+

|
206
|
+
</div>
|
202
207
|
|
203
|
-
|
208
|
+
- 1-5: User actions with the newest event at the top.
|
204
209
|
|
205
|
-
|
210
|
+
1. PostHog
|
206
211
|
|
207
|
-
|
208
|
-
|
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
|
-
|
211
|
-
|
212
|
-
|
215
|
+
<div class="ws-docs-content-img">
|
216
|
+

|
217
|
+
</div>
|
213
218
|
|
214
|
-
|
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.
|