@patternfly/chatbot 2.2.0-prerelease.1 → 2.2.0-prerelease.2
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/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +3 -1
- package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +2 -2
- package/dist/css/main.css +11 -0
- package/dist/css/main.css.map +1 -1
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts +3 -1
- package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js +2 -2
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +78 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +8 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +14 -0
- package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +6 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DrawerProps } from '@patternfly/react-core';
|
|
2
|
+
import { DrawerProps, MenuItemProps } from '@patternfly/react-core';
|
|
3
3
|
import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
|
|
4
4
|
export interface Conversation {
|
|
5
5
|
/** Conversation id */
|
|
@@ -18,6 +18,8 @@ export interface Conversation {
|
|
|
18
18
|
label?: string;
|
|
19
19
|
/** Callback for when user selects item. */
|
|
20
20
|
onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
|
|
21
|
+
/** Additional props passed to conversation menu item */
|
|
22
|
+
additionalProps?: MenuItemProps;
|
|
21
23
|
}
|
|
22
24
|
export interface ChatbotConversationHistoryNavProps extends DrawerProps {
|
|
23
25
|
/** Function called to toggle drawer */
|
|
@@ -32,11 +32,11 @@ const ChatbotConversationHistoryNav = (_a) => {
|
|
|
32
32
|
};
|
|
33
33
|
const getNavItem = (conversation) => {
|
|
34
34
|
var _a;
|
|
35
|
-
return (react_1.default.createElement(react_core_1.MenuItem, Object.assign({ className:
|
|
35
|
+
return (react_1.default.createElement(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : react_1.default.createElement(react_icons_1.OutlinedCommentAltIcon, null) }), (conversation.menuItems
|
|
36
36
|
? {
|
|
37
37
|
actions: (react_1.default.createElement(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
|
|
38
38
|
}
|
|
39
|
-
: {})), conversation.text));
|
|
39
|
+
: {}), conversation.additionalProps), conversation.text));
|
|
40
40
|
};
|
|
41
41
|
const buildMenu = () => {
|
|
42
42
|
if (Array.isArray(conversations)) {
|
package/dist/css/main.css
CHANGED
|
@@ -207,10 +207,20 @@
|
|
|
207
207
|
color: var(--pf-t--global--text--color--regular);
|
|
208
208
|
font-size: var(--pf-t--global--font--size--body--lg);
|
|
209
209
|
font-weight: var(--pf-t--global--font--weight--body--default);
|
|
210
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
211
|
+
}
|
|
212
|
+
.pf-chatbot__history .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
|
|
213
|
+
overflow: hidden;
|
|
210
214
|
}
|
|
211
215
|
.pf-chatbot__history .pf-chatbot__history-actions {
|
|
212
216
|
transform: rotate(90deg);
|
|
213
217
|
}
|
|
218
|
+
.pf-chatbot__history .pf-chatbot__menu-item--active {
|
|
219
|
+
background-color: var(--pf-t--global--background--color--action--plain--clicked);
|
|
220
|
+
}
|
|
221
|
+
.pf-chatbot__history button.pf-chatbot__menu-item--active {
|
|
222
|
+
background-color: initial;
|
|
223
|
+
}
|
|
214
224
|
|
|
215
225
|
.pf-chatbot__history.pf-v6-c-drawer {
|
|
216
226
|
--pf-v6-c-drawer__panel--MinWidth: 24rem;
|
|
@@ -254,6 +264,7 @@
|
|
|
254
264
|
border-radius: var(--pf-t--global--border--radius--pill);
|
|
255
265
|
justify-content: center;
|
|
256
266
|
align-items: center;
|
|
267
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
257
268
|
}
|
|
258
269
|
.pf-chatbot__history.pf-v6-c-drawer .pf-v6-c-drawer__body {
|
|
259
270
|
--pf-v6-c-drawer__panel__body--PaddingBlockStart: 0;
|
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/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/ListMessage/ListMessage.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/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.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;;AAEF;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;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;
|
|
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/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/ListMessage/ListMessage.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/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.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;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AChLN;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;;;AAUF;EACE;;AAGJ;EACE;;;AChDJ;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;;AAEF;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;;;AC1IF;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;;;ACxEN;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;EACA;EACA;EACA;EAEA;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;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;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;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;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;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;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;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxEF;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;;AAEA;EACE;;AAMA;EACE;;;ACrBR;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;;;ACJF;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DrawerProps } from '@patternfly/react-core';
|
|
2
|
+
import { DrawerProps, MenuItemProps } from '@patternfly/react-core';
|
|
3
3
|
import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
|
|
4
4
|
export interface Conversation {
|
|
5
5
|
/** Conversation id */
|
|
@@ -18,6 +18,8 @@ export interface Conversation {
|
|
|
18
18
|
label?: string;
|
|
19
19
|
/** Callback for when user selects item. */
|
|
20
20
|
onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
|
|
21
|
+
/** Additional props passed to conversation menu item */
|
|
22
|
+
additionalProps?: MenuItemProps;
|
|
21
23
|
}
|
|
22
24
|
export interface ChatbotConversationHistoryNavProps extends DrawerProps {
|
|
23
25
|
/** Function called to toggle drawer */
|
|
@@ -26,11 +26,11 @@ export const ChatbotConversationHistoryNav = (_a) => {
|
|
|
26
26
|
};
|
|
27
27
|
const getNavItem = (conversation) => {
|
|
28
28
|
var _a;
|
|
29
|
-
return (React.createElement(MenuItem, Object.assign({ className:
|
|
29
|
+
return (React.createElement(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : React.createElement(OutlinedCommentAltIcon, null) }), (conversation.menuItems
|
|
30
30
|
? {
|
|
31
31
|
actions: (React.createElement(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
|
|
32
32
|
}
|
|
33
|
-
: {})), conversation.text));
|
|
33
|
+
: {}), conversation.additionalProps), conversation.text));
|
|
34
34
|
};
|
|
35
35
|
const buildMenu = () => {
|
|
36
36
|
if (Array.isArray(conversations)) {
|
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.2",
|
|
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",
|
package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
|
|
3
|
+
import ChatbotConversationHistoryNav, {
|
|
4
|
+
Conversation
|
|
5
|
+
} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
|
|
6
|
+
import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
|
|
7
|
+
|
|
8
|
+
const menuItems = [
|
|
9
|
+
<DropdownList key="list-1">
|
|
10
|
+
<DropdownItem value="Share" id="Share">
|
|
11
|
+
Share
|
|
12
|
+
</DropdownItem>
|
|
13
|
+
<DropdownItem value="Rename" id="Rename">
|
|
14
|
+
Rename
|
|
15
|
+
</DropdownItem>
|
|
16
|
+
<DropdownItem value="Archive" id="Archive">
|
|
17
|
+
Archive
|
|
18
|
+
</DropdownItem>
|
|
19
|
+
<DropdownItem value="Delete" id="Delete">
|
|
20
|
+
Delete
|
|
21
|
+
</DropdownItem>
|
|
22
|
+
</DropdownList>
|
|
23
|
+
];
|
|
24
|
+
|
|
25
|
+
export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
|
|
26
|
+
const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
|
|
27
|
+
const [currentSelection, setCurrentSelection] = React.useState('2');
|
|
28
|
+
const displayMode = ChatbotDisplayMode.embedded;
|
|
29
|
+
|
|
30
|
+
const conversations: { [key: string]: Conversation[] } = {
|
|
31
|
+
Today: [{ id: '1', text: 'Red Hat products and services', menuItems }],
|
|
32
|
+
'This month': [
|
|
33
|
+
{
|
|
34
|
+
id: '2',
|
|
35
|
+
text: 'Enterprise Linux installation and setup',
|
|
36
|
+
menuItems
|
|
37
|
+
},
|
|
38
|
+
{ id: '3', text: 'Troubleshoot system crash', menuItems }
|
|
39
|
+
],
|
|
40
|
+
March: [
|
|
41
|
+
{ id: '4', text: 'Ansible security and updates', menuItems },
|
|
42
|
+
{ id: '5', text: 'Red Hat certification', menuItems },
|
|
43
|
+
{ id: '6', text: 'Lightspeed user documentation', menuItems }
|
|
44
|
+
],
|
|
45
|
+
February: [
|
|
46
|
+
{ id: '7', text: 'Crashing pod assistance', menuItems },
|
|
47
|
+
{ id: '8', text: 'OpenShift AI pipelines', menuItems },
|
|
48
|
+
{ id: '9', text: 'Updating subscription plan', menuItems },
|
|
49
|
+
{ id: '10', text: 'Red Hat licensing options', menuItems }
|
|
50
|
+
],
|
|
51
|
+
January: [
|
|
52
|
+
{ id: '11', text: 'RHEL system performance', menuItems },
|
|
53
|
+
{ id: '12', text: 'Manage user accounts', menuItems }
|
|
54
|
+
]
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<>
|
|
59
|
+
<Checkbox
|
|
60
|
+
label="Display drawer"
|
|
61
|
+
isChecked={isDrawerOpen}
|
|
62
|
+
onChange={() => setIsDrawerOpen(!isDrawerOpen)}
|
|
63
|
+
id="drawer-actions-visible"
|
|
64
|
+
name="drawer-actions-visible"
|
|
65
|
+
></Checkbox>
|
|
66
|
+
<ChatbotConversationHistoryNav
|
|
67
|
+
displayMode={displayMode}
|
|
68
|
+
onDrawerToggle={() => setIsDrawerOpen(!isDrawerOpen)}
|
|
69
|
+
isDrawerOpen={isDrawerOpen}
|
|
70
|
+
setIsDrawerOpen={setIsDrawerOpen}
|
|
71
|
+
conversations={conversations}
|
|
72
|
+
drawerContent={<div>Drawer content</div>}
|
|
73
|
+
activeItemId={currentSelection}
|
|
74
|
+
onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)}
|
|
75
|
+
/>
|
|
76
|
+
</>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
@@ -357,6 +357,14 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
|
|
|
357
357
|
|
|
358
358
|
```
|
|
359
359
|
|
|
360
|
+
### Drawer with active conversation
|
|
361
|
+
|
|
362
|
+
If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `<ChatbotConversationHistoryNav>` to apply an active visual state.
|
|
363
|
+
|
|
364
|
+
```js file="./ChatbotHeaderDrawerWithSelection.tsx"
|
|
365
|
+
|
|
366
|
+
```
|
|
367
|
+
|
|
360
368
|
### Modal
|
|
361
369
|
|
|
362
370
|
Based on the [PatternFly modal](/components/modal), this modal adapts to the ChatBot display mode and accepts components typically used in a modal. It is primarily used and tested in the context of the attachment modals, but you can customize this modal to adapt it to other use cases as needed. The modal will overlay the ChatBot in default and docked modes, and will behave more like a traditional PatternFly modal in fullscreen and embedded modes.
|
|
@@ -44,10 +44,23 @@
|
|
|
44
44
|
color: var(--pf-t--global--text--color--regular);
|
|
45
45
|
font-size: var(--pf-t--global--font--size--body--lg);
|
|
46
46
|
font-weight: var(--pf-t--global--font--weight--body--default);
|
|
47
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
48
|
+
}
|
|
49
|
+
// allows focus state to have border radius
|
|
50
|
+
.pf-v6-c-menu__list-item.pf-chatbot__menu-item {
|
|
51
|
+
overflow: hidden;
|
|
47
52
|
}
|
|
48
53
|
.pf-chatbot__history-actions {
|
|
49
54
|
transform: rotate(90deg);
|
|
50
55
|
}
|
|
56
|
+
|
|
57
|
+
.pf-chatbot__menu-item--active {
|
|
58
|
+
background-color: var(--pf-t--global--background--color--action--plain--clicked);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
button.pf-chatbot__menu-item--active {
|
|
62
|
+
background-color: initial;
|
|
63
|
+
}
|
|
51
64
|
}
|
|
52
65
|
|
|
53
66
|
// Chatbot Header - Drawer
|
|
@@ -105,6 +118,7 @@
|
|
|
105
118
|
border-radius: var(--pf-t--global--border--radius--pill);
|
|
106
119
|
justify-content: center;
|
|
107
120
|
align-items: center;
|
|
121
|
+
border-radius: var(--pf-t--global--border--radius--small);
|
|
108
122
|
}
|
|
109
123
|
}
|
|
110
124
|
|
|
@@ -20,7 +20,8 @@ import {
|
|
|
20
20
|
MenuList,
|
|
21
21
|
MenuGroup,
|
|
22
22
|
MenuItem,
|
|
23
|
-
MenuContent
|
|
23
|
+
MenuContent,
|
|
24
|
+
MenuItemProps
|
|
24
25
|
} from '@patternfly/react-core';
|
|
25
26
|
|
|
26
27
|
import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
|
|
@@ -44,6 +45,8 @@ export interface Conversation {
|
|
|
44
45
|
label?: string;
|
|
45
46
|
/** Callback for when user selects item. */
|
|
46
47
|
onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
|
|
48
|
+
/** Additional props passed to conversation menu item */
|
|
49
|
+
additionalProps?: MenuItemProps;
|
|
47
50
|
}
|
|
48
51
|
export interface ChatbotConversationHistoryNavProps extends DrawerProps {
|
|
49
52
|
/** Function called to toggle drawer */
|
|
@@ -104,7 +107,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
|
|
|
104
107
|
|
|
105
108
|
const getNavItem = (conversation: Conversation) => (
|
|
106
109
|
<MenuItem
|
|
107
|
-
className=
|
|
110
|
+
className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
|
|
108
111
|
itemId={conversation.id}
|
|
109
112
|
key={conversation.id}
|
|
110
113
|
{...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
|
|
@@ -121,6 +124,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
|
|
|
121
124
|
)
|
|
122
125
|
}
|
|
123
126
|
: {})}
|
|
127
|
+
{...conversation.additionalProps}
|
|
124
128
|
/* eslint-enable indent */
|
|
125
129
|
>
|
|
126
130
|
{conversation.text}
|