@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.20

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';
@@ -9,6 +10,8 @@ import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
 import { PluggableList } from 'unified';
+import { ToolResponseProps } from '../ToolResponse';
+import { DeepThinkingProps } from '../DeepThinking';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -116,6 +119,8 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     tableProps?: Required<Pick<TableProps, 'aria-label'>> & TableProps;
     /** Additional rehype plugins passed from the consumer */
     additionalRehypePlugins?: PluggableList;
+    /** Additional remark plugins passed from the consumer */
+    additionalRemarkPlugins?: PluggableList;
     /** Whether to open links in message in new tab. */
     openLinkInNewTab?: boolean;
     /** Optional inline error message that can be displayed in the message */
@@ -140,6 +145,16 @@ 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;
+    /** Props for tool response card */
+    toolResponse?: ToolResponseProps;
+    /** Props for deep thinking card */
+    deepThinking?: DeepThinkingProps;
+    /** Allows passing additional props down to remark-gfm. See https://github.com/remarkjs/remark-gfm?tab=readme-ov-file#options for options */
+    remarkGfmProps?: 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

@@ -44,8 +44,11 @@ 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';
 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 = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps } = _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", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -67,6 +70,129 @@ 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: {
+                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));
+                },
+                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, { 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)),
+                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), children: messageText })));
+    };
     const renderMessage = () => {
         if (isLoading) {
             return _jsx(MessageLoading, { loadingWord: loadingWord });
@@ -77,38 +203,9 @@ 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) => {
+    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 }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), !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;
                                     return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                 }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })] })] })));

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

@@ -136,8 +136,26 @@ const EMPTY_TABLE = `
  | | 
 
  `;
+const FOOTNOTE = `This is some text with a footnote[^1] and here's a longer one.[^bignote]
+
+ You can also reference the same footnote multiple times[^1].
+ 
+   [^1]: This is the full footnote text. You can click the arrow to go back up. 
+   
+   [^bignote]: Here's one with multiple paragraphs and **formatting**.
+ 
+       Indent paragraphs to include them in the footnote.
+ 
+       Add as many paragraphs as you like. You can include *italic text*, **bold text**, and even \`code\`.
+ 
+       > You can even include blockquotes in footnotes!`;
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 const INLINE_IMAGE = `inline text ![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
+const DEEP_THINKING = {
+    toggleContent: 'Show thinking',
+    subheading: 'Thought for 3 seconds',
+    body: "Here's why I said this."
+};
 const ERROR = {
     title: 'Could not load chat',
     children: 'Wait a few minutes and check your network settings. If the issue persists: ',
@@ -521,6 +539,20 @@ describe('Message', () => {
             } }));
         expect(screen.getAllByRole('img')[1]).toHaveAttribute('src', 'test.png');
     }));
+    it('should handle tool response correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "Hi", toolResponse: {
+                toggleContent: 'Tool response: Name',
+                subheading: 'Thought for 3 seconds',
+                body: 'Lorem ipsum dolor sit amet',
+                cardTitle: 'Card title',
+                cardBody: 'Card body'
+            } }));
+        expect(screen.getByRole('button', { name: /Tool response: Name/i })).toBeTruthy();
+        expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+        expect(screen.getByText('Lorem ipsum dolor sit amet')).toBeTruthy();
+        expect(screen.getByText('Card title')).toBeTruthy();
+        expect(screen.getByText('Card body')).toBeTruthy();
+    }));
     it('should handle block quote correctly', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: BLOCK_QUOTES }));
         expect(screen.getByText(/Blockquotes can also be nested.../)).toBeTruthy();
@@ -586,6 +618,28 @@ describe('Message', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: TABLE, tableProps: { 'aria-label': 'Test' } }));
         expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
     });
+    it('should render footnote correctly', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: FOOTNOTE }));
+        expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
+        expect(screen.getByText(/and here's a longer one./i)).toBeTruthy();
+        expect(screen.getByText(/You can also reference the same footnote multiple times./i)).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Footnotes/i })).toBeTruthy();
+        expect(screen.getByText(/This is the full footnote text. You can click the arrow to go back up./i)).toBeTruthy();
+        expect(screen.getByText(/Here's one with multiple paragraphs and/i)).toBeTruthy();
+        expect(screen.getByText(/formatting/i)).toBeTruthy();
+        expect(screen.getByText(/Indent paragraphs to include them in the footnote./i)).toBeTruthy();
+        expect(screen.getByText(/Add as many paragraphs as you like. You can include/i)).toBeTruthy();
+        expect(screen.getByText(/italic text/i)).toBeTruthy();
+        expect(screen.getByText(/bold text/i)).toBeTruthy();
+        expect(screen.getByText(/, and even/i)).toBeTruthy();
+        expect(screen.getByText(/code/i)).toBeTruthy();
+        expect(screen.getByText(/You can even include blockquotes in footnotes!/i)).toBeTruthy();
+        expect(screen.getAllByRole('link', { name: '1' })).toHaveLength(2);
+        expect(screen.getAllByRole('link', { name: '2' })).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'Back to reference 1' })).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'Back to reference 1-2' })).toBeTruthy();
+        expect(screen.getByRole('link', { name: /Back to reference 2/i })).toBeTruthy();
+    });
     it('should render beforeMainContent with main content', () => {
         const mainContent = 'Main message content';
         const beforeMainContentText = 'Before main content';
@@ -734,4 +788,21 @@ 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();
+    });
+    it('should render deep thinking section correctly', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: "", deepThinking: DEEP_THINKING }));
+        expect(screen.getByRole('button', { name: /Show thinking/i })).toBeTruthy();
+        expect(screen.getByText('Thought for 3 seconds')).toBeTruthy();
+        expect(screen.getByText("Here's why I said this.")).toBeTruthy();
+    });
 });

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

@@ -0,0 +1,3 @@
+import { ExtraProps } from 'react-markdown';
+declare const SuperscriptMessage: ({ children }: JSX.IntrinsicElements["sup"] & ExtraProps) => import("react/jsx-runtime").JSX.Element;
+export default SuperscriptMessage;

package/dist/esm/Message/SuperscriptMessage/SuperscriptMessage.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SuperscriptMessage = ({ children }) => (_jsx("span", { className: "pf-chatbot__message-superscript", children: _jsx("sup", { children: children }) }));
+export default SuperscriptMessage;

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

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { CardProps, LabelGroupProps, OUIAProps } from '@patternfly/react-core';
+import { ActionGroupProps, ButtonProps, CardBodyProps, CardHeaderProps, CardProps, FormProps, LabelGroupProps, OUIAProps, TextAreaProps } from '@patternfly/react-core';
 import QuickResponse from '../QuickResponse/QuickResponse';
 export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProps {
     /** Additional classes for the pagination navigation container. */
@@ -34,6 +34,20 @@ export interface UserFeedbackProps extends Omit<CardProps, 'onSubmit'>, OUIAProp
     focusOnLoad?: boolean;
     /** Timestamp passed in by Message for more context in aria announcements */
     timestamp?: string;
+    /** Additional props passed to submit button */
+    submitButtonProps?: ButtonProps;
+    /** Additional props passed to card header */
+    cardHeaderProps?: CardHeaderProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to title heading */
+    headingLevelProps?: React.HTMLAttributes<HTMLHeadingElement>;
+    /** Additional props passed to form */
+    formProps?: FormProps;
+    /** Additional props passed to text area */
+    textAreaProps?: TextAreaProps;
+    /** Additional props passed to action group */
+    actionGroupProps?: ActionGroupProps;
 }
 declare const UserFeedback: FunctionComponent<UserFeedbackProps>;
 export default UserFeedback;

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

@@ -16,7 +16,7 @@ import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from
 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 } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
+    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"]);
     const [selectedResponse, setSelectedResponse] = useState();
     const [value, setValue] = useState('');
     const divRef = useRef(null);
@@ -28,11 +28,11 @@ const UserFeedback = (_a) => {
     }, []);
     return (
     /* 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, { actions: {
+    _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 })
-                    }, children: _jsx(HeadingLevel, { className: "pf-chatbot__feedback-card-title", children: title }) }), _jsx(CardBody, { children: _jsxs(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}`, children: [quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })), hasTextArea && (_jsx(TextArea, { value: value, onChange: (_event, value) => {
+                    } }, 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" })), _jsx(ActionGroup, { children: _jsx(Button, { onClick: () => onSubmit(selectedResponse, value), children: submitWord }) })] }) })] })) }));
+                                }, 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 })) }))] })) }))] })) }));
 };
 export default UserFeedback;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -129,4 +129,48 @@ describe('UserFeedback', () => {
         render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
         expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
     });
+    it('should pass buttonProps to submit button', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, submitButtonProps: { variant: 'secondary', isDisabled: true } }));
+        const submitButton = screen.getByRole('button', { name: /Submit/i });
+        expect(submitButton).toHaveClass('pf-v6-c-button pf-m-secondary');
+        expect(submitButton).toBeDisabled();
+    });
+    it('should pass cardHeaderProps to card header', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardHeaderProps: { 'data-testid': 'card-header', className: 'custom-header' } }));
+        const cardHeader = screen.getByTestId('card-header');
+        expect(cardHeader).toHaveClass('custom-header');
+    });
+    it('should pass cardBodyProps to card body', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, cardBodyProps: { 'data-testid': 'card-body', className: 'custom-body' } }));
+        const cardBody = screen.getByTestId('card-body');
+        expect(cardBody).toHaveClass('custom-body');
+    });
+    it('should pass headingLevelProps to title heading', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, headingLevelProps: { className: 'custom-heading', id: 'feedback-title' } }));
+        const heading = screen.getByRole('heading', { level: 1, name: /Why did you choose this rating?/i });
+        expect(heading).toHaveClass('custom-heading');
+        expect(heading).toHaveAttribute('id', 'feedback-title');
+    });
+    it('should pass formProps to form', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, formProps: { 'data-testid': 'feedback-form', className: 'custom-form' } }));
+        const form = screen.getByTestId('feedback-form');
+        expect(form).toHaveClass('custom-form');
+    });
+    it('should pass textAreaProps to text area when hasTextArea is true', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, hasTextArea: true, textAreaProps: { 'data-testid': 'custom-textarea', rows: 5 } }));
+        const textArea = screen.getByTestId('custom-textarea');
+        expect(textArea).toHaveAttribute('rows', '5');
+        expect(textArea).toHaveAttribute('data-testid', 'custom-textarea');
+    });
+    it('should pass actionGroupProps to action group', () => {
+        render(_jsx(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, actionGroupProps: { 'data-testid': 'action-group', className: 'custom-actions' } }));
+        const actionGroup = screen.getByTestId('action-group');
+        expect(actionGroup).toHaveClass('custom-actions');
+    });
+    it('should render children', () => {
+        render(_jsxs(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, children: [_jsx("div", { "data-testid": "custom-content", children: "Custom feedback content" }), _jsx("p", { children: "Additional paragraph" })] }));
+        expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+        expect(screen.getByText('Custom feedback content')).toBeInTheDocument();
+        expect(screen.getByText('Additional paragraph')).toBeInTheDocument();
+    });
 });

package/dist/esm/MessageBar/MessageBar.js

@@ -26,6 +26,7 @@ export const MessageBarBase = (_a) => {
     const [message, setMessage] = useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = useState(false);
     const [hasSentMessage, setHasSentMessage] = useState(false);
+    const [isComposing, setIsComposing] = useState(false);
     const inputRef = useRef(null);
     const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
     const attachButtonRef = useRef(null);
@@ -151,18 +152,32 @@ export const MessageBarBase = (_a) => {
         setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = useCallback((event) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
                 handleSend(message);
             }
         }
-        if (event.key === 'Enter' && event.shiftKey) {
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
             if (textareaRef.current) {
                 handleNewLine(textareaRef.current);
             }
         }
-    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = useCallback(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = useCallback(() => {
+        setIsComposing(false);
+    }, []);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();
@@ -178,7 +193,7 @@ export const MessageBarBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [attachMenuProps && (_jsx(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && (_jsx(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && (_jsx(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && (_jsx(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    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 }, props)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
+    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) => {
                 var _a;

package/dist/esm/MessageBox/JumpButton.d.ts

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'react';
+import { TooltipProps, ButtonProps } from '@patternfly/react-core';
 export interface JumpButtonProps {
     /** Position of the Jump Button(top/bottom) */
     position: 'top' | 'bottom';
@@ -6,6 +7,10 @@ export interface JumpButtonProps {
     onClick: () => void;
     /** Flag to change the visibilty of the button */
     isHidden?: boolean;
+    /** Additional props passed to jump buttons */
+    jumpButtonProps?: ButtonProps;
+    /** Additional props passed to tooltip */
+    jumpButtonTooltipProps?: TooltipProps;
 }
 declare const JumpButton: FunctionComponent<JumpButtonProps>;
 export default JumpButton;

package/dist/esm/MessageBox/JumpButton.js

@@ -3,5 +3,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 import { ArrowUpIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-up-icon';
 import { ArrowDownIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-down-icon';
-const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : (_jsx(Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top", children: _jsx(Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position}`, onClick: onClick, children: _jsx(Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? _jsx(ArrowUpIcon, {}) : _jsx(ArrowDownIcon, {}) }) }) }));
+const JumpButton = ({ position, isHidden, onClick, jumpButtonProps, jumpButtonTooltipProps }) => isHidden ? null : (_jsx(Tooltip, Object.assign({ id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top" }, jumpButtonTooltipProps, { children: _jsx(Button, Object.assign({ variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Back to ${position}`, onClick: onClick }, jumpButtonProps, { children: _jsx(Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? _jsx(ArrowUpIcon, {}) : _jsx(ArrowDownIcon, {}) }) })) })));
 export default JumpButton;

package/dist/esm/MessageBox/JumpButton.test.js

@@ -15,20 +15,20 @@ import userEvent from '@testing-library/user-event';
 describe('JumpButton', () => {
     it('should render top button correctly', () => {
         render(_jsx(JumpButton, { position: "top", onClick: jest.fn() }));
-        expect(screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
     });
     it('should render bottom button correctly', () => {
         render(_jsx(JumpButton, { position: "bottom", onClick: jest.fn() }));
-        expect(screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
     });
     it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         render(_jsx(JumpButton, { position: "bottom", onClick: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: /Jump bottom/i }));
+        yield userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
         render(_jsx(JumpButton, { position: "bottom", onClick: jest.fn(), isHidden: true }));
-        expect(screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
+        expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
     }));
 });

package/dist/esm/MessageBox/MessageBox.d.ts

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     /** Content that can be announced, such as a new message, for screen readers */
     announcement?: string;
@@ -18,6 +19,14 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     onScrollToBottomClick?: () => void;
     /** Flag to enable automatic scrolling when new messages are added */
     enableSmartScroll?: boolean;
+    /** Props passed to top jump button */
+    jumpButtonTopProps?: ButtonProps;
+    /** Props passed to bottom jump button */
+    jumpButtonBottomProps?: ButtonProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonTopTooltipProps?: TooltipProps;
+    /** Props passed to top jump button tooltip */
+    jumpButtonBottomTooltipProps?: TooltipProps;
 }
 export interface MessageBoxHandle extends HTMLDivElement {
     /** Scrolls to the top of the message box */