@patternfly/chatbot 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/dist/cjs/Onboarding/Onboarding.test.js

@@ -0,0 +1,80 @@
+"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 Onboarding_1 = __importDefault(require("./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', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Onboarding/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Continue/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: /Skip/i })).toBeTruthy();
+        expect(react_1.screen.getByText(body)).toBeTruthy();
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(react_1.screen.getByRole('img')).toBeTruthy();
+        expect(react_1.screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test", children: body }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-chatbot__onboarding-modal--default');
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title", children: body }));
+        expect(react_1.screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('heading', { name: /Onboarding/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Continue/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second", children: body }));
+        expect(react_1.screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: /Skip/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.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* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, children: body }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Skip/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+    it('should handle isCompact prop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Onboarding_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, isCompact: true, headerImage: "./image.png", headerImageAltText: "Test image", children: body }));
+        expect(react_1.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+        expect(react_1.screen.queryByRole('img')).toBeFalsy();
+    });
+});

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

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

package/dist/cjs/Onboarding/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 Onboarding_1 = require("./Onboarding");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Onboarding_1).default; } });
+__exportStar(require("./Onboarding"), exports);

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

@@ -29,6 +29,10 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
 type ExtendedActionProps = ActionProps & {
     [key: string]: any;
 };
+/**
+ * The various actions that can be attached to a bot message for users to interact with.
+ * Use this component when passing children to Message to customize its structure.
+ */
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
     actions: Record<string, ExtendedActionProps | undefined> & {
@@ -40,6 +44,9 @@ export interface ResponseActionProps {
         listen?: ActionProps;
         edit?: ActionProps;
     };
+    /** When true, the selected action will persist even when clicking outside the component.
+     * When false (default), clicking outside or clicking another action will deselect the current selection. */
+    persistActionSelection?: boolean;
 }
 export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
 export default ResponseActions;

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -20,10 +20,11 @@ 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 }) => {
+const ResponseActions = ({ actions, persistActionSelection = false }) => {
     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, _0, _1, _2, _3;
     const [activeButton, setActiveButton] = (0, react_2.useState)();
     const [clickStatePersisted, setClickStatePersisted] = (0, react_2.useState)(false);
+    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
     (0, react_2.useEffect)(() => {
         // Define the order of precedence for checking initial `isClicked`
         const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
@@ -45,11 +46,18 @@ const ResponseActions = ({ actions }) => {
             // Click state is explicitly controlled by consumer.
             setClickStatePersisted(true);
         }
+        // If persistActionSelection is true, all selections are persisted
+        if (persistActionSelection) {
+            setClickStatePersisted(true);
+        }
         setActiveButton(initialActive);
-    }, [actions]);
-    const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
+    }, [actions, persistActionSelection]);
     const responseActions = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
+        // Only add click outside listener if not persisting selection
+        if (persistActionSelection) {
+            return;
+        }
         const handleClickOutside = (e) => {
             if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
                 setActiveButton(undefined);
@@ -59,13 +67,26 @@ const ResponseActions = ({ actions }) => {
         return () => {
             window.removeEventListener('click', handleClickOutside);
         };
-    }, [clickStatePersisted]);
+    }, [clickStatePersisted, persistActionSelection]);
     const handleClick = (e, id, onClick) => {
-        setClickStatePersisted(false);
-        setActiveButton(id);
+        if (persistActionSelection) {
+            if (activeButton === id) {
+                // Toggle off if clicking the same button
+                setActiveButton(undefined);
+            }
+            else {
+                // Set new active button
+                setActiveButton(id);
+            }
+            setClickStatePersisted(true);
+        }
+        else {
+            setClickStatePersisted(false);
+            setActiveButton(id);
+        }
         onClick && onClick(e);
     };
-    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'] }))), edit && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, edit, { ariaLabel: (_o = edit.ariaLabel) !== null && _o !== void 0 ? _o : 'Edit', clickedAriaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_q = edit.tooltipContent) !== null && _q !== void 0 ? _q : 'Edit ', clickedTooltipContent: (_r = edit.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Editing', tooltipProps: edit.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_s = share.ariaLabel) !== null && _s !== void 0 ? _s : 'Share', clickedAriaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_u = share.tooltipContent) !== null && _u !== void 0 ? _u : 'Share', clickedTooltipContent: (_v = share.clickedTooltipContent) !== null && _v !== void 0 ? _v : '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: (_w = download.ariaLabel) !== null && _w !== void 0 ? _w : 'Download', clickedAriaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_y = download.tooltipContent) !== null && _y !== void 0 ? _y : 'Download', clickedTooltipContent: (_z = download.clickedTooltipContent) !== null && _z !== void 0 ? _z : '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: (_0 = listen.ariaLabel) !== null && _0 !== void 0 ? _0 : 'Listen', clickedAriaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_2 = listen.tooltipContent) !== null && _2 !== void 0 ? _2 : 'Listen', clickedTooltipContent: (_3 = listen.clickedTooltipContent) !== null && _3 !== void 0 ? _3 : '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) => {
+    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 : 'Good 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 : 'Good 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 : 'Bad 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 : 'Bad 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'] }))), edit && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, edit, { ariaLabel: (_o = edit.ariaLabel) !== null && _o !== void 0 ? _o : 'Edit', clickedAriaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_q = edit.tooltipContent) !== null && _q !== void 0 ? _q : 'Edit ', clickedTooltipContent: (_r = edit.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Editing', tooltipProps: edit.tooltipProps, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_s = share.ariaLabel) !== null && _s !== void 0 ? _s : 'Share', clickedAriaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_u = share.tooltipContent) !== null && _u !== void 0 ? _u : 'Share', clickedTooltipContent: (_v = share.clickedTooltipContent) !== null && _v !== void 0 ? _v : '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: (_w = download.ariaLabel) !== null && _w !== void 0 ? _w : 'Download', clickedAriaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_y = download.tooltipContent) !== null && _y !== void 0 ? _y : 'Download', clickedTooltipContent: (_z = download.clickedTooltipContent) !== null && _z !== void 0 ? _z : '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: (_0 = listen.ariaLabel) !== null && _0 !== void 0 ? _0 : 'Listen', clickedAriaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_2 = listen.tooltipContent) !== null && _2 !== void 0 ? _2 : 'Listen', clickedTooltipContent: (_3 = listen.clickedTooltipContent) !== null && _3 !== void 0 ? _3 : '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'] })));
             })] }));

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

@@ -20,8 +20,8 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const react_icons_1 = require("@patternfly/react-icons");
 const Message_1 = __importDefault(require("../Message"));
 const ALL_ACTIONS = [
-    { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
-    { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+    { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
+    { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
     { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
     { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
     { type: 'share', label: 'Share', clickedLabel: 'Shared' },
@@ -88,13 +88,13 @@ describe('ResponseActions', () => {
             expect(button).toBeTruthy();
         });
         yield user_event_1.default.click(goodBtn);
-        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         let unclickedButtons = buttons.filter((button) => button !== goodBtn);
         unclickedButtons.forEach((button) => {
             expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         });
         yield user_event_1.default.click(badBtn);
-        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         unclickedButtons = buttons.filter((button) => button !== badBtn);
         unclickedButtons.forEach((button) => {
             expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -111,10 +111,10 @@ describe('ResponseActions', () => {
         expect(goodBtn).toBeTruthy();
         expect(badBtn).toBeTruthy();
         yield user_event_1.default.click(goodBtn);
-        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         yield user_event_1.default.click(badBtn);
-        expect(react_1.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByRole('button', { name: 'Bad response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
         yield user_event_1.default.click(react_1.screen.getByText("I updated your account with those settings. You're ready to set up your first dashboard!"));
         expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
@@ -187,28 +187,28 @@ describe('ResponseActions', () => {
         });
     });
     it('should be able to call onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label }) {
+        for (const { type, label } of ALL_ACTIONS) {
             const spy = jest.fn();
             (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: spy } } }));
             yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
             expect(spy).toHaveBeenCalledTimes(1);
-        }));
+        }
     }));
     it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
-        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+        for (const { type, label, clickedLabel } of ALL_ACTIONS) {
             (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
             expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
             yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
             expect(react_1.screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
-        }));
+        }
     }));
     it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
-        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+        for (const { type, label, clickedLabel } of ALL_ACTIONS) {
             (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
             expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
             yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
             expect(react_1.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
-        }));
+        }
     }));
     it('should be able to change aria labels', () => {
         const actions = [
@@ -260,4 +260,59 @@ describe('ResponseActions', () => {
             expect(react_1.screen.getByTestId(action[key])).toBeTruthy();
         });
     });
+    // we are testing for the reverse case already above
+    it('should not deselect when clicking outside when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(react_1.screen.getByText('Test content'));
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should switch selection to another button when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(badBtn);
+        expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should toggle off when clicking the same button when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should work with custom actions when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const actions = {
+            positive: { 'data-testid': 'positive', onClick: jest.fn() },
+            negative: { 'data-testid': 'negative', onClick: jest.fn() },
+            custom: {
+                'data-testid': 'custom',
+                onClick: jest.fn(),
+                ariaLabel: 'Custom',
+                tooltipContent: 'Custom action',
+                icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {})
+            }
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions, persistActionSelection: true }));
+        const customBtn = react_1.screen.getByTestId('custom');
+        yield user_event_1.default.click(customBtn);
+        expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(customBtn);
+        expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
 });

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

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the response actions groups container */
+    children: ReactNode;
+    /** Additional classes applied to the response actions groups container. */
+    className?: string;
+}
+export declare const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps>;
+export default ResponseActionsGroups;

package/dist/cjs/ResponseActions/ResponseActionsGroups.js

@@ -0,0 +1,22 @@
+"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.ResponseActionsGroups = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_styles_1 = require("@patternfly/react-styles");
+const ResponseActionsGroups = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)('pf-chatbot__response-actions-groups', className) }, props, { children: children })));
+};
+exports.ResponseActionsGroups = ResponseActionsGroups;
+exports.default = exports.ResponseActionsGroups;

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+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");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const ResponseActionsGroups_1 = __importDefault(require("./ResponseActionsGroups"));
+test('Renders with children', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+test('Renders with custom className', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { className: "custom-class", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { id: "test-id", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

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

@@ -1,2 +1,3 @@
 export { default } from './ResponseActions';
 export * from './ResponseActions';
+export * from './ResponseActionsGroups';

package/dist/cjs/ResponseActions/index.js

@@ -21,3 +21,4 @@ exports.default = void 0;
 var ResponseActions_1 = require("./ResponseActions");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ResponseActions_1).default; } });
 __exportStar(require("./ResponseActions"), exports);
+__exportStar(require("./ResponseActionsGroups"), exports);

package/dist/cjs/ToolCall/ToolCall.d.ts

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'react';
 import { ActionListProps, ActionListGroupProps, ActionListItemProps, ButtonProps, CardProps, CardBodyProps, CardFooterProps, ExpandableSectionProps, SpinnerProps } from '@patternfly/react-core';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface ToolCallProps {
     /** Title text for the tool call. */
     titleText: string;
@@ -11,6 +12,8 @@ export interface ToolCallProps {
     spinnerProps?: SpinnerProps;
     /** Content to render within an expandable section. */
     expandableContent?: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Text content for the "run" action button. */
     runButtonText?: string;
     /** Additional props for the "run" action button. */
@@ -39,6 +42,14 @@ export interface ToolCallProps {
     cardFooterProps?: CardFooterProps;
     /** Additional props for the expandable section when expandableContent is passed. */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+    /** Whether to enable markdown rendering for titleText. When true, titleText will be parsed as markdown. */
+    isTitleMarkdown?: boolean;
+    /** Whether to enable markdown rendering for expandableContent. When true and expandableContent is a string, it will be parsed as markdown. */
+    isExpandableContentMarkdown?: boolean;
+    /** Props passed to MarkdownContent component when markdown is enabled */
+    markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+    /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+    shouldRetainStyles?: boolean;
 }
 export declare const ToolCall: FunctionComponent<ToolCallProps>;
 export default ToolCall;

package/dist/cjs/ToolCall/ToolCall.js

@@ -1,14 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolCall = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps }) => {
-    const titleContent = ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: titleText })) }));
+const MarkdownContent_1 = __importDefault(require("../MarkdownContent"));
+const ToolCall = ({ titleText, loadingText, isLoading, expandableContent, isDefaultExpanded = false, runButtonText = 'Run tool', runButtonProps, runActionItemProps, cancelButtonText = 'Cancel', cancelButtonProps, cancelActionItemProps, actions, actionListProps, actionListGroupProps, actionListItemProps, cardProps, cardBodyProps, cardFooterProps, expandableSectionProps, spinnerProps, isTitleMarkdown, isExpandableContentMarkdown, markdownContentProps, shouldRetainStyles = false }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(isDefaultExpanded);
+    const onToggle = (_event, isExpanded) => {
+        setIsExpanded(isExpanded);
+    };
+    const renderTitle = () => {
+        if (isTitleMarkdown) {
+            return (0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: titleText }, markdownContentProps));
+        }
+        return titleText;
+    };
+    const titleContent = ((0, jsx_runtime_1.jsx)("span", { className: `pf-chatbot__tool-call-title-content`, children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Spinner, Object.assign({ diameter: "1em" }, spinnerProps)), ' ', (0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: loadingText })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "pf-chatbot__tool-call-title-text", children: renderTitle() })) }));
+    const renderExpandableContent = () => {
+        if (isExpandableContentMarkdown && typeof expandableContent === 'string') {
+            return ((0, jsx_runtime_1.jsx)(MarkdownContent_1.default, Object.assign({ shouldRetainStyles: shouldRetainStyles, content: expandableContent }, markdownContentProps)));
+        }
+        return expandableContent;
+    };
     const defaultActions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, cancelActionItemProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "link" }, cancelButtonProps, { children: cancelButtonText })) })), (0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, runActionItemProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "secondary" }, runButtonProps, { children: runButtonText })) }))] }));
     const customActions = actions &&
         actions.map((action, index) => ((0, jsx_runtime_1.jsx)(react_core_1.ActionListItem, Object.assign({}, actionListItemProps, { children: action }), index)));
-    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, isIndented: true }, expandableSectionProps, { children: expandableContent }))) : (titleContent) })), !isLoading && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({}, cardFooterProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(react_core_1.Card, Object.assign({ isCompact: true, className: "pf-chatbot__tool-call" }, cardProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.CardBody, Object.assign({ className: "pf-chatbot__tool-call-title" }, cardBodyProps, { children: expandableContent && !isLoading ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ className: "pf-chatbot__tool-call-expandable-section", toggleContent: titleContent, onToggle: onToggle, isExpanded: isExpanded, isIndented: true }, expandableSectionProps, { children: renderExpandableContent() }))) : (titleContent) })), !isLoading && ((0, jsx_runtime_1.jsx)(react_core_1.CardFooter, Object.assign({}, cardFooterProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionList, Object.assign({ className: "pf-chatbot__tool-call-action-list" }, actionListProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.ActionListGroup, Object.assign({}, actionListGroupProps, { children: customActions || defaultActions })) })) })))] })));
 };
 exports.ToolCall = ToolCall;
 exports.default = exports.ToolCall;

package/dist/cjs/ToolCall/ToolCall.test.js

@@ -141,4 +141,61 @@ describe('ToolCall', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { cardFooterProps: { id: 'card-footer-test-id' } })));
         expect(react_1.screen.getByRole('button', { name: 'Run tool' }).closest('#card-footer-test-id')).toBeVisible();
     });
+    it('Renders collapsed by default when expandableContent is provided', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { expandableContent: "Expandable Content" })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.queryByText('Expandable Content')).not.toBeVisible();
+    });
+    it('Renders expanded when isDefaultExpanded is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: true, expandableContent: "Expandable Content" })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.isExpanded overrides isDefaultExpanded', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { isExpanded: true } })));
+        expect(react_1.screen.getByRole('button', { name: defaultProps.titleText })).toHaveAttribute('aria-expanded', 'true');
+        expect(react_1.screen.getByText('Expandable Content')).toBeVisible();
+    });
+    it('expandableSectionProps.onToggle overrides internal onToggle behavior', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const customOnToggle = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { isDefaultExpanded: false, expandableContent: "Expandable Content", expandableSectionProps: { onToggle: customOnToggle } })));
+        const toggleButton = react_1.screen.getByRole('button', { name: defaultProps.titleText });
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        yield user.click(toggleButton);
+        expect(customOnToggle).toHaveBeenCalledTimes(1);
+        expect(toggleButton).toHaveAttribute('aria-expanded', 'false');
+        expect(react_1.screen.queryByText('Expandable Content')).not.toBeVisible();
+    }));
+    it('should render titleText as markdown when isTitleMarkdown is true', () => {
+        const titleText = '**Bold title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText, isTitleMarkdown: true }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold title')).toBeTruthy();
+    });
+    it('should not render titleText as markdown when isTitleMarkdown is false', () => {
+        const titleText = '**Bold title**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText }));
+        expect(react_1.screen.getByText('**Bold title**')).toBeTruthy();
+    });
+    it('should render expandableContent as markdown when isExpandableContentMarkdown is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const expandableContent = '**Bold expandable content**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { expandableContent: expandableContent, isExpandableContentMarkdown: true })));
+        yield user.click(react_1.screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(container.querySelector('strong')).toBeTruthy();
+        expect(react_1.screen.getByText('Bold expandable content')).toBeTruthy();
+    }));
+    it('should not render expandableContent as markdown when isExpandableContentMarkdown is false', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup();
+        const expandableContent = '**Bold expandable content**';
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, Object.assign({}, defaultProps, { expandableContent: expandableContent })));
+        yield user.click(react_1.screen.getByRole('button', { name: defaultProps.titleText }));
+        expect(react_1.screen.getByText('**Bold expandable content**')).toBeTruthy();
+    }));
+    it('should pass markdownContentProps to MarkdownContent component', () => {
+        const titleText = '**Bold title**';
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(ToolCall_1.default, { titleText: titleText, isTitleMarkdown: true, markdownContentProps: { isPrimary: true } }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
 });

package/dist/cjs/ToolResponse/ToolResponse.d.ts

@@ -1,8 +1,11 @@
 import { CardBodyProps, CardProps, CardTitleProps, DividerProps, ExpandableSectionProps } from '@patternfly/react-core';
 import { type FunctionComponent } from 'react';
+import type { MarkdownContentProps } from '../MarkdownContent';
 export interface ToolResponseProps {
     /** Toggle content shown for expandable section */
     toggleContent: React.ReactNode;
+    /** Flag indicating whether the expandable content is expanded by default. */
+    isDefaultExpanded?: boolean;
     /** Additional props passed to expandable section */
     expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
     /** Subheading rendered inside expandable section */
@@ -25,6 +28,20 @@ export interface ToolResponseProps {
     toolResponseCardDividerProps?: DividerProps;
     /** Additional props passed to tool response card title */
     toolResponseCardTitleProps?: CardTitleProps;
+    /** Whether to enable markdown rendering for toggleContent. When true and toggleContent is a string, it will be parsed as markdown. */
+    isToggleContentMarkdown?: boolean;
+    /** Whether to enable markdown rendering for subheading. When true, subheading will be parsed as markdown. */
+    isSubheadingMarkdown?: boolean;
+    /** Whether to enable markdown rendering for body. When true and body is a string, it will be parsed as markdown. */
+    isBodyMarkdown?: boolean;
+    /** Whether to enable markdown rendering for cardBody. When true and cardBody is a string, it will be parsed as markdown. */
+    isCardBodyMarkdown?: boolean;
+    /** Whether to enable markdown rendering for cardTitle. When true and cardTitle is a string, it will be parsed as markdown. */
+    isCardTitleMarkdown?: boolean;
+    /** Props passed to MarkdownContent component when markdown is enabled */
+    markdownContentProps?: Omit<MarkdownContentProps, 'content'>;
+    /** Whether to retain styles in the MarkdownContent component. Defaults to false. */
+    shouldRetainStyles?: boolean;
 }
 export declare const ToolResponse: FunctionComponent<ToolResponseProps>;
 export default ToolResponse;