@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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();
+        });
+    }));
+});

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

@@ -17,7 +17,7 @@ export interface ChatbotFootnotePopover {
     bannerImage?: ChatbotFootnotePopoverBannerImage;
     /** Optional CTA button that can be used to trigger an action and close the popover */
     cta?: ChatbotFootnotePopoverCTA;
-    /** Optional link that can be used to show and external link like **Learn More** */
+    /** Optional link that can be used to show an external link like **View AI policy** */
     link?: ChatbotFootnotePopoverLink;
     /** Props for PF Popover */
     popoverProps?: PopoverProps;

package/dist/cjs/ChatbotFooter/ChatbotFootnote.js

@@ -42,7 +42,7 @@ const ChatbotFootnote = (_a) => {
                 var _a;
                 setIsVisible(false);
                 (_a = popover.cta) === null || _a === void 0 ? void 0 : _a.onClick();
-            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Got it')),
+            } }, ((_b = popover.cta) === null || _b === void 0 ? void 0 : _b.label) || 'Dismiss')),
         (popover === null || popover === void 0 ? void 0 : popover.link) && (react_1.default.createElement(react_core_1.Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: react_1.default.createElement(external_link_alt_icon_1.ExternalLinkAltIcon, null), iconPosition: "end" }, popover.link.label))));
     return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props),
         popover && (react_1.default.createElement(ChatbotPopover_1.default, Object.assign({ className: "pf-chatbot__popover--footnote", "aria-label": ((_c = popover.popoverProps) === null || _c === void 0 ? void 0 : _c['aria-label']) || 'More information', isVisible: isVisible, shouldOpen: (_event, _fn) => setIsVisible(true), shouldClose: (_event, _fn) => setIsVisible(false), bodyContent: popoverBodyContent, footerContent: popoverFooterContent, minWidth: ((_d = popover.popoverProps) === null || _d === void 0 ? void 0 : _d.minWidth) || '432', maxWidth: ((_e = popover.popoverProps) === null || _e === void 0 ? void 0 : _e.maxWidth) || '432', distance: ((_f = popover.popoverProps) === null || _f === void 0 ? void 0 : _f.distance) || 16, showClose: false }, popover.popoverProps),

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

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

package/dist/cjs/ChatbotHeader/ChatbotHeader.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 ChatbotHeader_1 = __importDefault(require("./ChatbotHeader"));
+describe('ChatbotHeader', () => {
+    it('should render ChatbotHeader with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeader_1.default, null, "Chatbot Header"));
+        expect(react_2.screen.getByText('Chatbot Header')).toBeTruthy();
+    });
+    it('should render ChatbotHeader with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeader_1.default, { className: "custom-header-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+});

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

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

package/dist/cjs/ChatbotHeader/ChatbotHeaderActions.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 ChatbotHeaderActions_1 = __importDefault(require("./ChatbotHeaderActions"));
+describe('ChatbotHeaderActions', () => {
+    it('should render ChatbotHeaderActions with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderActions_1.default, null, "Chatbot Header"));
+        expect(react_2.screen.getByText('Chatbot Header')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderActions with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderActions_1.default, { className: "custom-header-action-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
+    });
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -8,7 +8,9 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const ChatbotHeaderCloseButtonBase = ({ className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom" }, tooltipProps),
+    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
                 react_1.default.createElement(react_icons_1.CloseIcon, null)) }))));
 exports.ChatbotHeaderCloseButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

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

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

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

@@ -0,0 +1,20 @@
+"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 ChatbotHeaderCloseButton_1 = require("./ChatbotHeaderCloseButton");
+describe('ChatbotHeaderCloseButton', () => {
+    it('should render ChatbotHeaderCloseButton', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
+        expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+    });
+    it('should call onClick handler when close button is pressed', () => {
+        const onClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: onClick }));
+        react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Close' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

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

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

package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.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 ChatbotHeaderMain_1 = __importDefault(require("./ChatbotHeaderMain"));
+describe('ChatbotHeaderMain', () => {
+    it('should render ChatbotHeaderMain with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMain_1.default, null, "Chatbot Header Main"));
+        expect(react_2.screen.getByText('Chatbot Header Main')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderMain with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMain_1.default, { className: "custom-header-class" }, "Chatbot Content"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -8,7 +8,9 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
 const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom" }, tooltipProps),
+    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
                 react_1.default.createElement(bars_icon_1.default, null)) }))));
 exports.ChatbotHeaderMenu = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

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

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

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

@@ -0,0 +1,20 @@
+"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 ChatbotHeaderMenu_1 = require("./ChatbotHeaderMenu");
+describe('ChatbotHeaderMenu', () => {
+    it('should render ChatbotHeaderMenu with custom class', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: jest.fn() }));
+        expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+    });
+    it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+        const onMenuToggle = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderMenu_1.ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
+        react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Toggle menu' }));
+        expect(onMenuToggle).toHaveBeenCalled();
+    });
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderOptionsDropdown.js

@@ -21,7 +21,9 @@ const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/
 const ChatbotHeaderOptionsDropdown = (_a) => {
     var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options' } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom" }, tooltipProps),
+    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.MenuToggle, { className: "pf-chatbot__button--toggle-options", variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
                 react_1.default.createElement(ellipsis_v_icon_1.default, null)), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) })));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__options ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {

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

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

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

@@ -0,0 +1,43 @@
+"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_core_1 = require("@patternfly/react-core");
+const react_2 = require("@testing-library/react");
+const ChatbotHeaderOptionsDropdown_1 = require("./ChatbotHeaderOptionsDropdown");
+describe('ChatbotHeaderOptionsDropdown', () => {
+    const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 2"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderOptionsDropdown', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderOptionsDropdown_1.ChatbotHeaderOptionsDropdown, null, dropdownItems));
+        expect(react_2.screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderOptionsDropdown_1.ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Chatbot options' }));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+            expect(react_2.screen.getByText('Option 1'));
+            expect(react_2.screen.getByText('Option 2'));
+            expect(react_2.screen.getByText('Option 3'));
+            react_2.fireEvent.click(react_2.screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -18,14 +18,16 @@ exports.ChatbotHeaderSelectorDropdown = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotHeaderSelectorDropdown = (_a) => {
-    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Chatbot selector', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = react_1.default.useState(false);
-    const [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Chatbot selector');
-    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
+    const [defaultAriaLabel, setDefaultAriaLabel] = react_1.default.useState('Select model');
+    const toggle = (toggleRef) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
     return (react_1.default.createElement(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
-            setDefaultAriaLabel(`Chatbot selector: ${value}`);
+            setDefaultAriaLabel(`Select model: ${value}`);
             setIsOptionsMenuOpen(false);
         }, onOpenChange: (isOpen) => setIsOptionsMenuOpen(isOpen), popperProps: { position: 'right', appendTo: 'inline' }, shouldFocusToggleOnSelect: true, shouldFocusFirstItemOnOpen: true, toggle: toggle }, props), children));
 };

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

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

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

@@ -0,0 +1,41 @@
+"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_core_1 = require("@patternfly/react-core");
+const react_2 = require("@testing-library/react");
+const ChatbotHeaderSelectorDropdown_1 = require("./ChatbotHeaderSelectorDropdown");
+describe('ChatbotHeaderSelectorDropdown', () => {
+    const dropdownItems = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 1"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 2"),
+        react_1.default.createElement(react_core_1.DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderSelectorDropdown', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderSelectorDropdown_1.ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
+        expect(react_2.screen.getByRole('button', { name: /Select model/i })).toBeTruthy();
+    });
+    it('should call onselect handler when a dropdown item is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onSelect = jest.fn();
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderSelectorDropdown_1.ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
+        (0, react_2.act)(() => {
+            react_2.fireEvent.click(react_2.screen.getByRole('button', { name: /Select model/i }));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+            expect(react_2.screen.getByText('Option 3'));
+            react_2.fireEvent.click(react_2.screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.d.ts

@@ -11,8 +11,10 @@ export interface ChatbotHeaderTitleProps {
     showOnFullScreen?: React.ReactNode | string;
     /** Content to display on docked screen */
     showOnDocked?: React.ReactNode | string;
-    /** Content to display on overlay screen */
+    /** Content to display on embedded screen */
     showOnEmbedded?: React.ReactNode | string;
+    /** Content to display in drawer mode */
+    showOnDrawer?: React.ReactNode | string;
     /** Content to display by default; this will be shown if a case is not explicitly set */
     showOnDefault?: React.ReactNode | string;
 }

package/dist/cjs/ChatbotHeader/ChatbotHeaderTitle.js

@@ -7,9 +7,9 @@ exports.ChatbotHeaderTitle = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const Chatbot_1 = require("../Chatbot/Chatbot");
-const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDefault }) => {
+const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen, showOnDocked, showOnEmbedded, showOnDrawer, showOnDefault }) => {
     const renderChildren = () => {
-        if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
+        if (displayMode) {
             /* eslint-disable indent */
             switch (displayMode) {
                 case Chatbot_1.ChatbotDisplayMode.fullscreen:
@@ -18,6 +18,8 @@ const ChatbotHeaderTitle = ({ className, children, displayMode, showOnFullScreen
                     return showOnDocked !== null && showOnDocked !== void 0 ? showOnDocked : showOnDefault;
                 case Chatbot_1.ChatbotDisplayMode.embedded:
                     return showOnEmbedded !== null && showOnEmbedded !== void 0 ? showOnEmbedded : showOnDefault;
+                case Chatbot_1.ChatbotDisplayMode.drawer:
+                    return showOnDrawer !== null && showOnDrawer !== void 0 ? showOnDrawer : showOnDefault;
                 default:
                     return showOnDefault;
             }

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

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

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

@@ -0,0 +1,55 @@
+"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 Chatbot_1 = require("../Chatbot/Chatbot");
+const ChatbotHeaderTitle_1 = __importDefault(require("./ChatbotHeaderTitle"));
+describe('ChatbotHeaderTitle', () => {
+    it('should render ChatbotHeaderTitle with children', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, null, "Chatbot Header Title"));
+        expect(react_2.screen.getByText('Chatbot Header Title')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderTitle with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { className: "custom-header-class" }, "Chatbot Header Title"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+    it('should render title for default display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.default, showOnDefault: "Default header title" }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for docked display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDocked: "Docked header title" }));
+        expect(react_2.screen.getByText('Docked header title')).toBeTruthy();
+    });
+    it('should fallback to default title when docked display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.docked, showOnDefault: "Default header title" }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for embedded display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnEmbedded: "Embedded header title" }));
+        expect(react_2.screen.getByText('Embedded header title')).toBeTruthy();
+    });
+    it('should fallback to default title when embedded display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.embedded, showOnDefault: "Default header title" }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for fullscreen display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnFullScreen: "Fullscreen header title", className: "custom-header-class" }));
+        expect(react_2.screen.getByText('Fullscreen header title')).toBeTruthy();
+    });
+    it('should fallback to default title when fullscreen display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, showOnDefault: "Default header title" }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for drawer display mode', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.drawer, showOnDrawer: "Drawer header title", className: "custom-header-class" }));
+        expect(react_2.screen.getByText('Drawer header title')).toBeTruthy();
+    });
+    it('should fallback to default title when drawer display mode title is not configured', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderTitle_1.default, { displayMode: Chatbot_1.ChatbotDisplayMode.drawer, showOnDefault: "Default header title" }));
+        expect(react_2.screen.getByText('Default header title')).toBeTruthy();
+    });
+});

package/dist/cjs/ChatbotToggle/ChatbotToggle.js

@@ -28,7 +28,9 @@ const ChatbotToggleBase = (_a) => {
     // Configure icon
     const closedIcon = ClosedToggleIcon ? react_1.default.createElement(ClosedToggleIcon, null) : react_1.default.createElement(ChatIcon, null);
     const icon = isChatbotVisible ? react_1.default.createElement(angle_down_icon_1.default, { "data-testid": openIconTestId }) : closedIcon;
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button ${isChatbotVisible ? 'pf-chatbot__button--active' : ''} ${isRound ? 'pf-chatbot__button--round' : ''} ${className ? className : ''}`, variant: "plain", "aria-label": toggleButtonLabel || `${tooltipLabel} toggle`, onClick: onToggleChatbot, "aria-expanded": isChatbotVisible, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -19,30 +19,38 @@ const ChatbotWelcomePrompt_1 = __importDefault(require("./ChatbotWelcomePrompt")
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
+        const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
-        expect(react_2.screen.getByText('Hello, Chatbot User')).toBeTruthy();
-        expect(react_2.screen.getByText('How may I help you today?')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(react_2.screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(react_2.screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1' }] }));
-        expect(react_2.screen.getByText('Topic 1')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(react_2.screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }] }));
-        expect(react_2.screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                { title: 'Set up account', message: 'Choose the necessary settings and preferences for your account.' }
+            ] }));
+        expect(react_2.screen.getByText('Choose the necessary settings and preferences for your account.')).toBeTruthy();
     });
     it('should render prompts with onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }] }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Topic 1/i }));
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [
+                {
+                    title: 'Set up account',
+                    message: 'Choose the necessary settings and preferences for your account.',
+                    onClick: spy
+                }
+            ] }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Set up account/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hello, Chatbot User", description: "How may I help you today?", className: "test", testId: "welcome-prompt" }));
+        (0, react_2.render)(react_1.default.createElement(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
         const element = react_2.screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });

package/dist/cjs/Compare/Compare.d.ts

@@ -0,0 +1,17 @@
+import React, { PropsWithChildren } from 'react';
+interface CompareProps {
+    /** First of two children to render */
+    firstChild: React.ReactNode;
+    /** Second of two children to render */
+    secondChild: React.ReactNode;
+    /** Display name for first child, used in mobile toggle */
+    firstChildDisplayName: string;
+    /** Display name for second child, used in mobile toggle */
+    secondChildDisplayName: string;
+    /** Aria label for mobile toggle group */
+    toggleGroupAriaLabel?: string;
+    /** Callback for when mobile toggle is used */
+    onToggleClick?: (event: MouseEvent | React.MouseEvent<any, MouseEvent> | React.KeyboardEvent<Element>) => void;
+}
+export declare const Compare: ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel }: PropsWithChildren<CompareProps>) => React.JSX.Element;
+export default Compare;

package/dist/cjs/Compare/Compare.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Compare = void 0;
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
+    const [isSelected, setIsSelected] = react_1.default.useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = react_1.default.useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        // we want to show the first if we switch to the mobile toggle view
+        // and reset/switch back to normal otherwise
+        const updateChatbotVisibility = () => {
+            if (window.innerWidth >= 901) {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(true);
+            }
+            else {
+                setShowFirstChatbot(true);
+                setShowSecondChatbot(false);
+                setIsSelected('toggle-group-chatbot-1');
+            }
+        };
+        window.addEventListener('resize', updateChatbotVisibility);
+        return () => {
+            window.removeEventListener('resize', updateChatbotVisibility);
+        };
+    }, []);
+    // this only happens on mobile
+    const handleChildToggleClick = (event) => {
+        const id = event.currentTarget.id;
+        setIsSelected(id);
+        setShowSecondChatbot(!showSecondChatbot);
+        setShowFirstChatbot(!showFirstChatbot);
+        onToggleClick && onToggleClick(event);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
+            react_1.default.createElement(react_core_1.ToggleGroup, { "aria-label": toggleGroupAriaLabel },
+                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
+                react_1.default.createElement(react_core_1.ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
+        react_1.default.createElement("div", { className: "pf-chatbot__compare" },
+            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
+            react_1.default.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+};
+exports.Compare = Compare;
+exports.default = exports.Compare;