@patternfly/chatbot 6.6.0-prerelease.5 → 6.6.0-prerelease.7

package/dist/esm/Message/Message.js

@@ -33,7 +33,7 @@ import ToolCall from '../ToolCall';
 import MarkdownContent from '../MarkdownContent';
 import { css } from '@patternfly/react-styles';
 export const MessageBase = (_a) => {
-    var { children, role, alignment = 'start', isMetadataVisible = true, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary, useFilledIconsOnClick } = _a, props = __rest(_a, ["children", "role", "alignment", "isMetadataVisible", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary", "useFilledIconsOnClick"]);
+    var { children, role, alignment = 'start', isMetadataVisible = true, content, extraContent, name, avatar, timestamp, isLoading, actions, persistActionSelection, showActionsOnInteraction = false, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], additionalRemarkPlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, inputRef, editFormProps, isCompact, isMarkdownDisabled, reactMarkdownProps, toolResponse, deepThinking, remarkGfmProps, toolCall, hasNoImagesInUserMessages = true, isPrimary, useFilledIconsOnClick } = _a, props = __rest(_a, ["children", "role", "alignment", "isMetadataVisible", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "persistActionSelection", "showActionsOnInteraction", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "additionalRemarkPlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "inputRef", "editFormProps", "isCompact", "isMarkdownDisabled", "reactMarkdownProps", "toolResponse", "deepThinking", "remarkGfmProps", "toolCall", "hasNoImagesInUserMessages", "isPrimary", "useFilledIconsOnClick"]);
     const [messageText, setMessageText] = useState(content);
     useEffect(() => {
         setMessageText(content);
@@ -61,7 +61,7 @@ export const MessageBase = (_a) => {
         }
         return (_jsxs(_Fragment, { children: [beforeMainContent && _jsx(_Fragment, { children: beforeMainContent }), error ? _jsx(ErrorMessage, Object.assign({}, error)) : handleMarkdown()] }));
     };
-    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end'), "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [isMetadataVisible && (_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] })), _jsx("div", { className: "pf-chatbot__message-response", children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: "pf-chatbot__response-actions-groups", children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick })) })), userFeedbackForm && (_jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
+    return (_jsxs("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: css(`pf-chatbot__message pf-chatbot__message--${role}`, alignment === 'end' && 'pf-m-end'), "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props, { children: [avatar && (_jsx(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps))), _jsxs("div", { className: "pf-chatbot__message-contents", children: [isMetadataVisible && (_jsxs("div", { className: "pf-chatbot__message-meta", children: [name && (_jsx("span", { className: "pf-chatbot__message-name", children: _jsx(Truncate, { content: name }) })), role === 'bot' && (_jsx(Label, { variant: "outline", isCompact: true, children: botWord })), _jsx(Timestamp, { date: date, children: timestamp })] })), _jsx("div", { className: "pf-chatbot__message-response", children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "pf-chatbot__message-and-actions", children: [renderMessage(), afterMainContent && _jsx(_Fragment, { children: afterMainContent }), toolResponse && _jsx(ToolResponse, Object.assign({}, toolResponse)), deepThinking && _jsx(DeepThinking, Object.assign({}, deepThinking)), toolCall && _jsx(ToolCall, Object.assign({}, toolCall)), !isLoading && sources && _jsx(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })), quickStarts && quickStarts.quickStart && (_jsx(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })), !isLoading && !isEditable && actions && (_jsx(_Fragment, { children: Array.isArray(actions) ? (_jsx("div", { className: css('pf-chatbot__response-actions-groups', showActionsOnInteraction && 'pf-m-visible-interaction'), children: actions.map((actionGroup, index) => (_jsx(ResponseActions, { actions: actionGroup.actions || actionGroup, persistActionSelection: persistActionSelection || actionGroup.persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick }, index))) })) : (_jsx(ResponseActions, { actions: actions, persistActionSelection: persistActionSelection, useFilledIconsOnClick: useFilledIconsOnClick, showActionsOnInteraction: showActionsOnInteraction })) })), userFeedbackForm && (_jsx(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact }))), userFeedbackComplete && (_jsx(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))), !isLoading && quickResponses && (_jsx(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))] }), attachments && (_jsx("div", { className: "pf-chatbot__message-attachments-container", children: attachments.map((attachment) => {
                                         var _a;
                                         return (_jsx("div", { className: "pf-chatbot__message-attachment", children: _jsx(FileDetailsLabel, { fileName: attachment.name, fileId: attachment.id, onClose: attachment.onClose, onClick: attachment.onClick, isLoading: attachment.isLoading, closeButtonAriaLabel: attachment.closeButtonAriaLabel, languageTestId: attachment.languageTestId, spinnerTestId: attachment.spinnerTestId, variant: isPrimary ? 'outline' : undefined }) }, (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name));
                                     }) })), !isLoading && endContent && _jsx(_Fragment, { children: endContent })] })) })] })] })));

package/dist/esm/Message/Message.test.js

@@ -1036,4 +1036,76 @@ describe('Message', () => {
         expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
         expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
     }));
+    it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is false', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: false, actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to response actions by default', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is true', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is false', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: false, actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to grouped actions container by default', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
 });

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

@@ -34,6 +34,8 @@ type ExtendedActionProps = ActionProps & {
  * Use this component when passing children to Message to customize its structure.
  */
 export interface ResponseActionProps {
+    /** Additional classes for the response actions container. */
+    className?: string;
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
     actions: Record<string, ExtendedActionProps | undefined> & {
         positive?: ActionProps;
@@ -50,6 +52,10 @@ export interface ResponseActionProps {
     /** When true, automatically swaps to filled icon variants when predefined actions are clicked.
      * Predefined actions will use filled variants (e.g., ThumbsUpIcon) when clicked and outline variants (e.g., OutlinedThumbsUpIcon) when not clicked. */
     useFilledIconsOnClick?: boolean;
+    /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+     * that setting this to true will append tooltips inline instead of the document.body.
+     */
+    showActionsOnInteraction?: boolean;
 }
 export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.js

@@ -14,8 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, ThumbsUpIcon, OutlinedThumbsDownIcon, ThumbsDownIcon, OutlinedCopyIcon, DownloadIcon, PencilAltIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
-export const ResponseActions = ({ actions, persistActionSelection = false, useFilledIconsOnClick = 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;
+import { css } from '@patternfly/react-styles';
+export const ResponseActions = (_a) => {
+    var _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, _4;
+    var { className, actions, persistActionSelection = false, useFilledIconsOnClick = false, showActionsOnInteraction = false } = _a, props = __rest(_a, ["className", "actions", "persistActionSelection", "useFilledIconsOnClick", "showActionsOnInteraction"]);
     const [activeButton, setActiveButton] = useState();
     const [clickStatePersisted, setClickStatePersisted] = useState(false);
     const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
@@ -98,9 +100,14 @@ export const ResponseActions = ({ actions, persistActionSelection = false, useFi
         }
         return iconMap[actionName].outlined;
     };
-    return (_jsxs("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && (_jsx(ResponseActionButton, 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: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, 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: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, 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: _jsx(OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && (_jsx(ResponseActionButton, 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: _jsx(PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && (_jsx(ResponseActionButton, 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: _jsx(ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && (_jsx(ResponseActionButton, 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: _jsx(DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && (_jsx(ResponseActionButton, 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: _jsx(VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
+    // We want to append the tooltip inline so that hovering the tooltip keeps the actions container visible
+    // when showActionsOnInteraction is true. Otherwise hovering the tooltip causes the actions container
+    // to disappear but the tooltip will remain visible.
+    const getTooltipContainer = () => responseActions.current || document.body;
+    const getTooltipProps = (tooltipProps) => (Object.assign(Object.assign({}, (showActionsOnInteraction && { appendTo: getTooltipContainer })), tooltipProps));
+    return (_jsxs("div", Object.assign({ ref: responseActions, className: css('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className) }, props, { children: [positive && (_jsx(ResponseActionButton, Object.assign({}, positive, { ariaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response', clickedAriaLabel: (_c = positive.ariaLabel) !== null && _c !== void 0 ? _c : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_d = positive.tooltipContent) !== null && _d !== void 0 ? _d : 'Good response', clickedTooltipContent: (_e = positive.clickedTooltipContent) !== null && _e !== void 0 ? _e : 'Good response recorded', tooltipProps: getTooltipProps(positive.tooltipProps), icon: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, Object.assign({}, negative, { ariaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response', clickedAriaLabel: (_g = negative.ariaLabel) !== null && _g !== void 0 ? _g : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_h = negative.tooltipContent) !== null && _h !== void 0 ? _h : 'Bad response', clickedTooltipContent: (_j = negative.clickedTooltipContent) !== null && _j !== void 0 ? _j : 'Bad response recorded', tooltipProps: getTooltipProps(negative.tooltipProps), icon: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, Object.assign({}, copy, { ariaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copy', clickedAriaLabel: (_l = copy.ariaLabel) !== null && _l !== void 0 ? _l : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_m = copy.tooltipContent) !== null && _m !== void 0 ? _m : 'Copy', clickedTooltipContent: (_o = copy.clickedTooltipContent) !== null && _o !== void 0 ? _o : 'Copied', tooltipProps: getTooltipProps(copy.tooltipProps), icon: _jsx(OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && (_jsx(ResponseActionButton, Object.assign({}, edit, { ariaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Edit', clickedAriaLabel: (_q = edit.ariaLabel) !== null && _q !== void 0 ? _q : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_r = edit.tooltipContent) !== null && _r !== void 0 ? _r : 'Edit ', clickedTooltipContent: (_s = edit.clickedTooltipContent) !== null && _s !== void 0 ? _s : 'Editing', tooltipProps: getTooltipProps(edit.tooltipProps), icon: _jsx(PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && (_jsx(ResponseActionButton, Object.assign({}, share, { ariaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Share', clickedAriaLabel: (_u = share.ariaLabel) !== null && _u !== void 0 ? _u : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_v = share.tooltipContent) !== null && _v !== void 0 ? _v : 'Share', clickedTooltipContent: (_w = share.clickedTooltipContent) !== null && _w !== void 0 ? _w : 'Shared', tooltipProps: getTooltipProps(share.tooltipProps), icon: _jsx(ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && (_jsx(ResponseActionButton, Object.assign({}, download, { ariaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Download', clickedAriaLabel: (_y = download.ariaLabel) !== null && _y !== void 0 ? _y : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_z = download.tooltipContent) !== null && _z !== void 0 ? _z : 'Download', clickedTooltipContent: (_0 = download.clickedTooltipContent) !== null && _0 !== void 0 ? _0 : 'Downloaded', tooltipProps: getTooltipProps(download.tooltipProps), icon: _jsx(DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && (_jsx(ResponseActionButton, Object.assign({}, listen, { ariaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listen', clickedAriaLabel: (_2 = listen.ariaLabel) !== null && _2 !== void 0 ? _2 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_3 = listen.tooltipContent) !== null && _3 !== void 0 ? _3 : 'Listen', clickedTooltipContent: (_4 = listen.clickedTooltipContent) !== null && _4 !== void 0 ? _4 : 'Listening', tooltipProps: getTooltipProps(listen.tooltipProps), icon: _jsx(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 (_createElement(ResponseActionButton, 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'] })));
-            })] }));
+                return (_createElement(ResponseActionButton, 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: getTooltipProps((_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'] })));
+            })] })));
 };
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -324,6 +324,34 @@ describe('ResponseActions', () => {
         yield userEvent.click(customBtn);
         expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));
+    it('should apply pf-m-visible-interaction class when showActionsOnInteraction is true', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: true }));
+        expect(screen.getByTestId('test-id')).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class when showActionsOnInteraction is false', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: false }));
+        expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class by default', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            } }));
+        expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should render with custom className', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, className: "custom-class" }));
+        expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+    });
     describe('icon swapping with useFilledIconsOnClick', () => {
         it('should render outline icons by default', () => {
             render(_jsx(ResponseActions, { actions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.6.0-prerelease.5",
+  "version": "6.6.0-prerelease.7",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/chatbot.md

@@ -40,7 +40,7 @@ Explore our documentation, which covers both the components you'll need to build
     - [Toggle](/extensions/chatbot/ui#toggle)
     - [Header](/extensions/chatbot/ui#header)
     - [Footer](/extensions/chatbot/ui#footer)
-    - [Navigation](/extensions/chatbot/ui#navigation)
+    - [Chat history drawer](/extensions/chatbot/ui#chat-history)
     - [Modals](/extensions/chatbot/ui#modals)
 - Messages: Components that customize features related to the conversation  
     - [Bot and user messages](/extensions/chatbot/messages)

package/patternfly-docs/content/extensions/chatbot/design-guidelines.md

@@ -15,8 +15,8 @@ import "./images.css"
 </div>
 
 1. **Container:** The window that contains the entire ChatBot experience and all of its components.
-1. **Header:** A persistent region at the top of the ChatBot window that contains navigation, branding, and actions.
-1. **Chat history menu:** A menu that contains a history of previous chats.
+1. **Header:** A persistent region at the top of the ChatBot window that contains chat history, branding, and actions.
+1. **Chat history drawer:** A menu used to access previous chats.
 1. **Options menu:** A menu that contains settings that are relevant to your product. This typically includes display options (more details in the [ChatBot variations section](#variations)) and other general settings (more details in the [ChatBot settings and preferences section](#chatbot-settings-and-preferences)).
 1. **Messages:** Elements of the conversation between a ChatBot and user. More details can be found in the [message guidelines](#messages).
 1. **Attachments:** Details about files that a user has uploaded to the ChatBot.
@@ -288,7 +288,7 @@ When a ChatBot is launched via an AI-supported action, the action should be sent
 
 Each time a user begins a new chat, display a [welcome message](#welcome-message), with prompts that provide initial suggestions and indicate the actions that the ChatBot can take.
 
-The default approach for users to create a new chat is by clicking the "New chat" button (which contains a "pen to square" icon) placed at the top of the [chat history menu](#using-the-chat-history-menu). 
+The default approach for users to create a new chat is by clicking the "New chat" button (which contains a "pen to square" icon) placed at the top of the [chat history drawer](#using-the-chat-history-drawer). 
 
 <div class="ws-docs-content-img">
 ![A blue "New chat" button at the top right of a drawer labeled "Chat history".](./img/new-chat-in-nav.svg)
@@ -310,14 +310,12 @@ This can be done using the [quick response](/extensions/chatbot/messages#message
 ![Confirmation options from a bot in response to a user's request.](./img/quick-response-confirmation.svg)
 </div>
 
-### Using the chat history menu
+### Using the chat history drawer
 
-The ChatBot history menu contains a log of a user's previous chats. Clicking the menu icon opens a side drawer in the ChatBot window.
-
-By clicking into the history menu, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
+The chat history drawer can be opened via the hamburger menu in the ChatBot header. In this drawer, users can search through previous conversations and perform additional actions, such as sharing a conversation with others.
 
 <div class="ws-docs-content-img">
-![Conversation history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
+![Chat history with an options menu opened on a previous conversation.](./img/conversation-history.svg)
 </div>
 
 When the chat history is still loading, display skeleton items:
@@ -383,16 +381,16 @@ If a message attachment fails, an error message should share the reason for fail
 
 You can enable users to download chat transcripts, for their personal records or to share with others. When users choose to download a transcript, you can choose how you want to configure the behavior in your ChatBot. 
 
-For guidance, refer to our download transcripts demo, which opens a Markdown file for a conversation within a new tab. 
+For guidance, refer to our [chat transcripts demo](/extensions/chatbot/overview/demo#chat-transcripts), which opens a Markdown file for a conversation within a new tab. 
 
 Choose the download action location that best works for your ChatBot:
 
 #### Download via chat history drawer
 
-If your ChatBot uses a chat history drawer, you can provide a download option in the [actions menu linked to a previous conversation](/extensions/chatbot/ui#drawer-with-conversation-actions).
+If your ChatBot uses chat history, you can provide a download option in the [actions menu linked to a previous conversation](/extensions/chatbot/ui#drawer-with-conversation-actions).
 
 <div class="ws-docs-content-img">
-![Expanded menu for previous chat in the history window, which shows a download option.](./img/download-chat-history.svg)
+![Expanded menu for previous chat in the chat history drawer, which shows a download option.](./img/download-chat-history.svg)
 </div>
 
 #### Download message response action
@@ -405,7 +403,7 @@ To allow users to download individual bot messages, the message actions can incl
 
 #### Download control in header
 
-If you don't use a chat history drawer, you can place an option to download the transcript for the active chat within the header options menu. 
+If you don't use chat history, you can place an option to download the transcript for the active chat within the header options menu. 
 
 <div class="ws-docs-content-img">
 ![Download transcript action within the ChatBot header options menu.](./img/download-header.svg)

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx

@@ -4,22 +4,43 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const ResponseActionExample: FunctionComponent = () => (
-  <Message
-    name="Bot"
-    role="bot"
-    avatar={patternflyAvatar}
-    content="I updated your account with those settings. You're ready to set up your first dashboard!"
-    actions={{
-      // eslint-disable-next-line no-console
-      positive: { onClick: () => console.log('Good response') },
-      // eslint-disable-next-line no-console
-      negative: { onClick: () => console.log('Bad response') },
-      // eslint-disable-next-line no-console
-      copy: { onClick: () => console.log('Copy') },
-      // eslint-disable-next-line no-console
-      download: { onClick: () => console.log('Download') },
-      // eslint-disable-next-line no-console
-      listen: { onClick: () => console.log('Listen') }
-    }}
-  />
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="I updated your account with those settings. You're ready to set up your first dashboard!"
+      actions={{
+        // eslint-disable-next-line no-console
+        positive: { onClick: () => console.log('Good response') },
+        // eslint-disable-next-line no-console
+        negative: { onClick: () => console.log('Bad response') },
+        // eslint-disable-next-line no-console
+        copy: { onClick: () => console.log('Copy') },
+        // eslint-disable-next-line no-console
+        download: { onClick: () => console.log('Download') },
+        // eslint-disable-next-line no-console
+        listen: { onClick: () => console.log('Listen') }
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      showActionsOnInteraction
+      avatar={patternflyAvatar}
+      content="This message has response actions visually hidden until you hover over the message via mouse, or an action would receive focus via keyboard."
+      actions={{
+        // eslint-disable-next-line no-console
+        positive: { onClick: () => console.log('Good response') },
+        // eslint-disable-next-line no-console
+        negative: { onClick: () => console.log('Bad response') },
+        // eslint-disable-next-line no-console
+        copy: { onClick: () => console.log('Copy') },
+        // eslint-disable-next-line no-console
+        download: { onClick: () => console.log('Download') },
+        // eslint-disable-next-line no-console
+        listen: { onClick: () => console.log('Listen') }
+      }}
+    />
+  </>
 );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -95,14 +95,16 @@ For example, you can use the default divider to display a "timestamp" for more s
 
 ### Message actions
 
-You can add actions to a message, to allow users to interact with the message content. These actions can include:
+To let users interact with a bot's responses, you can add support for message actions. While you can customize message actions to your needs, default options include the following:
 
-- Feedback responses that allow users to rate a message as "good" or "bad".
-- Copy and share controls that allow users to share the message content with others.
-- An edit action to allow users to edit a message they previously sent. This should only be applied to user messages - see the [user messages example](#user-messages) for details on how to implement this action.
-- A listen action, that will read the message content out loud.
+- Positive and negative feedback: Allows users to rate a message as "good" or "bad."
+- Copy: Allows users to copy the message content to their clipboard.
+- Download: Allows users to download the message content.
+- Listen: Reads the message content out loud using text-to-speech.
 
-**Note:** The logic for the actions is not built into the component and must be implemented by the consuming application.
+You can display message actions by default, or use the `showActionsOnInteraction` prop to reveal actions on hover or keyboard focus.
+
+**Note**: The underlying logic for these actions is not built-in and must be implemented within the consuming application.
 
 ```js file="./MessageWithResponseActions.tsx"
 
@@ -140,11 +142,10 @@ When `persistActionSelection` is `true`:
 
 ### Message actions that fill
 
-To provide enhanced visual feedback when users interact with response actions, you can enable icon swapping by setting `useFilledIconsOnClick` to `true`. When enabled, the predefined "positive" and "negative" actions will automatically swap to their filled icon counterparts when clicked, replacing the original outlined icon variants. 
+To provide enhanced visual feedback when users interact with response actions, you can enable icon swapping by setting `useFilledIconsOnClick` to `true`. When enabled, the predefined "positive" and "negative" actions will automatically swap to their filled icon counterparts when clicked, replacing the original outlined icon variants.
 
 This is especially useful for actions that are intended to persist (such as the "positive" and "negative" responses), so that a user's selection is more clear and emphasized.
 
-
 ```js file="./MessageWithIconSwapping.tsx"
 
 ```

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -80,7 +80,7 @@ export const BasicDemo: FunctionComponent = () => {
             showAll && setShowAll(!showAll);
           }}
           name="basic-inline-radio"
-          label="With menu"
+          label="With chat history drawer"
           id="menu"
         />
         <Checkbox

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -189,9 +189,9 @@ The ChatBot header is persistent, and contains the title for the ChatBot window,
 
 The `<ChatbotHeader>` has 2 sections:
 
-- `<ChatbotHeaderMain>` contains the title and an optional menu toggle or new chat button:
+- `<ChatbotHeaderMain>` contains the title and an optional hamburger menu toggle or new chat button:
   - `<ChatbotHeaderTitle>` handles the layout and display of a title or image at different responsive sizes.
-  - `<ChatbotHeaderMenu>` (optional) is placed on the left side of the header and used to toggle a chat history menu.
+  - `<ChatbotHeaderMenu>` (optional) is placed on the left side of the header and used to toggle a chat history drawer.
   - `<ChatbotHeaderNewChatButton>` (optional) is placed on the left side of the header and used to initiate a new chat.
 - `<ChatbotHeaderActions>` contains any additional controls:
   - The `<ChatbotHeaderSelectorDropdown>` component is a standard PatternFly dropdown that matches the ChatBot styles.
@@ -227,8 +227,8 @@ There are a variety of options and customizations you can make to the header, to
 
 In this example, select the respective checkbox to toggle these features:
 
-- **Menu:** Users can select the menu toggle to open a menu of additional options or actions.
-- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [conversation history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
+- **Chat history drawer:** Users can select the hamburger menu toggle to open the [chat history drawer](#chat-history).
+- **New chat button:** Used to start a new chat session. The header button can be used in addition to or in place of a new chat button within the [chat history drawer](/extensions/chatbot/ui/#drawer-with-search-and-new-chat-button).
 - **Left-aligned logo**
 - **Centered logo**
 - **Selector dropdown:** Users can choose from preselected options in a dropdown menu. For example, they can toggle between AI models.
@@ -339,11 +339,11 @@ This example shows a simplified method of handling the "thinking" animation: aft
 
 ```
 
-## Navigation
+## Chat history
 
-### Side nav in a drawer
+### Chat history drawer
 
-The ChatBot conversation history is contained in an interactive drawer, where users can interact with previous conversations or start a new conversation.
+A user's chat history is contained in an interactive drawer, where they can interact with previous conversations or start a new conversation.
 
 The `<ChatbotConversationHistoryNav>` component is a wrapper placed within `<Chatbot>`, which contains all other ChatBot components in `drawerContent`. There is a focus trap so users can only tab within the drawer while it is open.
 
@@ -367,14 +367,14 @@ The code structure will look like this:
 </Chatbot>
 ```
 
-The conversation history drawer looks different depending on the `displayMode` of the parent `<Chatbot>`. (As shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
+The chat history drawer looks different depending on the `displayMode` of the parent `<Chatbot>` (as shown in the [main ChatBot demo](/extensions/chatbot/overview/demo#basic-chatbot).):
 
-- `Default` and `docked` display modes display the conversation history on top of the rest of the ChatBot content, with a PatternFly backdrop between the drawer panel and drawer content.
-- `Fullscreen` and `embedded` display modes display the conversation history in line with the drawer content.
+- `Default` and `docked` display modes display the chat history on top of the rest of the ChatBot content, with a PatternFly backdrop between the drawer panel and drawer content.
+- `Fullscreen` and `embedded` display modes display the chat history in line with the drawer content.
 
 ### Drawer with search and "new chat" button
 
-In the conversation history drawer, users can search previous ChatBot conversations via an input field. To customize the placeholder text, use `searchInputPlaceholder`. Provide an aria label via `searchInputAriaLabel`.
+In the chat history drawer, users can search previous ChatBot conversations via an input field. To customize the placeholder text, use `searchInputPlaceholder`. Provide an aria label via `searchInputAriaLabel`.
 
 They can also start new conversations via a "New chat" button. To customize the button label, use `newChatButtonText`.
 
@@ -386,7 +386,7 @@ Both the search input field and "New chat" buttons are optional. The `reverseBut
 
 ### Drawer with search actions
 
-You can customize the search experience within the conversation history drawer via the `searchActionStart` and `searchActionEnd` props, which provide additional search controls before and after the input field. These props are useful for adding filtering, sorting, or other search-related functionality.
+You can customize the search experience within the chat history drawer via the `searchActionStart` and `searchActionEnd` props, which provide additional search controls before and after the input field. These props are useful for adding filtering, sorting, or other search-related functionality.
 
 You can also add a visual divider between the drawer head and the title by setting `hasDrawerHeadDivider` to `true`.
 
@@ -404,15 +404,15 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also
 
 ### Pinning conversations
 
-To help users track important conversations, add a "pin" option to the conversation action menus. This action moves a conversation to a dedicated "pinned" section at the top of the history drawer for quick access. Pinned items should contain an "unpin" option, so that users can remove pinned conversations as needed.
+To help users track important conversations, add a "pin" option to the conversation action menus. This action moves a conversation to a dedicated "pinned" section at the top of the chat history drawer for quick access. Pinned items should contain an "unpin" option, so that users can remove pinned conversations as needed.
 
 ```js file="./ChatbotHeaderDrawerWithPin.tsx"
 
 ```
 
-### Renaming conversations in history drawer
+### Renaming conversations in chat history drawer
 
-You can allow users to rename a conversation in the history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:
+You can allow users to rename a conversation in the chat history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:
 
 - When the modal opens, focus is placed at the end of the text input.
 - When the modal closes, focus goes back to the action toggle that was previously opened.
@@ -433,7 +433,7 @@ If you're showing a conversation that is already active, you can set the `active
 
 ### Resizable drawer
 
-By default, the conversation history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their conversation history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
+By default, the chat history drawer has a fixed width (384px) and a focus trap. To provide users with more flexibility as they navigate their chat history, or to better support embedded ChatBots on tablet-sized devices or smaller browser windows, you can instead make the drawer resizable. By default, even resizable drawers will still open to their full width on mobile devices.
 
 In this example, the drawer can be resized up to the max size of the parent and resized down to 200px wide. To customize this behavior further (including width, style, and focus behavior) use PatternFly [`<Drawer>` props](/components/drawer#props), [`<DrawerPanelContent>` props](/components/drawer/#drawerpanelcontent), or any other drawer subcomponents.
 

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md

@@ -95,7 +95,7 @@ This demo displays a basic ChatBot, which includes:
 - Sending a message to the ChatBot.
 - Receiving a response from a backend AI tool with a loading message state.
 
-6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#chat-history) toggled open and closed by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
 7. A "Skip to chatbot" button that allows you to skip to the chatbot content via the [PatternFly skip to content component](/extensions/chatbot/ui#skip-to-content). To display this button you must tab into the main window.
 
@@ -126,7 +126,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
    - [Speech to text.](/extensions/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
    - Sending a message to the ChatBot.
    - Receiving a response from a backend AI tool with a loading message state.
-6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#navigation) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
+6. A [`<ChatbotConversationHistoryNav>`](/extensions/chatbot/ui#chat-history) that can be toggled by the `<ChatbotHeaderMenu`> in the `<ChatbotHeader>`.
 
 ```js file="./EmbeddedChatbot.tsx" isFullscreen
 
@@ -196,7 +196,7 @@ This demo illustrates how you could add downloadable transcripts to your ChatBot
 
 A message transcript includes details from a single chat message. To download a sample message transcript in this demo, click the "Download" action under a bot message.
 
-A conversation transcript includes details from the entirety of a ChatBot conversation. To download a sample conversation transcript in this demo, open the chat history menu and click "Download" in the options menu for the conversation.
+A conversation transcript includes details from the entirety of a ChatBot conversation. To download a sample conversation transcript in this demo, open the chat history drawer and click "Download" in the options menu for the conversation.
 
 In this example, file download is implemented with [file-saver](https://www.npmjs.com/package/file-saver).
 

package/src/Chatbot/Chatbot.scss

@@ -9,7 +9,10 @@
   flex-direction: column;
   width: 30rem;
   height: 70vh;
-  background-color: var(--pf-t--global--background--color--secondary--default);
+  background-color: var(
+    --pf-t--global--background--color--floating--secondary--default,
+    --pf-t--global--background--color--secondary--default
+  );
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
   font-size: var(--pf-t--global--font--size--md);
@@ -72,6 +75,8 @@
 // Chatbot Display Mode - Fullscreen
 // ============================================================================
 .pf-chatbot--fullscreen {
+  background-color: var(--pf-t--global--background--color--secondary--default);
+
   // for high contrast support
   border: unset;
   inset-block-end: 0;
@@ -87,6 +92,8 @@
 // Chatbot Display Mode - Embedded
 // ============================================================================
 .pf-chatbot--embedded {
+  background-color: var(--pf-t--global--background--color--secondary--default);
+
   // for high contrast support
   border: unset;
   position: static;

package/src/ChatbotContent/ChatbotContent.scss

@@ -3,7 +3,10 @@
 // ============================================================================
 .pf-chatbot__content {
   position: relative;
-  background-color: var(--pf-t--global--background--color--secondary--default);
+  background-color: var(
+    --pf-t--global--background--color--floating--secondary--default,
+    --pf-t--global--background--color--secondary--default
+  );
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI
@@ -26,6 +29,7 @@
   .pf-chatbot--fullscreen,
   .pf-chatbot--embedded {
     .pf-chatbot__content {
+      background-color: var(--pf-t--global--background--color--secondary--default);
       display: flex;
       justify-content: center;
     }