@patternfly/chatbot 6.3.0-prerelease.25 → 6.3.0-prerelease.26
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/Message/CodeBlockMessage/CodeBlockMessage.js +14 -2
- package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +4 -1
- package/dist/cjs/Message/Plugins/index.d.ts +1 -0
- package/dist/cjs/Message/Plugins/index.js +5 -0
- package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.d.ts +2 -0
- package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.js +24 -0
- package/dist/cjs/Message/index.d.ts +1 -0
- package/dist/cjs/Message/index.js +3 -1
- package/dist/css/main.css +13 -51
- package/dist/css/main.css.map +1 -1
- package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js +14 -2
- package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +4 -1
- package/dist/esm/Message/Plugins/index.d.ts +1 -0
- package/dist/esm/Message/Plugins/index.js +1 -0
- package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.d.ts +2 -0
- package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.js +20 -0
- package/dist/esm/Message/index.d.ts +1 -0
- package/dist/esm/Message/index.js +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +5 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +1 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +5 -0
- package/src/Chatbot/Chatbot.scss +1 -1
- package/src/ChatbotContent/ChatbotContent.scss +1 -1
- package/src/ChatbotFooter/ChatbotFooter.scss +1 -1
- package/src/ChatbotHeader/ChatbotHeader.scss +2 -2
- package/src/ChatbotToggle/ChatbotToggle.scss +2 -2
- package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +24 -3
- package/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx +3 -0
- package/src/Message/Message.scss +8 -6
- package/src/Message/Plugins/index.ts +1 -0
- package/src/Message/Plugins/rehypeCodeBlockToggle.ts +24 -0
- package/src/Message/index.ts +1 -0
- package/src/MessageBar/SendButton.scss +3 -3
- package/src/MessageBox/JumpButton.scss +1 -1
- package/src/main.scss +0 -52
|
@@ -26,9 +26,11 @@ const react_core_1 = require("@patternfly/react-core");
|
|
|
26
26
|
const check_icon_1 = require("@patternfly/react-icons/dist/esm/icons/check-icon");
|
|
27
27
|
const copy_icon_1 = require("@patternfly/react-icons/dist/esm/icons/copy-icon");
|
|
28
28
|
const ExpandableSectionForSyntaxHighlighter_1 = require("./ExpandableSectionForSyntaxHighlighter");
|
|
29
|
+
const DEFAULT_EXPANDED_TEXT = 'Show less';
|
|
30
|
+
const DEFAULT_COLLAPSED_TEXT = 'Show more';
|
|
29
31
|
const CodeBlockMessage = (_a) => {
|
|
30
32
|
var _b;
|
|
31
|
-
var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText =
|
|
33
|
+
var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
|
|
32
34
|
const [copied, setCopied] = (0, react_1.useState)(false);
|
|
33
35
|
const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
|
|
34
36
|
const buttonRef = (0, react_1.useRef)();
|
|
@@ -37,6 +39,16 @@ const CodeBlockMessage = (_a) => {
|
|
|
37
39
|
const contentId = (0, react_1.useId)();
|
|
38
40
|
const codeBlockRef = (0, react_1.useRef)(null);
|
|
39
41
|
const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
|
|
42
|
+
// Get custom toggle text from data attributes if available - for use with rehype plugins
|
|
43
|
+
const customExpandedText = props['data-expanded-text'];
|
|
44
|
+
const customCollapsedText = props['data-collapsed-text'];
|
|
45
|
+
const finalExpandedText = customExpandedText || expandedText;
|
|
46
|
+
const finalCollapsedText = customCollapsedText || collapsedText;
|
|
47
|
+
if ((customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
|
|
48
|
+
(customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)) {
|
|
49
|
+
// eslint-disable-next-line no-console
|
|
50
|
+
console.error('Message:', 'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.');
|
|
51
|
+
}
|
|
40
52
|
const onToggle = (isExpanded) => {
|
|
41
53
|
setIsExpanded(isExpanded);
|
|
42
54
|
};
|
|
@@ -62,6 +74,6 @@ const CodeBlockMessage = (_a) => {
|
|
|
62
74
|
return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlock, { actions: actions, children: [(0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: language ? (
|
|
63
75
|
// SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
|
|
64
76
|
// Forked for now and adjusted to match what we need
|
|
65
|
-
(0, jsx_runtime_1.jsx)(ExpandableSectionForSyntaxHighlighter_1.ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.default, Object.assign({}, props, { language: language, style: hljs_1.obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ?
|
|
77
|
+
(0, jsx_runtime_1.jsx)(ExpandableSectionForSyntaxHighlighter_1.ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: (0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.default, Object.assign({}, props, { language: language, style: hljs_1.obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
|
|
66
78
|
};
|
|
67
79
|
exports.default = CodeBlockMessage;
|
|
@@ -114,7 +114,10 @@ class ExpandableSectionForSyntaxHighlighter extends react_1.Component {
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
117
|
-
const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant
|
|
117
|
+
const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant,
|
|
118
|
+
// Gets rid of console error about it being on a DOM element
|
|
119
|
+
// eslint-disable-next-line
|
|
120
|
+
truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
|
|
118
121
|
if (isDetached && !toggleId) {
|
|
119
122
|
/* eslint-disable no-console */
|
|
120
123
|
console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.rehypeCodeBlockToggle = void 0;
|
|
4
|
+
var rehypeCodeBlockToggle_1 = require("./rehypeCodeBlockToggle");
|
|
5
|
+
Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.rehypeCodeBlockToggle = void 0;
|
|
4
|
+
const unist_util_visit_1 = require("unist-util-visit");
|
|
5
|
+
// Rehype plugin to add language information to code block props
|
|
6
|
+
// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
|
|
7
|
+
// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
|
|
8
|
+
const rehypeCodeBlockToggle = () => (tree) => {
|
|
9
|
+
(0, unist_util_visit_1.visit)(tree, 'element', (node) => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (node.tagName === 'code' && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.className)) {
|
|
12
|
+
const className = node.properties.className;
|
|
13
|
+
const languageMatch = className.find((cls) => cls.startsWith('language-'));
|
|
14
|
+
if (languageMatch) {
|
|
15
|
+
const language = languageMatch.replace('language-', '').toUpperCase();
|
|
16
|
+
// Add the language and toggle text as data attributes
|
|
17
|
+
node.properties['data-language'] = language;
|
|
18
|
+
node.properties['data-expanded-text'] = `Show less ${language} code`;
|
|
19
|
+
node.properties['data-collapsed-text'] = `Show more ${language} code`;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
exports.rehypeCodeBlockToggle = rehypeCodeBlockToggle;
|
|
@@ -17,7 +17,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.default = void 0;
|
|
20
|
+
exports.rehypeCodeBlockToggle = exports.default = void 0;
|
|
21
21
|
var Message_1 = require("./Message");
|
|
22
22
|
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Message_1).default; } });
|
|
23
|
+
var rehypeCodeBlockToggle_1 = require("./Plugins/rehypeCodeBlockToggle");
|
|
24
|
+
Object.defineProperty(exports, "rehypeCodeBlockToggle", { enumerable: true, get: function () { return rehypeCodeBlockToggle_1.rehypeCodeBlockToggle; } });
|
|
23
25
|
__exportStar(require("./Message"), exports);
|
package/dist/css/main.css
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
flex-direction: column;
|
|
63
63
|
width: 30rem;
|
|
64
64
|
height: 70vh;
|
|
65
|
-
background-color: var(--pf-t--
|
|
65
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
66
66
|
border-radius: var(--pf-t--global--border--radius--medium);
|
|
67
67
|
box-shadow: var(--pf-t--global--box-shadow--lg);
|
|
68
68
|
font-size: var(--pf-t--global--font--size--md);
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
|
|
173
173
|
.pf-chatbot__content {
|
|
174
174
|
position: relative;
|
|
175
|
-
background-color: var(--pf-t--
|
|
175
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
176
176
|
overflow-y: auto;
|
|
177
177
|
overflow: hidden;
|
|
178
178
|
flex: 1;
|
|
@@ -382,7 +382,7 @@
|
|
|
382
382
|
|
|
383
383
|
.pf-chatbot__footer {
|
|
384
384
|
--pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
|
|
385
|
-
background-color: var(--pf-t--
|
|
385
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
386
386
|
display: flex;
|
|
387
387
|
flex-direction: column;
|
|
388
388
|
row-gap: var(--pf-chatbot__footer--RowGap);
|
|
@@ -435,7 +435,7 @@
|
|
|
435
435
|
grid-template-columns: 1fr auto;
|
|
436
436
|
gap: var(--pf-t--global--spacer--sm);
|
|
437
437
|
position: relative;
|
|
438
|
-
background-color: var(--pf-t--
|
|
438
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
439
439
|
justify-content: space-between;
|
|
440
440
|
padding: var(--pf-t--global--spacer--lg);
|
|
441
441
|
}
|
|
@@ -485,7 +485,7 @@
|
|
|
485
485
|
}
|
|
486
486
|
.pf-chatbot--drawer .pf-chatbot__header,
|
|
487
487
|
.pf-chatbot--docked .pf-chatbot__header {
|
|
488
|
-
background-color: var(--pf-t--
|
|
488
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
489
489
|
}
|
|
490
490
|
|
|
491
491
|
.pf-chatbot__button--toggle-options,
|
|
@@ -664,11 +664,11 @@
|
|
|
664
664
|
inset-block-end: var(--pf-t--global--spacer--md);
|
|
665
665
|
inset-inline-end: var(--pf-t--global--spacer--md);
|
|
666
666
|
background-color: var(--pf-t--global--background--color--inverse--default);
|
|
667
|
-
--pf-v6-c-button__icon--Color: var(--pf-t--
|
|
667
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
|
|
668
668
|
padding: var(--pf-t--global--spacer--md);
|
|
669
669
|
}
|
|
670
670
|
.pf-v6-c-button.pf-chatbot__button:hover, .pf-v6-c-button.pf-chatbot__button:focus {
|
|
671
|
-
background-color: var(--pf-t--
|
|
671
|
+
background-color: var(--pf-t--color--gray--70);
|
|
672
672
|
}
|
|
673
673
|
.pf-v6-c-button.pf-chatbot__button .pf-v6-c-button__icon {
|
|
674
674
|
display: contents;
|
|
@@ -1052,18 +1052,14 @@
|
|
|
1052
1052
|
gap: var(--pf-t--global--spacer--sm);
|
|
1053
1053
|
}
|
|
1054
1054
|
.pf-chatbot__message-meta .pf-chatbot__message-name {
|
|
1055
|
-
font-family: var(--pf-
|
|
1055
|
+
font-family: var(--pf-v6-c-content--heading--FontFamily, redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif);
|
|
1056
1056
|
font-weight: 600;
|
|
1057
1057
|
font-size: var(--pf-t--global--font--size--sm);
|
|
1058
1058
|
}
|
|
1059
1059
|
.pf-chatbot__message-meta .pf-v6-c-label {
|
|
1060
|
-
--pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
|
|
1061
1060
|
--pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
|
|
1062
1061
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
1063
1062
|
}
|
|
1064
|
-
.pf-chatbot__message-meta .pf-v6-c-label .pf-v6-c-label__content {
|
|
1065
|
-
--pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
|
|
1066
|
-
}
|
|
1067
1063
|
.pf-chatbot__message-meta .pf-v6-c-timestamp {
|
|
1068
1064
|
flex: 1 0 max-content;
|
|
1069
1065
|
}
|
|
@@ -1703,11 +1699,11 @@
|
|
|
1703
1699
|
--pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
|
|
1704
1700
|
}
|
|
1705
1701
|
.pf-v6-c-button.pf-chatbot__button--send:hover, .pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
1706
|
-
background-color:
|
|
1702
|
+
background-color: rgba(146, 197, 249, 0.25);
|
|
1707
1703
|
color: var(--pf-t--global--color--brand--hover);
|
|
1708
1704
|
}
|
|
1709
1705
|
.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 {
|
|
1710
|
-
color: var(--pf-t--
|
|
1706
|
+
color: var(--pf-t--global--color--brand--hover);
|
|
1711
1707
|
}
|
|
1712
1708
|
|
|
1713
1709
|
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send {
|
|
@@ -1722,7 +1718,7 @@
|
|
|
1722
1718
|
}
|
|
1723
1719
|
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:hover,
|
|
1724
1720
|
.pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
1725
|
-
background-color:
|
|
1721
|
+
background-color: rgba(146, 197, 249, 0.25);
|
|
1726
1722
|
}
|
|
1727
1723
|
|
|
1728
1724
|
@keyframes motionSendButton {
|
|
@@ -1890,7 +1886,7 @@
|
|
|
1890
1886
|
border-radius: var(--pf-t--global--border--radius--pill) !important;
|
|
1891
1887
|
--pf-v6-c-button--MinWidth: 2rem !important;
|
|
1892
1888
|
background-color: var(--pf-t--global--background--color--primary--default) !important;
|
|
1893
|
-
border: 1px solid var(--pf-t--
|
|
1889
|
+
border: 1px solid var(--pf-t--global--border--color--default) !important;
|
|
1894
1890
|
box-shadow: var(--pf-t--global--box-shadow--sm);
|
|
1895
1891
|
color: var(--pf-t--global--icon--color--subtle) !important;
|
|
1896
1892
|
transform: translate3d(-50%, 0, 0) !important;
|
|
@@ -1974,7 +1970,7 @@
|
|
|
1974
1970
|
border-radius: var(--pf-t--global--border--radius--pill) !important;
|
|
1975
1971
|
--pf-v6-c-button--MinWidth: 2rem !important;
|
|
1976
1972
|
background-color: var(--pf-t--global--background--color--primary--default) !important;
|
|
1977
|
-
border: 1px solid var(--pf-t--
|
|
1973
|
+
border: 1px solid var(--pf-t--global--border--color--default) !important;
|
|
1978
1974
|
box-shadow: var(--pf-t--global--box-shadow--sm);
|
|
1979
1975
|
color: var(--pf-t--global--icon--color--subtle) !important;
|
|
1980
1976
|
transform: translate3d(-50%, 0, 0) !important;
|
|
@@ -2248,40 +2244,6 @@
|
|
|
2248
2244
|
--pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
|
2249
2245
|
}
|
|
2250
2246
|
|
|
2251
|
-
:where(:root) {
|
|
2252
|
-
--pf-t--chatbot--heading--font-family: var(
|
|
2253
|
-
--pf-v6-c-content--heading--FontFamily,
|
|
2254
|
-
redhatdisplayvf,
|
|
2255
|
-
redhatdisplay,
|
|
2256
|
-
helvetica,
|
|
2257
|
-
arial,
|
|
2258
|
-
sans-serif
|
|
2259
|
-
);
|
|
2260
|
-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
|
|
2261
|
-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
|
|
2262
|
-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
|
|
2263
|
-
--pf-t--chatbot--blue-icon--background--color--hover: rgba(
|
|
2264
|
-
146,
|
|
2265
|
-
197,
|
|
2266
|
-
249,
|
|
2267
|
-
0.25
|
|
2268
|
-
);
|
|
2269
|
-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
|
|
2270
|
-
--pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
|
|
2271
|
-
--pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
|
|
2272
|
-
--pf-t--chatbot--border: var(--pf-t--global--border--color--default);
|
|
2273
|
-
--pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
|
|
2274
|
-
--pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
|
|
2275
|
-
}
|
|
2276
|
-
|
|
2277
|
-
:where(.pf-v6-theme-dark) {
|
|
2278
|
-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
|
|
2279
|
-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
|
|
2280
|
-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
|
|
2281
|
-
--pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
|
|
2282
|
-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
|
|
2283
|
-
}
|
|
2284
|
-
|
|
2285
2247
|
.ws-full-page-utils {
|
|
2286
2248
|
left: 0 !important;
|
|
2287
2249
|
right: auto !important;
|
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;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;ACpIF;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;;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;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC1ON;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;;;AAIJ;EACE;EACA;;;AC3DF;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;EACA;;;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;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;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;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;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;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;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;;;AAGF;EACE;;;ACjGF;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;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHiCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AE/HJ;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;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;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;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;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;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;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;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;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;;;AAMJ;EACE;;;AD9CJ;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;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;AChFJ;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;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AChDJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":";AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;ACpIF;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;;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;;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;;AC1ON;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;;;AAIJ;EACE;EACA;;;AC3DF;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;EACA;;;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;;;AAOA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AClKF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;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;;;AAOA;EACE;;AAGF;EACE;EACA;;;ACjGF;EACE;;AAMA;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACxBN;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;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;ACpDN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGA;EACE;;;AAUF;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AC5FJ;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;EAQA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACnGF;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;;;AAIA;EACE;EACA;;;AClFJ;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AHmCJ;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AEjIJ;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;;;AAIA;EACE;EACA;;;AEtFJ;EACE;EACA;EACA;EACA;EAGA;;;ADHF;EACE;;AAGE;EACE;;;AAMN;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;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE1EN;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;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AAKF;EACE;;AAGF;EACE;;AAIA;EACE;;;ACnEN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;ACzCF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AAOJ;EACE;EACA;EACA;EACA;;;ACrDF;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;;;AAOJ;EACE;EACA;EACA;EACA;;;AC1DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;AASR;EACE;EACA;EACA;EACA;;;AClCF;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;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;AAQN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AC1HJ;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;;;AAMJ;EACE;;;AD9CJ;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;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;AAON;EACE;EACA;;;AChFJ;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;;;AAKF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AChDJ;EACE;EACA","file":"main.css"}
|
|
@@ -21,9 +21,11 @@ import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableS
|
|
|
21
21
|
import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
|
|
22
22
|
import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
|
|
23
23
|
import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
|
|
24
|
+
const DEFAULT_EXPANDED_TEXT = 'Show less';
|
|
25
|
+
const DEFAULT_COLLAPSED_TEXT = 'Show more';
|
|
24
26
|
const CodeBlockMessage = (_a) => {
|
|
25
27
|
var _b;
|
|
26
|
-
var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText =
|
|
28
|
+
var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
|
|
27
29
|
const [copied, setCopied] = useState(false);
|
|
28
30
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
29
31
|
const buttonRef = useRef();
|
|
@@ -32,6 +34,16 @@ const CodeBlockMessage = (_a) => {
|
|
|
32
34
|
const contentId = useId();
|
|
33
35
|
const codeBlockRef = useRef(null);
|
|
34
36
|
const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
|
|
37
|
+
// Get custom toggle text from data attributes if available - for use with rehype plugins
|
|
38
|
+
const customExpandedText = props['data-expanded-text'];
|
|
39
|
+
const customCollapsedText = props['data-collapsed-text'];
|
|
40
|
+
const finalExpandedText = customExpandedText || expandedText;
|
|
41
|
+
const finalCollapsedText = customCollapsedText || collapsedText;
|
|
42
|
+
if ((customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
|
|
43
|
+
(customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)) {
|
|
44
|
+
// eslint-disable-next-line no-console
|
|
45
|
+
console.error('Message:', 'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.');
|
|
46
|
+
}
|
|
35
47
|
const onToggle = (isExpanded) => {
|
|
36
48
|
setIsExpanded(isExpanded);
|
|
37
49
|
};
|
|
@@ -57,6 +69,6 @@ const CodeBlockMessage = (_a) => {
|
|
|
57
69
|
return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: language ? (
|
|
58
70
|
// SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
|
|
59
71
|
// Forked for now and adjusted to match what we need
|
|
60
|
-
_jsx(ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: _jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ?
|
|
72
|
+
_jsx(ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: _jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
|
|
61
73
|
};
|
|
62
74
|
export default CodeBlockMessage;
|
|
@@ -108,7 +108,10 @@ class ExpandableSectionForSyntaxHighlighter extends Component {
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
render() {
|
|
111
|
-
const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant
|
|
111
|
+
const _a = this.props, { className, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, toggleId, variant,
|
|
112
|
+
// Gets rid of console error about it being on a DOM element
|
|
113
|
+
// eslint-disable-next-line
|
|
114
|
+
truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
|
|
112
115
|
if (isDetached && !toggleId) {
|
|
113
116
|
/* eslint-disable no-console */
|
|
114
117
|
console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { visit } from 'unist-util-visit';
|
|
2
|
+
// Rehype plugin to add language information to code block props
|
|
3
|
+
// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
|
|
4
|
+
// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
|
|
5
|
+
export const rehypeCodeBlockToggle = () => (tree) => {
|
|
6
|
+
visit(tree, 'element', (node) => {
|
|
7
|
+
var _a;
|
|
8
|
+
if (node.tagName === 'code' && ((_a = node.properties) === null || _a === void 0 ? void 0 : _a.className)) {
|
|
9
|
+
const className = node.properties.className;
|
|
10
|
+
const languageMatch = className.find((cls) => cls.startsWith('language-'));
|
|
11
|
+
if (languageMatch) {
|
|
12
|
+
const language = languageMatch.replace('language-', '').toUpperCase();
|
|
13
|
+
// Add the language and toggle text as data attributes
|
|
14
|
+
node.properties['data-language'] = language;
|
|
15
|
+
node.properties['data-expanded-text'] = `Show less ${language} code`;
|
|
16
|
+
node.properties['data-collapsed-text'] = `Show more ${language} code`;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
|
|
1
|
+
{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/chatbot",
|
|
3
|
-
"version": "6.3.0-prerelease.
|
|
3
|
+
"version": "6.3.0-prerelease.26",
|
|
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",
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
SelectList,
|
|
11
11
|
SelectOption
|
|
12
12
|
} from '@patternfly/react-core';
|
|
13
|
+
import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
|
|
13
14
|
|
|
14
15
|
export const BotMessageExample: FunctionComponent = () => {
|
|
15
16
|
const [variant, setVariant] = useState<string>('Code');
|
|
@@ -260,6 +261,10 @@ _Italic text, formatted with single underscores_
|
|
|
260
261
|
}
|
|
261
262
|
error={variant === 'Error' ? error : undefined}
|
|
262
263
|
codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
|
|
264
|
+
// In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
|
|
265
|
+
// The purpose of this plugin is to provide unique link names for the code blocks
|
|
266
|
+
// Because they are in the same message, this requires a custom plugin to parse the syntax tree
|
|
267
|
+
additionalRehypePlugins={[rehypeCodeBlockToggle]}
|
|
263
268
|
/>
|
|
264
269
|
</>
|
|
265
270
|
);
|
|
@@ -31,6 +31,7 @@ sortValue: 3
|
|
|
31
31
|
---
|
|
32
32
|
|
|
33
33
|
import Message from '@patternfly/chatbot/dist/dynamic/Message';
|
|
34
|
+
import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
|
|
34
35
|
import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
|
|
35
36
|
import { RobotIcon } from '@patternfly/react-icons/dist/esm/icons/robot-icon';
|
|
36
37
|
import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
SelectList,
|
|
10
10
|
SelectOption
|
|
11
11
|
} from '@patternfly/react-core';
|
|
12
|
+
import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
|
|
12
13
|
|
|
13
14
|
export const UserMessageExample: FunctionComponent = () => {
|
|
14
15
|
const [variant, setVariant] = useState<string>('Code');
|
|
@@ -250,6 +251,10 @@ _Italic text, formatted with single underscores_
|
|
|
250
251
|
onEditUpdate={() => setIsEditable(false)}
|
|
251
252
|
onEditCancel={() => setIsEditable(false)}
|
|
252
253
|
codeBlockProps={{ isExpandable, expandableSectionProps: { truncateMaxLines: isExpandable ? 1 : undefined } }}
|
|
254
|
+
// In this example, custom plugin will override any custom expandedText or collapsedText attributes provided
|
|
255
|
+
// The purpose of this plugin is to provide unique link names for the code blocks
|
|
256
|
+
// Because they are in the same message, this requires a custom plugin to parse the syntax tree
|
|
257
|
+
additionalRehypePlugins={[rehypeCodeBlockToggle]}
|
|
253
258
|
/>
|
|
254
259
|
</>
|
|
255
260
|
);
|
package/src/Chatbot/Chatbot.scss
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
flex-direction: column;
|
|
10
10
|
width: 30rem;
|
|
11
11
|
height: 70vh;
|
|
12
|
-
background-color: var(--pf-t--
|
|
12
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
13
13
|
border-radius: var(--pf-t--global--border--radius--medium);
|
|
14
14
|
box-shadow: var(--pf-t--global--box-shadow--lg);
|
|
15
15
|
font-size: var(--pf-t--global--font--size--md);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
// ============================================================================
|
|
4
4
|
.pf-chatbot__content {
|
|
5
5
|
position: relative;
|
|
6
|
-
background-color: var(--pf-t--
|
|
6
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
7
7
|
overflow-y: auto;
|
|
8
8
|
overflow: hidden; // needed in Red Hat Developer Hub workspace
|
|
9
9
|
flex: 1; // needed in Composer AI
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
// ============================================================================
|
|
7
7
|
.pf-chatbot__footer {
|
|
8
8
|
--pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
|
|
9
|
-
background-color: var(--pf-t--
|
|
9
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
row-gap: var(--pf-chatbot__footer--RowGap);
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
grid-template-columns: 1fr auto;
|
|
10
10
|
gap: var(--pf-t--global--spacer--sm);
|
|
11
11
|
position: relative; // this is so focus ring on parent chatbot doesn't include header
|
|
12
|
-
background-color: var(--pf-t--
|
|
12
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
13
13
|
justify-content: space-between;
|
|
14
14
|
padding: var(--pf-t--global--spacer--lg);
|
|
15
15
|
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
.pf-chatbot--drawer,
|
|
77
77
|
.pf-chatbot--docked {
|
|
78
78
|
.pf-chatbot__header {
|
|
79
|
-
background-color: var(--pf-t--
|
|
79
|
+
background-color: var(--pf-t--global--background--color--secondary--default);
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
inset-block-end: var(--pf-t--global--spacer--md);
|
|
7
7
|
inset-inline-end: var(--pf-t--global--spacer--md);
|
|
8
8
|
background-color: var(--pf-t--global--background--color--inverse--default);
|
|
9
|
-
--pf-v6-c-button__icon--Color: var(--pf-t--
|
|
9
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
|
|
10
10
|
padding: var(--pf-t--global--spacer--md);
|
|
11
11
|
|
|
12
12
|
&:hover,
|
|
13
13
|
&:focus {
|
|
14
|
-
background-color: var(--pf-t--
|
|
14
|
+
background-color: var(--pf-t--color--gray--70);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.pf-v6-c-button__icon {
|
|
@@ -41,6 +41,9 @@ export interface CodeBlockMessageProps {
|
|
|
41
41
|
collapsedText?: string;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
const DEFAULT_EXPANDED_TEXT = 'Show less';
|
|
45
|
+
const DEFAULT_COLLAPSED_TEXT = 'Show more';
|
|
46
|
+
|
|
44
47
|
const CodeBlockMessage = ({
|
|
45
48
|
children,
|
|
46
49
|
className,
|
|
@@ -48,8 +51,8 @@ const CodeBlockMessage = ({
|
|
|
48
51
|
isExpandable = false,
|
|
49
52
|
expandableSectionProps,
|
|
50
53
|
expandableSectionToggleProps,
|
|
51
|
-
expandedText =
|
|
52
|
-
collapsedText =
|
|
54
|
+
expandedText = DEFAULT_EXPANDED_TEXT,
|
|
55
|
+
collapsedText = DEFAULT_COLLAPSED_TEXT,
|
|
53
56
|
...props
|
|
54
57
|
}: CodeBlockMessageProps) => {
|
|
55
58
|
const [copied, setCopied] = useState(false);
|
|
@@ -63,6 +66,24 @@ const CodeBlockMessage = ({
|
|
|
63
66
|
|
|
64
67
|
const language = /language-(\w+)/.exec(className || '')?.[1];
|
|
65
68
|
|
|
69
|
+
// Get custom toggle text from data attributes if available - for use with rehype plugins
|
|
70
|
+
const customExpandedText = props['data-expanded-text'];
|
|
71
|
+
const customCollapsedText = props['data-collapsed-text'];
|
|
72
|
+
|
|
73
|
+
const finalExpandedText = customExpandedText || expandedText;
|
|
74
|
+
const finalCollapsedText = customCollapsedText || collapsedText;
|
|
75
|
+
|
|
76
|
+
if (
|
|
77
|
+
(customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
|
|
78
|
+
(customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)
|
|
79
|
+
) {
|
|
80
|
+
// eslint-disable-next-line no-console
|
|
81
|
+
console.error(
|
|
82
|
+
'Message:',
|
|
83
|
+
'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.'
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
|
|
66
87
|
const onToggle = (isExpanded) => {
|
|
67
88
|
setIsExpanded(isExpanded);
|
|
68
89
|
};
|
|
@@ -164,7 +185,7 @@ const CodeBlockMessage = ({
|
|
|
164
185
|
className="pf-chatbot__message-code-toggle"
|
|
165
186
|
{...expandableSectionToggleProps}
|
|
166
187
|
>
|
|
167
|
-
{isExpanded ?
|
|
188
|
+
{isExpanded ? finalExpandedText : finalCollapsedText}
|
|
168
189
|
</ExpandableSectionToggle>
|
|
169
190
|
)}
|
|
170
191
|
</CodeBlock>
|
|
@@ -176,6 +176,9 @@ class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionP
|
|
|
176
176
|
contentId,
|
|
177
177
|
toggleId,
|
|
178
178
|
variant,
|
|
179
|
+
// Gets rid of console error about it being on a DOM element
|
|
180
|
+
// eslint-disable-next-line
|
|
181
|
+
truncateMaxLines,
|
|
179
182
|
...props
|
|
180
183
|
} = this.props;
|
|
181
184
|
|
package/src/Message/Message.scss
CHANGED
|
@@ -48,20 +48,22 @@
|
|
|
48
48
|
|
|
49
49
|
// Author name
|
|
50
50
|
.pf-chatbot__message-name {
|
|
51
|
-
font-family: var(
|
|
51
|
+
font-family: var(
|
|
52
|
+
--pf-v6-c-content--heading--FontFamily,
|
|
53
|
+
redhatdisplayvf,
|
|
54
|
+
redhatdisplay,
|
|
55
|
+
helvetica,
|
|
56
|
+
arial,
|
|
57
|
+
sans-serif
|
|
58
|
+
);
|
|
52
59
|
font-weight: 600;
|
|
53
60
|
font-size: var(--pf-t--global--font--size--sm);
|
|
54
61
|
}
|
|
55
62
|
|
|
56
63
|
// Badge
|
|
57
64
|
.pf-v6-c-label {
|
|
58
|
-
--pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
|
|
59
65
|
--pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
|
|
60
66
|
font-weight: var(--pf-t--global--font--weight--body--bold);
|
|
61
|
-
|
|
62
|
-
.pf-v6-c-label__content {
|
|
63
|
-
--pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
|
|
64
|
-
}
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
// Timestamp
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { rehypeCodeBlockToggle } from './rehypeCodeBlockToggle';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { visit } from 'unist-util-visit';
|
|
2
|
+
import { Element } from 'hast';
|
|
3
|
+
import { Node } from 'unist';
|
|
4
|
+
|
|
5
|
+
// Rehype plugin to add language information to code block props
|
|
6
|
+
// Per Eric, Ideally any toggle buttons that can be navigated to would have unique accessible names
|
|
7
|
+
// For the purposes of our examples this should suffice, but in a real-world use case they may need to be more unique
|
|
8
|
+
export const rehypeCodeBlockToggle = () => (tree: Node) => {
|
|
9
|
+
visit(tree, 'element', (node: Element) => {
|
|
10
|
+
if (node.tagName === 'code' && node.properties?.className) {
|
|
11
|
+
const className = node.properties.className as string[];
|
|
12
|
+
const languageMatch = className.find((cls) => cls.startsWith('language-'));
|
|
13
|
+
|
|
14
|
+
if (languageMatch) {
|
|
15
|
+
const language = languageMatch.replace('language-', '').toUpperCase();
|
|
16
|
+
|
|
17
|
+
// Add the language and toggle text as data attributes
|
|
18
|
+
node.properties['data-language'] = language;
|
|
19
|
+
node.properties['data-expanded-text'] = `Show less ${language} code`;
|
|
20
|
+
node.properties['data-collapsed-text'] = `Show more ${language} code`;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
};
|
package/src/Message/index.ts
CHANGED
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
|
|
14
14
|
&:hover,
|
|
15
15
|
&:focus {
|
|
16
|
-
background-color:
|
|
16
|
+
background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
|
|
17
17
|
color: var(--pf-t--global--color--brand--hover);
|
|
18
18
|
|
|
19
19
|
.pf-v6-c-button__icon {
|
|
20
|
-
color: var(--pf-t--
|
|
20
|
+
color: var(--pf-t--global--color--brand--hover);
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
.pf-v6-c-button.pf-chatbot__button--send:hover,
|
|
39
39
|
.pf-v6-c-button.pf-chatbot__button--send:focus {
|
|
40
|
-
background-color:
|
|
40
|
+
background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
border-radius: var(--pf-t--global--border--radius--pill) !important;
|
|
15
15
|
--pf-v6-c-button--MinWidth: 2rem !important;
|
|
16
16
|
background-color: var(--pf-t--global--background--color--primary--default) !important;
|
|
17
|
-
border: 1px solid var(--pf-t--
|
|
17
|
+
border: 1px solid var(--pf-t--global--border--color--default) !important;
|
|
18
18
|
box-shadow: var(--pf-t--global--box-shadow--sm);
|
|
19
19
|
color: var(--pf-t--global--icon--color--subtle) !important;
|
|
20
20
|
transform: translate3d(-50%, 0, 0) !important;
|
package/src/main.scss
CHANGED
|
@@ -33,58 +33,6 @@
|
|
|
33
33
|
@import './SourceDetailsMenuItem/SourceDetailsMenuItem';
|
|
34
34
|
@import './TermsOfUse/TermsOfUse';
|
|
35
35
|
|
|
36
|
-
:where(:root) {
|
|
37
|
-
// ============================================================================
|
|
38
|
-
// Chatbot Custom Default Tokens
|
|
39
|
-
// ============================================================================
|
|
40
|
-
|
|
41
|
-
--pf-t--chatbot--heading--font-family: var(
|
|
42
|
-
--pf-v6-c-content--heading--FontFamily,
|
|
43
|
-
redhatdisplayvf,
|
|
44
|
-
redhatdisplay,
|
|
45
|
-
helvetica,
|
|
46
|
-
arial,
|
|
47
|
-
sans-serif
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
|
|
51
|
-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
|
|
52
|
-
|
|
53
|
-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
|
|
54
|
-
|
|
55
|
-
--pf-t--chatbot--blue-icon--background--color--hover: rgba(
|
|
56
|
-
146,
|
|
57
|
-
197,
|
|
58
|
-
249,
|
|
59
|
-
0.25
|
|
60
|
-
); // --pf-t--global--color--nonstatus--blue--default @ 25%
|
|
61
|
-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
|
|
62
|
-
|
|
63
|
-
// ============================================================================
|
|
64
|
-
// Chatbot Default tokens using PF semantic tokens
|
|
65
|
-
// ============================================================================
|
|
66
|
-
--pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
|
|
67
|
-
--pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
|
|
68
|
-
--pf-t--chatbot--border: var(--pf-t--global--border--color--default);
|
|
69
|
-
|
|
70
|
-
--pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
|
|
71
|
-
|
|
72
|
-
--pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// ============================================================================
|
|
76
|
-
// Chatbot Custom Dark Theme Tokens
|
|
77
|
-
// ============================================================================
|
|
78
|
-
:where(.pf-v6-theme-dark) {
|
|
79
|
-
--pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
|
|
80
|
-
--pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
|
|
81
|
-
|
|
82
|
-
--pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
|
|
83
|
-
|
|
84
|
-
--pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
|
|
85
|
-
--pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
36
|
.ws-full-page-utils {
|
|
89
37
|
left: 0 !important;
|
|
90
38
|
right: auto !important;
|