@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.0

package/dist/esm/FileDropZone/FileDropZone.test.js

@@ -1,14 +1,95 @@
-import React from 'react';
+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());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDropZone from './FileDropZone';
+import userEvent from '@testing-library/user-event';
 describe('FileDropZone', () => {
     it('should render file drop zone', () => {
-        const { container } = render(React.createElement(FileDropZone, { onFileDrop: jest.fn() }));
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn() }));
         expect(container).toMatchSnapshot();
     });
     it('should render children', () => {
-        render(React.createElement(FileDropZone, { onFileDrop: jest.fn() }, "Hi"));
+        render(_jsx(FileDropZone, { onFileDrop: jest.fn(), children: "Hi" }));
         expect(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 } = render(_jsx(FileDropZone, { "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 userEvent.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 } = render(_jsx(FileDropZone, { "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 userEvent.upload(fileInput, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: onFileDrop, isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
+    it('should call onAttach when files are attached', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttach = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onAttach).toHaveBeenCalled();
+    }));
+    it('should use custom validator when provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+        const onAttachRejected = jest.fn();
+        const onFileDrop = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: onFileDrop, validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

package/dist/esm/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/esm/LoadingMessage/LoadingMessage.js

@@ -1,13 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, Split, SplitItem } from '@patternfly/react-core';
 import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
-export const LoadingMessage = ({ icon: IconComponent = RobotIcon }) => (React.createElement(Split, null,
-    React.createElement(SplitItem, null,
-        React.createElement(Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md" },
-            React.createElement(IconComponent, null))),
-    React.createElement(SplitItem, { className: "pf-u-background-color-200" },
-        React.createElement("div", { className: "pf-v6-u-display-flex pf-u-align-items-center" },
-            React.createElement("div", null, "."),
-            React.createElement("div", null, "."),
-            React.createElement("div", null, ".")))));
+export const LoadingMessage = ({ icon: IconComponent = RobotIcon }) => (_jsxs(Split, { children: [_jsx(SplitItem, { children: _jsx(Icon, { size: "lg", className: "pf-v6-u-mr-sm pf-v6-u-pt-md", children: _jsx(IconComponent, {}) }) }), _jsx(SplitItem, { className: "pf-u-background-color-200", children: _jsxs("div", { className: "pf-v6-u-display-flex pf-u-align-items-center", children: [_jsx("div", { children: "." }), _jsx("div", { children: "." }), _jsx("div", { children: "." })] }) })] }));
 export default LoadingMessage;

package/dist/esm/LoadingMessage/LoadingMessage.test.js

@@ -1,14 +1,14 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import LoadingMessage from './LoadingMessage';
 describe('LoadingMessage', () => {
     it('should render loading message', () => {
-        const { container } = render(React.createElement(LoadingMessage, null));
+        const { container } = render(_jsx(LoadingMessage, {}));
         expect(container).toMatchSnapshot();
     });
     it('should render loading message correctly', () => {
-        render(React.createElement(LoadingMessage, null));
+        render(_jsx(LoadingMessage, {}));
         expect(screen.getAllByText('.')).toBeTruthy();
         expect(screen.getAllByText('.')).toHaveLength(3);
     });

package/dist/esm/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/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -9,30 +9,51 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import React from 'react';
+import { useState, useRef, useId, useCallback, useEffect } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { obsidian } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { ExpandableSectionForSyntaxHighlighter } from './ExpandableSectionForSyntaxHighlighter';
+const DEFAULT_EXPANDED_TEXT = 'Show less';
+const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
     var _b;
-    var { children, className, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", 'aria-label']);
-    const [copied, setCopied] = React.useState(false);
-    const buttonRef = React.useRef();
-    const tooltipID = React.useId();
+    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText"]);
+    const [copied, setCopied] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const buttonRef = useRef();
+    const tooltipID = useId();
+    const toggleId = useId();
+    const contentId = useId();
+    const codeBlockRef = useRef(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
+    // Get custom toggle text from data attributes if available - for use with rehype plugins
+    const customExpandedText = props['data-expanded-text'];
+    const customCollapsedText = props['data-collapsed-text'];
+    const finalExpandedText = customExpandedText || expandedText;
+    const finalCollapsedText = customCollapsedText || collapsedText;
+    if ((customExpandedText && expandedText !== DEFAULT_EXPANDED_TEXT) ||
+        (customCollapsedText && collapsedText !== DEFAULT_COLLAPSED_TEXT)) {
+        // eslint-disable-next-line no-console
+        console.error('Message:', 'Custom rehype plugins that rely on data-expanded-text or data-collapsed-text will override expandedText and collapsedText props if both are passed in.');
+    }
+    const onToggle = (isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
     // Handle clicking copy button
-    const handleCopy = React.useCallback((event, text) => {
+    const handleCopy = useCallback((event, text) => {
         navigator.clipboard.writeText(text.toString());
         setCopied(true);
     }, []);
     // Reset copied state
-    React.useEffect(() => {
+    useEffect(() => {
         if (copied) {
             const timer = setTimeout(() => {
                 setCopied(false);
@@ -41,16 +62,13 @@ const CodeBlockMessage = (_a) => {
         }
     });
     if (!String(children).includes('\n')) {
-        return (React.createElement("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code" }), children));
+        return (_jsx("code", Object.assign({}, props, { className: "pf-chatbot__message-inline-code", children: children })));
     }
     // Setup code block header
-    const actions = (React.createElement(React.Fragment, null,
-        React.createElement(CodeBlockAction, null,
-            language && React.createElement("div", { className: "pf-chatbot__message-code-block-language" }, language),
-            React.createElement(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.createElement(CheckIcon, null) : React.createElement(CopyIcon, null)),
-            React.createElement(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef }))));
-    return (React.createElement("div", { className: "pf-chatbot__message-code-block" },
-        React.createElement(CodeBlock, { actions: actions },
-            React.createElement(CodeBlockCode, null, language ? (React.createElement(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true }), String(children).replace(/\n$/, ''))) : (React.createElement(React.Fragment, null, children))))));
+    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 })] }) }));
+    return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_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
+                        _jsx(ExpandableSectionForSyntaxHighlighter, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId, language: language }, expandableSectionProps, { children: _jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') })) }))) : (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 export default CodeBlockMessage;

package/dist/esm/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/esm/Message/CodeBlockMessage/ExpandableSectionForSyntaxHighlighter.js

@@ -0,0 +1,133 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component, createRef } from 'react';
+import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+import { css } from '@patternfly/react-styles';
+import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
+import { debounce, getResizeObserver, getUniqueId } from '@patternfly/react-core';
+export var ExpandableSectionVariant;
+(function (ExpandableSectionVariant) {
+    ExpandableSectionVariant["default"] = "default";
+    ExpandableSectionVariant["truncate"] = "truncate";
+})(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 Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.expandableContentRef = 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(lineClamp.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 = 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 = 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, 
+        // Gets rid of console error about it being on a DOM element
+        // eslint-disable-next-line
+        truncateMaxLines } = _a, props = __rest(_a, ["className", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "toggleId", "variant", "truncateMaxLines"]);
+        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 || getUniqueId('expandable-section-content');
+        const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
+        return (_jsx("div", Object.assign({ className: css(styles.expandableSection, isExpanded && styles.modifiers.expanded, displaySize === 'lg' && styles.modifiers.displayLg, isWidthLimited && styles.modifiers.limitWidth, isIndented && styles.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate, className) }, props, { children: _jsx("div", { ref: this.expandableContentRef, className: css(styles.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !isExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region", children: children }) })));
+    }
+}
+ExpandableSectionForSyntaxHighlighter.displayName = 'ExpandableSection';
+ExpandableSectionForSyntaxHighlighter.defaultProps = {
+    className: '',
+    isDetached: false,
+    displaySize: 'default',
+    isWidthLimited: false,
+    isIndented: false,
+    variant: 'default'
+};
+export { ExpandableSectionForSyntaxHighlighter };

package/dist/esm/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/esm/Message/ErrorMessage/ErrorMessage.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// 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)
@@ -12,10 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
 import { Alert } from '@patternfly/react-core';
 const ErrorMessage = (_a) => {
     var { title, actionLinks, children } = _a, props = __rest(_a, ["title", "actionLinks", "children"]);
-    return (React.createElement(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props), children));
+    return (_jsx(Alert, Object.assign({ isInline: true, variant: "danger", title: title, actionLinks: actionLinks }, props, { children: children })));
 };
 export default ErrorMessage;

package/dist/esm/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/esm/Message/ImageMessage/ImageMessage.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// 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)
@@ -12,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 const ImageMessage = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement("img", Object.assign({ className: "pf-chatbot__message-image" }, props), children));
+    return (_jsx("img", Object.assign({ className: "pf-chatbot__message-image" }, props, { children: children })));
 };
 export default ImageMessage;

package/dist/esm/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/esm/Message/LinkMessage/LinkMessage.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// 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)
@@ -12,14 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+// ============================================================================
+// Chatbot Main - Message - Content - Link
+// ============================================================================
 import { Button } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const LinkMessage = (_a) => {
     var { children, target, href } = _a, props = __rest(_a, ["children", "target", "href"]);
     if (target === '_blank') {
-        return (React.createElement(Button, Object.assign({ component: "a", variant: "link", href: href, icon: React.createElement(ExternalLinkSquareAltIcon, null), iconPosition: "end", isInline: true, target: target }, props), children));
+        return (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target }, props, { children: children })));
     }
-    return (React.createElement(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props), children));
+    return (_jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props, { children: children })));
 };
 export default LinkMessage;

package/dist/esm/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/esm/Message/ListMessage/ListItemMessage.js

@@ -1,7 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItem } from '@patternfly/react-core';
-const ListItemMessage = ({ children }) => React.createElement(ListItem, null, children);
+const ListItemMessage = ({ children }) => _jsx(ListItem, { children: children });
 export default ListItemMessage;

package/dist/esm/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/esm/Message/ListMessage/OrderedListMessage.js

@@ -1,8 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-const OrderedListMessage = ({ children, start }) => (React.createElement("div", { className: "pf-chatbot__message-ordered-list" },
-    React.createElement(List, { component: ListComponent.ol, type: OrderType.number, start: start }, children)));
+const OrderedListMessage = ({ children, start }) => (_jsx("div", { className: "pf-chatbot__message-ordered-list", children: _jsx(List, { component: ListComponent.ol, type: OrderType.number, start: start, children: children }) }));
 export default OrderedListMessage;

package/dist/esm/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/esm/Message/ListMessage/UnorderedListMessage.js

@@ -1,8 +1,4 @@
-// ============================================================================
-// Chatbot Main - Message - Content - List
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from '@patternfly/react-core';
-const UnorderedListMessage = ({ children }) => (React.createElement("div", { className: "pf-chatbot__message-unordered-list" },
-    React.createElement(List, null, children)));
+const UnorderedListMessage = ({ children }) => (_jsx("div", { className: "pf-chatbot__message-unordered-list", children: _jsx(List, { children: children }) }));
 export default UnorderedListMessage;