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

package/dist/esm/Message/Message.js

@@ -14,43 +14,23 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Chatbot Main - Message
 // ============================================================================
 import { forwardRef, useEffect, useState } from 'react';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { Avatar, ContentVariants, Label, Timestamp, Truncate } from '@patternfly/react-core';
+import { Avatar, Label, Timestamp, Truncate } from '@patternfly/react-core';
 import MessageLoading from './MessageLoading';
-import CodeBlockMessage from './CodeBlockMessage/CodeBlockMessage';
-import TextMessage from './TextMessage/TextMessage';
 import FileDetailsLabel from '../FileDetailsLabel/FileDetailsLabel';
 import ResponseActions from '../ResponseActions/ResponseActions';
 import SourcesCard from '../SourcesCard';
-import ListItemMessage from './ListMessage/ListItemMessage';
-import UnorderedListMessage from './ListMessage/UnorderedListMessage';
-import OrderedListMessage from './ListMessage/OrderedListMessage';
 import QuickStartTile from './QuickStarts/QuickStartTile';
 import QuickResponse from './QuickResponse/QuickResponse';
 import UserFeedback from './UserFeedback/UserFeedback';
 import UserFeedbackComplete from './UserFeedback/UserFeedbackComplete';
-import TableMessage from './TableMessage/TableMessage';
-import TrMessage from './TableMessage/TrMessage';
-import TdMessage from './TableMessage/TdMessage';
-import TbodyMessage from './TableMessage/TbodyMessage';
-import TheadMessage from './TableMessage/TheadMessage';
-import ThMessage from './TableMessage/ThMessage';
-import ImageMessage from './ImageMessage/ImageMessage';
-import rehypeUnwrapImages from 'rehype-unwrap-images';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSanitize from 'rehype-sanitize';
-import rehypeHighlight from 'rehype-highlight';
 // see the full list of styles here: https://highlightjs.org/examples
 import 'highlight.js/styles/vs2015.css';
-import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
-import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 import ToolResponse from '../ToolResponse';
 import DeepThinking from '../DeepThinking';
-import SuperscriptMessage from './SuperscriptMessage/SuperscriptMessage';
 import ToolCall from '../ToolCall';
+import MarkdownContent from '../MarkdownContent';
 export 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] = useState(content);
@@ -58,13 +38,6 @@ export const MessageBase = (_a) => {
         setMessageText(content);
     }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
-    let rehypePlugins = [rehypeUnwrapImages, rehypeMoveImagesOutOfParagraphs, rehypeHighlight];
-    if (openLinkInNewTab) {
-        rehypePlugins = rehypePlugins.concat([[rehypeExternalLinks, { target: '_blank' }, rehypeSanitize]]);
-    }
-    if (additionalRehypePlugins) {
-        rehypePlugins.push(...additionalRehypePlugins);
-    }
     let avatarClassName;
     if (avatarProps && 'className' in avatarProps) {
         const { className } = avatarProps, rest = __rest(avatarProps, ["className"]);
@@ -74,133 +47,7 @@ export 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 (_jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props, { children: messageText })));
-        }
-        return (_jsx(Markdown, Object.assign({ components: {
-                section: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _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 _jsx(TextMessage, Object.assign({ component: 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 (_jsx(CodeBlockMessage, 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 _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, rest));
-                },
-                h2: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, rest));
-                },
-                h3: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, rest));
-                },
-                h4: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, rest));
-                },
-                h5: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, rest));
-                },
-                h6: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, rest));
-                },
-                blockquote: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, rest));
-                },
-                ul: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(UnorderedListMessage, Object.assign({}, rest));
-                },
-                ol: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(OrderedListMessage, Object.assign({}, rest));
-                },
-                li: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(ListItemMessage, Object.assign({}, rest));
-                },
-                // table requires node attribute for calculating headers for mobile breakpoint
-                table: (props) => _jsx(TableMessage, 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 _jsx(TbodyMessage, Object.assign({}, rest));
-                },
-                thead: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TheadMessage, Object.assign({}, rest));
-                },
-                tr: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(TrMessage, 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 _jsx(TdMessage, Object.assign({}, rest));
-                },
-                th: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(ThMessage, Object.assign({}, rest));
-                },
-                img: (props) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    const { node } = props, rest = __rest(props, ["node"]);
-                    return _jsx(ImageMessage, 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
-                    _jsx(LinkMessage, 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 _jsx(SuperscriptMessage, Object.assign({}, rest));
-                }
-            }, remarkPlugins: [[remarkGfm, 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 = () => (_jsx(MarkdownContent, { 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 _jsx(MessageLoading, { loadingWord: loadingWord, isPrimary: isPrimary });

package/dist/esm/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/esm/Message/TableMessage/TableMessage.js

@@ -15,9 +15,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // ============================================================================
 import { Children, cloneElement } from 'react';
 import { Table } from '@patternfly/react-table';
+import { css } from '@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
@@ -58,6 +59,6 @@ const TableMessage = (_a) => {
     }
     return (
     // gridBreakPoint is so we show mobile-styled-PF table
-    _jsx(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) })));
+    _jsx(Table, Object.assign({ "aria-label": props['aria-label'], gridBreakPoint: "grid", className: css('pf-chatbot__message-table', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown', className) }, rest, { children: modifyChildren(children) })));
 };
 export default TableMessage;

package/dist/esm/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/esm/Message/TextMessage/TextMessage.js

@@ -11,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Content } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 const TextMessage = (_a) => {
-    var { component, children, isPrimary } = _a, props = __rest(_a, ["component", "children", "isPrimary"]);
-    return (_jsx("span", { className: `pf-chatbot__message-text ${isPrimary ? 'pf-m-primary' : ''}`, children: _jsx(Content, Object.assign({ component: component }, props, { children: children })) }));
+    var { component, children, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["component", "children", "isPrimary", "shouldRetainStyles"]);
+    return (_jsx("span", { className: css('pf-chatbot__message-text', isPrimary && 'pf-m-primary', shouldRetainStyles && 'pf-m-markdown'), children: _jsx(Content, Object.assign({ component: component }, props, { className: css(props === null || props === void 0 ? void 0 : props.className), children: children })) }));
 };
 export default TextMessage;

package/dist/esm/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;
@@ -11,6 +12,8 @@ export interface ToolCallProps {
     spinnerProps?: SpinnerProps;
     /** Content to render within an expandable section. */
     expandableContent?: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Text content for the "run" action button. */
     runButtonText?: string;
     /** Additional props for the "run" action button. */
@@ -39,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/esm/ToolCall/ToolCall.js

@@ -1,10 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { ActionList, ActionListGroup, ActionListItem, Button, Card, CardBody, CardFooter, ExpandableSection, Spinner } from '@patternfly/react-core';
-export const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
-    const titleContent = (_jsx("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', _jsx("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : (_jsx("span", { className: "pf-chatbot__tool-call-title-text", children: titleText })) }));
+import MarkdownContent from '../MarkdownContent';
+export 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] = useState(isDefaultExpanded);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    const renderTitle = () => {
+        if (isTitleMarkdown) {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: titleText }, markdownContentProps));
+        }
+        return titleText;
+    };
+    const titleContent = (_jsx("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', _jsx("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : (_jsx("span", { className: "pf-chatbot__tool-call-title-text", children: renderTitle() })) }));
+    const renderExpandableContent = () => {
+        if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+            return (_jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: expandableContent }, markdownContentProps)));
+        }
+        return expandableContent;
+    };
     const defaultActions = (_jsxs(_Fragment, { children: [_jsx(ActionListItem, Object.assign({}, actionListItemProps, cancelActionItemProps, { children: _jsx(Button, Object.assign({ variant: "link" }, cancelButtonProps, { children: cancelButtonText })) })), _jsx(ActionListItem, Object.assign({}, actionListItemProps, runActionItemProps, { children: _jsx(Button, Object.assign({ variant: "secondary" }, runButtonProps, { children: runButtonText })) }))] }));
     const customActions = actions &&
         actions.map((action, index) => (_jsx(ActionListItem, Object.assign({}, actionListItemProps, { children: action }), index)));
-    return (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [_jsx(CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? (_jsx(ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, isIndented: true }, expandableSectionProps, { children: expandableContent }))) : (titleContent) })), !isLoading && (_jsx(CardFooter, Object.assign({}, cardFooterProps, { children: _jsx(ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: _jsx(ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
+    return (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [_jsx(CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? (_jsx(ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true }, expandableSectionProps, { children: renderExpandableContent() }))) : (titleContent) })), !isLoading && (_jsx(CardFooter, Object.assign({}, cardFooterProps, { children: _jsx(ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: _jsx(ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
 };
 export default ToolCall;

package/dist/esm/ToolCall/ToolCall.test.js

@@ -136,4 +136,61 @@ describe('ToolCall', () => {
         render(_jsx(ToolCall, Object.assign({}, defaultProps, { cardFooterProps: { id: 'card-footer-test-id' } })));
         expect(screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
     });
+    it('Renders collapsed by default when expandableContent is provided', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: "Expandable Content" })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+    });
+    it('Renders expanded when isDefaultExpanded is true', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: true, expandableContent: "Expandable Content" })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { isExpanded: true } })));
+        expect(screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const customOnToggle = jest.fn();
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = screen.getByRole('button', { name: defaultProps.titleText });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.queryByText('Expandable Content')).not.toBeVisible();
+    }));
+    it('should render titleText as markdown when isTitleMarkdown is true', () => {
+        const titleText = '**Bold title**';
+        const { container } = render(_jsx(ToolCall, { titleText: titleText, isTitleMarkdown: true }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold title')).toBeTruthy();
+    });
+    it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+        const titleText = '**Bold title**';
+        render(_jsx(ToolCall, { titleText: titleText }));
+        expect(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 = userEvent.setup();
+        const expandableContent = '**Bold expandable content**';
+        const { container } = render(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: expandableContent, isExpandableContentMarkdown: true })));
+        yield user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(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 = userEvent.setup();
+        const expandableContent = '**Bold expandable content**';
+        render(_jsx(ToolCall, Object.assign({}, defaultProps, { expandableContent: expandableContent })));
+        yield user.click(screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(screen.getByText('**Bold expandable content**')).toBeTruthy();
+    }));
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const titleText = '**Bold title**';
+        const { container } = render(_jsx(ToolCall, { titleText: titleText, isTitleMarkdown: true, markdownContentProps: { isPrimary: true } }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/esm/ToolResponse/ToolResponse.d.ts

@@ -1,8 +1,11 @@
 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;
+    /** 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 */
@@ -25,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/esm/ToolResponse/ToolResponse.js

@@ -4,11 +4,54 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 import { Card, CardBody, CardTitle, Divider, ExpandableSection } from '@patternfly/react-core';
 import { useState } from 'react';
-export const ToolResponse = ({ body, cardProps, expandableSectionProps, subheading, cardBody, cardTitle, cardBodyProps, toggleContent, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
-    const [isExpanded, setIsExpanded] = useState(true);
+import MarkdownContent from '../MarkdownContent';
+export 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] = useState(isDefaultExpanded);
     const onToggle = (_event, isExpanded) => {
         setIsExpanded(isExpanded);
     };
-    return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: toggleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__tool-response-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__tool-response-subheading", children: _jsx("span", { children: subheading }) })), body && _jsx("div", { className: "pf-chatbot__tool-response-body", children: body }), (cardTitle || cardBody) && (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && _jsx(CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: cardTitle })), cardTitle && cardBody && _jsx(Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && _jsx(CardBody, Object.assign({}, toolResponseCardBodyProps, { children: cardBody }))] })))] }) })) })) })));
+    const renderToggleContent = () => {
+        if (isToggleContentMarkdown && typeof toggleContent === 'string') {
+            return (_jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: toggleContent }, markdownContentProps)));
+        }
+        return toggleContent;
+    };
+    const renderSubheading = () => {
+        if (!subheading) {
+            return null;
+        }
+        if (isSubheadingMarkdown) {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: subheading }, markdownContentProps));
+        }
+        return subheading;
+    };
+    const renderBody = () => {
+        if (!body) {
+            return null;
+        }
+        if (isBodyMarkdown && typeof body === 'string') {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: body }, markdownContentProps));
+        }
+        return body;
+    };
+    const renderCardTitle = () => {
+        if (!cardTitle) {
+            return null;
+        }
+        if (isCardTitleMarkdown && typeof cardTitle === 'string') {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardTitle }, markdownContentProps));
+        }
+        return cardTitle;
+    };
+    const renderCardBody = () => {
+        if (!cardBody) {
+            return null;
+        }
+        if (isCardBodyMarkdown && typeof cardBody === 'string') {
+            return _jsx(MarkdownContent, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: cardBody }, markdownContentProps));
+        }
+        return cardBody;
+    };
+    return (_jsx(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response" }, cardProps, { children: _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsx(ExpandableSection, Object.assign({ toggleContent: renderToggleContent(), onToggle: onToggle, isExpanded: isExpanded, isIndented: true, className: "pf-chatbot__tool-response-expandable-section" }, expandableSectionProps, { children: _jsxs("div", { className: "pf-chatbot__tool-response-section", children: [subheading && (_jsx("div", { className: "pf-chatbot__tool-response-subheading", children: _jsx("span", { children: renderSubheading() }) })), body && _jsx("div", { className: "pf-chatbot__tool-response-body", children: renderBody() }), (cardTitle || cardBody) && (_jsxs(Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-response-card" }, toolResponseCardProps, { children: [cardTitle && _jsx(CardTitle, Object.assign({}, toolResponseCardTitleProps, { children: renderCardTitle() })), cardTitle && cardBody && _jsx(Divider, Object.assign({}, toolResponseCardDividerProps)), cardBody && _jsx(CardBody, Object.assign({}, toolResponseCardBodyProps, { children: renderCardBody() }))] })))] }) })) })) })));
 };
 export default ToolResponse;

package/dist/esm/ToolResponse/ToolResponse.test.js

@@ -1,5 +1,15 @@
+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());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import ToolResponse from './ToolResponse';
 describe('ToolResponse', () => {
@@ -76,4 +86,94 @@ describe('ToolResponse', () => {
         const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: undefined })));
         expect(container.querySelector('.pf-v6-c-divider')).toBeFalsy();
     });
+    it('Renders expanded by default', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('Renders collapsed when isDefaultExpanded is false', () => {
+        render(_jsx(ToolResponse, Object.assign({ isDefaultExpanded: false }, defaultProps)));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { isExpanded: true } })));
+        expect(screen.getByRole('button', { name: defaultProps.toggleContent })).toHaveAttribute('aria-expanded', 'true');
+        expect(screen.getByText(defaultProps.cardTitle)).toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        const customOnToggle = jest.fn();
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = screen.getByRole('button', { name: defaultProps.toggleContent });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(screen.getByText(defaultProps.cardTitle)).not.toBeVisible();
+        expect(screen.getByText(defaultProps.cardBody)).not.toBeVisible();
+    }));
+    it('should render toggleContent as markdown when isToggleContentMarkdown is true', () => {
+        const toggleContent = '**Bold toggle**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toggleContent: toggleContent, isToggleContentMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold toggle')).toBeTruthy();
+    });
+    it('should not render toggleContent as markdown when isToggleContentMarkdown is false', () => {
+        const toggleContent = '**Bold toggle**';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { toggleContent: toggleContent })));
+        expect(screen.getByText('**Bold toggle**')).toBeTruthy();
+    });
+    it('should render subheading as markdown when isSubheadingMarkdown is true', () => {
+        const subheading = '**Bold subheading**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading, isSubheadingMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold subheading')).toBeTruthy();
+    });
+    it('should not render subheading as markdown when isSubheadingMarkdown is false', () => {
+        const subheading = '**Bold subheading**';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { subheading: subheading })));
+        expect(screen.getByText('**Bold subheading**')).toBeTruthy();
+    });
+    it('should render body as markdown when isBodyMarkdown is true', () => {
+        const body = '**Bold body**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold body')).toBeTruthy();
+    });
+    it('should not render body as markdown when isBodyMarkdown is false', () => {
+        const body = '**Bold body**';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body })));
+        expect(screen.getByText('**Bold body**')).toBeTruthy();
+    });
+    it('should render cardTitle as markdown when isCardTitleMarkdown is true', () => {
+        const cardTitle = '**Bold card title**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardTitle: cardTitle, isCardTitleMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold card title')).toBeTruthy();
+    });
+    it('should not render cardTitle as markdown when isCardTitleMarkdown is false', () => {
+        const cardTitle = '**Bold card title**';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardTitle: cardTitle })));
+        expect(screen.getByText('**Bold card title**')).toBeTruthy();
+    });
+    it('should render cardBody as markdown when isCardBodyMarkdown is true', () => {
+        const cardBody = '**Bold card body**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: cardBody, isCardBodyMarkdown: true })));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(screen.getByText('Bold card body')).toBeTruthy();
+    });
+    it('should not render cardBody as markdown when isCardBodyMarkdown is false', () => {
+        const cardBody = '**Bold card body**';
+        render(_jsx(ToolResponse, Object.assign({}, defaultProps, { cardBody: cardBody })));
+        expect(screen.getByText('**Bold card body**')).toBeTruthy();
+    });
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const body = '**Bold body**';
+        const { container } = render(_jsx(ToolResponse, Object.assign({}, defaultProps, { body: body, isBodyMarkdown: true, markdownContentProps: { isPrimary: true } })));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/esm/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';

package/dist/esm/index.js

@@ -41,6 +41,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';