@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/cjs/FileDropZone/FileDropZone.test.js

@@ -1,19 +1,45 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const FileDropZone_1 = __importDefault(require("./FileDropZone"));
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('FileDropZone', () => {
     it('should render file drop zone', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(FileDropZone_1.default, { onFileDrop: jest.fn() }));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn() }));
         expect(container).toMatchSnapshot();
     });
     it('should render children', () => {
-        (0, react_2.render)(react_1.default.createElement(FileDropZone_1.default, { onFileDrop: jest.fn() }, "Hi"));
-        expect(react_2.screen.getByText('Hi')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn(), children: "Hi" }));
+        expect(react_1.screen.getByText('Hi')).toBeTruthy();
     });
+    it('should call onFileDrop when file type is accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { "data-testid": "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onFileDrop: onFileDrop }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, file);
+        expect(onFileDrop).toHaveBeenCalled();
+    }));
+    it('should not call onFileDrop when file type is not accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { "data-testid": "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onFileDrop: onFileDrop }));
+        const file = new File(['[]'], 'example.json', { type: 'application/json' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
 });

package/dist/cjs/LoadingMessage/LoadingMessage.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface LoadingMessageProps {
     icon?: React.ComponentType;
 }
-export declare const LoadingMessage: React.FunctionComponent<LoadingMessageProps>;
+export declare const LoadingMessage: FunctionComponent<LoadingMessageProps>;
 export default LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.js

@@ -4,17 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingMessage = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const robot_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/robot-icon"));
-const LoadingMessage = ({ icon: IconComponent = robot_icon_1.default }) => (react_1.default.createElement(react_core_1.Split, null,
-    react_1.default.createElement(react_core_1.SplitItem, null,
-        react_1.default.createElement(react_core_1.Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md" },
-            react_1.default.createElement(IconComponent, null))),
-    react_1.default.createElement(react_core_1.SplitItem, { className: "pf-u-background-color-200" },
-        react_1.default.createElement("div", { className: "pf-v6-u-display-flex pf-u-align-items-center" },
-            react_1.default.createElement("div", null, "."),
-            react_1.default.createElement("div", null, "."),
-            react_1.default.createElement("div", null, ".")))));
+const LoadingMessage = ({ icon: IconComponent = robot_icon_1.default }) => ((0, jsx_runtime_1.jsxs)(react_core_1.Split, { children: [(0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md", children: (0, jsx_runtime_1.jsx)(IconComponent, {}) }) }), (0, jsx_runtime_1.jsx)(react_core_1.SplitItem, { className: "pf-u-background-color-200", children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-v6-u-display-flex pf-u-align-items-center", children: [(0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." }), (0, jsx_runtime_1.jsx)("div", { children: "." })] }) })] }));
 exports.LoadingMessage = LoadingMessage;
 exports.default = exports.LoadingMessage;

package/dist/cjs/LoadingMessage/LoadingMessage.test.js

@@ -3,18 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const LoadingMessage_1 = __importDefault(require("./LoadingMessage"));
 describe('LoadingMessage', () => {
     it('should render loading message', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(LoadingMessage_1.default, null));
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
         expect(container).toMatchSnapshot();
     });
     it('should render loading message correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(LoadingMessage_1.default, null));
-        expect(react_2.screen.getAllByText('.')).toBeTruthy();
-        expect(react_2.screen.getAllByText('.')).toHaveLength(3);
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingMessage_1.default, {}));
+        expect(react_1.screen.getAllByText('.')).toBeTruthy();
+        expect(react_1.screen.getAllByText('.')).toHaveLength(3);
     });
 });

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.d.ts

@@ -1,4 +1,21 @@
-import React from 'react';
-import { ExtraProps } from 'react-markdown';
-declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, ...props }: JSX.IntrinsicElements["code"] & ExtraProps) => React.JSX.Element;
+import { ExpandableSectionProps, ExpandableSectionToggleProps } from '@patternfly/react-core';
+export interface CodeBlockMessageProps {
+    /** Content rendered in code block */
+    children?: React.ReactNode;
+    /** Aria label applied to code block */
+    'aria-label'?: string;
+    /** Class name applied to code block */
+    className?: string;
+    /** Whether code block is expandable */
+    isExpandable?: boolean;
+    /** Additional props passed to expandable section if isExpandable is applied */
+    expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Additional props passed to expandable toggle if isExpandable is applied */
+    expandableSectionToggleProps?: ExpandableSectionToggleProps;
+    /** Link text applied to expandable toggle when expanded */
+    expandedText?: string;
+    /** Link text applied to expandable toggle when collapsed */
+    collapsedText?: string;
+}
+declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockMessage;

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -14,30 +14,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
 const react_syntax_highlighter_1 = __importDefault(require("react-syntax-highlighter"));
 const hljs_1 = require("react-syntax-highlighter/dist/esm/styles/hljs");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const check_icon_1 = require("@patternfly/react-icons/dist/esm/icons/check-icon");
 const copy_icon_1 = require("@patternfly/react-icons/dist/esm/icons/copy-icon");
+const ExpandableSectionForSyntaxHighlighter_1 = require("./ExpandableSectionForSyntaxHighlighter");
 const CodeBlockMessage = (_a) => {
     var _b;
-    var { children, className, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", 'aria-label']);
-    const [copied, setCopied] = react_1.default.useState(false);
-    const buttonRef = react_1.default.useRef();
-    const tooltipID = react_1.default.useId();
+    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"]);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const buttonRef = (0, react_1.useRef)();
+    const tooltipID = (0, react_1.useId)();
+    const toggleId = (0, react_1.useId)();
+    const contentId = (0, react_1.useId)();
+    const codeBlockRef = (0, react_1.useRef)(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
+    const onToggle = (isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     // Handle clicking copy button
-    const handleCopy = react_1.default.useCallback((event, text) => {
+    const handleCopy = (0, react_1.useCallback)((event, text) => {
         navigator.clipboard.writeText(text.toString());
         setCopied(true);
     }, []);
     // Reset copied state
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (copied) {
             const timer = setTimeout(() => {
                 setCopied(false);
@@ -46,16 +55,13 @@ const CodeBlockMessage = (_a) => {
         }
     });
     if (!String(children).includes('\n')) {
-        return (react_1.default.createElement("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code" }), children));
+        return ((0, jsx_runtime_1.jsx)("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code", children: children })));
     }
     // Setup code block header
-    const actions = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_core_1.CodeBlockAction, null,
-            language && react_1.default.createElement("div", { className: "pf-chatbot__message-code-block-language" }, language),
-            react_1.default.createElement(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code button', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children) }, copied ? react_1.default.createElement(check_icon_1.CheckIcon, null) : react_1.default.createElement(copy_icon_1.CopyIcon, null)),
-            react_1.default.createElement(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef }))));
-    return (react_1.default.createElement("div", { className: "pf-chatbot__message-code-block" },
-        react_1.default.createElement(react_core_1.CodeBlock, { actions: actions },
-            react_1.default.createElement(react_core_1.CodeBlockCode, null, language ? (react_1.default.createElement(react_syntax_highlighter_1.default, Object.assign({}, props, { language: language, style: hljs_1.obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true }), String(children).replace(/\n$/, ''))) : (react_1.default.createElement(react_1.default.Fragment, null, children))))));
+    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 })] }) }));
+    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 ? (
+                        // SyntaxHighlighter doesn't work with ExpandableSection because it targets the direct child
+                        // Forked for now and adjusted to match what we need
+                        (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 })))] }) }));
 };
 exports.default = CodeBlockMessage;

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.d.ts

@@ -0,0 +1,62 @@
+import { Component } from 'react';
+import { PickOptional } from '@patternfly/react-core';
+export declare enum ExpandableSectionVariant {
+    default = "default",
+    truncate = "truncate"
+}
+/** The main expandable section component. */
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
+    /** Content rendered inside the expandable section. */
+    children?: React.ReactNode;
+    /** Additional classes added to the expandable section. */
+    className?: string;
+    /** Id of the content of the expandable section. When passing in the isDetached property, this
+     * property's value should match the contentId property of the expandable section toggle sub-component.
+     */
+    contentId?: string;
+    /** Id of the toggle of the expandable section, which provides an accessible name to the
+     * expandable section content via the aria-labelledby attribute. When the isDetached property
+     * is also passed in, the value of this property must match the toggleId property of the
+     * expandable section toggle sub-component.
+     */
+    toggleId?: string;
+    /** Display size variant. Set to "lg" for disclosure styling. */
+    displaySize?: 'default' | 'lg';
+    /** Indicates the expandable section has a detached toggle. */
+    isDetached?: boolean;
+    /** Flag to indicate if the content is expanded. */
+    isExpanded?: boolean;
+    /** Flag to indicate if the content is indented. */
+    isIndented?: boolean;
+    /** Flag to indicate the width of the component is limited. Set to "true" for disclosure styling. */
+    isWidthLimited?: boolean;
+    /** Truncates the expandable content to the specified number of lines when using the
+     * "truncate" variant.
+     */
+    truncateMaxLines?: number;
+    /** Determines the variant of the expandable section. When passing in "truncate" as the
+     * variant, the expandable content will be truncated after 3 lines by default.
+     */
+    variant?: 'default' | 'truncate';
+    language?: string;
+}
+interface ExpandableSectionState {
+    isExpanded: boolean;
+    hasToggle: boolean;
+    previousWidth: number | undefined;
+}
+declare class ExpandableSectionForSyntaxHighlighter extends Component<ExpandableSectionProps, ExpandableSectionState> {
+    static displayName: string;
+    constructor(props: ExpandableSectionProps);
+    expandableContentRef: import("react").RefObject<HTMLDivElement>;
+    observer: any;
+    static defaultProps: PickOptional<ExpandableSectionProps>;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ExpandableSectionProps): void;
+    componentWillUnmount(): void;
+    checkToggleVisibility: () => void;
+    resize: () => void;
+    handleResize: (...args: any[]) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { ExpandableSectionForSyntaxHighlighter };

package/dist/cjs/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -0,0 +1,136 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandableSectionForSyntaxHighlighter = exports.ExpandableSectionVariant = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const expandable_section_1 = __importDefault(require("@patternfly/react-styles/css/components/ExpandableSection/expandable-section"));
+const react_styles_1 = require("@patternfly/react-styles");
+const c_expandable_section_m_truncate__content_LineClamp_1 = __importDefault(require("@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp"));
+const react_core_1 = require("@patternfly/react-core");
+var ExpandableSectionVariant;
+(function (ExpandableSectionVariant) {
+    ExpandableSectionVariant["default"] = "default";
+    ExpandableSectionVariant["truncate"] = "truncate";
+})(ExpandableSectionVariant || (exports.ExpandableSectionVariant = ExpandableSectionVariant = {}));
+const setLineClamp = (element, lines, language, isExpanded) => {
+    if (!element || !lines || lines < 1 || typeof isExpanded === 'undefined') {
+        return;
+    }
+    if (language) {
+        const selector = `.language-${language.toLowerCase()}`;
+        const childElement = element.querySelector(selector);
+        if (!childElement) {
+            return;
+        }
+        if (isExpanded) {
+            // Reset all truncation-related styles to their default values
+            childElement.style.removeProperty('-webkit-line-clamp');
+            childElement.style.removeProperty('display');
+            childElement.style.removeProperty('-webkit-box-orient');
+            childElement.style.removeProperty('overflow');
+        }
+        else {
+            childElement.style.setProperty('-webkit-line-clamp', lines.toString());
+            childElement.style.setProperty('display', '-webkit-box');
+            childElement.style.setProperty('-webkit-box-orient', 'vertical');
+            childElement.style.setProperty('overflow', 'hidden');
+        }
+    }
+};
+class ExpandableSectionForSyntaxHighlighter extends react_1.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.expandableContentRef = (0, react_1.createRef)();
+        /* eslint-disable-next-line */
+        this.observer = () => { };
+        this.checkToggleVisibility = () => {
+            var _a;
+            if ((_a = this.expandableContentRef) === null || _a === void 0 ? void 0 : _a.current) {
+                const maxLines = this.props.truncateMaxLines || parseInt(c_expandable_section_m_truncate__content_LineClamp_1.default.value);
+                const totalLines = this.expandableContentRef.current.scrollHeight /
+                    parseInt(getComputedStyle(this.expandableContentRef.current).lineHeight);
+                this.setState({
+                    hasToggle: totalLines > maxLines
+                });
+            }
+        };
+        this.resize = () => {
+            if (this.expandableContentRef.current) {
+                const { offsetWidth } = this.expandableContentRef.current;
+                if (this.state.previousWidth !== offsetWidth) {
+                    this.setState({ previousWidth: offsetWidth });
+                    this.checkToggleVisibility();
+                }
+            }
+        };
+        this.handleResize = (0, react_core_1.debounce)(this.resize, 250);
+        this.state = {
+            isExpanded: (_a = props.isExpanded) !== null && _a !== void 0 ? _a : false,
+            hasToggle: true,
+            previousWidth: undefined
+        };
+    }
+    componentDidMount() {
+        if (this.props.variant === ExpandableSectionVariant.truncate) {
+            const expandableContent = this.expandableContentRef.current;
+            if (expandableContent) {
+                this.setState({ previousWidth: expandableContent.offsetWidth });
+                this.observer = (0, react_core_1.getResizeObserver)(expandableContent, this.handleResize, false);
+                if (this.props.truncateMaxLines) {
+                    setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.state.isExpanded);
+                }
+            }
+            this.checkToggleVisibility();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.variant === ExpandableSectionVariant.truncate &&
+            (prevProps.truncateMaxLines !== this.props.truncateMaxLines ||
+                prevProps.children !== this.props.children ||
+                prevProps.isExpanded !== this.props.isExpanded)) {
+            const expandableContent = this.expandableContentRef.current;
+            setLineClamp(expandableContent, this.props.truncateMaxLines, this.props.language, this.props.isExpanded);
+            this.checkToggleVisibility();
+        }
+    }
+    componentWillUnmount() {
+        if (this.props.variant === ExpandableSectionVariant.truncate) {
+            this.observer();
+        }
+    }
+    render() {
+        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"]);
+        if (isDetached && !toggleId) {
+            /* eslint-disable no-console */
+            console.warn('ExpandableSection: The toggleId value must be passed in and must match the toggleId of the ExpandableSectionToggle.');
+        }
+        const uniqueContentId = contentId || (0, react_core_1.getUniqueId)('expandable-section-content');
+        const uniqueToggleId = toggleId || (0, react_core_1.getUniqueId)('expandable-section-toggle');
+        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 }) })));
+    }
+}
+exports.ExpandableSectionForSyntaxHighlighter = ExpandableSectionForSyntaxHighlighter;
+ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
+ExpandableSectionForSyntaxHighlighter.defaultProps = {
+    className: '',
+    isDetached: false,
+    displaySize: 'default',
+    isWidthLimited: false,
+    isIndented: false,
+    variant: 'default'
+};

package/dist/cjs/Message/ErrorMessage/ErrorMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { AlertProps } from '@patternfly/react-core';
-declare const ErrorMessage: ({ title, actionLinks, children, ...props }: AlertProps) => React.JSX.Element;
+declare const ErrorMessage: ({ title, actionLinks, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 export default ErrorMessage;

package/dist/cjs/Message/ErrorMessage/ErrorMessage.js

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - Error
-// ============================================================================
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
 const react_core_1 = require("@patternfly/react-core");
 const ErrorMessage = (_a) => {
     var { title, actionLinks, children } = _a, props = __rest(_a, ["title", "actionLinks", "children"]);
-    return (react_1.default.createElement(react_core_1.Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props), children));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props, { children: children })));
 };
 exports.default = ErrorMessage;

package/dist/cjs/Message/ImageMessage/ImageMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const ImageMessage: ({ children, ...props }: JSX.IntrinsicElements["img"] & ExtraProps) => React.JSX.Element;
+declare const ImageMessage: ({ children, ...props }: Omit<JSX.IntrinsicElements["img"], "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageMessage;

package/dist/cjs/Message/ImageMessage/ImageMessage.js

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - Image
-// ============================================================================
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,13 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const ImageMessage = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (react_1.default.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
+    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ className: "pf-chatbot__message-image" }, props, { children: children })));
 };
 exports.default = ImageMessage;

package/dist/cjs/Message/LinkMessage/LinkMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ButtonProps } from '@patternfly/react-core';
-declare const LinkMessage: ({ children, target, href, ...props }: ButtonProps) => React.JSX.Element;
+declare const LinkMessage: ({ children, target, href, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default LinkMessage;

package/dist/cjs/Message/LinkMessage/LinkMessage.js

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - Link
-// ============================================================================
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -13,18 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const LinkMessage = (_a) => {
     var { children, target, href } = _a, props = __rest(_a, ["children", "target", "href"]);
     if (target === '_blank') {
-        return (react_1.default.createElement(react_core_1.Button, Object.assign({ component: "a", variant: "link", href: href, icon: react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null), iconPosition: "end", isInline: true, target: target }, props), children));
+        return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: "link", href: href, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target }, props, { children: children })));
     }
-    return (react_1.default.createElement(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props), children));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props, { children: children })));
 };
 exports.default = LinkMessage;

package/dist/cjs/Message/ListMessage/ListItemMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const ListItemMessage: ({ children }: JSX.IntrinsicElements["li"] & ExtraProps) => React.JSX.Element;
+declare const ListItemMessage: ({ children }: JSX.IntrinsicElements["li"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default ListItemMessage;

package/dist/cjs/Message/ListMessage/ListItemMessage.js

@@ -1,12 +1,6 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const ListItemMessage = ({ children }) => react_1.default.createElement(react_core_1.ListItem, null, children);
+const ListItemMessage = ({ children }) => (0, jsx_runtime_1.jsx)(react_core_1.ListItem, { children: children });
 exports.default = ListItemMessage;

package/dist/cjs/Message/ListMessage/OrderedListMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => React.JSX.Element;
+declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default OrderedListMessage;

package/dist/cjs/Message/ListMessage/OrderedListMessage.js

@@ -1,13 +1,6 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const OrderedListMessage = ({ children, start }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    react_1.default.createElement(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start }, children)));
+const OrderedListMessage = ({ children, start }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-ordered-list", children: (0, jsx_runtime_1.jsx)(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start, children: children }) }));
 exports.default = OrderedListMessage;

package/dist/cjs/Message/ListMessage/UnorderedListMessage.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExtraProps } from 'react-markdown';
-declare const UnorderedListMessage: ({ children }: JSX.IntrinsicElements["ul"] & ExtraProps) => React.JSX.Element;
+declare const UnorderedListMessage: ({ children }: JSX.IntrinsicElements["ul"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default UnorderedListMessage;

package/dist/cjs/Message/ListMessage/UnorderedListMessage.js

@@ -1,13 +1,6 @@
 "use strict";
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const UnorderedListMessage = ({ children }) => (react_1.default.createElement("div", { className: "pf-chatbot__message-unordered-list" },
-    react_1.default.createElement(react_core_1.List, null, children)));
+const UnorderedListMessage = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-unordered-list", children: (0, jsx_runtime_1.jsx)(react_core_1.List, { children: children }) }));
 exports.default = UnorderedListMessage;