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

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

@@ -9,10 +9,11 @@ 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
@@ -22,17 +23,17 @@ import { CopyIcon } from '@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.useState(false);
-    const buttonRef = React.useRef();
-    const tooltipID = React.useId();
+    const [copied, setCopied] = useState(false);
+    const buttonRef = useRef(undefined);
+    const tooltipID = useId();
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // 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 +42,10 @@ 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', 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", children: _jsx(CodeBlock, { actions: actions, children: _jsx(CodeBlockCode, { children: language ? (_jsx(SyntaxHighlighter, Object.assign({}, props, { language: language, style: obsidian, PreTag: "div", CodeTag: "div", wrapLongLines: true, children: String(children).replace(/\n$/, '') }))) : (_jsx(_Fragment, { children: children })) }) }) }));
 };
 export default CodeBlockMessage;

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,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/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';
@@ -44,8 +45,8 @@ import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 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, 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.useState(content);
-    React.useEffect(() => {
+    const [messageText, setMessageText] = useState(content);
+    useEffect(() => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
@@ -67,73 +68,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, { isCompact: isCompact })),
-                    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, isCompact: isCompact })),
-                    !isLoading && actions && React.createElement(ResponseActions, { actions: actions }),
-                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
-                    userFeedbackComplete && (React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
-                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
-                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;