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

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.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderCloseButtonProps {
+    /** Callback function for when button is clicked */
+    onClick: () => void;
+    /** Custom classname for the header component */
+    className?: string;
+    /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+    tooltipProps?: TooltipProps;
+    /** Aria label for menu */
+    menuAriaLabel?: string;
+    /** Ref applied to menu */
+    innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
+}
+export declare const ChatbotHeaderCloseButton: React.ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatbotHeaderCloseButton = void 0;
+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", 
+        // 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.d.ts

@@ -11,5 +11,7 @@ export interface ChatbotHeaderMenuProps {
     menuAriaLabel?: string;
     /** Ref applied to menu */
     innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
 }
 export declare const ChatbotHeaderMenu: React.ForwardRefExoticComponent<ChatbotHeaderMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -7,8 +7,10 @@ exports.ChatbotHeaderMenu = void 0;
 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 }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: "Menu", position: "bottom" }, tooltipProps),
+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", 
+        // 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.test.d.ts

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

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

@@ -0,0 +1,47 @@
+"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();
+    });
+});

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

@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/dist/cjs/ChatbotHeader/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./ChatbotHeaderMenu"), exports);
 __exportStar(require("./ChatbotHeaderTitle"), exports);
 __exportStar(require("./ChatbotHeaderOptionsDropdown"), exports);
 __exportStar(require("./ChatbotHeaderSelectorDropdown"), exports);
+__exportStar(require("./ChatbotHeaderCloseButton"), exports);

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/CodeModal/CodeModal.js

@@ -75,24 +75,14 @@ const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    /* eslint-disable indent */
-    const getHeight = (displayMode) => {
-        switch (displayMode) {
-            case Chatbot_1.ChatbotDisplayMode.docked:
-                return '100vh';
-            default:
-                return '45vh';
-        }
-    };
-    /* eslint-enable indent */
     const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
         react_1.default.createElement(react_core_1.ModalHeader, { title: title, labelId: "code-modal-title" }),
         react_1.default.createElement(react_core_1.ModalBody, { id: "code-modal-body" },
             react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__code-modal-body" },
                 react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details" },
                     react_1.default.createElement(FileDetails_1.default, { fileName: fileName })),
-                react_1.default.createElement(react_core_1.StackItem, null,
-                    react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
+                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-body" },
+                    react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
                             glyphMargin: false,
                             folding: false
                         } }, props))))),

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;

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

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

package/dist/cjs/Compare/Compare.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");
+require("@testing-library/jest-dom");
+const Compare_1 = __importDefault(require("./Compare"));
+const firstChild = (react_1.default.createElement("div", null,
+    react_1.default.createElement("h1", null, "Child 1")));
+const secondChild = (react_1.default.createElement("div", null,
+    react_1.default.createElement("h1", null, "Child 2")));
+describe('Compare', () => {
+    it('should render compare correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Compare_1.default, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(react_2.screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default } from './Compare';
+export * from './Compare';