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

package/dist/esm/MarkdownContent/MarkdownContent.test.js

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

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

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

package/dist/esm/MarkdownContent/index.js

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

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

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

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -18,11 +18,12 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import { css } from '@patternfly/react-styles';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
     var _b;
-    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions, isPrimary } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions", "isPrimary"]);
+    var { children, className, 'aria-label': ariaLabel, isExpandable = false, expandableSectionProps, expandableSectionToggleProps, expandedText = DEFAULT_EXPANDED_TEXT, collapsedText = DEFAULT_COLLAPSED_TEXT, customActions, isPrimary, shouldRetainStyles } = _a, props = __rest(_a, ["children", "className", 'aria-label', "isExpandable", "expandableSectionProps", "expandableSectionToggleProps", "expandedText", "collapsedText", "customActions", "isPrimary", "shouldRetainStyles"]);
     const [copied, setCopied] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
@@ -63,6 +64,6 @@ const CodeBlockMessage = (_a) => {
     }
     // Setup code block header
     const actions = (_jsxs(_Fragment, { children: [_jsxs(CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
-    return (_jsx("div", { className: "pf-chatbot__message-code-block", ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
+    return (_jsx("div", { className: css('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown'), ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 export default CodeBlockMessage;

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

@@ -1,4 +1,8 @@
 import { ButtonProps } from '@patternfly/react-core';
 import { ExtraProps } from 'react-markdown';
-declare const LinkMessage: ({ children, target, href, id, ...props }: ButtonProps & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export interface LinkMessageProps {
+    /** Flag indicating that the content should retain message styles when using Markdown. */
+    shouldRetainStyles?: boolean;
+}
+declare const LinkMessage: ({ children, target, href, id, shouldRetainStyles, ...props }: LinkMessageProps & ButtonProps & ExtraProps) => import("react/jsx-runtime").JSX.Element;
 export default LinkMessage;

package/dist/esm/Message/LinkMessage/LinkMessage.js

@@ -15,15 +15,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // ============================================================================
 import { Button } from '@patternfly/react-core';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { css } from '@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 (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(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: 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
-    _jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { children: children })));
+    _jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { className: css(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
 };
 export default LinkMessage;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List, ListComponent, OrderType } from '@patternfly/react-core';
-const OrderedListMessage = ({ children, start }) => (_jsx("div", { className: "pf-chatbot__message-ordered-list", children: _jsx(List, { component: ListComponent.ol, type: OrderType.number, start: start, children: children }) }));
+import { css } from '@patternfly/react-styles';
+const OrderedListMessage = ({ children, start, shouldRetainStyles }) => (_jsx("div", { className: css('pf-chatbot__message-ordered-list', shouldRetainStyles && 'pf-m-markdown'), children: _jsx(List, { component: ListComponent.ol, type: OrderType.number, start: start, children: children }) }));
 export default OrderedListMessage;

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

@@ -1,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/esm/Message/ListMessage/UnorderedListMessage.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from '@patternfly/react-core';
-const UnorderedListMessage = ({ children }) => (_jsx("div", { className: "pf-chatbot__message-unordered-list", children: _jsx(List, { children: children }) }));
+import { css } from '@patternfly/react-styles';
+const UnorderedListMessage = ({ children, shouldRetainStyles }) => (_jsx("div", { className: css('pf-chatbot__message-unordered-list', shouldRetainStyles && 'pf-m-markdown'), children: _jsx(List, { children: children }) }));
 export default UnorderedListMessage;

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;
@@ -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;