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

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

@@ -0,0 +1,82 @@
+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());
+    });
+};
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import ChatbotFootnote from './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', () => {
+        render(React.createElement(ChatbotFootnote, { label: "Chatbot footer" }));
+        expect(screen.getByText('Chatbot footer')).toBeTruthy();
+    });
+    it('should render ChatbotFooternote with popover', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ChatbotFootnote, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        act(() => {
+            fireEvent.click(screen.getByRole('button'));
+        });
+        yield waitFor(() => {
+            // Check if the popover is visible and click on the cta button
+            screen.getByLabelText('More information');
+            screen.getByText('Verify accuracy');
+            fireEvent.click(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* () {
+        render(React.createElement(ChatbotFootnote, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        act(() => {
+            fireEvent.click(screen.getByRole('button'));
+        });
+        yield waitFor(() => {
+            // Check if the popover is visible and click on the cta button
+            screen.getByLabelText('More information');
+            screen.getByText('Verify accuracy');
+            fireEvent.click(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* () {
+        render(React.createElement(ChatbotFootnote, { label: "Chatbot footer", popover: popoverProps }));
+        // click on the footer button
+        act(() => {
+            fireEvent.click(screen.getByRole('button'));
+        });
+        yield waitFor(() => {
+            // Check if the popover is visible and click on the cta button
+            screen.getByLabelText('More information');
+            screen.getByText('Verify accuracy');
+        });
+        act(() => {
+            // trigger escape to close the popover
+            fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+        });
+        yield waitFor(() => {
+            expect(screen.queryByText('Verify accuracy')).toBeFalsy();
+        });
+    }));
+});

package/dist/esm/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/esm/ChatbotFooter/ChatbotFootnote.js

@@ -36,7 +36,7 @@ export 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.createElement(Button, { variant: "link", component: "a", href: popover.link.url, target: "_blank", icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "end" }, popover.link.label))));
     return (React.createElement("div", Object.assign({ className: `pf-chatbot__footnote ${className !== null && className !== void 0 ? className : ''}` }, props),
         popover && (React.createElement(ChatbotPopover, 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/esm/ChatbotHeader/ChatbotHeader.test.d.ts

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

package/dist/esm/ChatbotHeader/ChatbotHeader.test.js

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

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

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

package/dist/esm/ChatbotHeader/ChatbotHeaderActions.test.js

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

package/dist/esm/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/esm/ChatbotHeader/ChatbotHeaderCloseButton.js

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+describe('ChatbotHeaderCloseButton', () => {
+    it('should render ChatbotHeaderCloseButton', () => {
+        const { container } = render(React.createElement(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();
+        render(React.createElement(ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: onClick }));
+        fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

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

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

package/dist/esm/ChatbotHeader/ChatbotHeaderMain.test.js

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

package/dist/esm/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/esm/ChatbotHeader/ChatbotHeaderMenu.js

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+describe('ChatbotHeaderMenu', () => {
+    it('should render ChatbotHeaderMenu with custom class', () => {
+        const { container } = render(React.createElement(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();
+        render(React.createElement(ChatbotHeaderMenu, { className: "custom-header-menu", onMenuToggle: onMenuToggle }));
+        fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+        expect(onMenuToggle).toHaveBeenCalled();
+    });
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderOptionsDropdown.js

@@ -15,7 +15,9 @@ import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon
 export const ChatbotHeaderOptionsDropdown = (_a) => {
     var { className, children, onSelect, tooltipProps, menuToggleAriaLabel = 'Chatbot options' } = _a, props = __rest(_a, ["className", "children", "onSelect", "tooltipProps", "menuToggleAriaLabel"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
-    const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: "Chatbot options", position: "bottom" }, tooltipProps),
+    const toggle = (toggleRef) => (React.createElement(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.createElement(MenuToggle, { className: "pf-chatbot__button--toggle-options", variant: "plain", "aria-label": menuToggleAriaLabel, ref: toggleRef, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
                 React.createElement(EllipsisIcon, null)), isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) })));
     return (React.createElement(Dropdown, Object.assign({ className: `pf-chatbot__options ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {

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

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

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

@@ -0,0 +1,38 @@
+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());
+    });
+};
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+describe('ChatbotHeaderOptionsDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderOptionsDropdown', () => {
+        render(React.createElement(ChatbotHeaderOptionsDropdown, null, dropdownItems));
+        expect(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 } = render(React.createElement(ChatbotHeaderOptionsDropdown, { className: "custom-header-options-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 1'));
+            expect(screen.getByText('Option 2'));
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -12,14 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Tooltip, Dropdown, MenuToggle } from '@patternfly/react-core';
 export 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.useState(false);
-    const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Chatbot selector');
-    const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom" }, tooltipProps),
+    const [defaultAriaLabel, setDefaultAriaLabel] = React.useState('Select model');
+    const toggle = (toggleRef) => (React.createElement(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(MenuToggle, { variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen) }, value)));
     return (React.createElement(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/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.d.ts

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

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

@@ -0,0 +1,36 @@
+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());
+    });
+};
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderSelectorDropdown } from './ChatbotHeaderSelectorDropdown';
+describe('ChatbotHeaderSelectorDropdown', () => {
+    const dropdownItems = (React.createElement(React.Fragment, null,
+        React.createElement(DropdownItem, null, "Option 1"),
+        React.createElement(DropdownItem, null, "Option 2"),
+        React.createElement(DropdownItem, null, "Option 3")));
+    it('should render ChatbotHeaderSelectorDropdown', () => {
+        render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1" }, dropdownItems));
+        expect(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 } = render(React.createElement(ChatbotHeaderSelectorDropdown, { value: "Option 1", className: "custom-header-selector-dropdown", onSelect: onSelect }, dropdownItems));
+        act(() => {
+            fireEvent.click(screen.getByRole('button', { name: /Select model/i }));
+        });
+        yield waitFor(() => {
+            expect(container.querySelector('.custom-header-selector-dropdown')).toBeTruthy();
+            expect(screen.getByText('Option 3'));
+            fireEvent.click(screen.getByText('Option 3'));
+            expect(onSelect).toHaveBeenCalled();
+        });
+    }));
+});

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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
+import ChatbotHeaderTitle from './ChatbotHeaderTitle';
+describe('ChatbotHeaderTitle', () => {
+    it('should render ChatbotHeaderTitle with children', () => {
+        render(React.createElement(ChatbotHeaderTitle, null, "Chatbot Header Title"));
+        expect(screen.getByText('Chatbot Header Title')).toBeTruthy();
+    });
+    it('should render ChatbotHeaderTitle with custom classname', () => {
+        const { container } = render(React.createElement(ChatbotHeaderTitle, { className: "custom-header-class" }, "Chatbot Header Title"));
+        expect(container.querySelector('.custom-header-class')).toBeTruthy();
+    });
+    it('should render title for default display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.default, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for docked display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDocked: 'Docked header title' }));
+        expect(screen.getByText('Docked header title')).toBeTruthy();
+    });
+    it('should fallback to default title when docked display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.docked, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for embedded display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnEmbedded: 'Embedded header title' }));
+        expect(screen.getByText('Embedded header title')).toBeTruthy();
+    });
+    it('should fallback to default title when embedded display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.embedded, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+    it('should render title for fullscreen display mode', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnFullScreen: 'Fullscreen header title', className: "custom-header-class" }));
+        expect(screen.getByText('Fullscreen header title')).toBeTruthy();
+    });
+    it('should fallback to default title when fullscreen display mode title is not configured', () => {
+        render(React.createElement(ChatbotHeaderTitle, { displayMode: ChatbotDisplayMode.fullscreen, showOnDefault: 'Default header title' }));
+        expect(screen.getByText('Default header title')).toBeTruthy();
+    });
+});

package/dist/esm/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/esm/ChatbotHeader/index.js

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

package/dist/esm/ChatbotToggle/ChatbotToggle.js

@@ -23,7 +23,9 @@ const ChatbotToggleBase = (_a) => {
     // Configure icon
     const closedIcon = ClosedToggleIcon ? React.createElement(ClosedToggleIcon, null) : React.createElement(ChatIcon, null);
     const icon = isChatbotVisible ? React.createElement(AngleDownIcon, { "data-testid": openIconTestId }) : closedIcon;
-    return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel }, tooltipProps),
+    return (React.createElement(Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         React.createElement(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.createElement(Icon, { isInline: true }, icon), ref: innerRef }, props))));
 };
 const ChatbotToggle = React.forwardRef((props, ref) => (React.createElement(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.js

@@ -14,30 +14,38 @@ import ChatbotWelcomePrompt from './ChatbotWelcomePrompt';
 import userEvent from '@testing-library/user-event';
 describe('ChatbotWelcomePrompt', () => {
     it('should render welcome prompt', () => {
-        const { container } = render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
+        const { container } = render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
         expect(container).toMatchSnapshot();
     });
     it('should render correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?" }));
-        expect(screen.getByText('Hello, Chatbot User')).toBeTruthy();
-        expect(screen.getByText('How may I help you today?')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(screen.getByText('How can I help you today?')).toBeTruthy();
     });
     it('should render prompts with titles correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1' }] }));
-        expect(screen.getByText('Topic 1')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(screen.getByText('Set up account')).toBeTruthy();
     });
     it('should render prompts with messages correctly', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1' }] }));
-        expect(screen.getByText('Helpful prompt for Topic 1')).toBeTruthy();
+        render(React.createElement(ChatbotWelcomePrompt, { 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(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();
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", prompts: [{ title: 'Topic 1', message: 'Helpful prompt for Topic 1', onClick: spy }] }));
-        yield userEvent.click(screen.getByRole('button', { name: /Topic 1/i }));
+        render(React.createElement(ChatbotWelcomePrompt, { 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 userEvent.click(screen.getByRole('button', { name: /Set up account/i }));
         expect(spy).toHaveBeenCalled();
     }));
     it('should apply className appropriately', () => {
-        render(React.createElement(ChatbotWelcomePrompt, { title: "Hello, Chatbot User", description: "How may I help you today?", className: "test", testId: "welcome-prompt" }));
+        render(React.createElement(ChatbotWelcomePrompt, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
         const element = screen.getByTestId('welcome-prompt');
         expect(element).toHaveClass('test');
     });

package/dist/esm/CodeModal/CodeModal.js

@@ -46,24 +46,14 @@ export const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    /* eslint-disable indent */
-    const getHeight = (displayMode) => {
-        switch (displayMode) {
-            case ChatbotDisplayMode.docked:
-                return '100vh';
-            default:
-                return '45vh';
-        }
-    };
-    /* eslint-enable indent */
     const modal = (React.createElement(ChatbotModal, { 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.createElement(ModalHeader, { title: title, labelId: "code-modal-title" }),
         React.createElement(ModalBody, { id: "code-modal-body" },
             React.createElement(Stack, { className: "pf-chatbot__code-modal-body" },
                 React.createElement(StackItem, { className: "pf-chatbot__code-modal-file-details" },
                     React.createElement(FileDetails, { fileName: fileName })),
-                React.createElement(StackItem, null,
-                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, height: getHeight(displayMode), options: {
+                React.createElement(StackItem, { className: "pf-chatbot__code-modal-body" },
+                    React.createElement(CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: extensionToLanguage[path.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
                             glyphMargin: false,
                             folding: false
                         } }, props))))),

package/dist/esm/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/esm/Compare/Compare.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+export const Compare = ({ firstChild, secondChild, firstChildDisplayName, secondChildDisplayName, onToggleClick, toggleGroupAriaLabel = 'Select which chatbot to display' }) => {
+    const [isSelected, setIsSelected] = React.useState('toggle-group-chatbot-1');
+    const [showFirstChatbot, setShowFirstChatbot] = React.useState(true);
+    const [showSecondChatbot, setShowSecondChatbot] = React.useState(false);
+    React.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.createElement(React.Fragment, null,
+        React.createElement("div", { className: "pf-chatbot__compare-mobile-controls" },
+            React.createElement(ToggleGroup, { "aria-label": toggleGroupAriaLabel },
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: firstChildDisplayName, buttonId: "toggle-group-chatbot-1", isSelected: isSelected === 'toggle-group-chatbot-1', onChange: handleChildToggleClick }),
+                React.createElement(ToggleGroupItem, { className: "pf-chatbot__compare-toggle", text: secondChildDisplayName, buttonId: "toggle-group-chatbot-2", isSelected: isSelected === 'toggle-group-chatbot-2', onChange: handleChildToggleClick }))),
+        React.createElement("div", { className: "pf-chatbot__compare" },
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showFirstChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, firstChild),
+            React.createElement("div", { className: `pf-chatbot__compare-item ${!showSecondChatbot ? 'pf-chatbot__compare-item-hidden' : undefined}` }, secondChild))));
+};
+export default Compare;

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

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

package/dist/esm/Compare/Compare.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Compare from './Compare';
+const firstChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 1")));
+const secondChild = (React.createElement("div", null,
+    React.createElement("h1", null, "Child 2")));
+describe('Compare', () => {
+    it('should render compare correctly', () => {
+        render(React.createElement(Compare, { firstChildDisplayName: "Child 1", secondChildDisplayName: "Child 2", firstChild: firstChild, secondChild: secondChild }));
+        expect(screen.getByRole('heading', { name: /Child 1/i })).toBeTruthy();
+        expect(screen.getByRole('heading', { name: /Child 2/i })).toBeTruthy();
+    });
+});

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

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