@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

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,5 +1,5 @@
-import React from 'react';
-import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { DrawerProps, MenuItemProps, MenuProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, ButtonProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -36,6 +36,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     conversations: Conversation[] | {
         [key: string]: Conversation[];
     };
+    /** Additional button props for new chat button. */
+    newChatButtonProps?: ButtonProps;
     /** Text shown in blue button */
     newChatButtonText?: string;
     /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -82,6 +84,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     noResultsState?: HistoryEmptyStateProps;
     /** Sets drawer to compact styling. */
     isCompact?: boolean;
+    /** Display title  */
+    title?: string;
 }
-export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
+export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -9,40 +9,37 @@ 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';
+import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Menu, MenuList, MenuGroup, MenuItem, MenuContent, Title, Icon } from '@patternfly/react-core';
+import { OutlinedClockIcon, OutlinedCommentAltIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 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, 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 = React.useRef(null);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, 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, title = 'Chat history' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title"]);
+    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 = () => (_jsx(_Fragment, { children: _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, { size: isCompact ? 'sm' : undefined, 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, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat }, newChatButtonProps, { children: newChatButtonText })))] })) })), _jsxs("div", { className: "pf-chatbot__title-container", children: [_jsxs(Title, { headingLevel: "h3", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: _jsx(OutlinedClockIcon, {}) }), title] }), !isLoading && handleTextInputChange && (_jsx("div", { className: "pf-chatbot__input", children: _jsx(SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }) }))] }), 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 ${isCompact ? 'pf-m-compact' : ''}`, 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,26 @@ 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 disable new chat button', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: true, conversations: initialConversations, newChatButtonProps: { isDisabled: true }, onNewChat: jest.fn() }));
+        expect(screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+    });
     it('should not apply the reversed class when reverseButtonOrder is false', () => {
-        render(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 +78,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 +96,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 +151,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,23 +161,36 @@ 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(React.createElement(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" }));
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS, isCompact: true, "data-testid": "drawer" }));
         expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
     });
+    it('should display the default title', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(screen.getByText('Chat history')).toBeInTheDocument();
+    });
+    it('should display the custom title', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { title: "PatternFly history", onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        expect(screen.getByText('PatternFly history')).toBeInTheDocument();
+    });
+    it('should display the clock icon', () => {
+        const { container } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
+        const iconElement = container.querySelector('.pf-chatbot__title-icon');
+        expect(iconElement).toBeInTheDocument();
+    });
 });

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

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

package/dist/esm/ChatbotConversationHistoryNav/EmptyState.js

@@ -9,14 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, EmptyState, EmptyStateActions, EmptyStateBody, EmptyStateFooter } from '@patternfly/react-core';
-import React from 'react';
 export 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 (React.createElement(EmptyState, Object.assign({ status: status, titleText: titleText, headingLevel: headingLevel }, props),
-        React.createElement(EmptyStateBody, null, bodyText),
-        hasButton && (React.createElement(EmptyStateFooter, null,
-            React.createElement(EmptyStateActions, null,
-                React.createElement(Button, { icon: buttonIcon, variant: "secondary", onClick: onClick }, buttonText))))));
+    return (_jsxs(EmptyState, Object.assign({ status: status, titleText: titleText, headingLevel: headingLevel }, props, { children: [_jsx(EmptyStateBody, { children: bodyText }), hasButton && (_jsx(EmptyStateFooter, { children: _jsx(EmptyStateActions, { children: _jsx(Button, { icon: buttonIcon, variant: "secondary", onClick: onClick, children: buttonText }) }) }))] })));
 };
 export default HistoryEmptyState;

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

@@ -1,4 +1,4 @@
 import { SkeletonProps } from '@patternfly/react-core';
-import React from 'react';
-export declare const LoadingState: React.FunctionComponent<SkeletonProps>;
+import type { FunctionComponent } from 'react';
+export declare const LoadingState: FunctionComponent<SkeletonProps>;
 export default LoadingState;

package/dist/esm/ChatbotConversationHistoryNav/LoadingState.js

@@ -9,30 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from '@patternfly/react-core';
-import React from 'react';
 export const LoadingState = (_a) => {
     var { screenreaderText } = _a, rest = __rest(_a, ["screenreaderText"]);
-    return (React.createElement("div", { className: "pf-chatbot__history-loading" },
-        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
-            React.createElement(Skeleton, Object.assign({ screenreaderText: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : 'Loading chatbot conversation history', fontSize: "3xl" }, rest))),
-        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
-            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
-        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
-            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
-        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
-            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
-        React.createElement("div", { className: "pf-chatbot__history-loading-block" },
-            React.createElement(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
-            React.createElement(Skeleton, Object.assign({ fontSize: "3xl" }, rest)))));
+    return (_jsxs("div", { className: "pf-chatbot__history-loading", children: [_jsx("div", { className: "pf-chatbot__history-loading-block", children: _jsx(Skeleton, Object.assign({ screenreaderText: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : 'Loading chatbot conversation history', fontSize: "3xl" }, rest)) }), _jsxs("div", { className: "pf-chatbot__history-loading-block", children: [_jsx(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest))] }), _jsxs("div", { className: "pf-chatbot__history-loading-block", children: [_jsx(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest))] }), _jsxs("div", { className: "pf-chatbot__history-loading-block", children: [_jsx(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest))] }), _jsxs("div", { className: "pf-chatbot__history-loading-block", children: [_jsx(Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)), _jsx(Skeleton, Object.assign({ fontSize: "3xl" }, rest))] })] }));
 };
 export default LoadingState;

package/dist/esm/ChatbotFooter/ChatbotFooter.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
+import type { HTMLProps, FunctionComponent } from 'react';
+export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
     /** Children for the Footer that supports MessageBar and FootNote components*/
     children?: React.ReactNode;
     /** Custom classname for the Footer component */
     className?: string;
     isCompact?: boolean;
 }
-export declare const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps>;
+export declare const ChatbotFooter: FunctionComponent<ChatbotFooterProps>;
 export default ChatbotFooter;