@patternfly/chatbot 1.0.0

package/dist/esm/MessageBox/MessageBox.test.js

@@ -0,0 +1,230 @@
+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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MessageBox } from './MessageBox';
+import userEvent from '@testing-library/user-event';
+describe('MessageBox', () => {
+    beforeEach(() => {
+        jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+            cb(0); // Immediately call the callback
+            return 0;
+        });
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    it('should render Message box', () => {
+        render(_jsx(MessageBox, { children: _jsx(_Fragment, { children: "Chatbot Messages" }) }));
+        expect(screen.getByText('Chatbot Messages')).toBeTruthy();
+    });
+    it('should assign ref to Message box', () => {
+        var _a, _b, _c, _d;
+        const ref = createRef();
+        render(_jsx(MessageBox, { "data-testid": "message-box", ref: ref, children: _jsx("div", { children: "Test message content" }) }));
+        screen.getByText('Test message content');
+        expect(ref.current).not.toBeNull();
+        // should contain custom methods exposed by the ref
+        expect(typeof ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive)).toBe('function');
+        expect(typeof ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollToTop)).toBe('function');
+        expect(typeof ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom)).toBe('function');
+        expect((_d = ref.current) === null || _d === void 0 ? void 0 : _d.isSmartScrollActive()).toBe(false);
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+    it('should call onScrollToBottomClick when scroll to bottom button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(MessageBox, { onScrollToBottomClick: spy, children: _jsx("div", { children: "Test message content" }) }));
+        // this forces button to show
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+        act(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield waitFor(() => {
+            userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
+    it('should call onScrollToTopClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(_jsx(MessageBox, { onScrollToTopClick: spy, children: _jsx("div", { children: "Test message content" }) }));
+        // this forces button to show
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', {
+            configurable: true,
+            value: 500
+        });
+        act(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield waitFor(() => {
+            userEvent.click(screen.getByRole('button', { name: /Back to top/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
+    it('should call user defined onWheel, onTouchMove and onTouchEnd handlers', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ref = createRef();
+        const onWheel = jest.fn();
+        const onTouchMove = jest.fn();
+        const onTouchEnd = jest.fn();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, onWheel: onWheel, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        act(() => {
+            fireEvent.wheel(element, { deltaY: 10 });
+            fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            fireEvent.touchEnd(element);
+        });
+        expect(onWheel).toHaveBeenCalled();
+        expect(onTouchMove).toHaveBeenCalled();
+        expect(onTouchEnd).toHaveBeenCalled();
+    }));
+    it('should scroll to the bottom when the method is called ', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        act(() => {
+            var _a, _b, _c;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollToBottom();
+            (_c = ref.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom();
+        });
+        expect(scrollSpy).toHaveBeenCalledWith({ top: element.scrollHeight, behavior: 'smooth' });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(true);
+    }));
+    it('should scroll to the top when the method is called ', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        act(() => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
+        });
+        expect(scrollSpy).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+    }));
+    it('should pause automatic scrolling when user scrolls up ', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(true);
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 200;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        act(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(false);
+    }));
+    it('should resume automatic scrolling when user scrolls down to the bottom using scroll event', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        jest.useFakeTimers();
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 100;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        act(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        act(() => {
+            // Simulate scroll down by changing scrollTop
+            element.scrollTop = 650; // scrollHeight - scrollTop - clientHeight - DELTA_DOWN (50) = 0
+            const scrollEvent = new Event('scroll', { bubbles: true });
+            element.dispatchEvent(scrollEvent);
+            jest.advanceTimersByTime(250);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+        jest.useRealTimers();
+    }));
+    it('should resume automatic scrolling when scrollToBottom method is used', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 100;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        act(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        act(() => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom({ resumeSmartScroll: true, behavior: 'auto' }); // resumes auto scroll and scrolls to bottom.
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+    it('should resume automatic scrolling when mouse wheel event is used', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        act(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate mouse wheel event
+        act(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            fireEvent.wheel(element, { deltaY: 10 });
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+    it('should resume automatic scrolling when user swipes up in touch screen', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        act(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate touch event - swipe up
+        act(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            fireEvent.touchStart(element, { touches: [{ clientY: 700 }] });
+            fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            fireEvent.touchMove(element, { touches: [{ clientY: 600 }] });
+            fireEvent.touchEnd(element);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+});

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

@@ -0,0 +1,3 @@
+export { default } from './MessageBox';
+export * from './MessageBox';
+export * from './JumpButton';

package/dist/esm/MessageBox/index.js

@@ -0,0 +1,3 @@
+export { default } from './MessageBox';
+export * from './MessageBox';
+export * from './JumpButton';

package/dist/esm/MessageDivider/MessageDivider.d.ts

@@ -0,0 +1,9 @@
+import type { FunctionComponent } from 'react';
+export interface MessageDividerProps {
+    /** Variant of the divider */
+    variant?: 'inset' | 'fullWidth';
+    /** Content of the message divider */
+    content?: string;
+}
+declare const MessageDivider: FunctionComponent<MessageDividerProps>;
+export default MessageDivider;

package/dist/esm/MessageDivider/MessageDivider.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider, Label } from '@patternfly/react-core';
+const MessageDivider = (_a) => {
+    var { variant = 'inset', content = new Date().toLocaleDateString() } = _a, props = __rest(_a, ["variant", "content"]);
+    if (variant === 'inset') {
+        return (_jsxs("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-divider pf-m-wrap" }, props, { children: [_jsx(Divider, {}), _jsx(Label, { children: content })] })));
+    }
+    return (_jsx("div", Object.assign({ className: "pf-chatbot__message-divider pf-m-wrap" }, props, { children: _jsx(Label, { children: content }) })));
+};
+export default MessageDivider;

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

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

package/dist/esm/MessageDivider/MessageDivider.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MessageDivider from './MessageDivider';
+describe('MessageDivider', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render default correctly with variant = date and content = new Date().toLocaleDateString()', () => {
+        render(_jsx(MessageDivider, { "data-testid": "message-divider" }));
+        expect(screen.getByText(new Date().toLocaleDateString())).toBeInTheDocument();
+        expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+    });
+    it('should render inset variant correctly', () => {
+        render(_jsx(MessageDivider, { variant: "inset", content: "test", "data-testid": "message-divider" }));
+        expect(screen.getByText('test')).toBeInTheDocument();
+        expect(screen.getByTestId('message-divider')).toHaveClass('pf-m-divider');
+    });
+    it('should render fullWidth variant correctly', () => {
+        render(_jsx(MessageDivider, { variant: "fullWidth", content: "test", "data-testid": "message-divider" }));
+        expect(screen.getByText('test')).toBeInTheDocument();
+        expect(screen.getByTestId('message-divider')).not.toHaveClass('pf-m-divider');
+    });
+});

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

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

package/dist/esm/MessageDivider/index.js

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

package/dist/esm/Onboarding/Onboarding.d.ts

@@ -0,0 +1,36 @@
+import type { FunctionComponent } from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface OnboardingProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => 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;
+    /** Optional image displayed in header */
+    headerImage?: string;
+    /** Alt text for optional image displayed in header */
+    headerImageAltText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
+}
+export declare const OnboardingBase: FunctionComponent<OnboardingProps>;
+declare const Onboarding: import("react").ForwardRefExoticComponent<Omit<OnboardingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Onboarding;

package/dist/esm/Onboarding/Onboarding.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button, Content, ModalBody, ModalFooter } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+export const OnboardingBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Continue', secondaryActionBtn = 'Skip', title = 'Onboarding', headerImage, headerImageAltText = '', displayMode = ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'Onboarding', isCompact } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "headerImage", "headerImageAltText", "displayMode", "className", "children", "innerRef", "ouiaId", "isCompact"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = (_jsx(ChatbotModal, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "onboarding-title", "aria-describedby": "onboarding-modal", className: `pf-chatbot__onboarding-modal pf-chatbot__onboarding-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`, displayMode: displayMode, onClose: handleModalToggle }, props, { children: _jsx("section", { className: `pf-chatbot__onboarding--section`, "aria-label": title, tabIndex: -1, ref: innerRef, children: _jsxs(_Fragment, { children: [_jsxs(ModalBody, { className: "pf-chatbot__onboarding--modal-body", children: [!isCompact && headerImage && (_jsx("div", { className: "pf-chatbot__onboarding--header", children: _jsx("img", { src: headerImage, className: "pf-chatbot__onboarding--image", alt: headerImageAltText }) })), _jsxs("div", { className: "pf-chatbot__onboarding--modal-text", children: [_jsx("h1", { className: "pf-chatbot__onboarding--title", children: title }), _jsx(Content, { children: children })] })] }), _jsxs(ModalFooter, { className: "pf-chatbot__onboarding--footer", children: [_jsx(Button, { isBlock: true, variant: "primary", onClick: handlePrimaryAction, form: "onboarding-form", size: "lg", children: primaryActionBtn }, "onboarding-modal-primary"), _jsx(Button, { isBlock: true, variant: "secondary", onClick: handleSecondaryAction, size: "lg", children: secondaryActionBtn }, "onboarding-modal-secondary")] })] }) }) })));
+    return modal;
+};
+const Onboarding = forwardRef((props, ref) => (_jsx(OnboardingBase, Object.assign({ innerRef: ref }, props))));
+export default Onboarding;

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

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

package/dist/esm/Onboarding/Onboarding.test.js

@@ -0,0 +1,75 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import Onboarding from './Onboarding';
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+const body = 'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.';
+describe('Onboarding', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render modal correctly', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
+        expect(screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+        expect(screen.getByText(body)).toBeTruthy();
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(screen.getByRole('img')).toBeTruthy();
+        expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+        expect(screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
+        expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
+        expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
+        expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Onboarding, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield userEvent.click(screen.getByRole('button', { name: /Continue/i }));
+        expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle secondary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield userEvent.click(screen.getByRole('button', { name: /Skip/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+    it('should handle isCompact prop', () => {
+        render(_jsx(Onboarding, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, isCompact: true, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+        expect(screen.queryByRole('img')).toBeFalsy();
+    });
+});

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

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

package/dist/esm/Onboarding/index.js

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

package/dist/esm/PreviewAttachment/PreviewAttachment.d.ts

@@ -0,0 +1,34 @@
+import type { FunctionComponent, MouseEvent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface PreviewAttachmentProps {
+    /** Text shown in code editor */
+    code: string;
+    /** Filename, including extension, of file shown in modal */
+    fileName: string;
+    /** Function called when edit button is clicked */
+    onEdit: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Function called when dismiss button is clicked */
+    onDismiss?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Function called when modal is toggled */
+    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;
+    /** Primary action button text */
+    primaryActionButtonText?: string;
+    /** Secondary action button text */
+    secondaryActionButtonText?: string;
+    /** Class applied to modal header */
+    modalHeaderClassName?: string;
+    /** Class applied to modal body */
+    modalBodyClassName?: string;
+    /** Class applied to modal footer */
+    modalFooterClassName?: string;
+}
+export declare const PreviewAttachment: FunctionComponent<PreviewAttachmentProps>;
+export default PreviewAttachment;

package/dist/esm/PreviewAttachment/PreviewAttachment.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CodeModal from '../CodeModal';
+import { ChatbotDisplayMode } from '../Chatbot';
+export const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', primaryActionButtonText = 'Edit', secondaryActionButtonText = 'Dismiss', displayMode = ChatbotDisplayMode.default, modalHeaderClassName, modalBodyClassName, modalFooterClassName, isCompact }) => {
+    const handleEdit = (_event) => {
+        handleModalToggle(_event);
+        onEdit(_event);
+    };
+    const handleDismiss = (_event) => {
+        handleModalToggle(_event);
+        onDismiss && onDismiss(_event);
+    };
+    return (_jsx(CodeModal, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: primaryActionButtonText, secondaryActionBtn: secondaryActionButtonText, title: title, isReadOnly: true, displayMode: displayMode, isCompact: isCompact, modalHeaderClassName: modalHeaderClassName, modalBodyClassName: modalBodyClassName, modalFooterClassName: modalFooterClassName }));
+};
+export default PreviewAttachment;

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

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

package/dist/esm/PreviewAttachment/PreviewAttachment.test.js

@@ -0,0 +1,48 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { PreviewAttachment } from './PreviewAttachment';
+describe('PreviewAttachment', () => {
+    it('should render PreviewAttachment', () => {
+        render(_jsx(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
+        expect(screen.getByText('Preview attachment')).toBeTruthy();
+        expect(screen.getByText('greetings')).toBeTruthy();
+        expect(screen.getAllByText('TEXT')).toBeTruthy();
+    });
+    it('should call onEdit handler when edit button is pressed', () => {
+        const onEdit = jest.fn();
+        render(_jsx(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
+        fireEvent.click(screen.getByText('Edit'));
+        expect(onEdit).toHaveBeenCalled();
+    });
+    it('should call onDismiss handler when dismiss button is pressed', () => {
+        const onDismiss = jest.fn();
+        render(_jsx(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
+        fireEvent.click(screen.getByText('Dismiss'));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+    it('should render custom button text for footer actions buttons', () => {
+        render(_jsx(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Edit", secondaryActionButtonText: "Close" }));
+        screen.getByText('Edit');
+        screen.getByText('Close');
+    });
+    it('should render PreviewAttachment with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Edit", secondaryActionButtonText: "Close", modalHeaderClassName: "custom-header-class", modalBodyClassName: "custom-body-class", modalFooterClassName: "custom-footer-class" }));
+        const modal = screen.getByRole('dialog');
+        const modalHeader = 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 = within(modal).getByRole('contentinfo');
+        expect(modalfooter).toHaveClass('custom-footer-class');
+    }));
+});

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

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

package/dist/esm/PreviewAttachment/index.js

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

package/dist/esm/ResponseActions/ResponseActionButton.d.ts

@@ -0,0 +1,29 @@
+import type { FunctionComponent, MouseEvent } from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ResponseActionButtonProps extends ButtonProps {
+    /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
+    ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+    clickedAriaLabel?: string;
+    /** Icon for the button */
+    icon: React.ReactNode;
+    /** On-click handler for the button */
+    onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
+    /** Class name for the button */
+    className?: string;
+    /** Props to control if the attach button should be disabled */
+    isDisabled?: boolean;
+    /** Content shown in the tooltip */
+    tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+    clickedTooltipContent?: string;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: TooltipProps;
+    /** Whether button is in clicked state */
+    isClicked?: boolean;
+    /** Ref applied to button  */
+    innerRef?: React.Ref<HTMLButtonElement>;
+}
+export declare const ResponseActionButtonBase: FunctionComponent<ResponseActionButtonProps>;
+declare const ResponseActionButton: import("react").ForwardRefExoticComponent<ResponseActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default ResponseActionButton;