@patternfly/chatbot 2.1.0 → 2.2.0-prerelease.1
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.js +0 -9
- package/dist/cjs/MessageBar/SendButton.js +1 -1
- package/dist/css/main.css +22 -12
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Chatbot/Chatbot.js +0 -9
- package/dist/esm/MessageBar/SendButton.js +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarDisabled.tsx +26 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +12 -0
- package/src/Chatbot/Chatbot.scss +0 -10
- package/src/Chatbot/Chatbot.tsx +0 -9
- package/src/MessageBar/SendButton.scss +24 -0
- package/src/MessageBar/SendButton.tsx +1 -1
- package/src/main.scss +3 -3
|
@@ -29,15 +29,6 @@ var ChatbotDisplayMode;
|
|
|
29
29
|
})(ChatbotDisplayMode || (exports.ChatbotDisplayMode = ChatbotDisplayMode = {}));
|
|
30
30
|
const ChatbotBase = (_a) => {
|
|
31
31
|
var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
|
|
32
|
-
// Configure docked mode
|
|
33
|
-
react_1.default.useEffect(() => {
|
|
34
|
-
if (displayMode === ChatbotDisplayMode.docked) {
|
|
35
|
-
document.documentElement.classList.add('pf-chatbot-allow--docked');
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
document.documentElement.classList.remove('pf-chatbot-allow--docked');
|
|
39
|
-
}
|
|
40
|
-
}, [displayMode]);
|
|
41
32
|
// Configure animations
|
|
42
33
|
const motionChatbot = {
|
|
43
34
|
visible: { opacity: 1, y: 0 },
|
|
@@ -25,7 +25,7 @@ const paper_plane_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paper
|
|
|
25
25
|
const SendButton = (_a) => {
|
|
26
26
|
var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
|
|
27
27
|
return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
|
|
28
|
-
react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`,
|
|
28
|
+
react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
|
|
29
29
|
react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)) }, props))));
|
|
30
30
|
};
|
|
31
31
|
exports.SendButton = SendButton;
|
package/dist/css/main.css
CHANGED
|
@@ -99,15 +99,6 @@
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
html.pf-chatbot-allow--docked {
|
|
103
|
-
padding-inline-start: 480px;
|
|
104
|
-
}
|
|
105
|
-
@media screen and (max-width: 30rem) {
|
|
106
|
-
html.pf-chatbot-allow--docked {
|
|
107
|
-
padding-inline-start: 0px;
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
102
|
.pf-chatbot--fullscreen {
|
|
112
103
|
inset-block-end: 0;
|
|
113
104
|
inset-inline-end: 0;
|
|
@@ -1283,13 +1274,32 @@ html.pf-chatbot-allow--docked {
|
|
|
1283
1274
|
width: 3rem;
|
|
1284
1275
|
height: 3rem;
|
|
1285
1276
|
}
|
|
1277
|
+
.pf-v6-c-button.pf-chatbot__button--send .pf-v6-c-button__icon {
|
|
1278
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
|
|
1279
|
+
}
|
|
1286
1280
|
.pf-v6-c-button.pf-chatbot__button--send:hover, .pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
1287
1281
|
background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
|
|
1282
|
+
color: var(--pf-t--global--color--brand--hover);
|
|
1288
1283
|
}
|
|
1289
1284
|
.pf-v6-c-button.pf-chatbot__button--send:hover .pf-v6-c-button__icon, .pf-v6-c-button.pf-chatbot__button--send:focus .pf-v6-c-button__icon {
|
|
1290
1285
|
color: var(--pf-t--chatbot--blue-icon--fill--hover);
|
|
1291
1286
|
}
|
|
1292
1287
|
|
|
1288
|
+
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send {
|
|
1289
|
+
background-color: var(--pf-t--global--color--brand--default);
|
|
1290
|
+
}
|
|
1291
|
+
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send .pf-v6-c-button__icon {
|
|
1292
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
|
|
1293
|
+
}
|
|
1294
|
+
.pf-v6-theme-dark .pf-v6-c-button:disabled.pf-chatbot__button--send:disabled {
|
|
1295
|
+
--pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
|
1296
|
+
background-color: var(--pf-t--global--background--color--disabled--default);
|
|
1297
|
+
}
|
|
1298
|
+
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:hover,
|
|
1299
|
+
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
1300
|
+
background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1293
1303
|
@keyframes motionSendButton {
|
|
1294
1304
|
0% {
|
|
1295
1305
|
opacity: 0;
|
|
@@ -1629,9 +1639,9 @@ html.pf-chatbot-allow--docked {
|
|
|
1629
1639
|
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
|
|
1630
1640
|
--pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
|
1631
1641
|
--pf-t--chatbot--blue-icon--background--color--hover: rgba(
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1642
|
+
146,
|
|
1643
|
+
197,
|
|
1644
|
+
249,
|
|
1635
1645
|
0.25
|
|
1636
1646
|
);
|
|
1637
1647
|
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
|
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;;;;
|
|
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;;;AClKN;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"}
|
|
@@ -23,15 +23,6 @@ export var ChatbotDisplayMode;
|
|
|
23
23
|
})(ChatbotDisplayMode || (ChatbotDisplayMode = {}));
|
|
24
24
|
const ChatbotBase = (_a) => {
|
|
25
25
|
var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
|
|
26
|
-
// Configure docked mode
|
|
27
|
-
React.useEffect(() => {
|
|
28
|
-
if (displayMode === ChatbotDisplayMode.docked) {
|
|
29
|
-
document.documentElement.classList.add('pf-chatbot-allow--docked');
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
document.documentElement.classList.remove('pf-chatbot-allow--docked');
|
|
33
|
-
}
|
|
34
|
-
}, [displayMode]);
|
|
35
26
|
// Configure animations
|
|
36
27
|
const motionChatbot = {
|
|
37
28
|
visible: { opacity: 1, y: 0 },
|
|
@@ -19,7 +19,7 @@ import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-pla
|
|
|
19
19
|
export const SendButton = (_a) => {
|
|
20
20
|
var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
|
|
21
21
|
return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
|
|
22
|
-
React.createElement(Button, Object.assign({ className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`,
|
|
22
|
+
React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
|
|
23
23
|
React.createElement(PaperPlaneIcon, null)) }, props))));
|
|
24
24
|
};
|
|
25
25
|
export default SendButton;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/chatbot",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-prerelease.1",
|
|
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",
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
|
|
3
|
+
import { Checkbox } from '@patternfly/react-core';
|
|
4
|
+
|
|
5
|
+
export const ChatbotMessageBarDisabledExample: React.FunctionComponent = () => {
|
|
6
|
+
const [isDisabled, setIsDisabled] = React.useState(false);
|
|
7
|
+
const handleSend = (message) => alert(message);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
<Checkbox
|
|
12
|
+
label="Disable send button"
|
|
13
|
+
isChecked={isDisabled}
|
|
14
|
+
onChange={() => setIsDisabled(!isDisabled)}
|
|
15
|
+
id="disabled"
|
|
16
|
+
name="disabled"
|
|
17
|
+
/>
|
|
18
|
+
<MessageBar
|
|
19
|
+
onSendMessage={handleSend}
|
|
20
|
+
isSendButtonDisabled={isDisabled}
|
|
21
|
+
alwayShowSendButton
|
|
22
|
+
hasAttachButton={false}
|
|
23
|
+
/>
|
|
24
|
+
</>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
@@ -257,6 +257,18 @@ In this example, the locale is set to to ja-JP. You can try it out by saying "ha
|
|
|
257
257
|
|
|
258
258
|
```
|
|
259
259
|
|
|
260
|
+
### Message bar with always-shown send button
|
|
261
|
+
|
|
262
|
+
By default, the send button is only shown once a user has entered a valid message. If you choose to keep the send button visible at all times, disable the button when there is no valid message to send.
|
|
263
|
+
|
|
264
|
+
To always show the send button in the message bar, use the `alwaysShowSendButton` prop. Use the `isSendButtonDisabled` prop to disable the button as needed. If you want to enable or disable the send button based on the presence of text in the message bar, you can detect text via the `onChange` prop for `<MessageBar>`.
|
|
265
|
+
|
|
266
|
+
To disable the send button in the following example, select the "Disable send button" checkbox. When the button is disabled, you also cannot send via the enter key.
|
|
267
|
+
|
|
268
|
+
```js file="./ChatbotMessageBarDisabled.tsx"
|
|
269
|
+
|
|
270
|
+
```
|
|
271
|
+
|
|
260
272
|
### Message bar with attach menu appended to attach button
|
|
261
273
|
|
|
262
274
|
You can change the behavior of the attach button to open a menu, rather than the default file viewer for your operating system. This menu can display different actions related to attachments.
|
package/src/Chatbot/Chatbot.scss
CHANGED
|
@@ -54,16 +54,6 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
html.pf-chatbot-allow--docked {
|
|
58
|
-
padding-inline-start: 480px;
|
|
59
|
-
|
|
60
|
-
// 30rem is the width of the docked chatbot
|
|
61
|
-
// if the screen is smaller, we want to be 100%
|
|
62
|
-
@media screen and (max-width: 30rem) {
|
|
63
|
-
padding-inline-start: 0px;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
57
|
// ============================================================================
|
|
68
58
|
// Chatbot Display Mode - Fullscreen
|
|
69
59
|
// ============================================================================
|
package/src/Chatbot/Chatbot.tsx
CHANGED
|
@@ -35,15 +35,6 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
|
|
|
35
35
|
ariaLabel,
|
|
36
36
|
...props
|
|
37
37
|
}: ChatbotProps) => {
|
|
38
|
-
// Configure docked mode
|
|
39
|
-
React.useEffect(() => {
|
|
40
|
-
if (displayMode === ChatbotDisplayMode.docked) {
|
|
41
|
-
document.documentElement.classList.add('pf-chatbot-allow--docked');
|
|
42
|
-
} else {
|
|
43
|
-
document.documentElement.classList.remove('pf-chatbot-allow--docked');
|
|
44
|
-
}
|
|
45
|
-
}, [displayMode]);
|
|
46
|
-
|
|
47
38
|
// Configure animations
|
|
48
39
|
const motionChatbot = {
|
|
49
40
|
visible: { opacity: 1, y: 0 },
|
|
@@ -7,9 +7,14 @@
|
|
|
7
7
|
width: 3rem;
|
|
8
8
|
height: 3rem;
|
|
9
9
|
|
|
10
|
+
.pf-v6-c-button__icon {
|
|
11
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
|
|
12
|
+
}
|
|
13
|
+
|
|
10
14
|
&:hover,
|
|
11
15
|
&:focus {
|
|
12
16
|
background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
|
|
17
|
+
color: var(--pf-t--global--color--brand--hover);
|
|
13
18
|
|
|
14
19
|
.pf-v6-c-button__icon {
|
|
15
20
|
color: var(--pf-t--chatbot--blue-icon--fill--hover);
|
|
@@ -17,6 +22,25 @@
|
|
|
17
22
|
}
|
|
18
23
|
}
|
|
19
24
|
|
|
25
|
+
.pf-v6-theme-dark {
|
|
26
|
+
.pf-v6-c-button.pf-chatbot__button--send {
|
|
27
|
+
background-color: var(--pf-t--global--color--brand--default);
|
|
28
|
+
.pf-v6-c-button__icon {
|
|
29
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.pf-v6-c-button:disabled.pf-chatbot__button--send:disabled {
|
|
34
|
+
--pf-v6-c-button--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
|
35
|
+
background-color: var(--pf-t--global--background--color--disabled--default);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.pf-v6-c-button.pf-chatbot__button--send:hover,
|
|
39
|
+
.pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
40
|
+
background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
20
44
|
@keyframes motionSendButton {
|
|
21
45
|
0% {
|
|
22
46
|
opacity: 0;
|
|
@@ -37,8 +37,8 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
|
|
|
37
37
|
{...tooltipProps}
|
|
38
38
|
>
|
|
39
39
|
<Button
|
|
40
|
+
variant="plain"
|
|
40
41
|
className={`pf-chatbot__button--send ${className ?? ''}`}
|
|
41
|
-
variant="link"
|
|
42
42
|
aria-label={props['aria-label'] || 'Send button'}
|
|
43
43
|
onClick={onClick}
|
|
44
44
|
icon={
|
package/src/main.scss
CHANGED
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
--pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
|
|
48
48
|
|
|
49
49
|
--pf-t--chatbot--blue-icon--background--color--hover: rgba(
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
146,
|
|
51
|
+
197,
|
|
52
|
+
249,
|
|
53
53
|
0.25
|
|
54
54
|
); // --pf-t--global--color--nonstatus--blue--default @ 25%
|
|
55
55
|
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
|