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

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,130 @@
+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 } = _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 || 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;

package/dist/esm/Message/Message.d.ts

@@ -1,5 +1,6 @@
-import React, { ReactNode } from 'react';
-import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
+import { ReactNode } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
 import { QuickStart, QuickstartAction } from './QuickStarts/types';
@@ -34,7 +35,7 @@ export interface MessageExtraContent {
     /** Content to display at the end */
     endContent?: ReactNode;
 }
-export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'role'> {
+export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     /** Unique id for message */
     id?: string;
     /** Role of the user sending the message */
@@ -63,9 +64,24 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     botWord?: string;
     /** Label for the English "Loading message," displayed to screenreaders when loading a message */
     loadingWord?: string;
+    /** Props for code blocks */
     codeBlockProps?: {
+        /** Aria label applied to code blocks */
         'aria-label'?: string;
+        /** Class name applied to code blocks */
         className?: string;
+        /** Whether code blocks are expandable */
+        isExpandable?: boolean;
+        /** Length of text initially shown in expandable code blocks; defaults to 10 characters */
+        maxLength?: number;
+        /** 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;
     };
     /** Props for quick responses */
     quickResponses?: QuickResponse[];
@@ -95,7 +111,7 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     /** Turns the container into a live region so that changes to content within the Message, such as appending a feedback card, are reliably announced to assistive technology. */
     isLiveRegion?: boolean;
     /** Ref applied to message  */
-    innerRef?: React.Ref<HTMLDivElement>;
+    innerRef?: Ref<HTMLDivElement>;
     /** Props for table message. It is important to include a detailed aria-label that describes the purpose of the table. */
     tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
     /** Additional rehype plugins passed from the consumer */
@@ -115,12 +131,14 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     /** Label for the English word "Cancel" used in edit mode. */
     cancelWord?: string;
     /** Callback function for when edit mode update button is clicked */
-    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Callback functionf or when edit cancel update button is clicked */
-    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Props for edit form */
     editFormProps?: FormProps;
+    /** Sets message to compact styling. */
+    isCompact?: boolean;
 }
-export declare const MessageBase: React.FunctionComponent<MessageProps>;
-declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const MessageBase: FunctionComponent<MessageProps>;
+declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Message;

package/dist/esm/Message/Message.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// Chatbot Main - Message
-// ============================================================================
 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,7 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+import { forwardRef, useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
@@ -42,14 +43,15 @@ import rehypeSanitize from 'rehype-sanitize';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
+import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 export const MessageBase = (_a) => {
-    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 } = _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"]);
-    const [messageText, setMessageText] = React.useState(content);
-    React.useEffect(() => {
+    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"]);
+    const [messageText, setMessageText] = useState(content);
+    useEffect(() => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehypeUnwrapImages];
+    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs];
     if (openLinkInNewTab) {
         rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
     }
@@ -67,73 +69,49 @@ export const MessageBase = (_a) => {
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
     const renderMessage = () => {
         if (isLoading) {
-            return React.createElement(MessageLoading, { loadingWord: loadingWord });
+            return _jsx(MessageLoading, { loadingWord: loadingWord });
         }
         if (isEditable) {
-            return (React.createElement(React.Fragment, null,
-                beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
-                React.createElement(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
-                        onEditUpdate && onEditUpdate(event);
-                        setMessageText(text);
-                    }, onEditCancel: onEditCancel }, editFormProps))));
+            return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), _jsx(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
+                            onEditUpdate && onEditUpdate(event);
+                            setMessageText(value);
+                        }, onEditCancel: onEditCancel }, editFormProps))] }));
         }
-        return (React.createElement(React.Fragment, null,
-            beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
-            error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
-                    p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
-                    code: (_a) => {
-                        var { children } = _a, props = __rest(_a, ["children"]);
-                        return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
-                    },
-                    h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
-                    h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
-                    h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
-                    h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
-                    h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
-                    h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
-                    blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
-                    ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
-                    ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
-                    li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
-                    table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
-                    tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
-                    thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
-                    tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
-                    td: (props) => {
-                        // Conflicts with Td type
-                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                        const { width } = props, rest = __rest(props, ["width"]);
-                        return React.createElement(TdMessage, Object.assign({}, rest));
-                    },
-                    th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
-                    img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
-                    a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
-                }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, messageText))));
+        return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? (_jsx(ErrorMessage, Object.assign({}, error))) : (_jsx(Markdown, { components: {
+                        p: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                        code: (_a) => {
+                            var { children } = _a, props = __rest(_a, ["children"]);
+                            return (_jsx(CodeBlockMessage, Object.assign({}, props, codeBlockProps, { children: children })));
+                        },
+                        h1: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                        h2: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                        h3: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                        h4: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                        h5: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                        h6: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                        blockquote: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                        ul: (props) => _jsx(UnorderedListMessage, Object.assign({}, props)),
+                        ol: (props) => _jsx(OrderedListMessage, Object.assign({}, props)),
+                        li: (props) => _jsx(ListItemMessage, Object.assign({}, props)),
+                        table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
+                        tbody: (props) => _jsx(TbodyMessage, Object.assign({}, props)),
+                        thead: (props) => _jsx(TheadMessage, Object.assign({}, props)),
+                        tr: (props) => _jsx(TrMessage, Object.assign({}, props)),
+                        td: (props) => {
+                            // Conflicts with Td type
+                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                            const { width } = props, rest = __rest(props, ["width"]);
+                            return _jsx(TdMessage, Object.assign({}, rest));
+                        },
+                        th: (props) => _jsx(ThMessage, Object.assign({}, props)),
+                        img: (props) => _jsx(ImageMessage, Object.assign({}, props)),
+                        a: (props) => (_jsx(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+                    }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins, children: messageText }))] }));
     };
-    return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
-        React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
-        React.createElement("div", { className: "pf-chatbot__message-contents" },
-            React.createElement("div", { className: "pf-chatbot__message-meta" },
-                name && (React.createElement("span", { className: "pf-chatbot__message-name" },
-                    React.createElement(Truncate, { content: name }))),
-                role === 'bot' && (React.createElement(Label, { variant: "outline", isCompact: true }, botWord)),
-                React.createElement(Timestamp, { date: date }, timestamp)),
-            React.createElement("div", { className: "pf-chatbot__message-response" },
-                React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    renderMessage(),
-                    afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
-                    !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
-                    quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
-                    !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
-                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
-                    userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
-                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
-                attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
-                    var _a;
-                    return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
-                        React.createElement(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId })));
-                }))),
-                !isLoading && endContent && React.createElement(React.Fragment, null, endContent)))));
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+                                    var _a;
+                                    return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
+                                }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));
 };
-const Message = React.forwardRef((props, ref) => (React.createElement(MessageBase, Object.assign({ innerRef: ref }, props))));
+const Message = forwardRef((props, ref) => (_jsx(MessageBase, Object.assign({ innerRef: ref }, props))));
 export default Message;