@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.30

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/AttachmentEdit/AttachmentEdit.test.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const AttachmentEdit_1 = __importDefault(require("./AttachmentEdit"));
+describe('AttachmentEdit', () => {
+    it('should open AttachmentEdit modal', () => {
+        const props = {
+            code: 'code',
+            fileName: 'fileName',
+            onCancel: jest.fn(),
+            onSave: jest.fn(),
+            isModalOpen: true,
+            handleModalToggle: jest.fn()
+        };
+        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
+        expect(react_2.screen.getByText('Edit attachment')).toBeTruthy();
+    });
+    it('should call onSave handler when the save button is clicked', () => {
+        const onSaveHandler = jest.fn();
+        const props = {
+            code: 'code',
+            fileName: 'fileName',
+            onCancel: jest.fn(),
+            onSave: onSaveHandler,
+            isModalOpen: true,
+            handleModalToggle: jest.fn()
+        };
+        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
+        // Click on save button
+        react_2.fireEvent.click(react_2.screen.getByText('Save'));
+        expect(onSaveHandler).toHaveBeenCalledWith(expect.any(Object), 'code');
+    });
+    it('should call cancel handler when the cancel button is clicked', () => {
+        const onCancelHandler = jest.fn();
+        const props = {
+            code: 'code',
+            fileName: 'fileName',
+            onCancel: onCancelHandler,
+            onSave: jest.fn(),
+            isModalOpen: true,
+            handleModalToggle: jest.fn()
+        };
+        (0, react_2.render)(react_1.default.createElement(AttachmentEdit_1.default, Object.assign({}, props)));
+        // Click on cancel button
+        react_2.fireEvent.click(react_2.screen.getByText('Cancel'));
+        expect(onCancelHandler).toHaveBeenCalled();
+    });
+});

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

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

package/dist/cjs/Chatbot/Chatbot.test.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Chatbot_1 = __importDefault(require("./Chatbot"));
+describe('Chatbot', () => {
+    it('should render Chatbot with default display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, null, "Chatbot Content"));
+        expect(react_2.screen.getByText('Chatbot Content')).toBeTruthy();
+    });
+    it('should render Chatbot with custom ariaLabel', () => {
+        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { ariaLabel: "Chatbot" }, "Chatbot Content"));
+        expect(react_2.screen.getByLabelText('Chatbot')).toBeTruthy();
+    });
+    it('should render Chatbot with custom className', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { ariaLabel: "Chatbot", className: "custom-class" }, "Chatbot Content"));
+        const chatbotElement = container.querySelector('.custom-class');
+        expect(chatbotElement).toBeInTheDocument();
+    });
+    it('should not render Chatbot', () => {
+        (0, react_2.render)(react_1.default.createElement(Chatbot_1.default, { isVisible: false }, "Chatbot Content"));
+        expect(react_2.screen.queryByLabelText('Chatbot')).toBeFalsy();
+    });
+});

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/ChatbotAlert/ChatbotAlert.test.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const ChatbotAlert_1 = __importDefault(require("./ChatbotAlert"));
+describe('ChatbotAlert', () => {
+    it('should render ChatbotAlert with default variant', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert" }));
+        expect(react_2.screen.getByText('Chatbot Alert')).toBeTruthy();
+    });
+    it('should render ChatbotAlert with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert" }, "Chatbot Alert Content"));
+        expect(react_2.screen.getByText('Chatbot Alert Content')).toBeTruthy();
+    });
+    it('should call onClose handler when onClose button is clicked', () => {
+        const onCloseHandler = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ChatbotAlert_1.default, { title: "Chatbot Alert", onClose: onCloseHandler }, "Chatbot Alert Content"));
+        expect(react_2.screen.getByText('Chatbot Alert')).toBeTruthy();
+        expect(react_2.screen.getByText('Chatbot Alert Content')).toBeTruthy();
+        // click on the close button
+        react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        expect(onCloseHandler).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/ChatbotContent/ChatbotContent.test.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const ChatbotContent_1 = __importDefault(require("./ChatbotContent"));
+describe('ChatbotContent', () => {
+    it('should render ChatbotContent with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotContent_1.default, null, "Chatbot Content"));
+        expect(react_2.screen.getByText('Chatbot Content')).toBeTruthy();
+    });
+    it('should render ChatbotContent with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotContent_1.default, { className: "custom-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-class')).toBeTruthy();
+    });
+});

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { DropdownProps } from '@patternfly/react-core';
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { DrawerProps, MenuItemProps } from '@patternfly/react-core';
+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';
 export interface Conversation {
     /** Conversation id */
     id: string;
@@ -10,11 +11,11 @@ export interface Conversation {
     noIcon?: boolean;
     /** Conversation */
     text: string;
-    /** Dropdown items rendered in conversation options dropdown */
+    /** Dropdown items rendered in conversation settings dropdown */
     menuItems?: React.ReactNode;
-    /** Optional classname applied to conversation options dropdown */
+    /** Optional classname applied to conversation settings dropdown */
     menuClassName?: string;
-    /** Tooltip content and aria-label applied to conversation options dropdown */
+    /** Tooltip content and aria-label applied to conversation settings dropdown */
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
@@ -53,6 +54,28 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     reverseButtonOrder?: boolean;
     /** Custom test id for the drawer actions */
     drawerActionsTestId?: string;
+    /** Additional props applied to menu  */
+    menuProps?: MenuProps;
+    /** Additional props applied to panel */
+    drawerPanelContentProps?: DrawerPanelContentProps;
+    /** Additional props applied to drawer content */
+    drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+    /** Additional props applied to drawer content body */
+    drawerContentBodyProps?: DrawerContentBodyProps;
+    /** Additional props applied to drawer head */
+    drawerHeadProps?: DrawerHeadProps;
+    /** Additional props applied to drawer actions */
+    drawerActionsProps?: DrawerActionsProps;
+    /** Additional props applied to drawer close button */
+    drawerCloseButtonProps?: DrawerCloseButtonProps;
+    /** Additional props appleid to drawer panel body */
+    drawerPanelBodyProps?: DrawerPanelBodyProps;
+    /** Whether to show drawer loading state */
+    isLoading?: boolean;
+    /** Additional props for loading state */
+    loadingState?: SkeletonProps;
+    /** Content to show in error state. Error state will appear once content is passed in. */
+    errorState?: HistoryEmptyStateProps;
 }
 export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -24,8 +24,10 @@ const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotConversationHistoryDropdown"));
+const LoadingState_1 = __importDefault(require("./LoadingState"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
 const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, searchInputPlaceholder = 'Search...', searchInputAriaLabel = 'Filter menu items', handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions' } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId"]);
+    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 } = _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"]);
     const drawerRef = react_1.default.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -52,16 +54,26 @@ const ChatbotConversationHistoryNav = (_a) => {
     // Menu Content
     // - Consumers should pass an array to <Chatbot> of the list of conversations
     // - Groups could be optional, but items need to be ordered by date
-    const menuContent = (react_1.default.createElement(react_core_1.Menu, { isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId },
-        react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
-    const panelContent = (react_1.default.createElement(react_core_1.DrawerPanelContent, { focusTrap: { enabled: true }, minSize: "384px", maxSize: "384px" },
-        react_1.default.createElement(react_core_1.DrawerHead, null,
-            react_1.default.createElement(react_core_1.DrawerActions, { "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' },
-                react_1.default.createElement(react_core_1.DrawerCloseButton, { onClick: onDrawerToggle }),
-                onNewChat && react_1.default.createElement(react_core_1.Button, { onClick: onNewChat }, newChatButtonText))),
+    const renderMenuContent = () => {
+        if (errorState) {
+            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, errorState));
+        }
+        return (react_1.default.createElement(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
+            react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
+    };
+    const renderDrawerContent = () => (react_1.default.createElement(react_1.default.Fragment, null,
         handleTextInputChange && (react_1.default.createElement("div", { className: "pf-chatbot__input" },
             react_1.default.createElement(react_core_1.SearchInput, { "aria-label": searchInputAriaLabel, onChange: (_event, value) => handleTextInputChange(value), placeholder: searchInputPlaceholder }))),
-        react_1.default.createElement(react_core_1.DrawerPanelBody, null, menuContent)));
+        react_1.default.createElement(react_core_1.DrawerPanelBody, Object.assign({}, drawerPanelBodyProps), renderMenuContent())));
+    const renderPanelContent = () => {
+        const drawer = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps),
+                react_1.default.createElement(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps),
+                    react_1.default.createElement(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)),
+                    onNewChat && react_1.default.createElement(react_core_1.Button, { onClick: onNewChat }, newChatButtonText))),
+            isLoading ? react_1.default.createElement(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()));
+        return (react_1.default.createElement(react_core_1.DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps), drawer));
+    };
     // An onKeyDown property must be passed to the Drawer component to handle closing
     // the drawer panel and deactivating the focus trap via the Escape key.
     const onEscape = (event) => {
@@ -73,8 +85,8 @@ const ChatbotConversationHistoryNav = (_a) => {
         }
     };
     return (react_1.default.createElement(react_core_1.Drawer, Object.assign({ className: "pf-chatbot__history", isExpanded: isDrawerOpen, onExpand: onExpand, position: "start", onKeyDown: onEscape, isInline: displayMode === Chatbot_1.ChatbotDisplayMode.fullscreen || displayMode === Chatbot_1.ChatbotDisplayMode.embedded }, props),
-        react_1.default.createElement(react_core_1.DrawerContent, { panelContent: panelContent },
-            react_1.default.createElement(react_core_1.DrawerContentBody, null,
+        react_1.default.createElement(react_core_1.DrawerContent, Object.assign({ panelContent: renderPanelContent() }, drawerContentProps),
+            react_1.default.createElement(react_core_1.DrawerContentBody, Object.assign({}, drawerContentBodyProps),
                 react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: `${isDrawerOpen && (displayMode === Chatbot_1.ChatbotDisplayMode.default || displayMode === Chatbot_1.ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} ` }),
                     drawerContent)))));

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

@@ -17,17 +17,44 @@ require("@testing-library/jest-dom");
 const react_2 = require("@testing-library/react");
 const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryNav_1 = __importDefault(require("./ChatbotConversationHistoryNav"));
+const react_core_1 = require("@patternfly/react-core");
+const ERROR = {
+    bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
+        "To try again, check your connection and reload this page. If the issue persists,",
+        ' ',
+        react_1.default.createElement("a", { href: "" }, "contact the support team"),
+        ".")),
+    buttonText: 'Reload',
+    buttonIcon: react_1.default.createElement(react_core_1.Spinner, { size: "sm" }),
+    hasButton: true,
+    titleText: 'Could not load chat history',
+    status: react_core_1.EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
+const ERROR_WITHOUT_BUTTON = {
+    bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
+        "To try again, check your connection and reload this page. If the issue persists,",
+        ' ',
+        react_1.default.createElement("a", { href: "" }, "contact the support team"),
+        ".")),
+    buttonText: 'Reload',
+    buttonIcon: react_1.default.createElement(react_core_1.Spinner, { size: "sm" }),
+    hasButton: false,
+    titleText: 'Could not load chat history',
+    status: react_core_1.EmptyStateStatus.danger,
+    onClick: () => alert('Clicked Reload')
+};
 describe('ChatbotConversationHistoryNav', () => {
     const onDrawerToggle = jest.fn();
     const initialConversations = [
         {
             id: '1',
-            text: 'Lightspeed documentation'
+            text: 'ChatBot documentation'
         }
     ];
     it('should open the conversation history navigation drawer', () => {
         (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations }));
-        expect(react_2.screen.queryByText('Lightspeed documentation')).toBeInTheDocument();
+        expect(react_2.screen.queryByText('ChatBot documentation')).toBeInTheDocument();
     });
     it('should display the conversations for grouped conversations', () => {
         const groupedConversations = {
@@ -63,7 +90,76 @@ describe('ChatbotConversationHistoryNav', () => {
             charCode: 27
         });
         (0, react_2.waitFor)(() => {
-            expect(react_2.screen.queryByText('Lightspeed documentation')).not.toBeInTheDocument();
+            expect(react_2.screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
         });
     }));
+    it('should be resizable', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelContentProps: { isResizable: true, minSize: '200px' } }));
+        expect(react_2.screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('dialog', { name: /Resize/i })).toHaveAttribute('style', '--pf-v6-c-drawer__panel--md--FlexBasis: 384px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px;');
+    });
+    it('should accept drawerContentProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerContentBodyProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerContentBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerHeadProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerHeadProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerActionsProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerActionsProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerCloseButtonProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerCloseButtonProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should accept drawerPanelBodyProps', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, drawerPanelBodyProps: { className: 'test' } }));
+        const element = container.querySelector('.test');
+        expect(element).toBeInTheDocument();
+    });
+    it('should show loading state if triggered', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true }));
+        expect(react_2.screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+    });
+    it('should pass alternative aria label to loading state', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, loadingState: { screenreaderText: 'I am a test' } }));
+        expect(react_2.screen.getByRole('dialog', { name: /I am a test/i })).toBeTruthy();
+    });
+    it('should accept errorState', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team . Loading... Reload/i
+        })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+    });
+    it('should accept errorState without button', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, errorState: ERROR_WITHOUT_BUTTON }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team ./i
+        })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
+        expect(react_2.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+    });
+    it('should show loading state over error state if both are supplied', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
+        expect(react_2.screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
+    });
 });

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

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

package/dist/cjs/ChatbotConversationHistoryNav/EmptyState.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HistoryEmptyState = void 0;
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
+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_1.default.createElement(react_core_1.EmptyState, Object.assign({ status: status, titleText: titleText, headingLevel: headingLevel }, props),
+        react_1.default.createElement(react_core_1.EmptyStateBody, null, bodyText),
+        hasButton && (react_1.default.createElement(react_core_1.EmptyStateFooter, null,
+            react_1.default.createElement(react_core_1.EmptyStateActions, null,
+                react_1.default.createElement(react_core_1.Button, { icon: buttonIcon, variant: "secondary", onClick: onClick }, buttonText))))));
+};
+exports.HistoryEmptyState = HistoryEmptyState;
+exports.default = exports.HistoryEmptyState;

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

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

package/dist/cjs/ChatbotConversationHistoryNav/LoadingState.js

@@ -0,0 +1,45 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingState = void 0;
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = __importDefault(require("react"));
+const LoadingState = (_a) => {
+    var { screenreaderText } = _a, rest = __rest(_a, ["screenreaderText"]);
+    return (react_1.default.createElement("div", { className: "pf-chatbot__history-loading" },
+        react_1.default.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ screenreaderText: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : 'Loading chatbot conversation history', fontSize: "3xl" }, rest))),
+        react_1.default.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        react_1.default.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        react_1.default.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest))),
+        react_1.default.createElement("div", { className: "pf-chatbot__history-loading-block" },
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "sm", width: "70%" }, rest)),
+            react_1.default.createElement(react_core_1.Skeleton, Object.assign({ fontSize: "3xl" }, rest)))));
+};
+exports.LoadingState = LoadingState;
+exports.default = exports.LoadingState;

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

@@ -0,0 +1 @@
+export {};

package/dist/cjs/ChatbotFooter/ChatbotFooter.test.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const ChatbotFooter_1 = __importDefault(require("./ChatbotFooter"));
+describe('ChatbotFooter', () => {
+    it('should render ChatbotFooter with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFooter_1.default, null, "Chatbot Content"));
+        expect(react_2.screen.getByText('Chatbot Content')).toBeTruthy();
+    });
+    it('should render ChatbotFooter with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotFooter_1.default, { className: "custom-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-class')).toBeTruthy();
+    });
+});

package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/ChatbotFooter/ChatbotFooternote.test.js

@@ -0,0 +1,87 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const ChatbotFootnote_1 = __importDefault(require("./ChatbotFootnote"));
+describe('ChatbotFooternote', () => {
+    const onClick = jest.fn();
+    const popoverProps = {
+        title: 'Verify accuracy',
+        description: 'description',
+        bannerImage: {
+            src: 'src',
+            alt: 'alt'
+        },
+        cta: {
+            label: 'Got it',
+            onClick
+        },
+        link: {
+            label: 'label',
+            url: 'url'
+        }
+    };
+    it('should render ChatbotFooternote', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer" }));
+        expect(react_2.screen.getByText('Chatbot footer')).toBeTruthy();
+    });
+    it('should render ChatbotFooternote with popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            // Check if the popover is visible and click on the cta button
+            react_2.screen.getByLabelText('More information');
+            react_2.screen.getByText('Verify accuracy');
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Got it' }));
+            expect(onClick).toHaveBeenCalled();
+        });
+    }));
+    it('should call onClick handler when popover cta button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            // Check if the popover is visible and click on the cta button
+            react_2.screen.getByLabelText('More information');
+            react_2.screen.getByText('Verify accuracy');
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Got it' }));
+            expect(onClick).toHaveBeenCalled();
+        });
+    }));
+    it('should close the popover when escape is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ChatbotFootnote_1.default, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            // Check if the popover is visible and click on the cta button
+            react_2.screen.getByLabelText('More information');
+            react_2.screen.getByText('Verify accuracy');
+        });
+        (0, react_2.act)(() => {
+            // trigger escape to close the popover
+            react_2.fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(react_2.screen.queryByText('Verify accuracy')).toBeFalsy();
+        });
+    }));
+});