@patternfly/chatbot 6.4.0-prerelease.3 → 6.4.0-prerelease.4

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
 import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
@@ -140,6 +141,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     editFormProps?: FormProps;
     /** Sets message to compact styling. */
     isCompact?: boolean;
+    /** Disables markdown parsing for message, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -51,7 +51,7 @@ const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
 const rehypeMoveImagesOutOfParagraphs_1 = require("./Plugins/rehypeMoveImagesOutOfParagraphs");
 const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps"]);
     const [messageText, setMessageText] = (0, react_1.useState)(content);
     (0, react_1.useEffect)(() => {
         setMessageText(content);
@@ -73,6 +73,41 @@ const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const handleMarkdown = () => {
+        if (isMarkdownDisabled) {
+            return ((0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props, { children: messageText })));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, Object.assign({ components: {
+                p: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
+                code: (_a) => {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps, { children: children })));
+                },
+                h1: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
+                h2: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
+                h3: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
+                h4: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
+                h5: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
+                h6: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
+                blockquote: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
+                ul: (props) => (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({}, props)),
+                ol: (props) => (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({}, props)),
+                li: (props) => (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, props)),
+                table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps)),
+                tbody: (props) => (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, props)),
+                thead: (props) => (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, props)),
+                tr: (props) => (0, jsx_runtime_1.jsx)(TrMessage_1.default, Object.assign({}, props)),
+                td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { width } = props, rest = __rest(props, ["width"]);
+                    return (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
+                },
+                th: (props) => (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, props)),
+                img: (props) => (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, props)),
+                a: (props) => ((0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+            }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins }, reactMarkdownProps, { children: messageText })));
+    };
     const renderMessage = () => {
         if (isLoading) {
             return (0, jsx_runtime_1.jsx)(MessageLoading_1.default, { loadingWord: loadingWord });
@@ -83,36 +118,7 @@ const MessageBase = (_a) => {
                             setMessageText(value);
                         }, onEditCancel: onEditCancel, inputRef: inputRef }, editFormProps))] }));
         }
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error))) : ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
-                        p: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.p }, props)),
-                        code: (_a) => {
-                            var { children } = _a, props = __rest(_a, ["children"]);
-                            return ((0, jsx_runtime_1.jsx)(CodeBlockMessage_1.default, Object.assign({}, props, codeBlockProps, { children: children })));
-                        },
-                        h1: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h1 }, props)),
-                        h2: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h2 }, props)),
-                        h3: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h3 }, props)),
-                        h4: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h4 }, props)),
-                        h5: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h5 }, props)),
-                        h6: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.h6 }, props)),
-                        blockquote: (props) => (0, jsx_runtime_1.jsx)(TextMessage_1.default, Object.assign({ component: react_core_1.ContentVariants.blockquote }, props)),
-                        ul: (props) => (0, jsx_runtime_1.jsx)(UnorderedListMessage_1.default, Object.assign({}, props)),
-                        ol: (props) => (0, jsx_runtime_1.jsx)(OrderedListMessage_1.default, Object.assign({}, props)),
-                        li: (props) => (0, jsx_runtime_1.jsx)(ListItemMessage_1.default, Object.assign({}, props)),
-                        table: (props) => (0, jsx_runtime_1.jsx)(TableMessage_1.default, Object.assign({}, props, tableProps)),
-                        tbody: (props) => (0, jsx_runtime_1.jsx)(TbodyMessage_1.default, Object.assign({}, props)),
-                        thead: (props) => (0, jsx_runtime_1.jsx)(TheadMessage_1.default, Object.assign({}, props)),
-                        tr: (props) => (0, jsx_runtime_1.jsx)(TrMessage_1.default, Object.assign({}, props)),
-                        td: (props) => {
-                            // Conflicts with Td type
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            const { width } = props, rest = __rest(props, ["width"]);
-                            return (0, jsx_runtime_1.jsx)(TdMessage_1.default, Object.assign({}, rest));
-                        },
-                        th: (props) => (0, jsx_runtime_1.jsx)(ThMessage_1.default, Object.assign({}, props)),
-                        img: (props) => (0, jsx_runtime_1.jsx)(ImageMessage_1.default, Object.assign({}, props)),
-                        a: (props) => ((0, jsx_runtime_1.jsx)(LinkMessage_1.default, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
-                    }, remarkPlugins: [remark_gfm_1.default], rehypePlugins: rehypePlugins, children: messageText }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [beforeMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: beforeMainContent }), error ? (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, Object.assign({}, error)) : handleMarkdown()] }));
     };
     return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-contents", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-meta", children: [name && ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__message-name", children: (0, jsx_runtime_1.jsx)(react_core_1.Truncate, { content: name }) })), role === 'bot' && ((0, jsx_runtime_1.jsx)(react_core_1.Label, { variant: "outline", isCompact: true, children: botWord })), (0, jsx_runtime_1.jsx)(react_core_1.Timestamp, { date: date, children: timestamp })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-response", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: afterMainContent }), !isLoading && sources && (0, jsx_runtime_1.jsx)(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && ((0, jsx_runtime_1.jsx)(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }), userFeedbackForm && (0, jsx_runtime_1.jsx)(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && ((0, jsx_runtime_1.jsx)(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && ((0, jsx_runtime_1.jsx)(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;

package/dist/cjs/Message/Message.test.js

@@ -739,4 +739,15 @@ describe('Message', () => {
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });
+    it('should be able to disable markdown parsing', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // this is looking for markdown syntax that is ordinarily stripped
+        expect(react_2.screen.getByText(/~~~yaml/i)).toBeTruthy();
+    });
+    it('should be able to pass props to react-markdown, such as disabling tags', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(react_2.screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    });
 });

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
 import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
@@ -140,6 +141,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     editFormProps?: FormProps;
     /** Sets message to compact styling. */
     isCompact?: boolean;
+    /** Disables markdown parsing for message, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/Message/Message.js

@@ -45,7 +45,7 @@ import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -67,6 +67,41 @@ 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 handleMarkdown = () => {
+        if (isMarkdownDisabled) {
+            return (_jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props, { children: messageText })));
+        }
+        return (_jsx(Markdown, Object.assign({ components: {
+                p: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                code: (_a) => {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    return (_jsx(CodeBlockMessage, Object.assign({}, props, codeBlockProps, { children: children })));
+                },
+                h1: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                h2: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                h3: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                h4: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                h5: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                h6: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                blockquote: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                ul: (props) => _jsx(UnorderedListMessage, Object.assign({}, props)),
+                ol: (props) => _jsx(OrderedListMessage, Object.assign({}, props)),
+                li: (props) => _jsx(ListItemMessage, Object.assign({}, props)),
+                table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
+                tbody: (props) => _jsx(TbodyMessage, Object.assign({}, props)),
+                thead: (props) => _jsx(TheadMessage, Object.assign({}, props)),
+                tr: (props) => _jsx(TrMessage, Object.assign({}, props)),
+                td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { width } = props, rest = __rest(props, ["width"]);
+                    return _jsx(TdMessage, Object.assign({}, rest));
+                },
+                th: (props) => _jsx(ThMessage, Object.assign({}, props)),
+                img: (props) => _jsx(ImageMessage, Object.assign({}, props)),
+                a: (props) => (_jsx(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, reactMarkdownProps, { children: messageText })));
+    };
     const renderMessage = () => {
         if (isLoading) {
             return _jsx(MessageLoading, { loadingWord: loadingWord });
@@ -77,36 +112,7 @@ export const MessageBase = (_a) => {
                             setMessageText(value);
                         }, onEditCancel: onEditCancel, inputRef: inputRef }, editFormProps))] }));
         }
-        return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? (_jsx(ErrorMessage, Object.assign({}, error))) : (_jsx(Markdown, { components: {
-                        p: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
-                        code: (_a) => {
-                            var { children } = _a, props = __rest(_a, ["children"]);
-                            return (_jsx(CodeBlockMessage, Object.assign({}, props, codeBlockProps, { children: children })));
-                        },
-                        h1: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
-                        h2: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
-                        h3: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
-                        h4: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
-                        h5: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
-                        h6: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
-                        blockquote: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
-                        ul: (props) => _jsx(UnorderedListMessage, Object.assign({}, props)),
-                        ol: (props) => _jsx(OrderedListMessage, Object.assign({}, props)),
-                        li: (props) => _jsx(ListItemMessage, Object.assign({}, props)),
-                        table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
-                        tbody: (props) => _jsx(TbodyMessage, Object.assign({}, props)),
-                        thead: (props) => _jsx(TheadMessage, Object.assign({}, props)),
-                        tr: (props) => _jsx(TrMessage, Object.assign({}, props)),
-                        td: (props) => {
-                            // Conflicts with Td type
-                            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                            const { width } = props, rest = __rest(props, ["width"]);
-                            return _jsx(TdMessage, Object.assign({}, rest));
-                        },
-                        th: (props) => _jsx(ThMessage, Object.assign({}, props)),
-                        img: (props) => _jsx(ImageMessage, Object.assign({}, props)),
-                        a: (props) => (_jsx(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
-                    }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins, children: messageText }))] }));
+        return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
     return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)), _jsxs("div", { className: "pf-chatbot__message-contents", children: [_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] }), _jsxs("div", { className: "pf-chatbot__message-response", children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && _jsx(ResponseActions, { actions: actions }), userFeedbackForm && _jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                     var _a;

package/dist/esm/Message/Message.test.js

@@ -734,4 +734,15 @@ describe('Message', () => {
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });
+    it('should be able to disable markdown parsing', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // this is looking for markdown syntax that is ordinarily stripped
+        expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+    });
+    it('should be able to pass props to react-markdown, such as disabling tags', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.3",
+  "version": "6.4.0-prerelease.4",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/Message/Message.test.tsx

@@ -962,4 +962,23 @@ describe('Message', () => {
     const form = container.querySelector('form');
     expect(form).toHaveClass('test');
   });
+  it('should be able to disable markdown parsing', () => {
+    render(<Message avatar="./img" role="user" name="User" content={CODE_MESSAGE} isMarkdownDisabled />);
+    // this is looking for markdown syntax that is ordinarily stripped
+    expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+  });
+  it('should be able to pass props to react-markdown, such as disabling tags', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={CODE_MESSAGE}
+        reactMarkdownProps={{ disallowedElements: ['code'] }}
+      />
+    );
+    expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+    // code block isn't rendering
+    expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+  });
 });

package/src/Message/Message.tsx

@@ -3,7 +3,7 @@
 // ============================================================================
 import { forwardRef, ReactNode, useEffect, useState } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
-import Markdown from 'react-markdown';
+import Markdown, { Options } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
   AlertProps,
@@ -185,6 +185,10 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
   editFormProps?: FormProps;
   /** Sets message to compact styling. */
   isCompact?: boolean;
+  /** Disables markdown parsing for message, allowing only text input */
+  isMarkdownDisabled?: boolean;
+  /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+  reactMarkdownProps?: Options;
 }
 
 export const MessageBase: FunctionComponent<MessageProps> = ({
@@ -224,6 +228,8 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   inputRef,
   editFormProps,
   isCompact,
+  isMarkdownDisabled,
+  reactMarkdownProps,
   ...props
 }: MessageProps) => {
   const [messageText, setMessageText] = useState(content);
@@ -250,6 +256,60 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
   const date = new Date();
   const dateString = timestamp ?? `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
 
+  const handleMarkdown = () => {
+    if (isMarkdownDisabled) {
+      return (
+        <TextMessage component={ContentVariants.p} {...props}>
+          {messageText}
+        </TextMessage>
+      );
+    }
+    return (
+      <Markdown
+        components={{
+          p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+          code: ({ children, ...props }) => (
+            <CodeBlockMessage {...props} {...codeBlockProps}>
+              {children}
+            </CodeBlockMessage>
+          ),
+          h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+          h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+          h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+          h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+          h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+          h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+          blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+          ul: (props) => <UnorderedListMessage {...props} />,
+          ol: (props) => <OrderedListMessage {...props} />,
+          li: (props) => <ListItemMessage {...props} />,
+          table: (props) => <TableMessage {...props} {...tableProps} />,
+          tbody: (props) => <TbodyMessage {...props} />,
+          thead: (props) => <TheadMessage {...props} />,
+          tr: (props) => <TrMessage {...props} />,
+          td: (props) => {
+            // Conflicts with Td type
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { width, ...rest } = props;
+            return <TdMessage {...rest} />;
+          },
+          th: (props) => <ThMessage {...props} />,
+          img: (props) => <ImageMessage {...props} />,
+          a: (props) => (
+            <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
+              {props.children}
+            </LinkMessage>
+          )
+        }}
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={rehypePlugins}
+        {...reactMarkdownProps}
+      >
+        {messageText}
+      </Markdown>
+    );
+  };
+
   const renderMessage = () => {
     if (isLoading) {
       return <MessageLoading loadingWord={loadingWord} />;
@@ -277,51 +337,7 @@ export const MessageBase: FunctionComponent<MessageProps> = ({
     return (
       <>
         {beforeMainContent && <>{beforeMainContent}</>}
-        {error ? (
-          <ErrorMessage {...error} />
-        ) : (
-          <Markdown
-            components={{
-              p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-              code: ({ children, ...props }) => (
-                <CodeBlockMessage {...props} {...codeBlockProps}>
-                  {children}
-                </CodeBlockMessage>
-              ),
-              h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-              h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-              h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-              h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-              h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-              h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-              blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-              ul: (props) => <UnorderedListMessage {...props} />,
-              ol: (props) => <OrderedListMessage {...props} />,
-              li: (props) => <ListItemMessage {...props} />,
-              table: (props) => <TableMessage {...props} {...tableProps} />,
-              tbody: (props) => <TbodyMessage {...props} />,
-              thead: (props) => <TheadMessage {...props} />,
-              tr: (props) => <TrMessage {...props} />,
-              td: (props) => {
-                // Conflicts with Td type
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const { width, ...rest } = props;
-                return <TdMessage {...rest} />;
-              },
-              th: (props) => <ThMessage {...props} />,
-              img: (props) => <ImageMessage {...props} />,
-              a: (props) => (
-                <LinkMessage href={props.href} rel={props.rel} target={props.target} {...linkProps}>
-                  {props.children}
-                </LinkMessage>
-              )
-            }}
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={rehypePlugins}
-          >
-            {messageText}
-          </Markdown>
-        )}
+        {error ? <ErrorMessage {...error} /> : handleMarkdown()}
       </>
     );
   };