@patternfly/chatbot 1.0.0

package/dist/cjs/ChatbotPopover/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ChatbotPopover_1 = require("./ChatbotPopover");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatbotPopover_1).default; } });
+__exportStar(require("./ChatbotPopover"), exports);

package/dist/cjs/ChatbotToggle/ChatbotToggle.d.ts

@@ -0,0 +1,27 @@
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotToggleProps extends ButtonProps {
+    /** Contents of the tooltip applied to the toggle button */
+    tooltipLabel: React.ReactNode;
+    /** Props spread to the PF Tooltip component */
+    tooltipProps?: Omit<TooltipProps, 'content'>;
+    /** Flag indicating visibility of the chatbot appended to the toggle */
+    isChatbotVisible?: boolean;
+    /** Callback fired when toggle button is clicked */
+    onToggleChatbot?: () => void;
+    /** Accessible label for the toggle button */
+    toggleButtonLabel?: string;
+    /** An image displayed in the chatbot toggle when it is closed */
+    closedToggleIcon?: () => JSX.Element;
+    /** Ref applied to toggle */
+    innerRef?: React.Ref<HTMLButtonElement>;
+    /** Whether toggle is a circle */
+    isRound?: boolean;
+    /** Class name applied to toggle */
+    className?: string;
+    /** Test id applied to default open icon */
+    openIconTestId?: string;
+    /** Color variant applied to the toggle button */
+    colorVariant?: 'default' | 'secondary';
+}
+declare const ChatbotToggle: import("react").ForwardRefExoticComponent<ChatbotToggleProps & import("react").RefAttributes<any>>;
+export default ChatbotToggle;

package/dist/cjs/ChatbotToggle/ChatbotToggle.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_core_1 = require("@patternfly/react-core");
+const rh_microns_caret_down_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon"));
+const ChatIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "33", height: "31", viewBox: "0 0 33 31", fill: "none", children: [(0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_11685_20917)", children: (0, jsx_runtime_1.jsx)("path", { d: "M29.7 11.0714H17.6V7.75H19.525C20.2834 7.75 20.9 7.12939 20.9 6.36607V1.38393C20.9 0.620609 20.2834 0 19.525 0H13.475C12.7166 0 12.1 0.620609 12.1 1.38393V6.36607C12.1 7.12939 12.7166 7.75 13.475 7.75H15.4V11.0714H3.3C1.48027 11.0714 0 12.5613 0 14.3929V27.6786C0 29.5101 1.48027 31 3.3 31H29.7C31.5197 31 33 29.5101 33 27.6786V14.3929C33 12.5613 31.5197 11.0714 29.7 11.0714ZM14.3 2.21429H18.7V5.53571H14.3V2.21429ZM30.8 27.6786C30.8 28.2894 30.3069 28.7857 29.7 28.7857H3.3C2.6936 28.7857 2.2 28.2894 2.2 27.6786V14.3929C2.2 13.7825 2.6936 13.2857 3.3 13.2857H29.7C30.3069 13.2857 30.8 13.7825 30.8 14.3929V27.6786ZM8.525 17.7143V19.9286C8.525 20.387 8.15547 20.7589 7.7 20.7589H5.5C5.04453 20.7589 4.675 20.387 4.675 19.9286V17.7143C4.675 17.2559 5.04453 16.8839 5.5 16.8839H7.7C8.15547 16.8839 8.525 17.2559 8.525 17.7143ZM28.325 17.7143V19.9286C28.325 20.387 27.9555 20.7589 27.5 20.7589H25.3C24.8445 20.7589 24.475 20.387 24.475 19.9286V17.7143C24.475 17.2559 24.8445 16.8839 25.3 16.8839H27.5C27.9555 16.8839 28.325 17.2559 28.325 17.7143ZM20.5691 22.6683C20.8893 23.0965 20.8033 23.703 20.3779 24.0241C19.2521 24.8761 17.9115 25.3259 16.5 25.3259C15.0885 25.3259 13.7473 24.8761 12.6215 24.0241C12.1961 23.703 12.1107 23.0965 12.4298 22.6683C12.7494 22.2391 13.3536 22.1526 13.7774 22.4759C15.3576 23.6695 17.6408 23.6695 19.2221 22.4759C19.6475 22.1515 20.2512 22.2402 20.5691 22.6683Z", fill: "currentColor" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_11685_20917", children: (0, jsx_runtime_1.jsx)("rect", { width: "33", height: "31", fill: "currentColor" }) }) })] }));
+const ChatbotToggleBase = (_a) => {
+    var { tooltipLabel, isChatbotVisible, onToggleChatbot, tooltipProps, toggleButtonLabel, closedToggleIcon: ClosedToggleIcon, innerRef, isRound = true, className, openIconTestId, colorVariant = 'default' } = _a, props = __rest(_a, ["tooltipLabel", "isChatbotVisible", "onToggleChatbot", "tooltipProps", "toggleButtonLabel", "closedToggleIcon", "innerRef", "isRound", "className", "openIconTestId", "colorVariant"]);
+    // Configure icon
+    const closedIcon = ClosedToggleIcon ? (0, jsx_runtime_1.jsx)(ClosedToggleIcon, {}) : (0, jsx_runtime_1.jsx)(ChatIcon, {});
+    const icon = isChatbotVisible ? (0, jsx_runtime_1.jsx)(rh_microns_caret_down_icon_1.default, { "data-testid": openIconTestId }) : closedIcon;
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipLabel, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button ${colorVariant === 'secondary' ? 'pf-chatbot__button--secondary' : ''} ${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: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, children: icon }), ref: innerRef }, props)) })));
+};
+const ChatbotToggle = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotToggleBase, Object.assign({ innerRef: ref }, props))));
+exports.default = ChatbotToggle;

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

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

package/dist/cjs/ChatbotToggle/ChatbotToggle.test.js

@@ -0,0 +1,64 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const ChatbotToggle_1 = __importDefault(require("./ChatbotToggle"));
+describe('ChatbotToggle', () => {
+    it('should render tooltipLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Tooltip" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Tooltip toggle/i }));
+        expect(react_1.screen.getByRole('tooltip', { name: /Tooltip/i })).toBeTruthy();
+    }));
+    it('should render toggleButtonLabel correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", toggleButtonLabel: "Button" }));
+        expect(react_1.screen.getByRole('button', { name: /Button/i })).toBeTruthy();
+    }));
+    it('should call onToggleChatbot when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", onToggleChatbot: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button'));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle isChatbotVisible correctly when true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isChatbotVisible: true, openIconTestId: "Open" }));
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button--active');
+        expect(react_1.screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByTestId('Open')).toBeTruthy();
+    });
+    it('should handle isChatbotVisible correctly when false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isChatbotVisible: false, openIconTestId: "Open" }));
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_1.screen.getByRole('button')).not.toHaveClass('pf-chatbot__button--active');
+        expect(react_1.screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.queryByTestId('Open')).toBeFalsy();
+    });
+    it('should handle isRound correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", isRound: true }));
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button--round');
+    });
+    it('should handle className correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", className: "test" }));
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button');
+        expect(react_1.screen.getByRole('button')).toHaveClass('test');
+    });
+    it('should handle colorVariant secondary correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotToggle_1.default, { tooltipLabel: "Chatbot", colorVariant: "secondary" }));
+        expect(react_1.screen.getByRole('button')).toHaveClass('pf-chatbot__button--secondary');
+    });
+});

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

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

package/dist/cjs/ChatbotToggle/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ChatbotToggle_1 = require("./ChatbotToggle");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatbotToggle_1).default; } });
+__exportStar(require("./ChatbotToggle"), exports);

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.d.ts

@@ -0,0 +1,24 @@
+import type { FunctionComponent } from 'react';
+export interface ChatbotWelcomePromptProps extends React.HTMLProps<HTMLDivElement> {
+    /** Title for the welcome message*/
+    title: string;
+    /** Welcome message */
+    description: string;
+    /** Custom basic prompts to help users coming for the first time to chatbot */
+    prompts?: WelcomePrompt[];
+    /** Custom classname for the WelcomePrompt component */
+    className?: string;
+    /** Custom test id for the WelcomePrompt component */
+    testId?: string;
+    isCompact?: boolean;
+}
+export interface WelcomePrompt {
+    /** Message for the welcome prompt */
+    message?: string;
+    /** Title for the welcome prompt */
+    title: string;
+    /** Callback handler for the onClick event for welcome prompt */
+    onClick?: () => void;
+}
+export declare const ChatbotWelcomePrompt: FunctionComponent<ChatbotWelcomePromptProps>;
+export default ChatbotWelcomePrompt;

package/dist/cjs/ChatbotWelcomePrompt/ChatbotWelcomePrompt.js

@@ -0,0 +1,26 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatbotWelcomePrompt = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const ChatbotWelcomePrompt = (_a) => {
+    var { title, description, prompts, className, testId, isCompact = false } = _a, props = __rest(_a, ["title", "description", "prompts", "className", "testId", "isCompact"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": testId, className: `pf-chatbot--layout--welcome ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}` }, props, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.Content, { component: react_core_1.ContentVariants.h1, children: [(0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__hello", children: title }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__question", children: description })] }), prompts && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__prompt-suggestions", children: prompts === null || prompts === void 0 ? void 0 : prompts.map((prompt, index) => ((0, jsx_runtime_1.jsxs)(react_core_1.Card, { className: "pf-chatbot__prompt-suggestion", isClickable: true, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.CardHeader, { selectableActions: {
+                                onClickAction: prompt.onClick,
+                                selectableActionId: `welcome-prompt-input-${index}`,
+                                selectableActionAriaLabelledby: `welcome-prompt-title-${index}`
+                            }, children: (0, jsx_runtime_1.jsx)(react_core_1.CardTitle, { id: `welcome-prompt-title-${index}`, children: prompt.title }) }), prompt.message && (0, jsx_runtime_1.jsx)(react_core_1.CardBody, { children: prompt.message })] }, `welcome-prompt-${index}`))) }))] })));
+};
+exports.ChatbotWelcomePrompt = ChatbotWelcomePrompt;
+exports.default = exports.ChatbotWelcomePrompt;

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

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

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

@@ -0,0 +1,61 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+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_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(container).toMatchSnapshot();
+    });
+    it('should render correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?" }));
+        expect(react_1.screen.getByText('Hi, ChatBot User!')).toBeTruthy();
+        expect(react_1.screen.getByText('How can I help you today?')).toBeTruthy();
+    });
+    it('should render prompts with titles correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", prompts: [{ title: 'Set up account' }] }));
+        expect(react_1.screen.getByText('Set up account')).toBeTruthy();
+    });
+    it('should render prompts with messages correctly', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(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_1.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_1.render)((0, jsx_runtime_1.jsx)(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_1.screen.getByRole('button', { name: /Set up account/i }));
+        expect(spy).toHaveBeenCalled();
+    }));
+    it('should apply className appropriately', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt" }));
+        const element = react_1.screen.getByTestId('welcome-prompt');
+        expect(element).toHaveClass('test');
+    });
+    it('should handle isCompact', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ChatbotWelcomePrompt_1.default, { title: "Hi, ChatBot User!", description: "How can I help you today?", className: "test", testId: "welcome-prompt", isCompact: true }));
+        expect(react_1.screen.getByTestId('welcome-prompt')).toHaveClass('pf-m-compact');
+    });
+});

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

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

package/dist/cjs/ChatbotWelcomePrompt/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ChatbotWelcomePrompt_1 = require("./ChatbotWelcomePrompt");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ChatbotWelcomePrompt_1).default; } });
+__exportStar(require("./ChatbotWelcomePrompt"), exports);

package/dist/cjs/CodeModal/CodeModal.d.ts

@@ -0,0 +1,44 @@
+import type { FunctionComponent, MouseEvent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface CodeModalProps {
+    /** Class applied to code editor */
+    codeEditorControlClassName?: string;
+    /** Text shown in code editor */
+    code: string;
+    /** Filename, including extension, of file shown in editor */
+    fileName: string;
+    /** Whether copying code is allowed */
+    isCopyEnabled?: boolean;
+    /** Whether line numbers show in the code editor */
+    isLineNumbersVisible?: boolean;
+    /** Whether code is read-only */
+    isReadOnly?: boolean;
+    /** Action assigned to primary modal button */
+    onPrimaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent, code?: string) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+    /** Class applied to modal header */
+    modalHeaderClassName?: string;
+    /** Class applied to modal body */
+    modalBodyClassName?: string;
+    /** Class applied to modal footer */
+    modalFooterClassName?: string;
+    /** Aria label applied to spinner when loading Monaco */
+    spinnerAriaLabel?: string;
+}
+export declare const CodeModal: FunctionComponent<CodeModalProps>;
+export default CodeModal;

package/dist/cjs/CodeModal/CodeModal.js

@@ -0,0 +1,160 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const path_browserify_1 = __importDefault(require("path-browserify"));
+// Import PatternFly components
+const react_code_editor_1 = require("@patternfly/react-code-editor");
+const react_core_1 = require("@patternfly/react-core");
+const FileDetails_1 = __importStar(require("../FileDetails"));
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
+// Try to lazy load - some consumers need to be below a certain bundle size, but can't use the CDN and don't have webpack
+let monacoInstance = null;
+const loadMonaco = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!monacoInstance) {
+        const [monaco, { loader }] = yield Promise.all([Promise.resolve().then(() => __importStar(require('monaco-editor'))), Promise.resolve().then(() => __importStar(require('@monaco-editor/react')))]);
+        monacoInstance = monaco;
+        loader.config({ monaco });
+    }
+    return monacoInstance;
+});
+const CodeModal = (_a) => {
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact, modalHeaderClassName, modalBodyClassName, modalFooterClassName, spinnerAriaLabel = 'Loading' } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact", "modalHeaderClassName", "modalBodyClassName", "modalFooterClassName", "spinnerAriaLabel"]);
+    const [newCode, setNewCode] = (0, react_1.useState)(code);
+    const [editorInstance, setEditorInstance] = (0, react_1.useState)(null);
+    const [isEditorReady, setIsEditorReady] = (0, react_1.useState)(false);
+    const [isMonacoLoading, setIsMonacoLoading] = (0, react_1.useState)(false);
+    const [isMonacoLoaded, setIsMonacoLoaded] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (isModalOpen && !isMonacoLoaded && !isMonacoLoading) {
+            setIsMonacoLoading(true);
+            loadMonaco()
+                .then(() => {
+                setIsMonacoLoaded(true);
+                setIsMonacoLoading(false);
+            })
+                .catch((error) => {
+                // eslint-disable-next-line no-console
+                console.error('Failed to load Monaco editor:', error);
+                setIsMonacoLoading(false);
+            });
+        }
+    }, [isModalOpen, isMonacoLoaded, isMonacoLoading]);
+    (0, react_1.useEffect)(() => {
+        if (!isModalOpen || !isEditorReady || !editorInstance || !containerRef.current) {
+            return;
+        }
+        const handleResize = () => {
+            if (editorInstance && isEditorReady && isModalOpen) {
+                try {
+                    window.requestAnimationFrame(() => {
+                        editorInstance.layout();
+                    });
+                }
+                catch (error) {
+                    // eslint-disable-next-line no-console
+                    console.error('ChatBot code modal layout error:', error);
+                }
+            }
+        };
+        const observer = (0, react_core_1.getResizeObserver)(containerRef.current, handleResize);
+        return () => {
+            observer();
+        };
+    }, [editorInstance, isEditorReady, isModalOpen]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        if (!isReadOnly) {
+            onPrimaryAction(_event, newCode);
+        }
+        else {
+            onPrimaryAction(_event);
+        }
+    };
+    const handleSecondaryAction = (_event) => {
+        handleModalToggle(_event);
+        onSecondaryAction(_event);
+    };
+    const onEditorDidMount = (editor, monaco) => {
+        setEditorInstance(editor);
+        monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+        if (containerRef.current) {
+            setIsEditorReady(true);
+            editor.layout();
+            editor.focus();
+        }
+    };
+    const onCodeChange = (value) => {
+        if (!isReadOnly) {
+            setNewCode(value);
+        }
+    };
+    const renderMonacoEditor = () => {
+        if (isMonacoLoading) {
+            return ((0, jsx_runtime_1.jsx)(react_core_1.Bullseye, { children: (0, jsx_runtime_1.jsx)(react_core_1.Spinner, { "aria-label": spinnerAriaLabel }) }));
+        }
+        if (isMonacoLoaded) {
+            return ((0, jsx_runtime_1.jsx)(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,
+                    // prevents Monaco from handling resizing itself
+                    // was causing ResizeObserver issues
+                    automaticLayout: false
+                } }, props)));
+        }
+        return null;
+    };
+    const modal = ((0, jsx_runtime_1.jsxs)(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact, children: [(0, jsx_runtime_1.jsx)(react_core_1.ModalHeader, { className: modalHeaderClassName, title: title, labelId: "code-modal-title" }), (0, jsx_runtime_1.jsx)(react_core_1.ModalBody, { className: modalBodyClassName, id: "code-modal-body", children: (0, jsx_runtime_1.jsxs)(react_core_1.Stack, { className: "pf-chatbot__code-modal-body", children: [(0, jsx_runtime_1.jsx)(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details", children: (0, jsx_runtime_1.jsx)(FileDetails_1.default, { fileName: fileName }) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-v6-l-stack__item pf-chatbot__code-modal-editor", ref: containerRef, children: renderMonacoEditor() })] }) }), (0, jsx_runtime_1.jsxs)(react_core_1.ModalFooter, { className: modalFooterClassName, children: [(0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "code-modal-form", children: primaryActionBtn }, "code-modal-primary"), (0, jsx_runtime_1.jsx)(react_core_1.Button, { isBlock: true, variant: "link", onClick: handleSecondaryAction, children: secondaryActionBtn }, "code-modal-secondary")] })] }));
+    return modal;
+};
+exports.CodeModal = CodeModal;
+exports.default = exports.CodeModal;

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

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

package/dist/cjs/CodeModal/CodeModal.test.js

@@ -0,0 +1,34 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const CodeModal_1 = __importDefault(require("./CodeModal"));
+describe('ChatbotModal', () => {
+    it('should render compact modal', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeModal_1.default, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel" }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    });
+    it('should render CodeModal with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(CodeModal_1.default, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel", modalHeaderClassName: "custom-header-class", modalBodyClassName: "custom-body-class", modalFooterClassName: "custom-footer-class" }));
+        const modal = react_1.screen.getByRole('dialog');
+        const modalHeader = (0, react_1.within)(modal).getByRole('banner');
+        expect(modalHeader).toHaveClass('custom-header-class');
+        const modalBody = modal.querySelector('#code-modal-body');
+        expect(modalBody).toHaveClass('custom-body-class');
+        const modalfooter = (0, react_1.within)(modal).getByRole('contentinfo');
+        expect(modalfooter).toHaveClass('custom-footer-class');
+    }));
+});

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

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

package/dist/cjs/CodeModal/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var CodeModal_1 = require("./CodeModal");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CodeModal_1).default; } });
+__exportStar(require("./CodeModal"), exports);

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

@@ -0,0 +1,17 @@
+import type { 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>) => import("react/jsx-runtime").JSX.Element;
+export default Compare;