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

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

@@ -17,15 +17,16 @@ 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 react_styles_1 = require("@patternfly/react-styles");
 const LinkMessage = (_a) => {
-    var { children, target, href, id } = _a, props = __rest(_a, ["children", "target", "href", "id"]);
+    var { children, target, href, id, shouldRetainStyles } = _a, props = __rest(_a, ["children", "target", "href", "id", "shouldRetainStyles"]);
     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, 
             // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
-            id: id }, props, { children: children })));
+            id: id }, props, { className: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), 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 })));
+    (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { className: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
 };
 exports.default = LinkMessage;

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

@@ -1,3 +1,11 @@
 import { ExtraProps } from 'react-markdown';
-declare const OrderedListMessage: ({ children, start }: JSX.IntrinsicElements["ol"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export interface OrderedListMessageProps {
+    /** The ordered list content */
+    children?: React.ReactNode;
+    /** The number to start the ordered list at. */
+    start?: number;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const OrderedListMessage: ({ children, start, shouldRetainStyles }: OrderedListMessageProps & JSX.IntrinsicElements["ol"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default OrderedListMessage;

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

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const OrderedListMessage = ({ children, start }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-ordered-list", children: (0, jsx_runtime_1.jsx)(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start, children: children }) }));
+const react_styles_1 = require("@patternfly/react-styles");
+const OrderedListMessage = ({ children, start, shouldRetainStyles }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown'), children: (0, jsx_runtime_1.jsx)(react_core_1.List, { component: react_core_1.ListComponent.ol, type: react_core_1.OrderType.number, start: start, children: children }) }));
 exports.default = OrderedListMessage;

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

@@ -1,3 +1,9 @@
 import { ExtraProps } from 'react-markdown';
-declare const UnorderedListMessage: ({ children }: JSX.IntrinsicElements["ul"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export interface UnrderedListMessageProps {
+    /** The ordered list content */
+    children?: React.ReactNode;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const UnorderedListMessage: ({ children, shouldRetainStyles }: UnrderedListMessageProps & JSX.IntrinsicElements["ul"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default UnorderedListMessage;

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

@@ -2,5 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
-const UnorderedListMessage = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-unordered-list", children: (0, jsx_runtime_1.jsx)(react_core_1.List, { children: children }) }));
+const react_styles_1 = require("@patternfly/react-styles");
+const UnorderedListMessage = ({ children, shouldRetainStyles }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown'), children: (0, jsx_runtime_1.jsx)(react_core_1.List, { children: children }) }));
 exports.default = UnorderedListMessage;

package/dist/cjs/Message/Message.js

@@ -20,43 +20,23 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // Chatbot Main - Message
 // ============================================================================
 const react_1 = require("react");
-const react_markdown_1 = __importDefault(require("react-markdown"));
-const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const react_core_1 = require("@patternfly/react-core");
 const MessageLoading_1 = __importDefault(require("./MessageLoading"));
-const CodeBlockMessage_1 = __importDefault(require("./CodeBlockMessage/CodeBlockMessage"));
-const TextMessage_1 = __importDefault(require("./TextMessage/TextMessage"));
 const FileDetailsLabel_1 = __importDefault(require("../FileDetailsLabel/FileDetailsLabel"));
 const ResponseActions_1 = __importDefault(require("../ResponseActions/ResponseActions"));
 const SourcesCard_1 = __importDefault(require("../SourcesCard"));
-const ListItemMessage_1 = __importDefault(require("./ListMessage/ListItemMessage"));
-const UnorderedListMessage_1 = __importDefault(require("./ListMessage/UnorderedListMessage"));
-const OrderedListMessage_1 = __importDefault(require("./ListMessage/OrderedListMessage"));
 const QuickStartTile_1 = __importDefault(require("./QuickStarts/QuickStartTile"));
 const QuickResponse_1 = __importDefault(require("./QuickResponse/QuickResponse"));
 const UserFeedback_1 = __importDefault(require("./UserFeedback/UserFeedback"));
 const UserFeedbackComplete_1 = __importDefault(require("./UserFeedback/UserFeedbackComplete"));
-const TableMessage_1 = __importDefault(require("./TableMessage/TableMessage"));
-const TrMessage_1 = __importDefault(require("./TableMessage/TrMessage"));
-const TdMessage_1 = __importDefault(require("./TableMessage/TdMessage"));
-const TbodyMessage_1 = __importDefault(require("./TableMessage/TbodyMessage"));
-const TheadMessage_1 = __importDefault(require("./TableMessage/TheadMessage"));
-const ThMessage_1 = __importDefault(require("./TableMessage/ThMessage"));
-const ImageMessage_1 = __importDefault(require("./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"));
 // see the full list of styles here: https://highlightjs.org/examples
 require("highlight.js/styles/vs2015.css");
-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 ToolCall_1 = __importDefault(require("../ToolCall"));
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
 const MessageBase = (_a) => {
     var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, 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, toolCall, hasNoImagesInUserMessages = true, isPrimary } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "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", "toolCall", "hasNoImagesInUserMessages", "isPrimary"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
@@ -64,13 +44,6 @@ const MessageBase = (_a) => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    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);
-    }
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -80,133 +53,7 @@ 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 disallowedElements = role === 'user' && hasNoImagesInUserMessages ? ['img'] : [];
-    if (reactMarkdownProps && reactMarkdownProps.disallowedElements) {
-        disallowedElements.push(...reactMarkdownProps.disallowedElements);
-    }
-    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, { 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, 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, { 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({}, 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: messageText })));
-    };
+    const handleMarkdown = () => ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, { content: messageText, isMarkdownDisabled: isMarkdownDisabled, codeBlockProps: codeBlockProps, tableProps: tableProps, openLinkInNewTab: openLinkInNewTab, additionalRehypePlugins: additionalRehypePlugins, additionalRemarkPlugins: additionalRemarkPlugins, linkProps: linkProps, reactMarkdownProps: reactMarkdownProps, remarkGfmProps: remarkGfmProps, hasNoImages: role === 'user' && hasNoImagesInUserMessages, isPrimary: isPrimary }));
     const renderMessage = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord, isPrimary: isPrimary });

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

@@ -16,7 +16,12 @@ export interface TableNode {
     type: string;
 }
 export interface TableMessageProps {
+    /** Content of the table */
+    children?: React.ReactNode;
+    /** Flag indicating whether primary styles should be applied. */
     isPrimary?: boolean;
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const TableMessage: ({ children, isPrimary, ...props }: Omit<TableProps, "ref"> & ExtraProps & TableMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableMessage: ({ children, isPrimary, shouldRetainStyles, ...props }: Omit<TableProps, "ref"> & ExtraProps & TableMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TableMessage;

package/dist/cjs/Message/TableMessage/TableMessage.js

@@ -17,9 +17,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_1 = require("react");
 const react_table_1 = require("@patternfly/react-table");
+const react_styles_1 = require("@patternfly/react-styles");
 const TableMessage = (_a) => {
     var _b;
-    var { children, isPrimary } = _a, props = __rest(_a, ["children", "isPrimary"]);
+    var { children, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["children", "isPrimary", "shouldRetainStyles"]);
     const { className } = props, rest = __rest(props, ["className"]);
     // This allows us to parse the nested data we get back from the 3rd party Markdown parser
     // Open to feedback here if there is a better way to do this
@@ -60,6 +61,6 @@ const TableMessage = (_a) => {
     }
     return (
     // gridBreakPoint is so we show mobile-styled-PF table
-    (0, jsx_runtime_1.jsx)(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: `pf-chatbot__message-table ${isPrimary ? 'pf-m-primary' : ''} ${className ? className : ''}` }, rest, { children: modifyChildren(children) })));
+    (0, jsx_runtime_1.jsx)(react_table_1.Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: (0, react_styles_1.css)('pf-chatbot__message-table', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown', className) }, rest, { children: modifyChildren(children) })));
 };
 exports.default = TableMessage;

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

@@ -1,7 +1,14 @@
 import { ExtraProps } from 'react-markdown';
 import { ContentProps } from '@patternfly/react-core';
 export interface TextMessageProps {
+    /** The text message content */
+    children?: React.ReactNode;
+    /** Flag indicating whether primary styling is applied. */
     isPrimary?: boolean;
+    /** The wrapper component to use for the PatternFly Content component. Defaults to a div. */
+    component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre' | 'hr' | 'ul' | 'ol' | 'dl' | 'li' | 'dt' | 'dd';
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
 }
-declare const TextMessage: ({ component, children, isPrimary, ...props }: Omit<ContentProps, "ref"> & ExtraProps & TextMessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextMessage: ({ component, children, isPrimary, shouldRetainStyles, ...props }: Omit<ContentProps, "ref"> & ExtraProps & TextMessageProps) => import("react/jsx-runtime").JSX.Element;
 export default TextMessage;

package/dist/cjs/Message/TextMessage/TextMessage.js

@@ -13,8 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
 const TextMessage = (_a) => {
-    var { component, children, isPrimary } = _a, props = __rest(_a, ["component", "children", "isPrimary"]);
-    return ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Content, Object.assign({ component: component }, props, { children: children })) }));
+    var { component, children, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["component", "children", "isPrimary", "shouldRetainStyles"]);
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, react_styles_1.css)('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown'), children: (0, jsx_runtime_1.jsx)(react_core_1.Content, Object.assign({ component: component }, props, { className: (0, react_styles_1.css)(props === null || props === void 0 ? void 0 : props.className), children: children })) }));
 };
 exports.default = TextMessage;

package/dist/cjs/ToolCall/ToolCall.d.ts

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'react';
 import { ActionListProps, ActionListGroupProps, ActionListItemProps, ButtonProps, CardProps, CardBodyProps, CardFooterProps, ExpandableSectionProps, SpinnerProps } from '@patternfly/react-core';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface ToolCallProps {
     /** Title text for the tool call. */
     titleText: string;
@@ -41,6 +42,14 @@ export interface ToolCallProps {
     cardFooterProps?: CardFooterProps;
     /** Additional props for the expandable section when expandableContent is passed. */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Whether to enable markdown rendering for titleText. When true, titleText will be parsed as markdown. */
+    isTitleMarkdown?: boolean;
+    /** Whether to enable markdown rendering for expandableContent. When true and expandableContent is a string, it will be parsed as markdown. */
+    isExpandableContentMarkdown?: 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 ToolCall: FunctionComponent<ToolCallProps>;
 export default ToolCall;

package/dist/cjs/ToolCall/ToolCall.js

@@ -1,19 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolCall = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, isDefaultExpanded = false, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, isDefaultExpanded = false, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps, isTitleMarkdown, isExpandableContentMarkdown, markdownContentProps, shouldRetainStyles = false }) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
-    const titleContent = ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: titleText })) }));
+    const renderTitle = () => {
+        if (isTitleMarkdown) {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: titleText }, markdownContentProps));
+        }
+        return titleText;
+    };
+    const titleContent = ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: renderTitle() })) }));
+    const renderExpandableContent = () => {
+        if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+            return ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: expandableContent }, markdownContentProps)));
+        }
+        return expandableContent;
+    };
     const defaultActions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, cancelActionItemProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "link" }, cancelButtonProps, { children: cancelButtonText })) })), (0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, runActionItemProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "secondary" }, runButtonProps, { children: runButtonText })) }))] }));
     const customActions = actions &&
         actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, { children: action }), index)));
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true }, expandableSectionProps, { children: expandableContent }))) : (titleContent) })), !isLoading && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({}, cardFooterProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true }, expandableSectionProps, { children: renderExpandableContent() }))) : (titleContent) })), !isLoading && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({}, cardFooterProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
 };
 exports.ToolCall = ToolCall;
 exports.default = exports.ToolCall;

package/dist/cjs/ToolCall/ToolCall.test.js

@@ -167,4 +167,35 @@ describe('ToolCall', () => {
         expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
         expect(react_1.screen.queryByText('Expandable Content')).not.toBeVisible();
     }));
+    it('should render titleText as markdown when isTitleMarkdown is true', () => {
+        const titleText = '**Bold title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText, isTitleMarkdown: true }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold title')).toBeTruthy();
+    });
+    it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+        const titleText = '**Bold title**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText }));
+        expect(react_1.screen.getByText('**Bold title**')).toBeTruthy();
+    });
+    it('should render expandableContent as markdown when isExpandableContentMarkdown is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const expandableContent = '**Bold expandable content**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { expandableContent: expandableContent, isExpandableContentMarkdown: true })));
+        yield user.click(react_1.screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold expandable content')).toBeTruthy();
+    }));
+    it('should not render expandableContent as markdown when isExpandableContentMarkdown is false', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const expandableContent = '**Bold expandable content**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { expandableContent: expandableContent })));
+        yield user.click(react_1.screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(react_1.screen.getByText('**Bold expandable content**')).toBeTruthy();
+    }));
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const titleText = '**Bold title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText, isTitleMarkdown: true, markdownContentProps: { isPrimary: true } }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/cjs/ToolResponse/ToolResponse.d.ts

@@ -1,5 +1,6 @@
 import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
 import { type FunctionComponent } from 'react';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface ToolResponseProps {
     /** Toggle content shown for expandable section */
     toggleContent: React.ReactNode;
@@ -27,6 +28,20 @@ export interface ToolResponseProps {
     toolResponseCardDividerProps?: DividerProps;
     /** Additional props passed to tool response card title */
     toolResponseCardTitleProps?: CardTitleProps;
+    /** 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;
+    /** Whether to enable markdown rendering for cardBody. When true and cardBody is a string, it will be parsed as markdown. */
+    isCardBodyMarkdown?: boolean;
+    /** Whether to enable markdown rendering for cardTitle. When true and cardTitle is a string, it will be parsed as markdown. */
+    isCardTitleMarkdown?: 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 ToolResponse: FunctionComponent<ToolResponseProps>;
 export default ToolResponse;

package/dist/cjs/ToolResponse/ToolResponse.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.ToolResponse = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,12 +10,55 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_core_1 = require("@patternfly/react-core");
 const react_1 = require("react");
-const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, isDefaultExpanded = true, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, isDefaultExpanded = true, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps, isToggleContentMarkdown, isSubheadingMarkdown, isBodyMarkdown, isCardBodyMarkdown, isCardTitleMarkdown, 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__tool-response" }, 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__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: subheading }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: body }), (cardTitle || cardBody) && ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), cardTitle && cardBody && (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] })))] }) })) })) })));
+    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;
+    };
+    const renderCardTitle = () => {
+        if (!cardTitle) {
+            return null;
+        }
+        if (isCardTitleMarkdown && typeof cardTitle === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardTitle }, markdownContentProps));
+        }
+        return cardTitle;
+    };
+    const renderCardBody = () => {
+        if (!cardBody) {
+            return null;
+        }
+        if (isCardBodyMarkdown && typeof cardBody === 'string') {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardBody }, markdownContentProps));
+        }
+        return cardBody;
+    };
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, 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__tool-response-expandable-section" }, expandableSectionProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__tool-response-section", children: [subheading && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-subheading", children: (0, jsx_runtime_1.jsx)("span", { children: renderSubheading() }) })), body && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__tool-response-body", children: renderBody() }), (cardTitle || cardBody) && ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: renderCardTitle() })), cardTitle && cardBody && (0, jsx_runtime_1.jsx)(react_core_1.Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({}, toolResponseCardBodyProps, { children: renderCardBody() }))] })))] }) })) })) })));
 };
 exports.ToolResponse = ToolResponse;
 exports.default = exports.ToolResponse;

package/dist/cjs/ToolResponse/ToolResponse.test.js

@@ -121,4 +121,64 @@ describe('ToolResponse', () => {
         expect(react_1.screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
         expect(react_1.screen.getByText(defaultProps.cardBody)).not.toBeVisible();
     }));
+    it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+        const toggleContent = '**Bold toggle**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { toggleContent: toggleContent, isToggleContentMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold toggle')).toBeTruthy();
+    });
+    it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+        const toggleContent = '**Bold toggle**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { toggleContent: toggleContent })));
+        expect(react_1.screen.getByText('**Bold toggle**')).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)(ToolResponse_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)(ToolResponse_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)(ToolResponse_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)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body })));
+        expect(react_1.screen.getByText('**Bold body**')).toBeTruthy();
+    });
+    it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
+        const cardTitle = '**Bold card title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardTitle: cardTitle, isCardTitleMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold card title')).toBeTruthy();
+    });
+    it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
+        const cardTitle = '**Bold card title**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardTitle: cardTitle })));
+        expect(react_1.screen.getByText('**Bold card title**')).toBeTruthy();
+    });
+    it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
+        const cardBody = '**Bold card body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardBody: cardBody, isCardBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold card body')).toBeTruthy();
+    });
+    it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
+        const cardBody = '**Bold card body**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { cardBody: cardBody })));
+        expect(react_1.screen.getByText('**Bold card body**')).toBeTruthy();
+    });
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const body = '**Bold body**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolResponse_1.default, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/cjs/index.d.ts

@@ -40,6 +40,8 @@ export { default as ImagePreview } from './ImagePreview';
 export * from './ImagePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
+export { default as MarkdownContent } from './MarkdownContent';
+export * from './MarkdownContent';
 export { default as Message } from './Message';
 export * from './Message';
 export { default as MessageBar } from './MessageBar';