@patternfly/chatbot 6.3.1 → 6.4.0-prerelease.10

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.d.ts

@@ -9,6 +9,8 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+    /** Id applied to dropdown menu toggle */
+    id?: string;
 }
 export declare const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps>;
 export default ChatbotConversationHistoryDropdown;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -9,11 +9,11 @@ const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
-const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
+const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label, id }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), role: "menuitem", children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
+        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": label !== null && label !== void 0 ? label : 'Conversation options', ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, children: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
     return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
             setIsOpen((prev) => !prev);

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.js

@@ -22,11 +22,11 @@ describe('ChatbotConversationHistoryDropdown', () => {
     const menuItems = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Rename" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { children: "Delete" })] }));
     it('should render the dropdown', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, menuClassName: "custom-class" }));
-        expect(react_1.screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
+        expect(react_1.screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
     });
     it('should display the dropdown menuItems', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems }));
-        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
         expect(toggle).toBeInTheDocument();
         react_1.fireEvent.click(toggle);
         (0, react_1.waitFor)(() => {
@@ -36,14 +36,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should invoke onSelect callback when menuitem is clicked', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
         react_1.fireEvent.click(toggle);
         react_1.fireEvent.click(react_1.screen.getByText('Rename'));
         expect(onSelect).toHaveBeenCalled();
     });
     it('should toggle the dropdown when menuitem is clicked', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
         react_1.fireEvent.click(toggle);
         react_1.fireEvent.click(react_1.screen.getByText('Delete'));
         expect(onSelect).toHaveBeenCalled();
@@ -51,7 +51,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should close the dropdown when user clicks outside', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = react_1.screen.queryByRole('menuitem', { name: /Conversation options/i });
+        const toggle = react_1.screen.queryByRole('button', { name: /Conversation options/i });
         react_1.fireEvent.click(toggle);
         expect(react_1.screen.queryByText('Delete')).toBeInTheDocument();
         react_1.fireEvent.click(toggle.parentElement);
@@ -59,7 +59,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should show the tooltip when the user hovers over the toggle button', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, label: "Actions dropdown" }));
-        const toggle = react_1.screen.queryByRole('menuitem', { name: /Actions dropdown/i });
+        const toggle = react_1.screen.queryByRole('button', { name: /Actions dropdown/i });
         (0, react_1.fireEvent)(toggle, new MouseEvent('mouseenter', {
             bubbles: false,
             cancelable: false

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'react';
-import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps } from '@patternfly/react-core';
+import { ButtonProps, DrawerProps, ListItemProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, // Remove in next breaking change
+TitleProps, ListProps, SearchInputProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -19,8 +20,12 @@ export interface Conversation {
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-    /** Additional props passed to conversation menu item */
-    additionalProps?: MenuItemProps;
+    /** Additional props passed to conversation button item */
+    additionalProps?: ButtonProps;
+    /** Additional props passed to conversation list item */
+    listItemProps?: Omit<ListItemProps, 'children'>;
+    /** Custom dropdown ID to ensure uniqueness across demo instances */
+    dropdownId?: string;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     /** Function called to toggle drawer */
@@ -36,6 +41,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     conversations: Conversation[] | {
         [key: string]: Conversation[];
     };
+    /** Additional button props for new chat button. */
+    newChatButtonProps?: ButtonProps;
+    /** Additional props applied to all conversation list headers */
+    listTitleProps?: Partial<TitleProps>;
+    /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
+    listProps?: ListProps | {
+        [key: string]: ListProps;
+    };
     /** Text shown in blue button */
     newChatButtonText?: string;
     /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -46,6 +59,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     searchInputPlaceholder?: string;
     /** Aria label for search input */
     searchInputAriaLabel?: string;
+    /** Additional props passed to search input */
+    searchInputProps?: SearchInputProps;
     /** A callback for when the input value changes. Omit to hide input field */
     handleTextInputChange?: (value: string) => void;
     /** Display mode of chatbot */
@@ -54,7 +69,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     reverseButtonOrder?: boolean;
     /** Custom test id for the drawer actions */
     drawerActionsTestId?: string;
-    /** Additional props applied to menu  */
+    /** @deprecated Additional props applied to list container  */
     menuProps?: MenuProps;
     /** Additional props applied to panel */
     drawerPanelContentProps?: DrawerPanelContentProps;
@@ -82,6 +97,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     noResultsState?: HistoryEmptyStateProps;
     /** Sets drawer to compact styling. */
     isCompact?: boolean;
+    /** Display title  */
+    title?: string;
+    /** Icon displayed in title */
+    navTitleIcon?: React.ReactNode;
+    /** Title header level */
+    navTitleProps?: Partial<TitleProps>;
+    /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
+    searchInputScreenReaderText?: string;
 }
 export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -25,27 +25,21 @@ const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotC
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
 const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', menuProps, drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedClockIcon, {}), searchInputScreenReaderText } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "listTitleProps", "listProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText"]);
     const drawerRef = (0, react_1.useRef)(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
     const getNavItem = (conversation) => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(react_core_1.MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCommentAltIcon, {}) }), (conversation.menuItems
-            ? {
-                actions: ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
-            }
-            : {}), conversation.additionalProps, { children: conversation.text }), conversation.id));
+        return ((0, jsx_runtime_1.jsx)(react_core_1.ListItem, Object.assign({ className: `pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}` }, conversation.listItemProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: "pf-chatbot__conversation-history-item", variant: "link" }, conversation.additionalProps, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCommentAltIcon, {}) }), { onClick: (event) => onSelectActiveItem === null || onSelectActiveItem === void 0 ? void 0 : onSelectActiveItem(event, conversation.id), children: conversation.text })), conversation.menuItems && ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label, id: conversation.dropdownId }))] }) }), conversation.id));
     };
-    const buildMenu = () => {
+    const buildConversations = () => {
         if (Array.isArray(conversations)) {
-            // Render for array of MenuItemObject
-            return ((0, jsx_runtime_1.jsx)(react_core_1.MenuList, { children: conversations.map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) }));
+            return ((0, jsx_runtime_1.jsx)(react_core_1.List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps, { children: conversations.map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })));
         }
         else {
-            // Render for object with NavItemObject arrays as values
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsx)(react_core_1.MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) }) }, navGroup))) }));
+            return ((0, jsx_runtime_1.jsx)("div", { children: Object.keys(conversations).map((navGroup) => ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ headingLevel: "h4", className: "pf-chatbot__conversation-list-header" }, listTitleProps, { children: navGroup })), (0, jsx_runtime_1.jsx)(react_core_1.List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps === null || listProps === void 0 ? void 0 : listProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) }))] }, navGroup))) }));
         }
     };
     // Menu Content
@@ -61,11 +55,11 @@ const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, noResultsState));
         }
-        return ((0, jsx_runtime_1.jsx)(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuContent, { children: buildMenu() }) })));
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: buildConversations() });
     };
-    const renderDrawerContent = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [handleTextInputChange && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__input", children: (0, jsx_runtime_1.jsx)(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) })), (0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() }))] }));
+    const renderDrawerContent = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
     const renderPanelContent = () => {
-        const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat, children: newChatButtonText }))] })) })), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__heading-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && handleTextInputChange && ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__input", children: [(0, jsx_runtime_1.jsx)(react_core_1.SearchInput, Object.assign({ "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }, searchInputProps)), searchInputScreenReaderText && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__filter-announcement", children: searchInputScreenReaderText }))] }))] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
         return ((0, jsx_runtime_1.jsx)(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
     };
     // An onKeyDown property must be passed to the Drawer component to handle closing

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -70,6 +70,10 @@ describe('ChatbotConversationHistoryNav', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations }));
         expect(react_1.screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
     });
+    it('should disable new chat button', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations, newChatButtonProps: { isDisabled: true }, onNewChat: jest.fn() }));
+        expect(react_1.screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+    });
     it('should not apply the reversed class when reverseButtonOrder is false', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: initialConversations }));
         expect(react_1.screen.getByTestId('chatbot-nav-drawer-actions')).not.toHaveClass('pf-v6-c-drawer__actions--reversed');
@@ -148,7 +152,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(react_1.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(react_1.screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
-        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(react_1.screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should accept errorState without button', () => {
@@ -158,7 +162,7 @@ describe('ChatbotConversationHistoryNav', () => {
         })).toBeTruthy();
         expect(react_1.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
         expect(react_1.screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
-        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
         expect(react_1.screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should show loading state over error state if both are supplied', () => {
@@ -181,4 +185,51 @@ describe('ChatbotConversationHistoryNav', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS, isCompact: true, "data-testid": "drawer" }));
         expect(react_1.screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
     });
+    it('should display the default title', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(react_1.screen.getByText('Chat history')).toBeInTheDocument();
+    });
+    it('should display the custom title', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { title: "PatternFly history", onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(react_1.screen.getByText('PatternFly history')).toBeInTheDocument();
+    });
+    it('should display the clock icon', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        const iconElement = container.querySelector('.pf-chatbot__title-icon');
+        expect(iconElement).toBeInTheDocument();
+    });
+    it('Passes listTitleProps to Title', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
+        expect(react_1.screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
+    });
+    it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
+        expect(react_1.screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
+        expect(react_1.screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
+    });
+    it('Passes listProps to List when conversations is an array', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
+        expect(react_1.screen.getByRole('list')).toHaveClass('test');
+    });
+    it('Passes listProps to List when conversations is an object', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
+        expect(react_1.screen.getByRole('list')).toHaveClass('test');
+    });
+    it('Passes listItemProps to ListItem', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
+        expect(react_1.screen.getByRole('listitem')).toHaveClass('test');
+    });
+    it('should be able to spread search input props when searchInputProps is passed', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));
+        expect(react_1.screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
+    });
+    it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, navTitleProps: { headingLevel: 'h1' } }));
+        expect(react_1.screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
+        expect(react_1.screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
+    });
+    it('overrides nav title icon when navTitleIcon is passed in', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, { "data-testid": "bell" }) }));
+        expect(react_1.screen.getByTestId('bell')).toBeInTheDocument();
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -20,7 +20,7 @@ const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const bars_icon_1 = __importDefault(require("@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 ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu ${className}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
             aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(bars_icon_1.default, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));

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

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

package/dist/cjs/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/cjs/ChatbotHeader/ChatbotHeaderNewChatButton.js

@@ -0,0 +1,25 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatbotHeaderNewChatButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_core_1 = require("@patternfly/react-core");
+const pen_to_square_icon_1 = require("@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 ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(pen_to_square_icon_1.PenToSquareIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+};
+exports.ChatbotHeaderNewChatButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderNewChatButtonBase, Object.assign({ innerRef: ref }, props))));

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const ChatbotHeaderNewChatButton_1 = require("./ChatbotHeaderNewChatButton");
+require("@testing-library/jest-dom");
+describe('ChatbotHeaderNewChatButton', () => {
+    it('should render ChatbotHeaderNewChatButton', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderNewChatButton_1.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();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderNewChatButton_1.ChatbotHeaderNewChatButton, { className: "custom-header-new-chat-button", onClick: onClick }));
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'New chat' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('should render button with isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotHeaderNewChatButton_1.ChatbotHeaderNewChatButton, { "data-testid": "new-chat-button", onClick: jest.fn(), isCompact: true }));
+        expect(react_1.screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+    });
+});

package/dist/cjs/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/cjs/ChatbotHeader/index.js

@@ -28,3 +28,4 @@ __exportStar(require("./ChatbotHeaderTitle"), exports);
 __exportStar(require("./ChatbotHeaderOptionsDropdown"), exports);
 __exportStar(require("./ChatbotHeaderSelectorDropdown"), exports);
 __exportStar(require("./ChatbotHeaderCloseButton"), exports);
+__exportStar(require("./ChatbotHeaderNewChatButton"), exports);

package/dist/cjs/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/cjs/Message/Message.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import type { FunctionComponent, HTMLProps, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { Options } from 'react-markdown';
 import { AlertProps, AvatarProps, ButtonProps, ExpandableSectionProps, ExpandableSectionToggleProps, FormProps, LabelGroupProps } from '@patternfly/react-core';
 import { ActionProps } from '../ResponseActions/ResponseActions';
 import { SourcesCardProps } from '../SourcesCard';
@@ -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/cjs/Message/Message.js

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