@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -1,22 +1,235 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_2 = require("@testing-library/react");
 const MessageBox_1 = require("./MessageBox");
+const user_event_1 = __importDefault(require("@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', () => {
-        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, null,
-            react_1.default.createElement(react_1.default.Fragment, null, "Chatbot Messages")));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Chatbot Messages" }) }));
         expect(react_2.screen.getByText('Chatbot Messages')).toBeTruthy();
     });
     it('should assign ref to Message box', () => {
-        const ref = react_1.default.createRef();
-        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { ref: ref },
-            react_1.default.createElement("div", null, "Test message content")));
+        var _a, _b, _c, _d;
+        const ref = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { "data-testid": "message-box", ref: ref, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        react_2.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();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { onScrollToBottomClick: spy, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        // this forces button to show
+        const region = react_2.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 });
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump 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();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { onScrollToTopClick: spy, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        // this forces button to show
+        const region = react_2.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
+        });
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump 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 = (0, react_1.createRef)();
+        const onWheel = jest.fn();
+        const onTouchMove = jest.fn();
+        const onTouchEnd = jest.fn();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, onWheel: onWheel, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        (0, react_2.act)(() => {
+            react_2.fireEvent.wheel(element, { deltaY: 10 });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        (0, react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        (0, react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.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 });
+        (0, react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.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 });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        (0, react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.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 });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        (0, react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.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 });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate mouse wheel event
+        (0, react_2.act)(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            react_2.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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.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 });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate touch event - swipe up
+        (0, react_2.act)(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            react_2.fireEvent.touchStart(element, { touches: [{ clientY: 700 }] });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 600 }] });
+            react_2.fireEvent.touchEnd(element);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
 });

package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface PreviewAttachmentProps {
     /** Text shown in code editor */
@@ -17,6 +17,18 @@ export interface PreviewAttachmentProps {
     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: React.FunctionComponent<PreviewAttachmentProps>;
+export declare const PreviewAttachment: FunctionComponent<PreviewAttachmentProps>;
 export default PreviewAttachment;

package/dist/cjs/PreviewAttachment/PreviewAttachment.js

@@ -4,13 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PreviewAttachment = void 0;
-// ============================================================================
-// Preview Attachment - Chatbot Code Snippet Viewer
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeModal_1 = __importDefault(require("../CodeModal"));
 const Chatbot_1 = require("../Chatbot");
-const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default }) => {
+const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', primaryActionButtonText = 'Edit', secondaryActionButtonText = 'Dismiss', displayMode = Chatbot_1.ChatbotDisplayMode.default, modalHeaderClassName, modalBodyClassName, modalFooterClassName, isCompact }) => {
     const handleEdit = (_event) => {
         handleModalToggle(_event);
         onEdit(_event);
@@ -19,7 +16,7 @@ const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onD
         handleModalToggle(_event);
         onDismiss && onDismiss(_event);
     };
-    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode }));
+    return ((0, jsx_runtime_1.jsx)(CodeModal_1.default, { 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 }));
 };
 exports.PreviewAttachment = PreviewAttachment;
 exports.default = exports.PreviewAttachment;

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

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js

@@ -1,28 +1,50 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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());
+    });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 const PreviewAttachment_1 = require("./PreviewAttachment");
 describe('PreviewAttachment', () => {
     it('should render PreviewAttachment', () => {
-        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
-        expect(react_2.screen.getByText('Preview attachment')).toBeTruthy();
-        expect(react_2.screen.getByText('greetings')).toBeTruthy();
-        expect(react_2.screen.getAllByText('TEXT')).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
+        expect(react_1.screen.getByText('Preview attachment')).toBeTruthy();
+        expect(react_1.screen.getByText('greetings')).toBeTruthy();
+        expect(react_1.screen.getAllByText('TEXT')).toBeTruthy();
     });
     it('should call onEdit handler when edit button is pressed', () => {
         const onEdit = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
-        react_2.fireEvent.click(react_2.screen.getByText('Edit'));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
+        react_1.fireEvent.click(react_1.screen.getByText('Edit'));
         expect(onEdit).toHaveBeenCalled();
     });
     it('should call onDismiss handler when dismiss button is pressed', () => {
         const onDismiss = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
-        react_2.fireEvent.click(react_2.screen.getByText('Dismiss'));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
+        react_1.fireEvent.click(react_1.screen.getByText('Dismiss'));
         expect(onDismiss).toHaveBeenCalled();
     });
+    it('should render custom button text for footer actions buttons', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn(), primaryActionButtonText: "Edit", secondaryActionButtonText: "Close" }));
+        react_1.screen.getByText('Edit');
+        react_1.screen.getByText('Close');
+    });
+    it('should render PreviewAttachment with custom classNames', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(PreviewAttachment_1.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 = 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/ResponseActions/ResponseActionButton.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ResponseActionButtonProps {
+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. */
@@ -24,6 +24,6 @@ export interface ResponseActionButtonProps {
     /** Ref applied to button  */
     innerRef?: React.Ref<HTMLButtonElement>;
 }
-export declare const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps>;
-declare const ResponseActionButton: React.ForwardRefExoticComponent<ResponseActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ResponseActionButtonBase: FunctionComponent<ResponseActionButtonProps>;
+declare const ResponseActionButton: import("react").ForwardRefExoticComponent<ResponseActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.js

@@ -10,12 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponseActionButtonBase = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const ResponseActionButtonBase = (_a) => {
     var { ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false, innerRef } = _a, props = __rest(_a, ["ariaLabel", "clickedAriaLabel", "className", "icon", "isDisabled", "onClick", "tooltipContent", "clickedTooltipContent", "tooltipProps", "isClicked", "innerRef"]);
@@ -25,11 +23,10 @@ const ResponseActionButtonBase = (_a) => {
         }
         return isClicked ? clickedTooltipContent : tooltipContent;
     };
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: react_1.default.createElement(react_core_1.Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm", ref: innerRef }, props))));
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { isInline: true, size: "lg", children: icon }), isDisabled: isDisabled, onClick: onClick, size: "sm", ref: innerRef }, props)) })));
 };
 exports.ResponseActionButtonBase = ResponseActionButtonBase;
-const ResponseActionButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.ResponseActionButtonBase, Object.assign({ innerRef: ref }, props))));
+const ResponseActionButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.ResponseActionButtonBase, Object.assign({ innerRef: ref }, props))));
 exports.default = ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.test.js

@@ -12,43 +12,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const 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 react_icons_1 = require("@patternfly/react-icons");
 const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
 describe('ResponseActionButton', () => {
     it('renders aria-label correctly if not clicked', () => {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
-        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
+        expect(react_1.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     });
     it('renders aria-label correctly if clicked', () => {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
     });
     it('renders tooltip correctly if not clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
-        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
+        expect(react_1.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
         // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Download' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Download' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
     }));
     it('renders tooltip correctly if clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
         // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Downloaded' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Downloaded' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
     }));
     it('if clicked variant for tooltip is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", isClicked: true }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), tooltipContent: "Download", isClicked: true }));
         // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Download' }));
-        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Download' }));
+        expect(react_1.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     }));
     it('if clicked variant for aria label is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", isClicked: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, { icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), ariaLabel: "Download", isClicked: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     }));
 });

package/dist/cjs/ResponseActions/ResponseActions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface ActionProps extends Omit<ButtonProps, 'ref'> {
     /** Aria-label for the button */
@@ -26,15 +26,19 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
     /** Id for content controlled by the button, such as the feedback form */
     'aria-controls'?: string;
 }
+type ExtendedActionProps = ActionProps & {
+    [key: string]: any;
+};
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
-    actions: Record<string, ActionProps | undefined> & {
+    actions: Record<string, ExtendedActionProps | undefined> & {
         positive?: ActionProps;
         negative?: ActionProps;
         copy?: ActionProps;
         share?: ActionProps;
+        download?: ActionProps;
         listen?: ActionProps;
     };
 }
-export declare const ResponseActions: React.FunctionComponent<ResponseActionProps>;
+export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
 export default ResponseActions;

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -15,15 +15,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponseActions = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
 const react_icons_1 = require("@patternfly/react-icons");
 const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
 const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    const [activeButton, setActiveButton] = react_1.default.useState();
-    const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
-    const responseActions = react_1.default.useRef(null);
-    react_1.default.useEffect(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    const [activeButton, setActiveButton] = (0, react_2.useState)();
+    const { positive, negative, copy, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "download", "listen"]);
+    const responseActions = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
         const handleClickOutside = (e) => {
             if (responseActions.current && !responseActions.current.contains(e.target)) {
                 setActiveButton(undefined);
@@ -38,16 +40,10 @@ const ResponseActions = ({ actions }) => {
         setActiveButton(id);
         onClick && onClick(e);
     };
-    return (react_1.default.createElement("div", { ref: responseActions, className: "pf-chatbot__response-actions" },
-        positive && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] })),
-        negative && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] })),
-        copy && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedCopyIcon, null), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] })),
-        share && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: react_1.default.createElement(react_icons_1.ExternalLinkAltIcon, null), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] })),
-        listen && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: react_1.default.createElement(react_icons_1.VolumeUpIcon, null), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] })),
-        Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            return (react_1.default.createElement(ResponseActionButton_1.default, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] }));
-        })));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, positive, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Response recorded', tooltipProps: positive.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsUpIcon, {}), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, negative, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Response recorded', tooltipProps: negative.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsDownIcon, {}), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, copy, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: copy.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, download, { ariaLabel: (_s = download.ariaLabel) !== null && _s !== void 0 ? _s : 'Download', clickedAriaLabel: (_t = download.ariaLabel) !== null && _t !== void 0 ? _t : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_u = download.tooltipContent) !== null && _u !== void 0 ? _u : 'Download', clickedTooltipContent: (_v = download.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Downloaded', tooltipProps: download.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, listen, { ariaLabel: (_w = listen.ariaLabel) !== null && _w !== void 0 ? _w : 'Listen', clickedAriaLabel: (_x = listen.ariaLabel) !== null && _x !== void 0 ? _x : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_y = listen.tooltipContent) !== null && _y !== void 0 ? _y : 'Listen', clickedTooltipContent: (_z = listen.clickedTooltipContent) !== null && _z !== void 0 ? _z : 'Listening', tooltipProps: listen.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                return ((0, react_1.createElement)(ResponseActionButton_1.default, Object.assign({}, additionalActions[action], { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: (_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps, clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] })));
+            })] }));
 };
 exports.ResponseActions = ResponseActions;
 exports.default = exports.ResponseActions;