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

package/dist/esm/Chatbot/Chatbot.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 export var ChatbotDisplayMode;
 (function (ChatbotDisplayMode) {
@@ -23,13 +21,13 @@ export var ChatbotDisplayMode;
     ChatbotDisplayMode["drawer"] = "drawer";
 })(ChatbotDisplayMode || (ChatbotDisplayMode = {}));
 const ChatbotBase = (_a) => {
-    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
+    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact"]);
     // Configure animations
     const motionChatbot = {
         visible: { opacity: 1, y: 0 },
         hidden: { opacity: 0, y: '16px' }
     };
-    return (React.createElement(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (React.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
+    return (_jsx(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props, { children: isVisible ? (_jsx("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef, children: children })) : undefined })));
 };
-const Chatbot = React.forwardRef((props, ref) => (React.createElement(ChatbotBase, Object.assign({ innerRef: ref }, props))));
+const Chatbot = forwardRef((props, ref) => (_jsx(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 export default Chatbot;

package/dist/esm/Chatbot/Chatbot.test.js

@@ -1,23 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Chatbot from './Chatbot';
 describe('Chatbot', () => {
     it('should render Chatbot with default display mode', () => {
-        render(React.createElement(Chatbot, null, "Chatbot Content"));
+        render(_jsx(Chatbot, { children: "Chatbot Content" }));
         expect(screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render Chatbot with custom ariaLabel', () => {
-        render(React.createElement(Chatbot, { ariaLabel: "Chatbot" }, "Chatbot Content"));
+        render(_jsx(Chatbot, { ariaLabel: "Chatbot", children: "Chatbot Content" }));
         expect(screen.getByLabelText('Chatbot')).toBeTruthy();
     });
     it('should render Chatbot with custom className', () => {
-        const { container } = render(React.createElement(Chatbot, { ariaLabel: "Chatbot", className: "custom-class" }, "Chatbot Content"));
+        const { container } = render(_jsx(Chatbot, { ariaLabel: "Chatbot", className: "custom-class", children: "Chatbot Content" }));
         const chatbotElement = container.querySelector('.custom-class');
         expect(chatbotElement).toBeInTheDocument();
     });
     it('should not render Chatbot', () => {
-        render(React.createElement(Chatbot, { isVisible: false }, "Chatbot Content"));
+        render(_jsx(Chatbot, { isVisible: false, children: "Chatbot Content" }));
         expect(screen.queryByLabelText('Chatbot')).toBeFalsy();
     });
+    it('should handle isCompact', () => {
+        render(_jsx(Chatbot, { "data-testid": "chatbot", isVisible: true, isCompact: true, children: "Chatbot Content" }));
+        expect(screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/esm/ChatbotAlert/ChatbotAlert.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { AlertProps } from '@patternfly/react-core';
 export interface ChatbotAlert extends AlertProps {
     /** Callback for when close button is clicked; if none is provided, there will be no way to dismiss the alert */
     onClose?: () => void;
 }
-export declare const ChatbotAlert: React.FunctionComponent<ChatbotAlert>;
+export declare const ChatbotAlert: FunctionComponent<ChatbotAlert>;
 export default ChatbotAlert;

package/dist/esm/ChatbotAlert/ChatbotAlert.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 export const ChatbotAlert = (_a) => {
     var { variant = 'info', title, children = '', onClose } = _a, props = __rest(_a, ["variant", "title", "children", "onClose"]);
-    return (React.createElement("div", { className: "pf-chatbot__alert" },
-        React.createElement(Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
-            actionClose: React.createElement(AlertActionCloseButton, { onClose: onClose })
-        }), props), children)));
+    return (_jsx("div", { className: "pf-chatbot__alert", children: _jsx(Alert, Object.assign({ variant: variant, isInline: true, title: title, component: "h6" }, (onClose && {
+            actionClose: _jsx(AlertActionCloseButton, { onClose: onClose })
+        }), props, { children: children })) }));
 };
 export default ChatbotAlert;

package/dist/esm/ChatbotAlert/ChatbotAlert.test.js

@@ -1,18 +1,18 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { fireEvent, render, screen } from '@testing-library/react';
 import ChatbotAlert from './ChatbotAlert';
 describe('ChatbotAlert', () => {
     it('should render ChatbotAlert with default variant', () => {
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert" }));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert" }));
         expect(screen.getByText('Chatbot Alert')).toBeTruthy();
     });
     it('should render ChatbotAlert with children', () => {
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert" }, "Chatbot Alert Content"));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert", children: "Chatbot Alert Content" }));
         expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
     });
     it('should call onClose handler when onClose button is clicked', () => {
         const onCloseHandler = jest.fn();
-        render(React.createElement(ChatbotAlert, { title: "Chatbot Alert", onClose: onCloseHandler }, "Chatbot Alert Content"));
+        render(_jsx(ChatbotAlert, { title: "Chatbot Alert", onClose: onCloseHandler, children: "Chatbot Alert Content" }));
         expect(screen.getByText('Chatbot Alert')).toBeTruthy();
         expect(screen.getByText('Chatbot Alert Content')).toBeTruthy();
         // click on the close button

package/dist/esm/ChatbotContent/ChatbotContent.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
-export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+import type { HTMLProps, FunctionComponent } from 'react';
+export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
     /** Content to be displayed in the chatbot */
     children: React.ReactNode;
     /** Custom classname for the ChatbotContent component */
     className?: string;
 }
-export declare const ChatbotContent: React.FunctionComponent<ChatbotContentProps>;
+export declare const ChatbotContent: FunctionComponent<ChatbotContentProps>;
 export default ChatbotContent;

package/dist/esm/ChatbotContent/ChatbotContent.js

@@ -9,12 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Main
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChatbotContent = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props), children));
+    return (_jsx("div", Object.assign({ className: `pf-chatbot__content ${className !== null && className !== void 0 ? className : ''}` }, props, { children: children })));
 };
 export default ChatbotContent;

package/dist/esm/ChatbotContent/ChatbotContent.test.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import ChatbotContent from './ChatbotContent';
 describe('ChatbotContent', () => {
     it('should render ChatbotContent with children', () => {
-        render(React.createElement(ChatbotContent, null, "Chatbot Content"));
+        render(_jsx(ChatbotContent, { children: "Chatbot Content" }));
         expect(screen.getByText('Chatbot Content')).toBeTruthy();
     });
     it('should render ChatbotContent with custom classname', () => {
-        const { container } = render(React.createElement(ChatbotContent, { className: "custom-class" }, "Chatbot Content"));
+        const { container } = render(_jsx(ChatbotContent, { className: "custom-class", children: "Chatbot Content" }));
         expect(container.querySelector('.custom-class')).toBeTruthy();
     });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { DropdownProps } from '@patternfly/react-core';
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
     /** Dropdown items rendered in conversation settings dropdown */
@@ -10,5 +10,5 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
 }
-export declare const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps>;
+export declare const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps>;
 export default ChatbotConversationHistoryDropdown;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -1,20 +1,16 @@
-// ============================================================================
-// Chatbot Header - Chatbot Conversation History Nav
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 // Import PatternFly components
 import { Tooltip, MenuToggle, Dropdown } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggle = (toggleRef) => (React.createElement(Tooltip, { className: "pf-chatbot__tooltip", content: label !== null && label !== void 0 ? label : 'Conversation options', position: "bottom", 
+    const [isOpen, setIsOpen] = useState(false);
+    const toggle = (toggleRef) => (_jsx(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" },
-        React.createElement(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" },
-            React.createElement(EllipsisIcon, null))));
-    return (React.createElement(Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
+        aria: "none", children: _jsx(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: _jsx(EllipsisIcon, {}) }) }));
+    return (_jsx(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);
-        }, onOpenChange: (isOpen) => setIsOpen(isOpen), popperProps: { position: 'right' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, menuItems));
+        }, onOpenChange: (isOpen) => setIsOpen(isOpen), popperProps: { position: 'right' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle, children: menuItems }));
 };
 export default ChatbotConversationHistoryDropdown;

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

@@ -7,22 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
 import { DropdownItem } from '@patternfly/react-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ChatbotConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 describe('ChatbotConversationHistoryDropdown', () => {
     const onSelect = jest.fn();
-    const menuItems = (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, null, "Rename"),
-        React.createElement(DropdownItem, null, "Delete")));
+    const menuItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "Rename" }), _jsx(DropdownItem, { children: "Delete" })] }));
     it('should render the dropdown', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
         expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
     });
     it('should display the dropdown menuItems', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         expect(toggle).toBeInTheDocument();
         fireEvent.click(toggle);
@@ -32,14 +30,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
         });
     });
     it('should invoke onSelect callback when menuitem is clicked', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Rename'));
         expect(onSelect).toHaveBeenCalled();
     });
     it('should toggle the dropdown when menuitem is clicked', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Delete'));
@@ -47,7 +45,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
         expect(screen.queryByText('Delete')).not.toBeInTheDocument();
     });
     it('should close the dropdown when user clicks outside', () => {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
         const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -55,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
         expect(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* () {
-        render(React.createElement(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
+        render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
         const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i });
         fireEvent(toggle, new MouseEvent('mouseenter', {
             bubbles: false,

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
@@ -80,6 +80,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     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;
 }
-export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
+export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -9,10 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Header - Chatbot Conversation History Nav
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, Fragment } from 'react';
 // Import PatternFly components
 import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Menu, MenuList, MenuGroup, MenuItem, MenuContent } from '@patternfly/react-core';
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
@@ -21,28 +19,27 @@ import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export 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 } = _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"]);
-    const drawerRef = React.useRef(null);
+    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"]);
+    const drawerRef = useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
     const getNavItem = (conversation) => {
         var _a;
-        return (React.createElement(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id, key: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : React.createElement(OutlinedCommentAltIcon, null) }), (conversation.menuItems
+        return (_jsx(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 : _jsx(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
             ? {
-                actions: (React.createElement(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
+                actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
-            : {}), conversation.additionalProps), conversation.text));
+            : {}), conversation.additionalProps, { children: conversation.text }), conversation.id));
     };
     const buildMenu = () => {
         if (Array.isArray(conversations)) {
             // Render for array of MenuItemObject
-            return (React.createElement(MenuList, null, conversations.map((conversation) => (React.createElement(React.Fragment, { key: conversation.id }, getNavItem(conversation))))));
+            return (_jsx(MenuList, { children: conversations.map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }));
         }
         else {
             // Render for object with NavItemObject arrays as values
-            return (React.createElement(React.Fragment, null, Object.keys(conversations).map((navGroup) => (React.createElement(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, key: navGroup },
-                React.createElement(MenuList, null, conversations[navGroup].map((conversation) => (React.createElement(React.Fragment, { key: conversation.id }, getNavItem(conversation))))))))));
+            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, { className: "pf-chatbot__menu-item-header", label: navGroup, children: _jsx(MenuList, { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }) }, navGroup))) }));
         }
     };
     // Menu Content
@@ -50,29 +47,20 @@ export const ChatbotConversationHistoryNav = (_a) => {
     // - Groups could be optional, but items need to be ordered by date
     const renderMenuContent = () => {
         if (errorState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, errorState));
+            return _jsx(HistoryEmptyState, Object.assign({}, errorState));
         }
         if (emptyState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, emptyState));
+            return _jsx(HistoryEmptyState, Object.assign({}, emptyState));
         }
         if (noResultsState) {
-            return React.createElement(HistoryEmptyState, Object.assign({}, noResultsState));
+            return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
         }
-        return (React.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
-            React.createElement(MenuContent, null, buildMenu())));
+        return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, { children: buildMenu() }) })));
     };
-    const renderDrawerContent = () => (React.createElement(React.Fragment, null,
-        handleTextInputChange && (React.createElement("div", { className: "pf-chatbot__input" },
-            React.createElement(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        React.createElement(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
+    const renderDrawerContent = () => (_jsxs(_Fragment, { children: [handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) })), _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() }))] }));
     const renderPanelContent = () => {
-        const drawer = (React.createElement(React.Fragment, null,
-            React.createElement(DrawerHead, Object.assign({}, drawerHeadProps),
-                React.createElement(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
-                    React.createElement(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
-                    onNewChat && React.createElement(Button, { onClick: onNewChat }, newChatButtonText))),
-            isLoading ? React.createElement(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()));
-        return (React.createElement(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
+        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, { size: isCompact ? 'sm' : undefined, onClick: onNewChat, children: newChatButtonText }))] })) })), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        return (_jsx(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.
@@ -84,11 +72,6 @@ export const ChatbotConversationHistoryNav = (_a) => {
             }
         }
     };
-    return (React.createElement(Drawer, Object.assign({ className: "pf-chatbot__history", isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props),
-        React.createElement(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
-            React.createElement(DrawerContentBody, Object.assign({}, drawerContentBodyProps),
-                React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
-                    drawerContent)))));
+    return (_jsx(Drawer, Object.assign({ className: `pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`, isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded }, props, { children: _jsx(DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps, { children: _jsx(DrawerContentBody, Object.assign({}, drawerContentBodyProps, { children: _jsxs(_Fragment, { children: [_jsx("div", { className: `${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }), drawerContent] }) })) })) })));
 };
 export default ChatbotConversationHistoryNav;

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
@@ -15,13 +15,9 @@ import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
 import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 const ERROR = {
-    bodyText: (React.createElement(React.Fragment, null,
-        "To try again, check your connection and reload this page. If the issue persists,",
-        ' ',
-        React.createElement("a", { href: "" }, "contact the support team"),
-        ".")),
+    bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
-    buttonIcon: React.createElement(Spinner, { size: "sm" }),
+    buttonIcon: _jsx(Spinner, { size: "sm" }),
     hasButton: true,
     titleText: 'Could not load chat history',
     status: EmptyStateStatus.danger,
@@ -38,13 +34,9 @@ const EMPTY_STATE = {
     icon: OutlinedCommentsIcon
 };
 const ERROR_WITHOUT_BUTTON = {
-    bodyText: (React.createElement(React.Fragment, null,
-        "To try again, check your connection and reload this page. If the issue persists,",
-        ' ',
-        React.createElement("a", { href: "" }, "contact the support team"),
-        ".")),
+    bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
-    buttonIcon: React.createElement(Spinner, { size: "sm" }),
+    buttonIcon: _jsx(Spinner, { size: "sm" }),
     hasButton: false,
     titleText: 'Could not load chat history',
     status: EmptyStateStatus.danger,
@@ -59,22 +51,22 @@ describe('ChatbotConversationHistoryNav', () => {
         }
     ];
     it('should open the conversation history navigation drawer', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
         expect(screen.queryByText('ChatBot documentation')).toBeInTheDocument();
     });
     it('should display the conversations for grouped conversations', () => {
         const groupedConversations = {
             Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
         };
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groupedConversations }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groupedConversations }));
         expect(screen.queryByText('Chatbot extension')).toBeInTheDocument();
     });
     it('should apply the reversed class when reverseButtonOrder is true', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations }));
         expect(screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
     });
     it('should not apply the reversed class when reverseButtonOrder is false', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: initialConversations }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: initialConversations }));
         expect(screen.getByTestId('chatbot-nav-drawer-actions')).not.toHaveClass('pf-v6-c-drawer__actions--reversed');
     });
     it('should invoke handleTextInputChange callback when user searches for conversations', () => {
@@ -82,13 +74,13 @@ describe('ChatbotConversationHistoryNav', () => {
         const groupedConversations = {
             Today: [...initialConversations, { id: '2', text: 'Chatbot extension' }]
         };
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: groupedConversations, handleTextInputChange: handleSearch }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, conversations: groupedConversations, handleTextInputChange: handleSearch }));
         const searchInput = screen.getByPlaceholderText(/Search/i);
         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* () {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations }));
         fireEvent.keyDown(screen.getByPlaceholderText(/Search/i), {
             key: 'Escape',
             code: 'Escape',
@@ -100,52 +92,52 @@ describe('ChatbotConversationHistoryNav', () => {
         });
     }));
     it('should be resizable', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelContentProps: { isResizable: true, minSize: '200px' } }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelContentProps: { isResizable: true, minSize: '200px' } }));
         expect(screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
         expect(screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
         expect(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 } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentProps: { className: 'test' } }));
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
     it('should accept drawerContentBodyProps', () => {
-        const { container } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentBodyProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentBodyProps: { className: 'test' } }));
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
     it('should accept drawerHeadProps', () => {
-        const { container } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerHeadProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerHeadProps: { className: 'test' } }));
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
     it('should accept drawerActionsProps', () => {
-        const { container } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerActionsProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerActionsProps: { className: 'test' } }));
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
     it('should accept drawerCloseButtonProps', () => {
-        const { container } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerCloseButtonProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerCloseButtonProps: { className: 'test' } }));
         const element = container.querySelector('.test');
         expect(element).toBeInTheDocument();
     });
     it('should accept drawerPanelBodyProps', () => {
-        const { container } = render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelBodyProps: { className: 'test' } }));
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: 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', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true }));
         expect(screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
         expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
     });
     it('should pass alternative aria label to loading state', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, loadingState: { screenreaderText: 'I am a test' } }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, loadingState: { screenreaderText: 'I am a test' } }));
         expect(screen.getByRole('dialog', { name: /I am a test/i })).toBeTruthy();
     });
     it('should accept errorState', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR }));
         expect(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();
@@ -155,7 +147,7 @@ describe('ChatbotConversationHistoryNav', () => {
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should accept errorState without button', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR_WITHOUT_BUTTON }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR_WITHOUT_BUTTON }));
         expect(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();
@@ -165,19 +157,23 @@ describe('ChatbotConversationHistoryNav', () => {
         expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
     });
     it('should show loading state over error state if both are supplied', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
         expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
     });
     it('should accept emptyState', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, emptyState: EMPTY_STATE }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, emptyState: EMPTY_STATE }));
         expect(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', () => {
-        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS }));
         expect(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', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS, isCompact: true, "data-testid": "drawer" }));
+        expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
+    });
 });