@patternfly/chatbot 6.3.0-prerelease.16 → 6.3.0-prerelease.18

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 (33) hide show
  1. package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.d.ts +20 -2
  2. package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js +14 -3
  3. package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts +62 -0
  4. package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +136 -0
  5. package/dist/cjs/Message/Message.d.ts +16 -1
  6. package/dist/cjs/Message/Message.js +2 -1
  7. package/dist/cjs/Message/Message.test.js +30 -0
  8. package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts +2 -0
  9. package/dist/cjs/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js +47 -0
  10. package/dist/css/main.css +10 -0
  11. package/dist/css/main.css.map +1 -1
  12. package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.d.ts +20 -2
  13. package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js +15 -4
  14. package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts +62 -0
  15. package/dist/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js +130 -0
  16. package/dist/esm/Message/Message.d.ts +16 -1
  17. package/dist/esm/Message/Message.js +2 -1
  18. package/dist/esm/Message/Message.test.js +30 -0
  19. package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.d.ts +2 -0
  20. package/dist/esm/Message/Plugins/rehypeMoveImagesOutOfParagraphs.js +43 -0
  21. package/dist/tsconfig.tsbuildinfo +1 -1
  22. package/package.json +3 -2
  23. package/patternfly-docs/content/extensions/chatbot/design-guidelines.md +10 -0
  24. package/patternfly-docs/content/extensions/chatbot/examples/Customizing Messages/Customizing Messages.md +51 -0
  25. package/patternfly-docs/content/extensions/chatbot/examples/Messages/BotMessage.tsx +9 -0
  26. package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessage.tsx +9 -0
  27. package/patternfly-docs/content/extensions/chatbot/img/quick-response-confirmation.svg +67 -0
  28. package/src/Message/CodeBlockMessage/CodeBlockMessage.scss +7 -0
  29. package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +99 -12
  30. package/src/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.tsx +220 -0
  31. package/src/Message/Message.test.tsx +39 -0
  32. package/src/Message/Message.tsx +19 -1
  33. package/src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts +53 -0
@@ -1,3 +1,21 @@
1
- import { ExtraProps } from 'react-markdown';
2
- declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, ...props }: Omit<JSX.IntrinsicElements["code"], "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
1
+ import { ExpandableSectionProps, ExpandableSectionToggleProps } from '@patternfly/react-core';
2
+ export interface CodeBlockMessageProps {
3
+ /** Content rendered in code block */
4
+ children?: React.ReactNode;
5
+ /** Aria label applied to code block */
6
+ 'aria-label'?: string;
7
+ /** Class name applied to code block */
8
+ className?: string;
9
+ /** Whether code block is expandable */
10
+ isExpandable?: boolean;
11
+ /** Additional props passed to expandable section if isExpandable is applied */
12
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
13
+ /** Additional props passed to expandable toggle if isExpandable is applied */
14
+ expandableSectionToggleProps?: ExpandableSectionToggleProps;
15
+ /** Link text applied to expandable toggle when expanded */
16
+ expandedText?: string;
17
+ /** Link text applied to expandable toggle when collapsed */
18
+ collapsedText?: string;
19
+ }
20
+ declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
3
21
  export default CodeBlockMessage;
@@ -25,13 +25,21 @@ const hljs_1 = require("react-syntax-highlighter/dist/esm/styles/hljs");
25
25
  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
+ const ExpandableSectionForSyntaxHighlighter_1 = require("./ExpandableSectionForSyntaxHighlighter");
28
29
  const CodeBlockMessage = (_a) => {
29
30
  var _b;
30
- var { children, className, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", 'aria-label']);
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"]);
31
32
  const [copied, setCopied] = (0, react_1.useState)(false);
32
- const buttonRef = (0, react_1.useRef)(undefined);
33
+ const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
34
+ const buttonRef = (0, react_1.useRef)();
33
35
  const tooltipID = (0, react_1.useId)();
36
+ const toggleId = (0, react_1.useId)();
37
+ const contentId = (0, react_1.useId)();
38
+ const codeBlockRef = (0, react_1.useRef)(null);
34
39
  const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
40
+ const onToggle = (isExpanded) => {
41
+ setIsExpanded(isExpanded);
42
+ };
35
43
  // Handle clicking copy button
36
44
  const handleCopy = (0, react_1.useCallback)((event, text) => {
37
45
  navigator.clipboard.writeText(text.toString());
@@ -51,6 +59,9 @@ const CodeBlockMessage = (_a) => {
51
59
  }
52
60
  // Setup code block header
53
61
  const actions = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { children: [language && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block-language", children: language }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? (0, jsx_runtime_1.jsx)(check_icon_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(copy_icon_1.CopyIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }) }));
54
- return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block", children: (0, jsx_runtime_1.jsx)(react_core_1.CodeBlock, { actions: actions, children: (0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: language ? ((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)(jsx_runtime_1.Fragment, { children: children })) }) }) }));
62
+ 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
+ // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
64
+ // 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 })))] }) }));
55
66
  };
56
67
  exports.default = CodeBlockMessage;
@@ -0,0 +1,62 @@
1
+ import { Component } from 'react';
2
+ import { PickOptional } from '@patternfly/react-core';
3
+ export declare enum ExpandableSectionVariant {
4
+ default = "default",
5
+ truncate = "truncate"
6
+ }
7
+ /** The main expandable section component. */
8
+ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
9
+ /** Content rendered inside the expandable section. */
10
+ children?: React.ReactNode;
11
+ /** Additional classes added to the expandable section. */
12
+ className?: string;
13
+ /** Id of the content of the expandable section. When passing in the isDetached property, this
14
+ * property's value should match the contentId property of the expandable section toggle sub-component.
15
+ */
16
+ contentId?: string;
17
+ /** Id of the toggle of the expandable section, which provides an accessible name to the
18
+ * expandable section content via the aria-labelledby attribute. When the isDetached property
19
+ * is also passed in, the value of this property must match the toggleId property of the
20
+ * expandable section toggle sub-component.
21
+ */
22
+ toggleId?: string;
23
+ /** Display size variant. Set to "lg" for disclosure styling. */
24
+ displaySize?: 'default' | 'lg';
25
+ /** Indicates the expandable section has a detached toggle. */
26
+ isDetached?: boolean;
27
+ /** Flag to indicate if the content is expanded. */
28
+ isExpanded?: boolean;
29
+ /** Flag to indicate if the content is indented. */
30
+ isIndented?: boolean;
31
+ /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
32
+ isWidthLimited?: boolean;
33
+ /** Truncates the expandable content to the specified number of lines when using the
34
+ * "truncate" variant.
35
+ */
36
+ truncateMaxLines?: number;
37
+ /** Determines the variant of the expandable section. When passing in "truncate" as the
38
+ * variant, the expandable content will be truncated after 3 lines by default.
39
+ */
40
+ variant?: 'default' | 'truncate';
41
+ language?: string;
42
+ }
43
+ interface ExpandableSectionState {
44
+ isExpanded: boolean;
45
+ hasToggle: boolean;
46
+ previousWidth: number | undefined;
47
+ }
48
+ declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
49
+ static displayName: string;
50
+ constructor(props: ExpandableSectionProps);
51
+ expandableContentRef: import("react").RefObject<HTMLDivElement>;
52
+ observer: any;
53
+ static defaultProps: PickOptional<ExpandableSectionProps>;
54
+ componentDidMount(): void;
55
+ componentDidUpdate(prevProps: ExpandableSectionProps): void;
56
+ componentWillUnmount(): void;
57
+ checkToggleVisibility: () => void;
58
+ resize: () => void;
59
+ handleResize: (...args: any[]) => void;
60
+ render(): import("react/jsx-runtime").JSX.Element;
61
+ }
62
+ export { ExpandableSectionForSyntaxHighlighter };
@@ -0,0 +1,136 @@
1
+ "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ExpandableSectionForSyntaxHighlighter = exports.ExpandableSectionVariant = void 0;
18
+ const jsx_runtime_1 = require("react/jsx-runtime");
19
+ const react_1 = require("react");
20
+ const expandable_section_1 = __importDefault(require("@patternfly/react-styles/css/components/ExpandableSection/expandable-section"));
21
+ const react_styles_1 = require("@patternfly/react-styles");
22
+ const c_expandable_section_m_truncate__content_LineClamp_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp"));
23
+ const react_core_1 = require("@patternfly/react-core");
24
+ var ExpandableSectionVariant;
25
+ (function (ExpandableSectionVariant) {
26
+ ExpandableSectionVariant["default"] = "default";
27
+ ExpandableSectionVariant["truncate"] = "truncate";
28
+ })(ExpandableSectionVariant || (exports.ExpandableSectionVariant = ExpandableSectionVariant = {}));
29
+ const setLineClamp = (element, lines, language, isExpanded) => {
30
+ if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
31
+ return;
32
+ }
33
+ if (language) {
34
+ const selector = `.language-${language.toLowerCase()}`;
35
+ const childElement = element.querySelector(selector);
36
+ if (!childElement) {
37
+ return;
38
+ }
39
+ if (isExpanded) {
40
+ // Reset all truncation-related styles to their default values
41
+ childElement.style.removeProperty('-webkit-line-clamp');
42
+ childElement.style.removeProperty('display');
43
+ childElement.style.removeProperty('-webkit-box-orient');
44
+ childElement.style.removeProperty('overflow');
45
+ }
46
+ else {
47
+ childElement.style.setProperty('-webkit-line-clamp', lines.toString());
48
+ childElement.style.setProperty('display', '-webkit-box');
49
+ childElement.style.setProperty('-webkit-box-orient', 'vertical');
50
+ childElement.style.setProperty('overflow', 'hidden');
51
+ }
52
+ }
53
+ };
54
+ class ExpandableSectionForSyntaxHighlighter extends react_1.Component {
55
+ constructor(props) {
56
+ var _a;
57
+ super(props);
58
+ this.expandableContentRef = (0, react_1.createRef)();
59
+ /* eslint-disable-next-line */
60
+ this.observer = () => { };
61
+ this.checkToggleVisibility = () => {
62
+ var _a;
63
+ if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
64
+ const maxLines = this.props.truncateMaxLines || parseInt(c_expandable_section_m_truncate__content_LineClamp_1.default.value);
65
+ const totalLines = this.expandableContentRef.current.scrollHeight /
66
+ parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
67
+ this.setState({
68
+ hasToggle: totalLines > maxLines
69
+ });
70
+ }
71
+ };
72
+ this.resize = () => {
73
+ if (this.expandableContentRef.current) {
74
+ const { offsetWidth } = this.expandableContentRef.current;
75
+ if (this.state.previousWidth !== offsetWidth) {
76
+ this.setState({ previousWidth: offsetWidth });
77
+ this.checkToggleVisibility();
78
+ }
79
+ }
80
+ };
81
+ this.handleResize = (0, react_core_1.debounce)(this.resize, 250);
82
+ this.state = {
83
+ isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
84
+ hasToggle: true,
85
+ previousWidth: undefined
86
+ };
87
+ }
88
+ componentDidMount() {
89
+ if (this.props.variant === ExpandableSectionVariant.truncate) {
90
+ const expandableContent = this.expandableContentRef.current;
91
+ if (expandableContent) {
92
+ this.setState({ previousWidth: expandableContent.offsetWidth });
93
+ this.observer = (0, react_core_1.getResizeObserver)(expandableContent, this.handleResize, false);
94
+ if (this.props.truncateMaxLines) {
95
+ setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
96
+ }
97
+ }
98
+ this.checkToggleVisibility();
99
+ }
100
+ }
101
+ componentDidUpdate(prevProps) {
102
+ if (this.props.variant === ExpandableSectionVariant.truncate &&
103
+ (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
104
+ prevProps.children !== this.props.children ||
105
+ prevProps.isExpanded !== this.props.isExpanded)) {
106
+ const expandableContent = this.expandableContentRef.current;
107
+ setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
108
+ this.checkToggleVisibility();
109
+ }
110
+ }
111
+ componentWillUnmount() {
112
+ if (this.props.variant === ExpandableSectionVariant.truncate) {
113
+ this.observer();
114
+ }
115
+ }
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"]);
118
+ if (isDetached && !toggleId) {
119
+ /* eslint-disable no-console */
120
+ console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
121
+ }
122
+ const uniqueContentId = contentId || (0, react_core_1.getUniqueId)('expandable-section-content');
123
+ const uniqueToggleId = toggleId || (0, react_core_1.getUniqueId)('expandable-section-toggle');
124
+ return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)(expandable_section_1.default.expandableSection, isExpanded && expandable_section_1.default.modifiers.expanded, displaySize === 'lg' && expandable_section_1.default.modifiers.displayLg, isWidthLimited && expandable_section_1.default.modifiers.limitWidth, isIndented && expandable_section_1.default.modifiers.indented, variant === ExpandableSectionVariant.truncate && expandable_section_1.default.modifiers.truncate, className) }, props, { children: (0, jsx_runtime_1.jsx)("div", { ref: this.expandableContentRef, className: (0, react_styles_1.css)(expandable_section_1.default.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
125
+ }
126
+ }
127
+ exports.ExpandableSectionForSyntaxHighlighter = ExpandableSectionForSyntaxHighlighter;
128
+ ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
129
+ ExpandableSectionForSyntaxHighlighter.defaultProps = {
130
+ className: '',
131
+ isDetached: false,
132
+ displaySize: 'default',
133
+ isWidthLimited: false,
134
+ isIndented: false,
135
+ variant: 'default'
136
+ };
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
3
- import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
3
+ import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
4
4
  import { ActionProps } from '../ResponseActions/ResponseActions';
5
5
  import { SourcesCardProps } from '../SourcesCard';
6
6
  import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -64,9 +64,24 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
64
64
  botWord?: string;
65
65
  /** Label for the English "Loading message," displayed to screenreaders when loading a message */
66
66
  loadingWord?: string;
67
+ /** Props for code blocks */
67
68
  codeBlockProps?: {
69
+ /** Aria label applied to code blocks */
68
70
  'aria-label'?: string;
71
+ /** Class name applied to code blocks */
69
72
  className?: string;
73
+ /** Whether code blocks are expandable */
74
+ isExpandable?: boolean;
75
+ /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
76
+ maxLength?: number;
77
+ /** Additional props passed to expandable section if isExpandable is applied */
78
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
79
+ /** Additional props passed to expandable toggle if isExpandable is applied */
80
+ expandableSectionToggleProps?: ExpandableSectionToggleProps;
81
+ /** Link text applied to expandable toggle when expanded */
82
+ expandedText?: string;
83
+ /** Link text applied to expandable toggle when collapsed */
84
+ collapsedText?: string;
70
85
  };
71
86
  /** Props for quick responses */
72
87
  quickResponses?: QuickResponse[];
@@ -49,6 +49,7 @@ const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
49
49
  const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
50
50
  const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
51
51
  const MessageInput_1 = __importDefault(require("./MessageInput"));
52
+ const rehypeMoveImagesOutOfParagraphs_1 = require("./Plugins/rehypeMoveImagesOutOfParagraphs");
52
53
  const MessageBase = (_a) => {
53
54
  var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
54
55
  const [messageText, setMessageText] = (0, react_1.useState)(content);
@@ -56,7 +57,7 @@ const MessageBase = (_a) => {
56
57
  setMessageText(content);
57
58
  }, [content]);
58
59
  const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
59
- let rehypePlugins = [rehype_unwrap_images_1.default];
60
+ let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs];
60
61
  if (openLinkInNewTab) {
61
62
  rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
62
63
  }
@@ -141,6 +141,7 @@ const EMPTY_TABLE = `
141
141
 
142
142
  `;
143
143
  const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
144
+ const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
144
145
  const ERROR = {
145
146
  title: 'Could not load chat',
146
147
  children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -407,6 +408,30 @@ describe('Message', () => {
407
408
  expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
408
409
  expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
409
410
  });
411
+ it('should render expandable code correctly', () => {
412
+ (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
413
+ expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
414
+ expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
415
+ expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
416
+ expect(react_2.screen.getByText(/apiVersion/i)).toBeTruthy();
417
+ expect(react_2.screen.getByRole('button', { name: /Show more/i })).toBeTruthy();
418
+ });
419
+ it('should handle click on expandable code correctly', () => __awaiter(void 0, void 0, void 0, function* () {
420
+ (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, codeBlockProps: { isExpandable: true } }));
421
+ const button = react_2.screen.getByRole('button', { name: /Show more/i });
422
+ yield user_event_1.default.click(button);
423
+ expect(react_2.screen.getByRole('button', { name: /Show less/i })).toBeTruthy();
424
+ expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
425
+ expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
426
+ expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
427
+ expect(react_2.screen.getByText(/metadata:/i)).toBeTruthy();
428
+ expect(react_2.screen.getByText(/name:/i)).toBeTruthy();
429
+ expect(react_2.screen.getByText(/azure-sample-repo0oooo00ooo/i)).toBeTruthy();
430
+ expect(react_2.screen.getByText(/spec/i)).toBeTruthy();
431
+ expect(react_2.screen.getByText(/connectionConfig:/i)).toBeTruthy();
432
+ expect(react_2.screen.getByText(/url:/i)).toBeTruthy();
433
+ expect(react_2.screen.getByText(/https:\/\/raw.githubusercontent.com\/Azure-Samples\/helm-charts\/master\/docs/i)).toBeTruthy();
434
+ }));
410
435
  it('can click copy code button', () => __awaiter(void 0, void 0, void 0, function* () {
411
436
  // need explicit setup since RTL stubs clipboard if you do this
412
437
  const user = user_event_1.default.setup();
@@ -600,6 +625,11 @@ describe('Message', () => {
600
625
  (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: IMAGE }));
601
626
  expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
602
627
  });
628
+ it('inline image parent should have class pf-chatbot__message-and-actions', () => {
629
+ (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: INLINE_IMAGE }));
630
+ expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i })).toBeTruthy();
631
+ expect(react_2.screen.getByRole('img', { name: /Multi-colored wavy lines on a black background/i }).parentElement).toHaveClass('pf-chatbot__message-and-actions');
632
+ });
603
633
  it('should handle external links correctly', () => {
604
634
  (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)` }));
605
635
  // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
@@ -0,0 +1,2 @@
1
+ import { Node } from 'unist';
2
+ export declare const rehypeMoveImagesOutOfParagraphs: () => (tree: Node) => void;
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.rehypeMoveImagesOutOfParagraphs = void 0;
4
+ const unist_util_visit_1 = require("unist-util-visit");
5
+ // Rehype plugin to remove images from within p tags and put them as separate block-level elements.
6
+ // This allows us to avoid having a blue background on images - this is something Kayla requested.
7
+ const rehypeMoveImagesOutOfParagraphs = () => (tree) => {
8
+ const nodesToRemove = [];
9
+ (0, unist_util_visit_1.visit)(tree, 'element', (node, index, parent) => {
10
+ if (node.tagName === 'p' && node.children) {
11
+ const imagesInParagraph = [];
12
+ node.children.forEach((child, childIndex) => {
13
+ if (child.type === 'element' && child.tagName === 'img') {
14
+ imagesInParagraph.push({ node: child, index: childIndex });
15
+ }
16
+ });
17
+ if (imagesInParagraph.length > 0 && parent && index !== null) {
18
+ imagesInParagraph.forEach(({ node: imgNode, index: imgIndex }) => {
19
+ nodesToRemove.push({ parent: node, index: imgIndex, node: imgNode });
20
+ });
21
+ // To avoid issues with index shifting during removal, we process in reverse
22
+ for (let i = nodesToRemove.length - 1; i >= 0; i--) {
23
+ const { parent: pTag, index: imgIndexToRemove } = nodesToRemove[i];
24
+ if (pTag.children) {
25
+ pTag.children.splice(imgIndexToRemove, 1);
26
+ }
27
+ }
28
+ // Insert the removed images after the paragraph
29
+ const paragraphIndexInParent = parent.children.indexOf(node);
30
+ if (paragraphIndexInParent !== -1) {
31
+ imagesInParagraph.forEach(({ node: imgNode }) => {
32
+ parent.children.splice(paragraphIndexInParent + 1, 0, imgNode);
33
+ });
34
+ }
35
+ // Remove paragraph if it's now empty after image removal
36
+ if (node.children.length === 0) {
37
+ const paragraphIndexInParent = parent.children.indexOf(node);
38
+ if (paragraphIndexInParent !== -1) {
39
+ parent.children.splice(paragraphIndexInParent, 1);
40
+ }
41
+ }
42
+ nodesToRemove.length = 0;
43
+ }
44
+ }
45
+ });
46
+ };
47
+ exports.rehypeMoveImagesOutOfParagraphs = rehypeMoveImagesOutOfParagraphs;
package/dist/css/main.css CHANGED
@@ -1205,6 +1205,11 @@
1205
1205
  font-size: var(--pf-t--global--font--size--body--default);
1206
1206
  }
1207
1207
 
1208
+ .pf-chatbot__message-code-toggle .pf-v6-c-button.pf-m-link {
1209
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
1210
+ --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
1211
+ }
1212
+
1208
1213
  .pf-chatbot__message-and-actions blockquote .pf-chatbot__message-text {
1209
1214
  display: inline-block;
1210
1215
  }
@@ -1349,6 +1354,11 @@
1349
1354
  font-size: var(--pf-t--global--font--size--body--default);
1350
1355
  }
1351
1356
 
1357
+ .pf-chatbot__message-code-toggle .pf-v6-c-button.pf-m-link {
1358
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--color--nonstatus--blue--default);
1359
+ --pf-v6-c-button--hover--Color: var(--pf-t--global--color--nonstatus--blue--hover);
1360
+ }
1361
+
1352
1362
  .pf-chatbot__message-image {
1353
1363
  border-radius: var(--pf-t--global--border--radius--small);
1354
1364
  max-width: 37.5rem;
@@ -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;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;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;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;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;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,3 +1,21 @@
1
- import { ExtraProps } from 'react-markdown';
2
- declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, ...props }: Omit<JSX.IntrinsicElements["code"], "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
1
+ import { ExpandableSectionProps, ExpandableSectionToggleProps } from '@patternfly/react-core';
2
+ export interface CodeBlockMessageProps {
3
+ /** Content rendered in code block */
4
+ children?: React.ReactNode;
5
+ /** Aria label applied to code block */
6
+ 'aria-label'?: string;
7
+ /** Class name applied to code block */
8
+ className?: string;
9
+ /** Whether code block is expandable */
10
+ isExpandable?: boolean;
11
+ /** Additional props passed to expandable section if isExpandable is applied */
12
+ expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
13
+ /** Additional props passed to expandable toggle if isExpandable is applied */
14
+ expandableSectionToggleProps?: ExpandableSectionToggleProps;
15
+ /** Link text applied to expandable toggle when expanded */
16
+ expandedText?: string;
17
+ /** Link text applied to expandable toggle when collapsed */
18
+ collapsedText?: string;
19
+ }
20
+ declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
3
21
  export default CodeBlockMessage;
@@ -17,16 +17,24 @@ import { useState, useRef, useId, useCallback, useEffect } from 'react';
17
17
  import SyntaxHighlighter from 'react-syntax-highlighter';
18
18
  import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
19
19
  // Import PatternFly components
20
- import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
20
+ import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
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
+ import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
23
24
  const CodeBlockMessage = (_a) => {
24
25
  var _b;
25
- var { children, className, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", 'aria-label']);
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"]);
26
27
  const [copied, setCopied] = useState(false);
27
- const buttonRef = useRef(undefined);
28
+ const [isExpanded, setIsExpanded] = useState(false);
29
+ const buttonRef = useRef();
28
30
  const tooltipID = useId();
31
+ const toggleId = useId();
32
+ const contentId = useId();
33
+ const codeBlockRef = useRef(null);
29
34
  const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
35
+ const onToggle = (isExpanded) => {
36
+ setIsExpanded(isExpanded);
37
+ };
30
38
  // Handle clicking copy button
31
39
  const handleCopy = useCallback((event, text) => {
32
40
  navigator.clipboard.writeText(text.toString());
@@ -46,6 +54,9 @@ const CodeBlockMessage = (_a) => {
46
54
  }
47
55
  // Setup code block header
48
56
  const actions = (_jsx(_Fragment, { children: _jsxs(CodeBlockAction, { children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }) }));
49
- return (_jsx("div", { className: "pf-chatbot__message-code-block", children: _jsx(CodeBlock, { actions: actions, children: _jsx(CodeBlockCode, { children: language ? (_jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') }))) : (_jsx(_Fragment, { children: children })) }) }) }));
57
+ 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
+ // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
59
+ // 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 })))] }) }));
50
61
  };
51
62
  export default CodeBlockMessage;