@patternfly/chatbot 6.5.0-prerelease.21 → 6.5.0-prerelease.23

package/dist/cjs/DeepThinking/DeepThinking.d.ts

@@ -1,8 +1,11 @@
 import { CardBodyProps, CardProps, ExpandableSectionProps } from '@patternfly/react-core';
 import { type FunctionComponent } from 'react';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface DeepThinkingProps {
     /** Toggle content shown for expandable section  */
     toggleContent: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Additional props passed to expandable section */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
     /** Subheading rendered inside expandable section */
@@ -13,6 +16,16 @@ export interface DeepThinkingProps {
     cardProps?: CardProps;
     /** Additional props passed to main card body */
     cardBodyProps?: CardBodyProps;
+    /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+    isToggleContentMarkdown?: boolean;
+    /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+    isSubheadingMarkdown?: boolean;
+    /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+    isBodyMarkdown?: boolean;
+    /** Props passed to MarkdownContent component when markdown is enabled */
+    markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+    /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+    shouldRetainStyles?: boolean;
 }
 export declare const DeepThinking: FunctionComponent<DeepThinkingProps>;
 export default DeepThinking;

package/dist/cjs/DeepThinking/DeepThinking.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DeepThinking = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,12 +10,37 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_core_1 = require("@patternfly/react-core");
 const react_1 = require("react");
-const DeepThinking = ({ body, cardProps, expandableSectionProps, subheading, toggleContent, cardBodyProps }) => {
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(true);
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const DeepThinking = ({ body, cardProps, expandableSectionProps, subheading, toggleContent, isDefaultExpanded = true, cardBodyProps, isToggleContentMarkdown, isSubheadingMarkdown, isBodyMarkdown, markdownContentProps, shouldRetainStyles = false }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
-    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__deep-thinking" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__deep-thinking-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__deep-thinking-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__deep-thinking-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: subheading }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__deep-thinking-body", children: body })] }) })) })) })));
+    const renderToggleContent = () => {
+        if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+            return ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: toggleContent }, markdownContentProps)));
+        }
+        return toggleContent;
+    };
+    const renderSubheading = () => {
+        if (!subheading) {
+            return null;
+        }
+        if (isSubheadingMarkdown) {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: subheading }, markdownContentProps));
+        }
+        return subheading;
+    };
+    const renderBody = () => {
+        if (!body) {
+            return null;
+        }
+        if (isBodyMarkdown && typeof body === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: body }, markdownContentProps));
+        }
+        return body;
+    };
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__deep-thinking" }, cardProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, cardBodyProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ toggleContent: renderToggleContent(), onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__deep-thinking-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__deep-thinking-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__deep-thinking-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: renderSubheading() }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__deep-thinking-body", children: renderBody() })] }) })) })) })));
 };
 exports.DeepThinking = DeepThinking;
 exports.default = exports.DeepThinking;

package/dist/cjs/DeepThinking/DeepThinking.test.js

@@ -1,10 +1,20 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 const DeepThinking_1 = __importDefault(require("./DeepThinking"));
 describe('DeepThinking', () => {
@@ -45,4 +55,74 @@ describe('DeepThinking', () => {
         const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
         expect(subheadingContainer).toBeFalsy();
     });
+    it('should pass through cardBodyProps', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { body: "Thinking content", cardBodyProps: { className: 'custom-card-body-class' } })));
+        const cardBody = react_1.screen.getByText('Thinking content').closest('.pf-v6-c-card__body');
+        expect(cardBody).toHaveClass('custom-card-body-class');
+    });
+    it('Renders expanded by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { body: "Thinking content" })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText('Thinking content')).toBeVisible();
+    });
+    it('Renders collapsed when isDefaultExpanded is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({ isDefaultExpanded: false }, defaultProps, { body: "Thinking content" })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.getByText('Thinking content')).not.toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, body: "Thinking content", expandableSectionProps: { isExpanded: true } })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText('Thinking content')).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const customOnToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, body: "Thinking content", expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = react_1.screen.getByRole('button', { name: defaultProps.toggleContent });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalled();
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.getByText('Thinking content')).not.toBeVisible();
+    }));
+    it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+        const toggleContent = '**Bold thinking**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, { toggleContent: toggleContent, isToggleContentMarkdown: true }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold thinking')).toBeTruthy();
+    });
+    it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+        const toggleContent = '**Bold thinking**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, { toggleContent: toggleContent }));
+        expect(container.querySelector('strong')).toBeFalsy();
+        expect(react_1.screen.getByText('**Bold thinking**')).toBeTruthy();
+    });
+    it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+        const subheading = '**Bold subheading**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { subheading: subheading, isSubheadingMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold subheading')).toBeTruthy();
+    });
+    it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+        const subheading = '**Bold subheading**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(react_1.screen.getByText('**Bold subheading**')).toBeTruthy();
+    });
+    it('should render body as markdown when isBodyMarkdown is true', () => {
+        const body = '**Bold body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold body')).toBeTruthy();
+    });
+    it('should not render body as markdown when isBodyMarkdown is false', () => {
+        const body = '**Bold body**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { body: body })));
+        expect(react_1.screen.getByText('**Bold body**')).toBeTruthy();
+    });
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const body = '**Bold body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(DeepThinking_1.default, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/cjs/MarkdownContent/MarkdownContent.d.ts

@@ -0,0 +1,39 @@
+import { type FunctionComponent, ReactNode } from 'react';
+import { Options } from 'react-markdown';
+import { CodeBlockMessageProps } from '../Message/CodeBlockMessage/CodeBlockMessage';
+import { TableProps } from '@patternfly/react-table';
+import 'highlight.js/styles/vs2015.css';
+import { PluggableList } from 'unified';
+import { ButtonProps } from '@patternfly/react-core';
+export interface MarkdownContentProps {
+    /** The markdown content to render */
+    content?: string;
+    /** Disables markdown parsing, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Props for code blocks */
+    codeBlockProps?: CodeBlockMessageProps;
+    /** 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 */
+    additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
+    /** Whether to open links in message in new tab. */
+    openLinkInNewTab?: boolean;
+    /** Props for links */
+    linkProps?: ButtonProps;
+    /** 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;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: Options;
+    /** Whether to strip out images in markdown */
+    hasNoImages?: boolean;
+    /** Sets background colors to be appropriate on primary chatbot background */
+    isPrimary?: boolean;
+    /** Custom component to render when markdown is disabled */
+    textComponent?: ReactNode;
+    /** Flag indicating whether content should retain various styles of its context (typically font-size and text color). */
+    shouldRetainStyles?: boolean;
+}
+export declare const MarkdownContent: FunctionComponent<MarkdownContentProps>;
+export default MarkdownContent;

package/dist/cjs/MarkdownContent/MarkdownContent.js

@@ -0,0 +1,181 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_markdown_1 = __importDefault(require("react-markdown"));
+const remark_gfm_1 = __importDefault(require("remark-gfm"));
+const react_core_1 = require("@patternfly/react-core");
+const CodeBlockMessage_1 = __importDefault(require("../Message/CodeBlockMessage/CodeBlockMessage"));
+const TextMessage_1 = __importDefault(require("../Message/TextMessage/TextMessage"));
+const ListItemMessage_1 = __importDefault(require("../Message/ListMessage/ListItemMessage"));
+const UnorderedListMessage_1 = __importDefault(require("../Message/ListMessage/UnorderedListMessage"));
+const OrderedListMessage_1 = __importDefault(require("../Message/ListMessage/OrderedListMessage"));
+const TableMessage_1 = __importDefault(require("../Message/TableMessage/TableMessage"));
+const TrMessage_1 = __importDefault(require("../Message/TableMessage/TrMessage"));
+const TdMessage_1 = __importDefault(require("../Message/TableMessage/TdMessage"));
+const TbodyMessage_1 = __importDefault(require("../Message/TableMessage/TbodyMessage"));
+const TheadMessage_1 = __importDefault(require("../Message/TableMessage/TheadMessage"));
+const ThMessage_1 = __importDefault(require("../Message/TableMessage/ThMessage"));
+const ImageMessage_1 = __importDefault(require("../Message/ImageMessage/ImageMessage"));
+const rehype_unwrap_images_1 = __importDefault(require("rehype-unwrap-images"));
+const rehype_external_links_1 = __importDefault(require("rehype-external-links"));
+const rehype_sanitize_1 = __importDefault(require("rehype-sanitize"));
+const rehype_highlight_1 = __importDefault(require("rehype-highlight"));
+require("highlight.js/styles/vs2015.css");
+const LinkMessage_1 = __importDefault(require("../Message/LinkMessage/LinkMessage"));
+const rehypeMoveImagesOutOfParagraphs_1 = require("../Message/Plugins/rehypeMoveImagesOutOfParagraphs");
+const SuperscriptMessage_1 = __importDefault(require("../Message/SuperscriptMessage/SuperscriptMessage"));
+const react_styles_1 = require("@patternfly/react-styles");
+const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, reactMarkdownProps, remarkGfmProps, hasNoImages = false, isPrimary, textComponent, shouldRetainStyles }) => {
+    let rehypePlugins = [rehype_unwrap_images_1.default, rehypeMoveImagesOutOfParagraphs_1.rehypeMoveImagesOutOfParagraphs, rehype_highlight_1.default];
+    if (openLinkInNewTab) {
+        rehypePlugins = rehypePlugins.concat([[rehype_external_links_1.default, { target: '_blank' }, rehype_sanitize_1.default]]);
+    }
+    if (additionalRehypePlugins) {
+        rehypePlugins.push(...additionalRehypePlugins);
+    }
+    const disallowedElements = hasNoImages ? ['img'] : [];
+    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
+        disallowedElements.push(...reactMarkdownProps.disallowedElements);
+    }
+    if (isMarkdownDisabled) {
+        if (textComponent) {
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textComponent });
+        }
+        return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, { component: react_core_1.ContentVariants.p, isPrimary: isPrimary, children: content }));
+    }
+    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: (0, react_styles_1.css)('pf-chatbot__message-text', shouldRetainStyles && 'pf-m-markdown', 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({ shouldRetainStyles: shouldRetainStyles, component: react_core_1.ContentVariants.p }, rest, { isPrimary: isPrimary })));
+            },
+            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, { isPrimary: isPrimary, shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles, 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({ shouldRetainStyles: shouldRetainStyles }, 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({ shouldRetainStyles: shouldRetainStyles }, 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({ shouldRetainStyles: shouldRetainStyles }, props, tableProps, { isPrimary: isPrimary }))),
+            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({ shouldRetainStyles: shouldRetainStyles }, 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), disallowedElements: disallowedElements, children: content })));
+};
+exports.MarkdownContent = MarkdownContent;
+exports.default = exports.MarkdownContent;

package/dist/cjs/MarkdownContent/MarkdownContent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/MarkdownContent/MarkdownContent.test.js

@@ -0,0 +1,192 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 MarkdownContent_1 = __importDefault(require("./MarkdownContent"));
+const rehype_external_links_1 = __importDefault(require("../__mocks__/rehype-external-links"));
+const BOLD_TEXT = '**Bold text**';
+const ITALIC_TEXT = '*Italic text*';
+const INLINE_CODE = 'Here is inline code: `const x = 5`';
+const CODE_BLOCK = `\`\`\`javascript
+function hello() {
+  console.log('Hello, world!');
+}
+\`\`\``;
+const HEADING = '# Heading 1';
+const LINK = '[PatternFly](https://www.patternfly.org/)';
+const UNORDERED_LIST = `
+* Item 1
+* Item 2
+* Item 3
+`;
+const ORDERED_LIST = `
+1. First item
+2. Second item
+3. Third item
+`;
+const TABLE = `
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`;
+const BLOCKQUOTE = '> This is a blockquote';
+const IMAGE = '![Alt text](https://example.com/image.png)';
+describe('MarkdownContent', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render bold text correctly', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: BOLD_TEXT }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold text')).toBeTruthy();
+    });
+    it('should render italic text correctly', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: ITALIC_TEXT }));
+        expect(container.querySelector('em')).toBeTruthy();
+        expect(react_1.screen.getByText('Italic text')).toBeTruthy();
+    });
+    it('should render inline code correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: INLINE_CODE }));
+        expect(react_1.screen.getByText(/const x = 5/)).toBeTruthy();
+    });
+    it('should render code blocks correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: CODE_BLOCK }));
+        expect(react_1.screen.getByText(/function hello/)).toBeVisible();
+        expect(react_1.screen.getByText(/console.log/)).toBeVisible();
+        expect(react_1.screen.getByRole('button', { name: 'Copy code' })).toBeVisible();
+    });
+    it('should render headings correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: HEADING }));
+        expect(react_1.screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+    });
+    it('should render links correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: LINK }));
+        expect(react_1.screen.getByRole('link', { name: /PatternFly/i })).toBeTruthy();
+    });
+    it('should render unordered lists correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: UNORDERED_LIST }));
+        expect(react_1.screen.getByText('Item 1')).toBeTruthy();
+        expect(react_1.screen.getByText('Item 2')).toBeTruthy();
+        expect(react_1.screen.getByText('Item 3')).toBeTruthy();
+        expect(react_1.screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+    it('should render ordered lists correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: ORDERED_LIST }));
+        expect(react_1.screen.getByText('First item')).toBeTruthy();
+        expect(react_1.screen.getByText('Second item')).toBeTruthy();
+        expect(react_1.screen.getByText('Third item')).toBeTruthy();
+        expect(react_1.screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+    it('should render tables correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: TABLE, tableProps: { 'aria-label': 'Test table' } }));
+        expect(react_1.screen.getByRole('grid', { name: /Test table/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+    });
+    it('should render blockquotes correctly', () => {
+        var _a;
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: BLOCKQUOTE }));
+        const quote = react_1.screen.getByText(/This is a blockquote/);
+        expect(quote).toBeVisible();
+        expect((_a = quote.closest('.pf-v6-c-content--blockquote')) === null || _a === void 0 ? void 0 : _a.tagName).toBe('BLOCKQUOTE');
+    });
+    it('should render images when hasNoImages is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: IMAGE, hasNoImages: false }));
+        expect(react_1.screen.getByRole('img', { name: /Alt text/i })).toBeTruthy();
+    });
+    it('should not render images when hasNoImages is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: IMAGE, hasNoImages: true }));
+        expect(react_1.screen.queryByRole('img', { name: /Alt text/i })).toBeFalsy();
+    });
+    it('should disable markdown rendering when isMarkdownDisabled is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: BOLD_TEXT, isMarkdownDisabled: true }));
+        expect(react_1.screen.getByText('**Bold text**')).toBeTruthy();
+    });
+    it('should render text component when isMarkdownDisabled is true and textComponent is provided', () => {
+        const textComponent = (0, jsx_runtime_1.jsx)("div", { "data-testid": "custom-text", children: "Custom text component" });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: BOLD_TEXT, isMarkdownDisabled: true, textComponent: textComponent }));
+        expect(react_1.screen.getByTestId('custom-text')).toBeTruthy();
+        expect(react_1.screen.getByText('Custom text component')).toBeTruthy();
+    });
+    it('should apply isPrimary prop to elements', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: INLINE_CODE, isPrimary: true }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('should apply shouldRetainStyles prop to elements', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: BOLD_TEXT, shouldRetainStyles: true }));
+        expect(container.querySelector('.pf-m-markdown')).toBeTruthy();
+    });
+    it('should pass codeBlockProps to code blocks', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: CODE_BLOCK, codeBlockProps: { 'aria-label': 'Custom code block' } }));
+        expect(react_1.screen.getByRole('button', { name: /Custom code block/i })).toBeTruthy();
+    });
+    it('should pass tableProps to tables', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: TABLE, tableProps: { 'aria-label': 'Custom table label' } }));
+        expect(react_1.screen.getByRole('grid', { name: /Custom table label/i })).toBeTruthy();
+    });
+    it('should open links in new tab when openLinkInNewTab is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: LINK, openLinkInNewTab: true }));
+        expect(rehype_external_links_1.default).toHaveBeenCalledTimes(1);
+    });
+    it('should not open links in new tab when openLinkInNewTab is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: LINK, openLinkInNewTab: false }));
+        expect(rehype_external_links_1.default).not.toHaveBeenCalled();
+    });
+    it('should pass linkProps to links', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClick = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: LINK, linkProps: { onClick } }));
+        const link = react_1.screen.getByRole('link', { name: /PatternFly/i });
+        link.click();
+        expect(onClick).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle reactMarkdownProps.disallowedElements', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: CODE_BLOCK, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        // Code block should not render when disallowed
+        expect(react_1.screen.queryByRole('button', { name: /Copy code/i })).toBeFalsy();
+    });
+    it('should render plain text when no markdown is present', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: "Plain text without markdown" }));
+        expect(react_1.screen.getByText('Plain text without markdown')).toBeTruthy();
+    });
+    it('should handle empty content', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: "" }));
+        expect(container.textContent).toBe('');
+    });
+    it('should handle undefined content', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, {}));
+        expect(container.textContent).toBe('');
+    });
+    it('should render multiple markdown elements together', () => {
+        const content = `# Heading
+
+**Bold text** and *italic text*
+
+\`\`\`javascript
+const x = 5;
+\`\`\`
+
+[Link](https://example.com)`;
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: content }));
+        expect(react_1.screen.getByRole('heading', { name: /Heading/i })).toBeTruthy();
+        expect(react_1.screen.getByText('Bold text')).toBeTruthy();
+        expect(react_1.screen.getByText('italic text')).toBeTruthy();
+        expect(react_1.screen.getByText(/const x = 5/)).toBeTruthy();
+        expect(react_1.screen.getByRole('link', { name: /Link/i })).toBeTruthy();
+    });
+});

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

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

package/dist/cjs/MarkdownContent/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 MarkdownContent_1 = require("./MarkdownContent");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MarkdownContent_1).default; } });
+__exportStar(require("./MarkdownContent"), exports);

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

@@ -20,6 +20,8 @@ export interface CodeBlockMessageProps {
     customActions?: React.ReactNode;
     /** Sets background colors to be appropriate on primary chatbot background */
     isPrimary?: boolean;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, isPrimary, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeBlockMessage: ({ children, className, "aria-label": ariaLabel, isExpandable, expandableSectionProps, expandableSectionToggleProps, expandedText, collapsedText, customActions, isPrimary, shouldRetainStyles, ...props }: CodeBlockMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default CodeBlockMessage;