npm - @patternfly/chatbot - Versions diffs - 6.3.0-prerelease.13 → 6.3.0-prerelease.14 - Mend

@patternfly/chatbot 6.3.0-prerelease.13 → 6.3.0-prerelease.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (529) hide show

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

@@ -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 CHANGED Viewed

@@ -1,4 +1,3 @@
-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;
+declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, ...props }: Omit<JSX.IntrinsicElements["code"], "ref"> & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockMessage;

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

@@ -14,10 +14,11 @@ 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
@@ -27,17 +28,17 @@ const copy_icon_1 = require("@patternfly/react-icons/dist/esm/icons/copy-icon");
 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();
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const buttonRef = (0, react_1.useRef)(undefined);
+    const tooltipID = (0, react_1.useId)();
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // 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 +47,10 @@ 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', 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", children: (0, jsx_runtime_1.jsx)(react_core_1.CodeBlock, { actions: actions, children: (0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: language ? ((0, jsx_runtime_1.jsx)(react_syntax_highlighter_1.default, Object.assign({}, props, { language: language, style: hljs_1.obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children })) }) }) }));
 };
 exports.default = CodeBlockMessage;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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;

package/dist/cjs/Message/Message.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
 import { AlertProps, AvatarProps, ButtonProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
@@ -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 */
@@ -95,7 +96,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,14 +116,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/cjs/Message/Message.js CHANGED Viewed

@@ -1,7 +1,4 @@
 "use strict";
-// ============================================================================
-// 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)
@@ -18,7 +15,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBase = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Message
+// ============================================================================
+const react_1 = require("react");
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const react_core_1 = require("@patternfly/react-core");
@@ -50,8 +51,8 @@ const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
 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, 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] = react_1.default.useState(content);
-    react_1.default.useEffect(() => {
+    const [messageText, setMessageText] = (0, react_1.useState)(content);
+    (0, react_1.useEffect)(() => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
@@ -73,74 +74,50 @@ const MessageBase = (_a) => {
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
     const renderMessage = () => {
         if (isLoading) {
-            return react_1.default.createElement(MessageLoading_1.default, { loadingWord: loadingWord });
+            return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord });
         }
         if (isEditable) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
-                react_1.default.createElement(MessageInput_1.default, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
-                        onEditUpdate && onEditUpdate(event);
-                        setMessageText(text);
-                    }, onEditCancel: onEditCancel }, editFormProps))));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), (0, jsx_runtime_1.jsx)(MessageInput_1.default, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
+                            onEditUpdate && onEditUpdate(event);
+                            setMessageText(value);
+                        }, onEditCancel: onEditCancel }, editFormProps))] }));
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            beforeMainContent && react_1.default.createElement(react_1.default.Fragment, null, beforeMainContent),
-            error ? (react_1.default.createElement(ErrorMessage_1.default, Object.assign({}, error))) : (react_1.default.createElement(react_markdown_1.default, { components: {
-                    p: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
-                    code: (_a) => {
-                        var { children } = _a, props = __rest(_a, ["children"]);
-                        return (react_1.default.createElement(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps), children));
-                    },
-                    h1: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
-                    h2: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
-                    h3: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
-                    h4: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
-                    h5: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
-                    h6: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
-                    blockquote: (props) => react_1.default.createElement(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
-                    ul: (props) => react_1.default.createElement(UnorderedListMessage_1.default, Object.assign({}, props)),
-                    ol: (props) => react_1.default.createElement(OrderedListMessage_1.default, Object.assign({}, props)),
-                    li: (props) => react_1.default.createElement(ListItemMessage_1.default, Object.assign({}, props)),
-                    table: (props) => react_1.default.createElement(TableMessage_1.default, Object.assign({}, props, tableProps)),
-                    tbody: (props) => react_1.default.createElement(TbodyMessage_1.default, Object.assign({}, props)),
-                    thead: (props) => react_1.default.createElement(TheadMessage_1.default, Object.assign({}, props)),
-                    tr: (props) => react_1.default.createElement(TrMessage_1.default, 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_1.default.createElement(TdMessage_1.default, Object.assign({}, rest));
-                    },
-                    th: (props) => react_1.default.createElement(ThMessage_1.default, Object.assign({}, props)),
-                    img: (props) => react_1.default.createElement(ImageMessage_1.default, Object.assign({}, props)),
-                    a: (props) => (react_1.default.createElement(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
-                }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, messageText))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error))) : ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
+                        p: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
+                        code: (_a) => {
+                            var { children } = _a, props = __rest(_a, ["children"]);
+                            return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps, { children: children })));
+                        },
+                        h1: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
+                        h2: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
+                        h3: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
+                        h4: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
+                        h5: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
+                        h6: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
+                        blockquote: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
+                        ul: (props) => (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({}, props)),
+                        ol: (props) => (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({}, props)),
+                        li: (props) => (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, props)),
+                        table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                        tbody: (props) => (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, props)),
+                        thead: (props) => (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, props)),
+                        tr: (props) => (0, jsx_runtime_1.jsx)(TrMessage_1.default, 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 (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
+                        },
+                        th: (props) => (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, props)),
+                        img: (props) => (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, props)),
+                        a: (props) => ((0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+                    }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins, children: messageText }))] }));
     };
-    return (react_1.default.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_1.default.createElement(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
-        react_1.default.createElement("div", { className: "pf-chatbot__message-contents" },
-            react_1.default.createElement("div", { className: "pf-chatbot__message-meta" },
-                name && (react_1.default.createElement("span", { className: "pf-chatbot__message-name" },
-                    react_1.default.createElement(react_core_1.Truncate, { content: name }))),
-                role === 'bot' && (react_1.default.createElement(react_core_1.Label, { variant: "outline", isCompact: true }, botWord)),
-                react_1.default.createElement(react_core_1.Timestamp, { date: date }, timestamp)),
-            react_1.default.createElement("div", { className: "pf-chatbot__message-response" },
-                react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    renderMessage(),
-                    afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent),
-                    !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })),
-                    quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { 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 && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
-                    userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
-                    userFeedbackComplete && (react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
-                    !isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
-                attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
-                    var _a;
-                    return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },
-                        react_1.default.createElement(FileDetailsLabel_1.default, { 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_1.default.createElement(react_1.default.Fragment, null, endContent)))));
+    return ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { 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 && (0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+                                    var _a;
+                                    return ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachment", children: (0, jsx_runtime_1.jsx)(FileDetailsLabel_1.default, { 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 && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: endContent })] })] })] })));
 };
 exports.MessageBase = MessageBase;
-const Message = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
+const Message = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBase, Object.assign({ innerRef: ref }, props))));
 exports.default = Message;