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

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/Message/UserFeedback/UserFeedback.d.ts

@@ -48,6 +48,8 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
     textAreaProps?: TextAreaProps;
     /** Additional props passed to action group */
     actionGroupProps?: ActionGroupProps;
+    /** Optional privacy statement text displayed under text area */
+    privacyStatement?: string;
 }
 declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
 export default UserFeedback;

package/dist/esm/Message/UserFeedback/UserFeedback.js

@@ -9,14 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 // Import PatternFly components
 import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
 const UserFeedback = (_a) => {
-    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps"]);
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact, children, cardHeaderProps, cardBodyProps, headingLevelProps, formProps, textAreaProps, actionGroupProps, submitButtonProps, privacyStatement } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact", "children", "cardHeaderProps", "cardBodyProps", "headingLevelProps", "formProps", "textAreaProps", "actionGroupProps", "submitButtonProps", "privacyStatement"]);
     const [selectedResponse, setSelectedResponse] = useState();
     const [value, setValue] = useState('');
     const divRef = useRef(null);
@@ -30,9 +30,9 @@ const UserFeedback = (_a) => {
     /* card does not have ref forwarding; hence wrapper div */
     _jsx("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title, children: _jsxs(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props, { children: [_jsx(CardHeader, Object.assign({ actions: {
                         actions: _jsx(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
-                    } }, cardHeaderProps, { children: _jsx(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsxs(Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, Object.assign({ value: value, onChange: (_event, value) => {
-                                    setValue(value);
-                                    onTextAreaChange && onTextAreaChange(_event, value);
-                                }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps))), children, _jsx(ActionGroup, Object.assign({}, actionGroupProps, { children: _jsx(Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value) }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
+                    } }, cardHeaderProps, { children: _jsx(HeadingLevel, Object.assign({ className: "pf-chatbot__feedback-card-title" }, headingLevelProps, { children: title })) })), _jsx(CardBody, Object.assign({}, cardBodyProps, { children: _jsxs(Form, Object.assign({ className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` }, formProps, { children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(_Fragment, { children: _jsx(TextArea, Object.assign({ value: value, onChange: (_event, value) => {
+                                        setValue(value);
+                                        onTextAreaChange && onTextAreaChange(_event, value);
+                                    }, placeholder: textAreaPlaceholder, "aria-label": textAreaAriaLabel, resizeOrientation: "vertical" }, textAreaProps)) })), privacyStatement && _jsx("div", { className: "pf-chatbot__feedback-card-privacy", children: privacyStatement }), children, _jsx(ActionGroup, Object.assign({}, actionGroupProps, { children: _jsx(Button, Object.assign({ onClick: () => onSubmit(selectedResponse, value), size: isCompact ? 'sm' : undefined }, submitButtonProps, { children: submitWord })) }))] })) }))] })) }));
 };
 export default UserFeedback;

package/dist/esm/MessageBar/MessageBar.js

@@ -28,6 +28,7 @@ export const MessageBarBase = (_a) => {
     const [isListeningMessage, setIsListeningMessage] = useState(false);
     const [hasSentMessage, setHasSentMessage] = useState(false);
     const [isComposing, setIsComposing] = useState(false);
+    const [isMultiline, setIsMultiline] = useState(false);
     const inputRef = useRef(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = useRef(null);
@@ -68,6 +69,15 @@ export const MessageBarBase = (_a) => {
         const lines = field.scrollHeight / lineHeight;
         return lines > 2;
     };
+    const checkIfMultiline = useCallback((field) => {
+        const parent = field.parentElement;
+        const grandparent = parent === null || parent === void 0 ? void 0 : parent.parentElement;
+        if (grandparent) {
+            const containerHeight = grandparent.offsetHeight;
+            const threshold = isCompact ? 56 : 70;
+            setIsMultiline(containerHeight > threshold);
+        }
+    }, [isCompact]);
     const setAutoWidth = useCallback((field) => {
         const parent = field.parentElement;
         if (parent) {
@@ -120,13 +130,15 @@ export const MessageBarBase = (_a) => {
         if (field) {
             if (field.value === '') {
                 setInitialLineHeight(field);
+                setIsMultiline(false);
             }
             else {
                 setAutoHeight(field);
                 setAutoWidth(field);
+                checkIfMultiline(field);
             }
         }
-    }, [displayMode, message, setAutoWidth]);
+    }, [displayMode, message, setAutoWidth, checkIfMultiline]);
     useEffect(() => {
         const field = textareaRef.current;
         if (field) {
@@ -139,13 +151,15 @@ export const MessageBarBase = (_a) => {
         if (textareaRef.current) {
             if (event.target.value === '') {
                 setInitialLineHeight(textareaRef.current);
+                setIsMultiline(false);
             }
             else {
                 setAutoHeight(textareaRef.current);
+                checkIfMultiline(textareaRef.current);
             }
         }
         setMessage(event.target.value);
-    }, [onChange]);
+    }, [onChange, checkIfMultiline]);
     // Handle sending message
     const handleSend = useCallback((newMessage) => {
         onSendMessage(newMessage);
@@ -196,14 +210,14 @@ export const MessageBarBase = (_a) => {
     };
     const messageBarContents = (_jsxs(_Fragment, { children: [_jsx("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: _jsx(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {
-        return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
+        return (_jsx(AttachMenu, Object.assign({ toggle: (toggleRef) => (_jsx("div", { ref: toggleRef, className: css('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
             }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: 8 }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder }, attachMenuProps)));
     }
-    return (_jsx("div", { className: css('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', hasAiIndicator && 'pf-v6-m-ai-indicator', isThinking && 'pf-v6-m-thinking', className), children: messageBarContents }));
+    return (_jsx("div", { className: css('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', hasAiIndicator && 'pf-v6-m-ai-indicator', isThinking && 'pf-v6-m-thinking', isMultiline && 'pf-m-multiline', className), children: messageBarContents }));
 };
 const MessageBar = forwardRef((props, ref) => (_jsx(MessageBarBase, Object.assign({ innerRef: ref }, props))));
 export { MessageBar };

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;

package/dist/esm/ToolCall/ToolCall.js

@@ -1,15 +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, isDefaultExpanded = false, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
+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 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 })) }));
+    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, onToggle: onToggle, isExpanded: isExpanded, 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

@@ -162,4 +162,35 @@ describe('ToolCall', () => {
         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,5 +1,6 @@
 import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
 import { type FunctionComponent } from 'react';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface ToolResponseProps {
     /** Toggle content shown for expandable section */
     toggleContent: React.ReactNode;
@@ -27,6 +28,20 @@ export interface ToolResponseProps {
     toolResponseCardDividerProps?: DividerProps;
     /** Additional props passed to tool response card title */
     toolResponseCardTitleProps?: CardTitleProps;
+    /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+    isToggleContentMarkdown?: boolean;
+    /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+    isSubheadingMarkdown?: boolean;
+    /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+    isBodyMarkdown?: boolean;
+    /** Whether to enable markdown rendering for cardBody. When true and cardBody is a string, it will be parsed as markdown. */
+    isCardBodyMarkdown?: boolean;
+    /** Whether to enable markdown rendering for cardTitle. When true and cardTitle is a string, it will be parsed as markdown. */
+    isCardTitleMarkdown?: boolean;
+    /** Props passed to MarkdownContent component when markdown is enabled */
+    markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+    /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+    shouldRetainStyles?: boolean;
 }
 export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
 export default ToolResponse;

package/dist/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, isDefaultExpanded = true, toolResponseCardBodyProps, toolResponseCardDividerProps, toolResponseCardProps, toolResponseCardTitleProps }) => {
+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;