@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = require("@testing-library/react");
+const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
+describe('ChatbotConversationHistoryDropdown', () => {
+    const onSelect = jest.fn();
+    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();
+    });
+    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 });
+        expect(toggle).toBeInTheDocument();
+        react_1.fireEvent.click(toggle);
+        (0, react_1.waitFor)(() => {
+            expect(react_1.screen.getByText('Rename')).toBeInTheDocument();
+            expect(react_1.screen.getByText('Delete')).toBeInTheDocument();
+        });
+    });
+    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 });
+        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 });
+        react_1.fireEvent.click(toggle);
+        react_1.fireEvent.click(react_1.screen.getByText('Delete'));
+        expect(onSelect).toHaveBeenCalled();
+        expect(react_1.screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+    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 });
+        react_1.fireEvent.click(toggle);
+        expect(react_1.screen.queryByText('Delete')).toBeInTheDocument();
+        react_1.fireEvent.click(toggle.parentElement);
+        expect(react_1.screen.queryByText('Delete')).not.toBeInTheDocument();
+    });
+    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 });
+        (0, react_1.fireEvent)(toggle, new MouseEvent('mouseenter', {
+            bubbles: false,
+            cancelable: false
+        }));
+        yield (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByText('Actions dropdown')).toBeInTheDocument();
+        });
+    }));
+    it('should be able to set a custom aria-label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuItems: menuItems, "aria-label": "Custom conversation options" }));
+        expect(react_1.screen.queryByRole('menuitem', { name: /Custom conversation options/i })).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,119 @@
+import type { FunctionComponent } from 'react';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, TitleProps, SearchInputProps, MenuProps, MenuListProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import { HistoryEmptyStateProps } from './EmptyState';
+export interface Conversation {
+    /** Conversation id */
+    id: string;
+    /** Conversation icon */
+    icon?: React.ReactNode;
+    /** Flag for no icon */
+    noIcon?: boolean;
+    /** Conversation */
+    text: string;
+    /** Dropdown items rendered in conversation settings dropdown */
+    menuItems?: React.ReactNode;
+    /** Optional classname applied to conversation settings dropdown */
+    menuClassName?: string;
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
+    label?: string;
+    /** Callback for when user selects item. */
+    onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
+    /** Additional props passed to menu item */
+    additionalProps?: MenuItemProps;
+    /** Custom dropdown ID to ensure uniqueness across demo instances */
+    dropdownId?: string;
+}
+export interface ChatbotConversationHistoryNavProps extends DrawerProps {
+    /** Function called to toggle drawer */
+    onDrawerToggle: (event: React.KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
+    /** Flag to indicate whether drawer is open */
+    isDrawerOpen: boolean;
+    /** Function called to close drawer */
+    setIsDrawerOpen: (bool: boolean) => void;
+    activeItemId?: string | number;
+    /** Callback function for when an item is selected */
+    onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
+    /** Items shown in chat history */
+    conversations: Conversation[] | {
+        [key: string]: Conversation[];
+    };
+    /** Additional button props for new chat button. */
+    newChatButtonProps?: ButtonProps;
+    /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
+    menuGroupProps?: MenuGroupProps | {
+        [key: string]: MenuGroupProps;
+    };
+    /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
+    menuListProps?: Omit<MenuListProps, 'children'> | {
+        [key: string]: Omit<MenuListProps, 'children'>;
+    };
+    /** Text shown in blue button */
+    newChatButtonText?: string;
+    /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
+    onNewChat?: () => void;
+    /** Content wrapped by conversation history nav */
+    drawerContent?: React.ReactNode;
+    /** Placeholder for search input */
+    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 */
+    displayMode: ChatbotDisplayMode;
+    /** Reverses the order of the drawer action buttons */
+    reverseButtonOrder?: boolean;
+    /** Custom test id for the drawer actions */
+    drawerActionsTestId?: string;
+    /** Additional props applied to menu  */
+    menuProps?: MenuProps;
+    /** Additional props applied to panel */
+    drawerPanelContentProps?: DrawerPanelContentProps;
+    /** Additional props applied to drawer content */
+    drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+    /** Additional props applied to drawer content body */
+    drawerContentBodyProps?: DrawerContentBodyProps;
+    /** Additional props applied to drawer head */
+    drawerHeadProps?: DrawerHeadProps;
+    /** Additional props applied to drawer actions */
+    drawerActionsProps?: DrawerActionsProps;
+    /** Additional props applied to drawer close button */
+    drawerCloseButtonProps?: DrawerCloseButtonProps;
+    /** Additional props appleid to drawer panel body */
+    drawerPanelBodyProps?: DrawerPanelBodyProps;
+    /** Flag indicating whether a divider should render between the drawer head and title. */
+    hasDrawerHeadDivider?: boolean;
+    /** Whether to show drawer loading state */
+    isLoading?: boolean;
+    /** Additional props for loading state */
+    loadingState?: SkeletonProps;
+    /** Content to show in error state. Error state will appear once content is passed in. */
+    errorState?: HistoryEmptyStateProps;
+    /** Content to show in empty state. Empty state will appear once content is passed in. */
+    emptyState?: HistoryEmptyStateProps;
+    /** Content to show in no results state. No results state will appear once content is passed in. */
+    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;
+    /** Custom action rendered before the search input. */
+    searchActionStart?: React.ReactNode;
+    /** Custom action rendered after the search input. */
+    searchActionEnd?: React.ReactNode;
+    /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+    searchToolbar?: React.ReactNode;
+    /** Additional props passed to MenuContent */
+    menuContentProps?: Omit<MenuContentProps, 'ref'>;
+}
+export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
+export default ChatbotConversationHistoryNav;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -0,0 +1,97 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatbotConversationHistoryNav = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const Chatbot_1 = require("../Chatbot/Chatbot");
+const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
+const LoadingState_1 = __importDefault(require("./LoadingState"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const ChatbotConversationHistoryNav = (_a) => {
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, 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, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
+    const drawerRef = (0, react_1.useRef)(null);
+    const onExpand = () => {
+        drawerRef.current && drawerRef.current.focus();
+    };
+    const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
+    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 })));
+    };
+    const buildConversations = () => {
+        if (Array.isArray(conversations)) {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
+                    if (isConversation(conversation)) {
+                        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id);
+                    }
+                    else {
+                        return conversation;
+                    }
+                }) })));
+        }
+        else {
+            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, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
+        }
+    };
+    // Menu Content
+    // - Consumers should pass an array to <Chatbot> of the list of conversations
+    // - Groups could be optional, but items need to be ordered by date
+    const renderMenuContent = () => {
+        if (errorState) {
+            return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, errorState));
+        }
+        if (emptyState) {
+            return (0, jsx_runtime_1.jsx)(EmptyState_1.default, Object.assign({}, emptyState));
+        }
+        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, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
+    };
+    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 searchInputContainer = 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 pf-chatbot-m-hidden", children: searchInputScreenReaderText }))] }));
+    const renderSearchAndActions = () => {
+        if (searchToolbar) {
+            return searchToolbar;
+        }
+        return searchActionStart || searchActionEnd ? ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__history-search-actions", children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [searchActionStart && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { children: searchActionStart }), searchInputContainer && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { isFill: true, children: searchInputContainer }), searchActionEnd && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { children: searchActionEnd })] }) })) : (searchInputContainer);
+    };
+    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, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && (0, jsx_runtime_1.jsx)(react_core_1.Divider, { className: "pf-chatbot__heading-divider" }), (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 && renderSearchAndActions()] }), 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
+    // the drawer panel and deactivating the focus trap via the Escape key.
+    const onEscape = (event) => {
+        if (event.key === 'Escape') {
+            // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
+            if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
+                setIsDrawerOpen(false);
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Drawer, Object.assign({ className: `pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`, isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === Chatbot_1.ChatbotDisplayMode.fullscreen || displayMode === Chatbot_1.ChatbotDisplayMode.embedded }, props, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.DrawerContentBody, Object.assign({}, drawerContentBodyProps, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked || displayMode === Chatbot_1.ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }), drawerContent] }) })) })) })));
+};
+exports.ChatbotConversationHistoryNav = ChatbotConversationHistoryNav;
+exports.default = exports.ChatbotConversationHistoryNav;

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

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

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

@@ -0,0 +1,277 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const Chatbot_1 = require("../Chatbot/Chatbot");
+const ChatbotConversationHistoryNav_1 = __importDefault(require("./ChatbotConversationHistoryNav"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const ERROR = {
+    bodyText: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', (0, jsx_runtime_1.jsx)("a", { href: "", children: "contact the support team" }), "."] })),
+    buttonText: 'Reload',
+    buttonIcon: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, { size: "sm" }),
+    hasButton: true,
+    titleText: 'Could not load chat history',
+    status: react_core_1.EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
+const NO_RESULTS = {
+    bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
+    titleText: 'No results found',
+    icon: react_icons_1.SearchIcon
+};
+const EMPTY_STATE = {
+    bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+    titleText: 'Start a new chat',
+    icon: react_icons_1.OutlinedCommentsIcon
+};
+const ERROR_WITHOUT_BUTTON = {
+    bodyText: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', (0, jsx_runtime_1.jsx)("a", { href: "", children: "contact the support team" }), "."] })),
+    buttonText: 'Reload',
+    buttonIcon: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, { size: "sm" }),
+    hasButton: false,
+    titleText: 'Could not load chat history',
+    status: react_core_1.EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
+describe('ChatbotConversationHistoryNav', () => {
+    const onDrawerToggle = jest.fn();
+    const initialConversations = [
+        {
+            id: '1',
+            text: 'ChatBot documentation'
+        }
+    ];
+    it('should open the conversation history navigation drawer', () => {
+        (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.queryByText('ChatBot documentation')).toBeInTheDocument();
+    });
+    it('should display the conversations for grouped conversations', () => {
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: groupedConversations }));
+        expect(react_1.screen.queryByText('Chatbot extension')).toBeInTheDocument();
+    });
+    it('should apply the reversed class when reverseButtonOrder is true', () => {
+        (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');
+    });
+    it('should invoke handleTextInputChange callback when user searches for conversations', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: groupedConversations, handleTextInputChange: handleSearch }));
+        const searchInput = react_1.screen.getByPlaceholderText(/Search/i);
+        react_1.fireEvent.change(searchInput, { target: { value: 'Chatbot' } });
+        expect(handleSearch).toHaveBeenCalledWith('Chatbot');
+    });
+    it('should close the drawer when escape key is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
+        (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 }));
+        react_1.fireEvent.keyDown(react_1.screen.getByPlaceholderText(/Search/i), {
+            key: 'Escape',
+            code: 'Escape',
+            keyCode: 27,
+            charCode: 27
+        });
+        (0, react_1.waitFor)(() => {
+            expect(react_1.screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
+        });
+    }));
+    it('should be resizable', () => {
+        (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, drawerPanelContentProps: { isResizable: true, minSize: '200px' } }));
+        expect(react_1.screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('dialog', { name: /Resize/i })).toHaveAttribute('style', '--pf-v6-c-drawer__panel--md--FlexBasis: 384px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px;');
+    });
+    it('should accept drawerContentProps', () => {
+        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, drawerContentProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerContentBodyProps', () => {
+        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, drawerContentBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerHeadProps', () => {
+        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, drawerHeadProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerActionsProps', () => {
+        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, drawerActionsProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerCloseButtonProps', () => {
+        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, drawerCloseButtonProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerPanelBodyProps', () => {
+        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, drawerPanelBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should show loading state if triggered', () => {
+        (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, isLoading: true }));
+        expect(react_1.screen.getByRole('dialog', { name: /Loading chatbot chat history/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+    });
+    it('should pass alternative aria label to loading state', () => {
+        (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, isLoading: true, loadingState: { screenreaderText: 'I am a test' } }));
+        expect(react_1.screen.getByRole('dialog', { name: /I am a test/i })).toBeTruthy();
+    });
+    it('should accept errorState', () => {
+        (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, errorState: ERROR }));
+        expect(react_1.screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team . Loading... Reload/i
+        })).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: /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', () => {
+        (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, errorState: ERROR_WITHOUT_BUTTON }));
+        expect(react_1.screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team ./i
+        })).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: /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', () => {
+        (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, isLoading: true, errorState: ERROR }));
+        expect(react_1.screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
+    });
+    it('should accept emptyState', () => {
+        (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, emptyState: EMPTY_STATE }));
+        expect(react_1.screen.getByRole('dialog', {
+            name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+        })).toBeTruthy();
+    });
+    it('should accept no results state', () => {
+        (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 }));
+        expect(react_1.screen.getByRole('dialog', {
+            name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+        })).toBeTruthy();
+    });
+    it('should handle isCompact', () => {
+        (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 menuProps to Menu', () => {
+        var _a;
+        (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, menuProps: { className: 'test' } }));
+        expect((_a = react_1.screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
+    });
+    it('Passes menuContentProps to MenuContent', () => {
+        (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, menuContentProps: { className: 'test' } }));
+        expect(react_1.screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList 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, menuListProps: { className: 'test' } }));
+        expect(react_1.screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList 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 }, menuListProps: { Today: { className: 'test' } } }));
+        expect(react_1.screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuGroupProps to MenuGroup 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 }, menuGroupProps: { Today: { className: 'test' } } }));
+        expect(react_1.screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes additionalProps to MenuItem', () => {
+        (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', additionalProps: { className: 'test' } }] }));
+        expect(react_1.screen.getByRole('menuitem')).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('Does not render search actions by default', () => {
+        var _a, _b;
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: groupedConversations, handleTextInputChange: handleSearch }));
+        const searchInput = react_1.screen.getByPlaceholderText(/Search/i);
+        expect((_a = searchInput.parentElement) === null || _a === void 0 ? void 0 : _a.previousElementSibling).toBeNull();
+        expect((_b = searchInput.parentElement) === null || _b === void 0 ? void 0 : _b.nextElementSibling).toBeNull();
+    });
+    it('Renders with action at start when searchActionStart is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: groupedConversations, handleTextInputChange: handleSearch, searchActionStart: (0, jsx_runtime_1.jsx)("div", { children: "Search action start test" }) }));
+        expect(react_1.screen.getByText('Search action start test')).toBeVisible();
+    });
+    it('Renders with action at end when searchActionEnd is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: handleSearch, conversations: groupedConversations, searchActionEnd: (0, jsx_runtime_1.jsx)("div", { children: "Search action end test" }) }));
+        expect(react_1.screen.getByText('Search action end test')).toBeVisible();
+    });
+    it('Overrides default search input and actions when searchToolbar is passed', () => {
+        const handleSearch = jest.fn();
+        const groupedConversations = {
+            Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
+        };
+        (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: groupedConversations, handleTextInputChange: handleSearch, searchActionStart: (0, jsx_runtime_1.jsx)("div", { children: "Search action start test" }), searchActionEnd: (0, jsx_runtime_1.jsx)("div", { children: "Search action end test" }), searchToolbar: (0, jsx_runtime_1.jsx)("div", { children: "Custom toolbar" }) }));
+        expect(react_1.screen.queryByPlaceholderText(/Search/i)).not.toBeInTheDocument();
+        expect(react_1.screen.queryByText('Search action start test')).not.toBeInTheDocument();
+        expect(react_1.screen.queryByText('Search action end test')).not.toBeInTheDocument();
+        expect(react_1.screen.getByText('Custom toolbar')).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/ChatbotConversationHistoryNav/EmptyState.d.ts

@@ -0,0 +1,11 @@
+import { EmptyStateProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+export interface HistoryEmptyStateProps extends EmptyStateProps {
+    onClick?: () => void;
+    bodyText?: string | React.ReactNode;
+    buttonText?: string;
+    buttonIcon?: React.ReactNode;
+    hasButton?: boolean;
+}
+export declare const HistoryEmptyState: FunctionComponent<HistoryEmptyStateProps>;
+export default HistoryEmptyState;

package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.js

@@ -0,0 +1,22 @@
+"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.HistoryEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const HistoryEmptyState = (_a) => {
+    var { bodyText, buttonIcon, buttonText, status, titleText, headingLevel, onClick, hasButton = false } = _a, props = __rest(_a, ["bodyText", "buttonIcon", "buttonText", "status", "titleText", "headingLevel", "onClick", "hasButton"]);
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.EmptyState, Object.assign({ status: status, titleText: titleText, headingLevel: headingLevel }, props, { children: [(0, jsx_runtime_1.jsx)(react_core_1.EmptyStateBody, { children: bodyText }), hasButton && ((0, jsx_runtime_1.jsx)(react_core_1.EmptyStateFooter, { children: (0, jsx_runtime_1.jsx)(react_core_1.EmptyStateActions, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { icon: buttonIcon, variant: "secondary", onClick: onClick, children: buttonText }) }) }))] })));
+};
+exports.HistoryEmptyState = HistoryEmptyState;
+exports.default = exports.HistoryEmptyState;