@patternfly/chatbot 6.3.1 → 6.4.0-prerelease.10

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -13,7 +13,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
-import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 const ERROR = {
     bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
@@ -65,6 +65,10 @@ describe('ChatbotConversationHistoryNav', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations }));
         expect(screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
     });
+    it('should disable new chat button', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations, newChatButtonProps: { isDisabled: true }, onNewChat: jest.fn() }));
+        expect(screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+    });
     it('should not apply the reversed class when reverseButtonOrder is false', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: initialConversations }));
         expect(screen.getByTestId('chatbot-nav-drawer-actions')).not.toHaveClass('pf-v6-c-drawer__actions--reversed');
@@ -143,7 +147,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
-        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should accept errorState without button', () => {
@@ -153,7 +157,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
-        expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should show loading state over error state if both are supplied', () => {
@@ -176,4 +180,51 @@ describe('ChatbotConversationHistoryNav', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS, isCompact: true, "data-testid": "drawer" }));
         expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
     });
+    it('should display the default title', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(screen.getByText('Chat history')).toBeInTheDocument();
+    });
+    it('should display the custom title', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { title: "PatternFly history", onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(screen.getByText('PatternFly history')).toBeInTheDocument();
+    });
+    it('should display the clock icon', () => {
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        const iconElement = container.querySelector('.pf-chatbot__title-icon');
+        expect(iconElement).toBeInTheDocument();
+    });
+    it('Passes listTitleProps to Title', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
+        expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
+    });
+    it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
+        expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
+    });
+    it('Passes listProps to List when conversations is an array', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
+        expect(screen.getByRole('list')).toHaveClass('test');
+    });
+    it('Passes listProps to List when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('list')).toHaveClass('test');
+    });
+    it('Passes listItemProps to ListItem', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
+        expect(screen.getByRole('listitem')).toHaveClass('test');
+    });
+    it('should be able to spread search input props when searchInputProps is passed', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));
+        expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
+    });
+    it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, navTitleProps: { headingLevel: 'h1' } }));
+        expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
+        expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
+    });
+    it('overrides nav title icon when navTitleIcon is passed in', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: _jsx(BellIcon, { "data-testid": "bell" }) }));
+        expect(screen.getByTestId('bell')).toBeInTheDocument();
+    });
 });

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js

@@ -14,7 +14,7 @@ import { forwardRef } from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 const ChatbotHeaderMenuBase = (_a) => {
-    var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Chat history menu', innerRef, tooltipContent = 'Chat history menu', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
     return (_jsx("div", { className: `pf-chatbot__menu ${className}`, children: _jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
             aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(BarsIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.test.js

@@ -10,7 +10,7 @@ describe('ChatbotHeaderMenu', () => {
     it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
         const onMenuToggle = jest.fn();
         render(_jsx(ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
-        fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
         expect(onMenuToggle).toHaveBeenCalled();
     });
     it('should handle isCompact', () => {

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
+    /** Callback function for when button is clicked */
+    onClick: () => void;
+    /** Custom classname for the header component */
+    className?: string;
+    /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+    tooltipProps?: TooltipProps;
+    /** Aria label for menu */
+    menuAriaLabel?: string;
+    /** Ref applied to menu */
+    innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
+    /** Sets button to compact styling. */
+    isCompact?: boolean;
+}
+export declare const ChatbotHeaderNewChatButton: import("react").ForwardRefExoticComponent<ChatbotHeaderNewChatButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button, Icon, Tooltip } from '@patternfly/react-core';
+import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
+const ChatbotHeaderNewChatButtonBase = (_a) => {
+    var { className, onClick, tooltipProps, menuAriaLabel = 'New chat', innerRef, tooltipContent = 'New chat', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return (_jsx("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: _jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PenToSquareIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+};
+export const ChatbotHeaderNewChatButton = forwardRef((props, ref) => (_jsx(ChatbotHeaderNewChatButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderNewChatButton } from './ChatbotHeaderNewChatButton';
+import '@testing-library/jest-dom';
+describe('ChatbotHeaderNewChatButton', () => {
+    it('should render ChatbotHeaderNewChatButton', () => {
+        const { container } = render(_jsx(ChatbotHeaderNewChatButton, { className: "custom-header-new-chat-button", onClick: jest.fn() }));
+        expect(container.querySelector('.custom-header-new-chat-button')).toBeTruthy();
+    });
+    it('should call onClick handler when new chat button is pressed', () => {
+        const onClick = jest.fn();
+        render(_jsx(ChatbotHeaderNewChatButton, { className: "custom-header-new-chat-button", onClick: onClick }));
+        fireEvent.click(screen.getByRole('button', { name: 'New chat' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('should render button with isCompact', () => {
+        render(_jsx(ChatbotHeaderNewChatButton, { "data-testid": "new-chat-button", onClick: jest.fn(), isCompact: true }));
+        expect(screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+    });
+});

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

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

package/dist/esm/ChatbotHeader/index.js

@@ -7,3 +7,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

package/dist/esm/FileDropZone/FileDropZone.d.ts

@@ -1,7 +1,6 @@
-import { DropEvent } from '@patternfly/react-core';
 import type { FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { Accept, FileError, FileRejection } from 'react-dropzone/.';
+import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone';
 export interface FileDropZoneProps {
     /** Content displayed when the drop zone is not currently in use */
     children?: React.ReactNode;

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';
@@ -8,7 +9,7 @@ import QuickResponse from './QuickResponse/QuickResponse';
 import { UserFeedbackProps } from './UserFeedback/UserFeedback';
 import { UserFeedbackCompleteProps } from './UserFeedback/UserFeedbackComplete';
 import { TableProps } from '@patternfly/react-table';
-import { PluggableList } from 'react-markdown/lib';
+import { PluggableList } from 'unified';
 export interface MessageAttachment {
     /** Name of file attached to the message */
     name: string;
@@ -54,7 +55,7 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     isLoading?: boolean;
     /** Array of attachments attached to a message */
     attachments?: MessageAttachment[];
-    /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
+    /** Props for message actions, such as feedback (positive or negative), copy button, edit message, share, and listen */
     actions?: {
         [key: string]: ActionProps;
     };
@@ -134,10 +135,16 @@ export interface MessageProps extends Omit<HTMLProps<HTMLDivElement>, 'role'> {
     onEditUpdate?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Callback functionf or when edit cancel update button is clicked */
     onEditCancel?: (event: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
     /** Props for edit form */
     editFormProps?: FormProps;
     /** Sets message to compact styling. */
     isCompact?: boolean;
+    /** Disables markdown parsing for message, allowing only text input */
+    isMarkdownDisabled?: boolean;
+    /** Allows passing additional props down to markdown parser react-markdown, such as allowedElements and disallowedElements. See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#options for options */
+    reactMarkdownProps?: Options;
 }
 export declare const MessageBase: FunctionComponent<MessageProps>;
 declare const Message: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/Message/Message.js

@@ -45,7 +45,7 @@ import ErrorMessage from './ErrorMessage/ErrorMessage';
 import MessageInput from './MessageInput';
 import { rehypeMoveImagesOutOfParagraphs } from './Plugins/rehypeMoveImagesOutOfParagraphs';
 export const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, 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", "editFormProps", "isCompact"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -67,48 +67,54 @@ export const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const handleMarkdown = () => {
+        if (isMarkdownDisabled) {
+            return (_jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props, { children: messageText })));
+        }
+        return (_jsx(Markdown, Object.assign({ components: {
+                p: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                code: (_a) => {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    return (_jsx(CodeBlockMessage, Object.assign({}, props, codeBlockProps, { children: children })));
+                },
+                h1: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                h2: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                h3: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                h4: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                h5: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                h6: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                blockquote: (props) => _jsx(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                ul: (props) => _jsx(UnorderedListMessage, Object.assign({}, props)),
+                ol: (props) => _jsx(OrderedListMessage, Object.assign({}, props)),
+                li: (props) => _jsx(ListItemMessage, Object.assign({}, props)),
+                table: (props) => _jsx(TableMessage, Object.assign({}, props, tableProps)),
+                tbody: (props) => _jsx(TbodyMessage, Object.assign({}, props)),
+                thead: (props) => _jsx(TheadMessage, Object.assign({}, props)),
+                tr: (props) => _jsx(TrMessage, Object.assign({}, props)),
+                td: (props) => {
+                    // Conflicts with Td type
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    const { width } = props, rest = __rest(props, ["width"]);
+                    return _jsx(TdMessage, Object.assign({}, rest));
+                },
+                th: (props) => _jsx(ThMessage, Object.assign({}, props)),
+                img: (props) => _jsx(ImageMessage, Object.assign({}, props)),
+                a: (props) => (_jsx(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps, { children: props.children })))
+            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, reactMarkdownProps, { children: messageText })));
+    };
     const renderMessage = () => {
         if (isLoading) {
             return _jsx(MessageLoading, { loadingWord: loadingWord });
         }
         if (isEditable) {
-            return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), _jsx(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
+            return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), _jsx(MessageInput, Object.assign({ content: messageText, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, value) => {
                             onEditUpdate && onEditUpdate(event);
                             setMessageText(value);
-                        }, onEditCancel: onEditCancel }, editFormProps))] }));
+                        }, 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 && 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 }), !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

@@ -21,6 +21,7 @@ const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
     { label: /Copy/i },
+    { label: /Edit/i },
     { label: /Share/i },
     { label: /Listen/i }
 ];
@@ -341,6 +342,8 @@ describe('Message', () => {
                 // eslint-disable-next-line no-console
                 copy: { onClick: () => console.log('Copy') },
                 // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
                 share: { onClick: () => console.log('Share') },
                 // eslint-disable-next-line no-console
                 download: { onClick: () => console.log('Download') },
@@ -360,6 +363,8 @@ describe('Message', () => {
                 // eslint-disable-next-line no-console
                 copy: { onClick: () => console.log('Copy') },
                 // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
                 share: { onClick: () => console.log('Share') },
                 // eslint-disable-next-line no-console
                 download: { onClick: () => console.log('Download') },
@@ -371,6 +376,27 @@ describe('Message', () => {
             expect(screen.queryByRole('button', { name: label })).toBeFalsy();
         });
     }));
+    it('should not show actions if isEditable is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", isEditable: true, actions: {
+                // eslint-disable-next-line no-console
+                positive: { onClick: () => console.log('Good response') },
+                // eslint-disable-next-line no-console
+                negative: { onClick: () => console.log('Bad response') },
+                // eslint-disable-next-line no-console
+                copy: { onClick: () => console.log('Copy') },
+                // eslint-disable-next-line no-console
+                edit: { onClick: () => console.log('Edit') },
+                // eslint-disable-next-line no-console
+                share: { onClick: () => console.log('Share') },
+                // eslint-disable-next-line no-console
+                download: { onClick: () => console.log('Download') },
+                // eslint-disable-next-line no-console
+                listen: { onClick: () => console.log('Listen') }
+            } }));
+        ALL_ACTIONS.forEach(({ label }) => {
+            expect(screen.queryByRole('button', { name: label })).toBeFalsy();
+        });
+    }));
     it('should render unordered lists correctly', () => {
         render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: UNORDERED_LIST }));
         expect(screen.getByText('Here is an unordered list:')).toBeTruthy();
@@ -708,4 +734,15 @@ describe('Message', () => {
         const form = container.querySelector('form');
         expect(form).toHaveClass('test');
     });
+    it('should be able to disable markdown parsing', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, isMarkdownDisabled: true }));
+        // this is looking for markdown syntax that is ordinarily stripped
+        expect(screen.getByText(/~~~yaml/i)).toBeTruthy();
+    });
+    it('should be able to pass props to react-markdown, such as disabling tags', () => {
+        render(_jsx(Message, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE, reactMarkdownProps: { disallowedElements: ['code'] } }));
+        expect(screen.getByText('Here is some YAML code:')).toBeTruthy();
+        // code block isn't rendering
+        expect(screen.queryByRole('button', { name: 'Copy code' })).toBeFalsy();
+    });
 });

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

@@ -1,4 +1,4 @@
-import type { FunctionComponent } from 'react';
+import type { FunctionComponent, Ref } from 'react';
 import { FormProps } from '@patternfly/react-core';
 export interface MessageInputProps extends FormProps {
     /** Placeholder for edit input */
@@ -11,6 +11,8 @@ export interface MessageInputProps extends FormProps {
     onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
     /** Callback functionf or when edit cancel update button is clicked */
     onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Ref applied to editable message input */
+    inputRef?: Ref<HTMLTextAreaElement>;
     /** Message text */
     content?: string;
 }

package/dist/esm/Message/MessageInput.js

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
 const MessageInput = (_a) => {
-    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "content"]);
     const [messageText, setMessageText] = useState(content !== null && content !== void 0 ? content : '');
     const onChange = (_event, value) => {
         setMessageText(value);
     };
-    return (_jsxs(Form, Object.assign({}, props, { children: [_jsx(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }), _jsxs(ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [_jsx(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), _jsx(Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
+    return (_jsxs(Form, Object.assign({}, props, { children: [_jsx(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true, ref: inputRef }), _jsxs(ActionGroup, { className: "pf-chatbot__message-edit-buttons", children: [_jsx(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText), children: updateWord }), _jsx(Button, { variant: "secondary", onClick: onEditCancel, children: cancelWord })] })] })));
 };
 export default MessageInput;

package/dist/esm/MessageBar/AttachButton.d.ts

@@ -1,5 +1,5 @@
-import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/esm/MessageBar/MessageBar.d.ts

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from 'react';
-import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
-import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
+import { ButtonProps, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */

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();
     }));
 });