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

package/dist/cjs/ImagePreview/ImagePreview.test.js

@@ -0,0 +1,225 @@
+"use strict";
+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");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const ImagePreview_1 = __importDefault(require("./ImagePreview"));
+const Chatbot_1 = require("../Chatbot");
+const mockImages = [
+    {
+        fileName: 'image1.jpg',
+        fileSize: '2.5 MB',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 1" })
+    },
+    {
+        fileName: 'image2.png',
+        fileSize: '1.8 MB',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 2" })
+    },
+    {
+        fileName: 'image3.gif',
+        image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image 3" })
+    }
+];
+const defaultProps = {
+    isModalOpen: true,
+    handleModalToggle: jest.fn(),
+    images: mockImages
+};
+describe('ImagePreview', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders modal when isModalOpen is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    it('does not render modal when isModalOpen is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isModalOpen: false })));
+        expect(react_1.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('displays custom title when provided', () => {
+        const customTitle = 'Custom image preview';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(react_1.screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+    });
+    it('displays default title when no title provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+    });
+    it('calls handleModalToggle when modal is closed', () => {
+        const mockHandleToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { handleModalToggle: mockHandleToggle })));
+        const closeButton = react_1.screen.getByRole('button', { name: /close/i });
+        react_1.fireEvent.click(closeButton);
+        expect(mockHandleToggle).toHaveBeenCalledTimes(1);
+    });
+    it('displays first image by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByText('image1.jpg')).toBeInTheDocument();
+        expect(react_1.screen.getByText('2.5 MB')).toBeInTheDocument();
+        expect(react_1.screen.getByAltText('Test image 1')).toBeInTheDocument();
+    });
+    it('displays page counter correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        expect(react_1.screen.getByText('1/3')).toBeInTheDocument();
+    });
+    it('navigates to next image when next button is clicked', () => {
+        const mockOnNextClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onNextClick: mockOnNextClick })));
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        expect(mockOnNextClick).toHaveBeenCalled();
+        expect(react_1.screen.getByText('2/3')).toBeInTheDocument();
+        expect(react_1.screen.getByText('image2.png')).toBeInTheDocument();
+    });
+    it('navigates to previous image when previous button is clicked', () => {
+        const mockOnPreviousClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onPreviousClick: mockOnPreviousClick })));
+        // First go to page 2
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        // Then go back to page 1
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        react_1.fireEvent.click(previousButton);
+        expect(mockOnPreviousClick).toHaveBeenCalled();
+        expect(react_1.screen.getByText('1/3')).toBeInTheDocument();
+    });
+    it('calls onSetPage when page changes', () => {
+        const mockOnSetPage = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onSetPage: mockOnSetPage })));
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        expect(mockOnSetPage).toHaveBeenCalledWith(expect.any(Object), 2);
+    });
+    it('disables previous button on first page', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        expect(previousButton).toBeDisabled();
+    });
+    it('disables next button on last page', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        // Navigate to last page
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton); // page 2
+        react_1.fireEvent.click(nextButton); // page 3
+        expect(nextButton).toBeDisabled();
+    });
+    it('disables both navigation buttons when isDisabled is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isDisabled: true })));
+        const previousButton = react_1.screen.getByRole('button', { name: /Go to previous image/i });
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        expect(previousButton).toBeDisabled();
+        expect(nextButton).toBeDisabled();
+    });
+    it('uses custom aria labels for pagination', () => {
+        const customLabels = {
+            paginationAriaLabel: 'Custom pagination',
+            toPreviousPageAriaLabel: 'Go to previous image',
+            toNextPageAriaLabel: 'Go to next image'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, customLabels)));
+        expect(react_1.screen.getByRole('navigation', { name: 'Custom pagination' })).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: 'Go to previous image' })).toBeInTheDocument();
+        expect(react_1.screen.getByRole('button', { name: 'Go to next image' })).toBeInTheDocument();
+    });
+    it('renders with compact mode when isCompact is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { isCompact: true })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-m-compact');
+    });
+    it('applies custom className when provided', () => {
+        const customClassName = 'custom-image-preview';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { className: customClassName })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClassName);
+    });
+    it('applies display mode class correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded })));
+        const modal = react_1.screen.getByRole('dialog');
+        expect(modal).toHaveClass('pf-chatbot__image-preview-modal--embedded');
+    });
+    it('passes additional props to ChatbotModal', () => {
+        const modalClass = 'custom-modal-class';
+        const additionalProps = {
+            'data-testid': 'modal',
+            className: modalClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, additionalProps)));
+        const modal = react_1.screen.getByTestId('modal');
+        expect(modal).toBeInTheDocument();
+        expect(modal).toBeInTheDocument();
+        expect(modal).toHaveClass(modalClass);
+    });
+    it('passes modalHeaderProps correctly', () => {
+        const headerClass = 'custom-modal-header-class';
+        const headerProps = {
+            'data-testid': 'header',
+            className: headerClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { modalHeaderProps: headerProps })));
+        expect(react_1.screen.getByTestId('header')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('header')).toHaveClass(headerClass);
+    });
+    it('passes modalBodyProps correctly', () => {
+        const bodyClass = 'custom-modal-body-class';
+        const bodyProps = {
+            'data-testid': 'body',
+            className: bodyClass
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { modalBodyProps: bodyProps })));
+        expect(react_1.screen.getByTestId('body')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('body')).toHaveClass(bodyClass);
+    });
+    it('handles single image without pagination', () => {
+        const singleImage = [mockImages[0]];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { images: singleImage })));
+        expect(react_1.screen.queryByText('1/1')).not.toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /Go to previous image/i })).not.toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /Go to next image/i })).not.toBeInTheDocument();
+    });
+    it('calls onCloseFileDetailsLabel when file details close button is clicked', () => {
+        const mockOnClose = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { onCloseFileDetailsLabel: mockOnClose })));
+        const closeButton = react_1.screen.getByRole('button', { name: /Close image1.jpg/i });
+        react_1.fireEvent.click(closeButton);
+        expect(mockOnClose).toHaveBeenCalled();
+    });
+    it('passes fileDetailsLabelProps correctly to FileDetailsLabel', () => {
+        const customFileDetailsProps = {
+            'data-testid': 'custom-file-details'
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { fileDetailsLabelProps: customFileDetailsProps })));
+        expect(react_1.screen.getByTestId('custom-file-details')).toBeInTheDocument();
+    });
+    it('displays file details for current page when navigating', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps)));
+        // Initially shows first image details
+        expect(react_1.screen.getByText('image1.jpg')).toBeInTheDocument();
+        expect(react_1.screen.getByText('2.5 MB')).toBeInTheDocument();
+        // Navigate to second page
+        const nextButton = react_1.screen.getByRole('button', { name: /Go to next image/i });
+        react_1.fireEvent.click(nextButton);
+        // Should now show second image details
+        expect(react_1.screen.getByText('image2.png')).toBeInTheDocument();
+        expect(react_1.screen.getByText('1.8 MB')).toBeInTheDocument();
+        // Navigate to third page
+        react_1.fireEvent.click(nextButton);
+        // Should now show third image details (no file size)
+        expect(react_1.screen.getByText('image3.gif')).toBeInTheDocument();
+        expect(react_1.screen.queryByText(/MB/)).not.toBeInTheDocument();
+    });
+    it('sets hasTruncation to false on FileDetailsLabel', () => {
+        const longFileName = 'very-long-filename-that-would-normally-be-truncated-in-other-contexts.jpg';
+        const imageWithLongName = {
+            fileName: longFileName,
+            fileSize: '1.0 MB',
+            image: (0, jsx_runtime_1.jsx)("img", { src: "", alt: "Test image with long name" })
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ImagePreview_1.default, Object.assign({}, defaultProps, { images: [imageWithLongName] })));
+        expect(react_1.screen.getByText(longFileName)).toBeInTheDocument();
+    });
+});

package/dist/cjs/ImagePreview/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ImagePreview';
+export * from './ImagePreview';

package/dist/cjs/ImagePreview/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ImagePreview_1 = require("./ImagePreview");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ImagePreview_1).default; } });
+__exportStar(require("./ImagePreview"), exports);

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

@@ -28,9 +28,9 @@ const CodeBlockMessage = (_a) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)();
-    const tooltipID = (0, react_1.useId)();
-    const toggleId = (0, react_1.useId)();
-    const contentId = (0, react_1.useId)();
+    const tooltipID = (0, react_core_1.getUniqueId)();
+    const toggleId = (0, react_core_1.getUniqueId)();
+    const contentId = (0, react_core_1.getUniqueId)();
     const codeBlockRef = (0, react_1.useRef)(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // Get custom toggle text from data attributes if available - for use with rehype plugins

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

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

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

@@ -18,10 +18,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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"]);
+    var { children, target, href, id } = _a, props = __rest(_a, ["children", "target", "href", "id"]);
     if (target === '_blank') {
-        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 ((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, 
+            // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+            id: id }, props, { children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link" }, props, { children: children })));
+    return (
+    // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
+    (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { children: children })));
 };
 exports.default = LinkMessage;

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

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

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

@@ -1,6 +1,21 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const ListItemMessage = ({ children }) => (0, jsx_runtime_1.jsx)(react_core_1.ListItem, { children: children });
+const ListItemMessage = (_a) => {
+    var _b;
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.ListItem, Object.assign({}, props, { tabIndex: ((_b = props === null || props === void 0 ? void 0 : props.id) === null || _b === void 0 ? void 0 : _b.includes('fn-')) ? -1 : props === null || props === void 0 ? void 0 : props.tabIndex, children: children })));
+};
 exports.default = ListItemMessage;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
 import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
@@ -9,6 +10,8 @@ import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
 import { PluggableList } from 'unified';
+import { ToolResponseProps } from '../ToolResponse';
+import { DeepThinkingProps } from '../DeepThinking';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -116,6 +119,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
     /** Additional rehype plugins passed from the consumer */
     additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
     /** Whether to open links in message in new tab. */
     openLinkInNewTab?: boolean;
     /** Optional inline error message that can be displayed in the message */
@@ -140,6 +145,16 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     editFormProps?: FormProps;
     /** Sets message to compact styling. */
     isCompact?: boolean;
+    /** Disables markdown parsing for message, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
+    /** Props for tool response card */
+    toolResponse?: ToolResponseProps;
+    /** Props for deep thinking card */
+    deepThinking?: DeepThinkingProps;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: Options;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -50,8 +50,11 @@ const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
 const rehypeMoveImagesOutOfParagraphs_1 = require("./Plugins/rehypeMoveImagesOutOfParagraphs");
+const ToolResponse_1 = __importDefault(require("../ToolResponse"));
+const DeepThinking_1 = __importDefault(require("../DeepThinking"));
+const SuperscriptMessage_1 = __importDefault(require("./SuperscriptMessage/SuperscriptMessage"));
 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, inputRef, 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", "inputRef", "editFormProps", "isCompact"]);
+    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 = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps } = _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", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
     (0, react_1.useEffect)(() => {
         setMessageText(content);
@@ -73,6 +76,129 @@ const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const handleMarkdown = () => {
+        if (isMarkdownDisabled) {
+            return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props, { children: messageText })));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({ components: {
+                section: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)("section", Object.assign({}, rest, { className: `pf-chatbot__message-text ${rest === null || rest === void 0 ? void 0 : rest.className}` }));
+                },
+                p: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, rest));
+                },
+                code: (_a) => {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, codeProps = __rest(props, ["node"]);
+                    return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, codeProps, codeBlockProps, { children: children })));
+                },
+                h1: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, rest));
+                },
+                h2: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, rest));
+                },
+                h3: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, rest));
+                },
+                h4: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, rest));
+                },
+                h5: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, rest));
+                },
+                h6: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, rest));
+                },
+                blockquote: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, rest));
+                },
+                ul: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({}, rest));
+                },
+                ol: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({}, rest));
+                },
+                li: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, rest));
+                },
+                // table requires node attribute for calculating headers for mobile breakpoint
+                table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                tbody: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, rest));
+                },
+                thead: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, rest));
+                },
+                tr: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(TrMessage_1.default, Object.assign({}, rest));
+                },
+                td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node, width } = props, rest = __rest(props, ["node", "width"]);
+                    return (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
+                },
+                th: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, rest));
+                },
+                img: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, rest));
+                },
+                a: (props) => {
+                    // node is just the details of the document structure - not needed
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (
+                    // some a types conflict with ButtonProps, but it's ok because we are using an a tag
+                    // there are too many to handle manually
+                    (0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({}, rest, linkProps, { children: props.children })));
+                },
+                // used for footnotes
+                sup: (props) => {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { node } = props, rest = __rest(props, ["node"]);
+                    return (0, jsx_runtime_1.jsx)(SuperscriptMessage_1.default, Object.assign({}, rest));
+                }
+            }, remarkPlugins: [[remark_gfm_1.default, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
+                // removes sr-only class from footnote labels applied by default
+                footnoteLabelProperties: { className: [''] } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), children: messageText })));
+    };
     const renderMessage = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord });
@@ -83,38 +209,9 @@ const MessageBase = (_a) => {
                             setMessageText(value);
                         }, onEditCancel: onEditCancel, inputRef: inputRef }, editFormProps))] }));
         }
-        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 ((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)) : handleMarkdown()] }));
     };
-    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 && !isEditable && 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) => {
+    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 }), toolResponse && (0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, toolResponse)), deepThinking && (0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, deepThinking)), !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 && !isEditable && 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 })] })] })] })));