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

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

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ResponseActionButtonProps {
     /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+    clickedAriaLabel?: string;
     /** Icon for the button */
     icon: React.ReactNode;
     /** On-click handler for the button */
@@ -13,8 +15,12 @@ export interface ResponseActionButtonProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
+    /** Whether button is in clicked state */
+    isClicked?: boolean;
 }
 export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
 export default ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.js

@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponseActionButton = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const ResponseActionButton = ({ ariaLabel, className, icon, isDisabled, onClick, tooltipContent, tooltipProps }) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: tooltipContent, 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 }, tooltipProps),
-    react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__button--response-action ${className !== null && className !== void 0 ? className : ''}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltipContent, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+const ResponseActionButton = ({ ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false }) => {
+    const generateAriaLabel = () => {
+        if (ariaLabel) {
+            return isClicked ? clickedAriaLabel : ariaLabel;
+        }
+        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 }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, { 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" })));
+};
 exports.ResponseActionButton = ResponseActionButton;
 exports.default = exports.ResponseActionButton;

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

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

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

@@ -0,0 +1,54 @@
+"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 react_2 = 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();
+    });
+    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();
+    });
+    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();
+        // 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();
+    }));
+    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();
+        // 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();
+    }));
+    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 }));
+        // 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();
+    }));
+    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();
+    }));
+});

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

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ActionProps {
     /** Aria-label for the button */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. */
+    clickedAriaLabel?: string;
     /** On-click handler for the button */
     onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
     /** Class name for the button */
@@ -11,6 +13,8 @@ export interface ActionProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
     /** Icon for custom response action */

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -19,17 +19,34 @@ const react_1 = __importDefault(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;
+    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"]);
-    return (react_1.default.createElement("div", { className: "pf-chatbot__response-actions" },
-        positive && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', onClick: positive.onClick, className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_b = positive.tooltipContent) !== null && _b !== void 0 ? _b : 'Good response', tooltipProps: positive.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsUpIcon, null) })),
-        negative && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_c = negative.ariaLabel) !== null && _c !== void 0 ? _c : 'Bad response', onClick: negative.onClick, className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_d = negative.tooltipContent) !== null && _d !== void 0 ? _d : 'Bad response', tooltipProps: negative.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsDownIcon, null) })),
-        copy && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_e = copy.ariaLabel) !== null && _e !== void 0 ? _e : 'Copy', onClick: copy.onClick, className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_f = copy.tooltipContent) !== null && _f !== void 0 ? _f : 'Copy', tooltipProps: copy.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedCopyIcon, null) })),
-        share && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_g = share.ariaLabel) !== null && _g !== void 0 ? _g : 'Share', onClick: share.onClick, className: share.className, isDisabled: share.isDisabled, tooltipContent: (_h = share.tooltipContent) !== null && _h !== void 0 ? _h : 'Share', tooltipProps: share.tooltipProps, icon: react_1.default.createElement(react_icons_1.ExternalLinkAltIcon, null) })),
-        listen && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_j = listen.ariaLabel) !== null && _j !== void 0 ? _j : 'Listen', onClick: listen.onClick, className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_k = listen.tooltipContent) !== null && _k !== void 0 ? _k : 'Listen', tooltipProps: listen.tooltipProps, icon: react_1.default.createElement(react_icons_1.VolumeUpIcon, null) })),
+    const responseActions = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (responseActions.current && !responseActions.current.contains(e.target)) {
+                setActiveButton(undefined);
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    const handleClick = (e, id, onClick) => {
+        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' })),
+        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' })),
+        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' })),
+        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' })),
+        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' })),
         Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return (react_1.default.createElement(ResponseActionButton_1.default, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, onClick: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.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, icon: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.icon }));
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            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 }));
         })));
 };
 exports.ResponseActions = ResponseActions;

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

@@ -18,25 +18,30 @@ require("@testing-library/jest-dom");
 const ResponseActions_1 = __importDefault(require("./ResponseActions"));
 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' },
-    { type: 'negative', label: 'Bad response' },
-    { type: 'copy', label: 'Copy' },
-    { type: 'share', label: 'Share' },
-    { type: 'listen', label: 'Listen' }
+    { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
+    { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+    { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'share', label: 'Share', clickedLabel: 'Shared' },
+    { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
 const CUSTOM_ACTIONS = [
     {
         regenerate: {
             ariaLabel: 'Regenerate',
+            clickedAriaLabel: 'Regenerated',
             onClick: jest.fn(),
             tooltipContent: 'Regenerate',
+            clickedTooltipContent: 'Regenerated',
             icon: react_1.default.createElement(react_icons_1.RedoIcon, null)
         },
         download: {
             ariaLabel: 'Download',
+            clickedAriaLabel: 'Downloaded',
             onClick: jest.fn(),
             tooltipContent: 'Download',
+            clickedTooltipContent: 'Downloaded',
             icon: react_1.default.createElement(react_icons_1.DownloadIcon, null)
         },
         info: {
@@ -48,6 +53,59 @@ const CUSTOM_ACTIONS = [
     }
 ];
 describe('ResponseActions', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() },
+                copy: { onClick: jest.fn() },
+                share: { onClick: jest.fn() },
+                listen: { onClick: jest.fn() }
+            } }));
+        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = react_2.screen.getByRole('button', { name: 'Copy' });
+        const shareBtn = react_2.screen.getByRole('button', { name: 'Share' });
+        const listenBtn = react_2.screen.getByRole('button', { name: 'Listen' });
+        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+        buttons.forEach((button) => {
+            expect(button).toBeTruthy();
+        });
+        yield user_event_1.default.click(goodBtn);
+        expect(react_2.screen.getByRole('button', { name: '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_2.screen.getByRole('button', { name: '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');
+        });
+    }));
+    it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        // using message just so we have something outside the group that's rendered
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+                positive: {},
+                negative: {}
+            } }));
+        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
+        expect(goodBtn).toBeTruthy();
+        expect(badBtn).toBeTruthy();
+        yield user_event_1.default.click(goodBtn);
+        expect(react_2.screen.getByRole('button', { name: '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_2.screen.getByRole('button', { name: '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_2.screen.getByText('Example with all prebuilt actions'));
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
             (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
@@ -62,6 +120,22 @@ describe('ResponseActions', () => {
             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 }) {
+            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
+            expect(react_2.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 }) {
+            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
+            expect(react_2.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
     it('should be able to change aria labels', () => {
         const actions = [
             { type: 'positive', ariaLabel: 'Thumbs up' },

package/dist/cjs/TermsOfUse/TermsOfUse.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface TermsOfUseProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn?: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Optional image displayed in header */
+    image?: string;
+    /** Alt text for optional image displayed in header */
+    altText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+}
+export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TermsOfUse;

package/dist/cjs/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TermsOfUseBase = void 0;
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
+const TermsOfUseBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = Chatbot_1.ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = (react_1.default.createElement(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
+        react_1.default.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
+            react_1.default.createElement(react_core_1.ModalHeader, null,
+                react_1.default.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
+                    image && altText && react_1.default.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
+                    react_1.default.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
+            react_1.default.createElement(react_core_1.ModalBody, null,
+                react_1.default.createElement(react_core_1.Content, null, children)),
+            react_1.default.createElement(react_core_1.ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
+                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
+                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    return modal;
+};
+exports.TermsOfUseBase = TermsOfUseBase;
+const TermsOfUse = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+exports.default = TermsOfUse;

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

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

package/dist/cjs/TermsOfUse/TermsOfUse.test.js

@@ -0,0 +1,79 @@
+"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 react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const TermsOfUse_1 = __importDefault(require("./TermsOfUse"));
+const react_core_1 = require("@patternfly/react-core");
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+const body = (react_1.default.createElement(react_core_1.Content, null,
+    react_1.default.createElement("h1", null, "Heading 1"),
+    react_1.default.createElement("p", null, "Legal text")));
+describe('TermsOfUse', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should render modal correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, ouiaId: "Terms" }, body));
+        expect(react_2.screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+        expect(react_2.screen.getByText(/Legal text/i)).toBeTruthy();
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    });
+    it('should handle image and altText props', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, image: "./image.png", altText: "Test image" }, body));
+        expect(react_2.screen.getByRole('img')).toBeTruthy();
+        expect(react_2.screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+    });
+    it('should handle className prop', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, className: "test" }, body));
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('test');
+    });
+    it('should handle title prop', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, title: "Updated title" }, body));
+        expect(react_2.screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+    });
+    it('should handle primary button prop', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, primaryActionBtn: "First" }, body));
+        expect(react_2.screen.getByRole('button', { name: /First/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+    });
+    it('should handle secondary button prop', () => {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle, secondaryActionBtn: "Second" }, body));
+        expect(react_2.screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+    });
+    it('should handle primary button click', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onPrimaryAction: onPrimaryAction, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Accept/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_2.render)(react_1.default.createElement(TermsOfUse_1.default, { isModalOpen: true, onSecondaryAction: onSecondaryAction, handleModalToggle: handleModalToggle }, body));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Decline/i }));
+        expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+        expect(handleModalToggle).not.toHaveBeenCalled();
+    }));
+});

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

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

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

package/dist/cjs/index.d.ts

@@ -46,3 +46,5 @@ export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SourcesCard = exports.SourceDetailsMenuItem = exports.ResponseActions = exports.PreviewAttachment = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
+exports.TermsOfUse = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.ResponseActions = exports.PreviewAttachment = exports.MessageBox = exports.MessageBar = exports.Message = exports.LoadingMessage = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.CodeModal = exports.ChatbotWelcomePrompt = exports.ChatbotToggle = exports.ChatbotPopover = exports.ChatbotModal = exports.ChatbotHeader = exports.ChatbotFooter = exports.ChatbotConversationHistoryNav = exports.ChatbotContent = exports.ChatbotAlert = exports.Chatbot = exports.AttachMenu = exports.AttachmentEdit = void 0;
 var AttachmentEdit_1 = require("./AttachmentEdit");
 Object.defineProperty(exports, "AttachmentEdit", { enumerable: true, get: function () { return __importDefault(AttachmentEdit_1).default; } });
 __exportStar(require("./AttachmentEdit"), exports);
@@ -91,3 +91,6 @@ __exportStar(require("./SourceDetailsMenuItem"), exports);
 var SourcesCard_1 = require("./SourcesCard");
 Object.defineProperty(exports, "SourcesCard", { enumerable: true, get: function () { return __importDefault(SourcesCard_1).default; } });
 __exportStar(require("./SourcesCard"), exports);
+var TermsOfUse_1 = require("./TermsOfUse");
+Object.defineProperty(exports, "TermsOfUse", { enumerable: true, get: function () { return __importDefault(TermsOfUse_1).default; } });
+__exportStar(require("./TermsOfUse"), exports);

package/dist/css/main.css

@@ -1524,6 +1524,7 @@
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 }
 .pf-chatbot__response-actions .pf-v6-c-button {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
   border-radius: var(--pf-t--global--border--radius--pill);
   width: 2.3125rem;
   height: 2.3125rem;
@@ -1531,11 +1532,17 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__response-actions .pf-v6-c-button .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-v6-c-button:hover {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
 }
-.pf-chatbot__response-actions .pf-v6-c-button:hover .pf-v6-c-button__icon, .pf-chatbot__response-actions .pf-v6-c-button:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-v6-c-button:focus {
+  --pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+}
+
+.pf-v6-c-button.pf-chatbot__button--response-action-clicked {
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
 }
 
 .pf-chatbot__source {
@@ -1637,6 +1644,61 @@
   max-width: 20rem;
 }
 
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content {
+  font-size: var(--pf-t--global--font--size--body--lg);
+}
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content h2 {
+  font-size: var(--pf-t--global--icon--size--font--heading--h2);
+  font-family: var(--pf-t--global--font--family--heading);
+  margin-bottom: var(--pf-t--global--spacer--md);
+  margin-top: var(--pf-t--global--spacer--md);
+  font-weight: var(--pf-t--global--font--weight--heading--default);
+}
+.pf-chatbot__terms-of-use-modal .pf-v6-c-content h2:first-of-type {
+  margin-top: 0;
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xl);
+  margin-block-start: var(--pf-t--global--spacer--xl);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--title {
+  font-size: var(--pf-t--global--font--size--heading--h1);
+  font-family: var(--pf-t--global--font--family--heading);
+  font-weight: var(--pf-t--global--font--weight--heading--bold);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--footer {
+  margin-block-start: var(--pf-t--global--spacer--md);
+}
+.pf-chatbot__terms-of-use-modal .pf-chatbot__terms-of-use--section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+@media screen and (max-height: 620px) {
+  .pf-chatbot__terms-of-use-modal .pf-v6-c-modal-box__body {
+    --pf-v6-c-modal-box__body--MinHeight: auto;
+    overflow: visible;
+  }
+}
+
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded {
+  height: inherit;
+}
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen .pf-v6-c-content h2,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded .pf-v6-c-content h2 {
+  font-size: var(--pf-t--global--icon--size--font--heading--h1);
+}
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen .pf-chatbot__terms-of-use--title,
+.pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded .pf-chatbot__terms-of-use--title {
+  font-size: var(--pf-t--global--font--size--heading--2xl);
+}
+
 :where(:root) {
   --pf-t--chatbot--heading--font-family: var(
     --pf-v6-c-content--heading--FontFamily,