@patternfly/chatbot 6.3.0-prerelease.24 → 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.
Files changed (38) hide show
  1. package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js +14 -2
  2. package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +4 -1
  3. package/dist/cjs/Message/Plugins/index.d.ts +1 -0
  4. package/dist/cjs/Message/Plugins/index.js +5 -0
  5. package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.d.ts +2 -0
  6. package/dist/cjs/Message/Plugins/rehypeCodeBlockToggle.js +24 -0
  7. package/dist/cjs/Message/index.d.ts +1 -0
  8. package/dist/cjs/Message/index.js +3 -1
  9. package/dist/css/main.css +19 -59
  10. package/dist/css/main.css.map +1 -1
  11. package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js +14 -2
  12. package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +4 -1
  13. package/dist/esm/Message/Plugins/index.d.ts +1 -0
  14. package/dist/esm/Message/Plugins/index.js +1 -0
  15. package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.d.ts +2 -0
  16. package/dist/esm/Message/Plugins/rehypeCodeBlockToggle.js +20 -0
  17. package/dist/esm/Message/index.d.ts +1 -0
  18. package/dist/esm/Message/index.js +1 -0
  19. package/dist/tsconfig.tsbuildinfo +1 -1
  20. package/package.json +1 -1
  21. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +5 -0
  22. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +1 -0
  23. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +5 -0
  24. package/src/Chatbot/Chatbot.scss +1 -1
  25. package/src/ChatbotContent/ChatbotContent.scss +1 -1
  26. package/src/ChatbotFooter/ChatbotFooter.scss +1 -1
  27. package/src/ChatbotHeader/ChatbotHeader.scss +2 -2
  28. package/src/ChatbotToggle/ChatbotToggle.scss +2 -2
  29. package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +24 -3
  30. package/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx +3 -0
  31. package/src/Message/Message.scss +8 -6
  32. package/src/Message/Plugins/index.ts +1 -0
  33. package/src/Message/Plugins/rehypeCodeBlockToggle.ts +24 -0
  34. package/src/Message/TextMessage/TextMessage.scss +2 -5
  35. package/src/Message/index.ts +1 -0
  36. package/src/MessageBar/SendButton.scss +3 -3
  37. package/src/MessageBox/JumpButton.scss +1 -1
  38. 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 = 'Show less', collapsedText = 'Show more' } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
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 ? expandedText : collapsedText })))] }) }));
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 } = _a, props = __rest(_a, ["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,2 @@
1
+ import { Node } from 'unist';
2
+ export declare const rehypeCodeBlockToggle: () => (tree: Node) => void;
@@ -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;
@@ -1,2 +1,3 @@
1
1
  export { default } from './Message';
2
+ export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
2
3
  export * from './Message';
@@ -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--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot-toggle--color);
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--chatbot-toggle--background--hover);
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-t--chatbot--heading--font-family);
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
  }
@@ -1210,14 +1206,13 @@
1210
1206
  --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
1211
1207
  }
1212
1208
 
1209
+ .pf-chatbot__message-and-actions {
1210
+ width: 100%;
1211
+ }
1213
1212
  .pf-chatbot__message-and-actions blockquote .pf-chatbot__message-text {
1214
1213
  display: inline-block;
1215
1214
  }
1216
1215
 
1217
- .pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
1218
- width: 100%;
1219
- }
1220
-
1221
1216
  .pf-chatbot__message-text {
1222
1217
  width: fit-content;
1223
1218
  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
@@ -1367,14 +1362,13 @@
1367
1362
  display: block;
1368
1363
  }
1369
1364
 
1365
+ .pf-chatbot__message-and-actions {
1366
+ width: 100%;
1367
+ }
1370
1368
  .pf-chatbot__message-and-actions blockquote .pf-chatbot__message-text {
1371
1369
  display: inline-block;
1372
1370
  }
1373
1371
 
1374
- .pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
1375
- width: 100%;
1376
- }
1377
-
1378
1372
  .pf-chatbot__message-text {
1379
1373
  width: fit-content;
1380
1374
  padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
@@ -1705,11 +1699,11 @@
1705
1699
  --pf-v6-c-button__icon--Color: var(--pf-t--global--color--brand--default);
1706
1700
  }
1707
1701
  .pf-v6-c-button.pf-chatbot__button--send:hover, .pf-v6-c-button.pf-chatbot__button--send:focus {
1708
- background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
1702
+ background-color: rgba(146, 197, 249, 0.25);
1709
1703
  color: var(--pf-t--global--color--brand--hover);
1710
1704
  }
1711
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 {
1712
- color: var(--pf-t--chatbot--blue-icon--fill--hover);
1706
+ color: var(--pf-t--global--color--brand--hover);
1713
1707
  }
1714
1708
 
1715
1709
  .pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send {
@@ -1724,7 +1718,7 @@
1724
1718
  }
1725
1719
  .pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:hover,
1726
1720
  .pf-v6-theme-dark .pf-v6-c-button.pf-chatbot__button--send:focus {
1727
- background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
1721
+ background-color: rgba(146, 197, 249, 0.25);
1728
1722
  }
1729
1723
 
1730
1724
  @keyframes motionSendButton {
@@ -1892,7 +1886,7 @@
1892
1886
  border-radius: var(--pf-t--global--border--radius--pill) !important;
1893
1887
  --pf-v6-c-button--MinWidth: 2rem !important;
1894
1888
  background-color: var(--pf-t--global--background--color--primary--default) !important;
1895
- border: 1px solid var(--pf-t--chatbot--border) !important;
1889
+ border: 1px solid var(--pf-t--global--border--color--default) !important;
1896
1890
  box-shadow: var(--pf-t--global--box-shadow--sm);
1897
1891
  color: var(--pf-t--global--icon--color--subtle) !important;
1898
1892
  transform: translate3d(-50%, 0, 0) !important;
@@ -1976,7 +1970,7 @@
1976
1970
  border-radius: var(--pf-t--global--border--radius--pill) !important;
1977
1971
  --pf-v6-c-button--MinWidth: 2rem !important;
1978
1972
  background-color: var(--pf-t--global--background--color--primary--default) !important;
1979
- border: 1px solid var(--pf-t--chatbot--border) !important;
1973
+ border: 1px solid var(--pf-t--global--border--color--default) !important;
1980
1974
  box-shadow: var(--pf-t--global--box-shadow--sm);
1981
1975
  color: var(--pf-t--global--icon--color--subtle) !important;
1982
1976
  transform: translate3d(-50%, 0, 0) !important;
@@ -2250,40 +2244,6 @@
2250
2244
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2251
2245
  }
2252
2246
 
2253
- :where(:root) {
2254
- --pf-t--chatbot--heading--font-family: var(
2255
- --pf-v6-c-content--heading--FontFamily,
2256
- redhatdisplayvf,
2257
- redhatdisplay,
2258
- helvetica,
2259
- arial,
2260
- sans-serif
2261
- );
2262
- --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
2263
- --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
2264
- --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
2265
- --pf-t--chatbot--blue-icon--background--color--hover: rgba(
2266
- 146,
2267
- 197,
2268
- 249,
2269
- 0.25
2270
- );
2271
- --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
2272
- --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
2273
- --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
2274
- --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
2275
- --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
2276
- --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
2277
- }
2278
-
2279
- :where(.pf-v6-theme-dark) {
2280
- --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
2281
- --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
2282
- --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
2283
- --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
2284
- --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
2285
- }
2286
-
2287
2247
  .ws-full-page-utils {
2288
2248
  left: 0 !important;
2289
2249
  right: auto !important;
@@ -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;;;AChFA;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AH8BJ;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;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAWF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AE7EN;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 = 'Show less', collapsedText = 'Show more' } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
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 ? expandedText : collapsedText })))] }) }));
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 } = _a, props = __rest(_a, ["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,2 @@
1
+ import { Node } from 'unist';
2
+ export declare const rehypeCodeBlockToggle: () => (tree: Node) => void;
@@ -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,2 +1,3 @@
1
1
  export { default } from './Message';
2
+ export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
2
3
  export * from './Message';
@@ -1,2 +1,3 @@
1
1
  export { default } from './Message';
2
+ export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
2
3
  export * from './Message';
@@ -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.24",
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
  );
@@ -9,7 +9,7 @@
9
9
  flex-direction: column;
10
10
  width: 30rem;
11
11
  height: 70vh;
12
- background-color: var(--pf-t--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot--background);
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--chatbot-toggle--color);
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--chatbot-toggle--background--hover);
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 = 'Show less',
52
- collapsedText = 'Show more',
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 ? expandedText : collapsedText}
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
 
@@ -48,20 +48,22 @@
48
48
 
49
49
  // Author name
50
50
  .pf-chatbot__message-name {
51
- font-family: var(--pf-t--chatbot--heading--font-family);
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
+ };
@@ -3,6 +3,8 @@
3
3
  // ============================================================================
4
4
 
5
5
  .pf-chatbot__message-and-actions {
6
+ width: 100%;
7
+
6
8
  blockquote {
7
9
  .pf-chatbot__message-text {
8
10
  display: inline-block;
@@ -10,11 +12,6 @@
10
12
  }
11
13
  }
12
14
 
13
- // make it full width when there's a table, so the table can grow as needed
14
- .pf-chatbot__message-and-actions:has(.pf-chatbot__message-table) {
15
- width: 100%;
16
- }
17
-
18
15
  // Need to inline shorter text
19
16
  .pf-chatbot__message-text {
20
17
  width: fit-content;
@@ -1,3 +1,4 @@
1
1
  export { default } from './Message';
2
+ export { rehypeCodeBlockToggle } from './Plugins/rehypeCodeBlockToggle';
2
3
 
3
4
  export * from './Message';
@@ -13,11 +13,11 @@
13
13
 
14
14
  &:hover,
15
15
  &:focus {
16
- background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
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--chatbot--blue-icon--fill--hover);
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: var(--pf-t--chatbot--blue-icon--background--color--hover);
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--chatbot--border) !important;
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;