@patternfly/chatbot 6.8.0-prerelease.2 → 6.8.0-prerelease.4

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.tracking = exports.ToolResponse = exports.ToolCall = exports.TermsOfUse = exports.SourcesCardBase = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.Onboarding = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.MarkdownContent = exports.LoadingMessage = exports.ImagePreview = exports.FilePreview = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.DeepThinking = exports.Compare = 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.tracking = exports.ToolResponse = exports.ToolCall = exports.TermsOfUse = exports.SourcesCardBase = exports.SourcesCard = exports.SourceDetailsMenuItem = exports.Settings = exports.ResponseActions = exports.PreviewAttachment = exports.Onboarding = exports.MessageDivider = exports.MessageBox = exports.MessageBar = exports.Message = exports.MarkdownContent = exports.ImagePreview = exports.FilePreview = exports.FileDropZone = exports.FileDetailsLabel = exports.FileDetails = exports.DeepThinking = exports.Compare = 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);
@@ -79,9 +79,6 @@ __exportStar(require("./FilePreview"), exports);
 var ImagePreview_1 = require("./ImagePreview");
 Object.defineProperty(exports, "ImagePreview", { enumerable: true, get: function () { return __importDefault(ImagePreview_1).default; } });
 __exportStar(require("./ImagePreview"), exports);
-var LoadingMessage_1 = require("./LoadingMessage");
-Object.defineProperty(exports, "LoadingMessage", { enumerable: true, get: function () { return __importDefault(LoadingMessage_1).default; } });
-__exportStar(require("./LoadingMessage"), exports);
 var MarkdownContent_1 = require("./MarkdownContent");
 Object.defineProperty(exports, "MarkdownContent", { enumerable: true, get: function () { return __importDefault(MarkdownContent_1).default; } });
 __exportStar(require("./MarkdownContent"), exports);

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -2,12 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 // Import PatternFly components
 import { Tooltip, MenuToggle, Dropdown } from '@patternfly/react-core';
-import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { RhUiEllipsisVerticalFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 export const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label = 'Conversation options', 'aria-label': ariaLabel, id }) => {
     const [isOpen, setIsOpen] = useState(false);
     const toggle = (toggleRef) => (_jsx(Tooltip, { className: "pf-chatbot__tooltip", content: label, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none", children: _jsx(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: _jsx(EllipsisIcon, {}) }) }));
+        aria: "none", children: _jsx(MenuToggle, { className: "pf-chatbot__history-actions", variant: "plain", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, ref: toggleRef, isExpanded: isOpen, onClick: () => setIsOpen(!isOpen), id: id, role: "menuitem", children: _jsx(RhUiEllipsisVerticalFillIcon, {}) }) }));
     return (_jsx(Dropdown, { className: `pf-chatbot__selections ${menuClassName !== null && menuClassName !== void 0 ? menuClassName : ''}`, isOpen: isOpen, onSelect: (props) => {
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(props);
             setIsOpen((prev) => !prev);

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -13,13 +13,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useRef, Fragment } from 'react';
 // Import PatternFly components
 import { Button, Divider, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, InputGroup, InputGroupItem, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent } from '@patternfly/react-core';
-import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
+import { RhUiClockIcon, RhUiCommentIcon, RhUiEditFillIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(OutlinedClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, hasDrawerHeadDivider, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(RhUiClockIcon, {}), searchInputScreenReaderText, searchActionStart, searchActionEnd, searchToolbar, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "hasDrawerHeadDivider", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "searchActionStart", "searchActionEnd", "searchToolbar", "menuProps", "menuGroupProps", "menuContentProps"]);
     const drawerRef = useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -27,7 +27,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
     const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
     const getNavItem = (conversation) => {
         var _a;
-        return (_jsx(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
+        return (_jsx(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(RhUiCommentIcon, {}) }), (conversation.menuItems
             ? {
                 actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
@@ -72,7 +72,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
         return searchActionStart || searchActionEnd ? (_jsx("div", { className: "pf-chatbot__history-search-actions", children: _jsxs(InputGroup, { children: [searchActionStart && _jsx(InputGroupItem, { children: searchActionStart }), searchInputContainer && _jsx(InputGroupItem, { isFill: true, children: searchInputContainer }), searchActionEnd && _jsx(InputGroupItem, { children: searchActionEnd })] }) })) : (searchInputContainer);
     };
     const renderPanelContent = () => {
-        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && _jsx(Divider, { className: "pf-chatbot__heading-divider" }), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        const drawer = (_jsxs(_Fragment, { children: [_jsx(DrawerHead, Object.assign({}, drawerHeadProps, { children: _jsxs(DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [_jsx(DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && (_jsx(Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: _jsx(RhUiEditFillIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && _jsx(Divider, { className: "pf-chatbot__heading-divider" }), _jsxs("div", { className: "pf-chatbot__heading-container", children: [_jsxs("div", { className: "pf-chatbot__title-container", children: [_jsx(Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), _jsx(Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? _jsx(LoadingState, Object.assign({}, loadingState)) : renderDrawerContent()] }));
         return (_jsx(DrawerPanelContent, Object.assign({ "aria-live": "polite", focusTrap: { enabled: true }, defaultSize: "384px" }, drawerPanelContentProps, { children: drawer })));
     };
     // An onKeyDown property must be passed to the Drawer component to handle closing

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
-import { CloseIcon } from '@patternfly/react-icons';
+import { RhMicronsCloseIcon } from '@patternfly/react-icons';
 const ChatbotHeaderCloseButtonBase = (_a) => {
     var { className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
     return (_jsx("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: _jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(CloseIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(RhMicronsCloseIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
 };
 export const ChatbotHeaderCloseButton = forwardRef((props, ref) => (_jsx(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotHeader/ChatbotHeaderNewChatButton.js

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
-import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
+import { RhUiEditFillIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-fill-icon';
 const ChatbotHeaderNewChatButtonBase = (_a) => {
     var { className, onClick, tooltipProps, menuAriaLabel = 'New chat', innerRef, tooltipContent = 'New chat', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
     return (_jsx("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: _jsx(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PenToSquareIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: _jsx(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(RhUiEditFillIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
 };
 export const ChatbotHeaderNewChatButton = forwardRef((props, ref) => (_jsx(ChatbotHeaderNewChatButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/MarkdownContent/MarkdownContent.js

@@ -169,6 +169,20 @@ export const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, t
             }
         }, remarkPlugins: [[remarkGfm, Object.assign({}, remarkGfmProps)], ...additionalRemarkPlugins], rehypePlugins: rehypePlugins }, reactMarkdownProps, { remarkRehypeOptions: Object.assign({ 
             // removes sr-only class from footnote labels applied by default
-            footnoteLabelProperties: { className: [''] } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: content })));
+            footnoteLabelProperties: { className: [''] }, 
+            // omit default ↩ text; backref icon is rendered in LinkMessage
+            footnoteBackContent: (_referenceIndex, rereferenceIndex) => {
+                if (rereferenceIndex > 1) {
+                    return [
+                        {
+                            type: 'element',
+                            tagName: 'sup',
+                            properties: {},
+                            children: [{ type: 'text', value: String(rereferenceIndex) }]
+                        }
+                    ];
+                }
+                return [];
+            } }, reactMarkdownProps === null || reactMarkdownProps === void 0 ? void 0 : reactMarkdownProps.remarkRehypeOptions), disallowedElements: disallowedElements, children: content })));
 };
 export default MarkdownContent;

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -17,8 +17,8 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
 import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { css } from '@patternfly/react-styles';
+import { RhUiCopyFillIcon } from '@patternfly/react-icons';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
@@ -73,7 +73,7 @@ const CodeBlockMessage = (_a) => {
         return (_jsx("code", Object.assign({}, props, { className: `pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`, children: children })));
     }
     // Setup code block header
-    const actions = (_jsxs(_Fragment, { children: [_jsxs(CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(CopyIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
+    const actions = (_jsxs(_Fragment, { children: [_jsxs(CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && _jsx("div", { className: "pf-chatbot__message-code-block-language", children: language }), _jsx(Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children), children: copied ? _jsx(CheckIcon, {}) : _jsx(RhUiCopyFillIcon, {}) }), _jsx(Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
     return (_jsx("div", { className: css('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown'), ref: codeBlockRef, children: _jsxs(CodeBlock, { actions: actions, children: [_jsx(CodeBlockCode, { children: _jsx(_Fragment, { children: isExpandable ? (_jsx(ExpandableSection, Object.assign({ variant: ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && (_jsx(ExpandableSectionToggle, Object.assign({ isExpanded: isExpanded, onToggle: onToggle, direction: "up", toggleId: toggleId, contentId: contentId, hasTruncatedContent: true, className: "pf-chatbot__message-code-toggle" }, expandableSectionToggleProps, { children: isExpanded ? finalExpandedText : finalCollapsedText })))] }) }));
 };
 export default CodeBlockMessage;

package/dist/esm/Message/LinkMessage/LinkMessage.js

@@ -14,15 +14,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Chatbot Main - Message - Content - Link
 // ============================================================================
 import { Button } from '@patternfly/react-core';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import { RhMicronsExternalLinkIcon, RhUiBackwardsIcon } from '@patternfly/react-icons';
 import { css } from '@patternfly/react-styles';
+const isFootnoteBackref = (className) => className === null || className === void 0 ? void 0 : className.includes('data-footnote-backref');
 const LinkMessage = (_a) => {
     var { children, target, href, id, shouldRetainStyles } = _a, props = __rest(_a, ["children", "target", "href", "id", "shouldRetainStyles"]);
     if (target === '_blank') {
-        return (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target, 
+        return (_jsx(Button, Object.assign({ component: "a", variant: "link", href: href, icon: _jsx(RhMicronsExternalLinkIcon, {}), iconPosition: "end", isInline: true, target: target, 
             // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
             id: id }, props, { className: css(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
     }
+    if (isFootnoteBackref(props.className)) {
+        return (_jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id, icon: _jsx(RhUiBackwardsIcon, {}) }, props, { className: css(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
+    }
     return (
     // need to explicitly call this out or id doesn't seem to get passed - required for footnotes
     _jsx(Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { className: css(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));

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

@@ -31,10 +31,12 @@ jest.mock('@patternfly/react-icons', () => ({
     RhUiVolumeUpFillIcon: () => _jsx("div", { children: "RhUiVolumeUpFillIcon" }),
     RhUiExportIcon: () => _jsx("div", { children: "RhUiExportIcon" }),
     RhUiExportFillIcon: () => _jsx("div", { children: "RhUiExportFillIcon" }),
+    RhMicronsInformationFillIcon: () => _jsx("div", { children: "RhMicronsInformationFillIcon" }),
     CheckIcon: () => _jsx("div", { children: "CheckIcon" }),
     CloseIcon: () => _jsx("div", { children: "CloseIcon" }),
     ExternalLinkSquareAltIcon: () => _jsx("div", { children: "ExternalLinkSquareAltIcon" }),
-    TimesIcon: () => _jsx("div", { children: "TimesIcon" })
+    TimesIcon: () => _jsx("div", { children: "TimesIcon" }),
+    RhUiBackwardsIcon: () => _jsx("div", { children: "RhUiBackwardsIcon" })
 }));
 const ALL_ACTIONS = [
     { label: /Good response/i },

package/dist/esm/Message/QuickStarts/QuickStartTileDescription.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Button, Flex, pluralize, Popover } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { RhMicronsInformationFillIcon } from '@patternfly/react-icons';
 /** This function is a helper for pluralizing strings stolen from React.
  *
  * @param {number} i The quantity of the string you want to pluralize
@@ -22,7 +22,7 @@ const QuickStartTileDescription = ({ description, prerequisites, prerequisiteWor
     return (_jsxs(_Fragment, { children: [description, prereqs && prereqs.length > 0 && (_jsxs(Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [_jsx("h5", { children: pluralize(prereqs.length, prerequisiteWord, prerequisiteWordPlural) }), _jsx(Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        }, "aria-label": quickStartButtonAriaLabel, children: _jsx(InfoCircleIcon, {}) }), _jsx(Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: _jsx("div", { children: _jsx("ul", { "aria-label": pluralizedPrereq, children: prereqs.map((prerequisite, index) => (
+                        }, "aria-label": quickStartButtonAriaLabel, children: _jsx(RhMicronsInformationFillIcon, {}) }), _jsx(Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: _jsx("div", { children: _jsx("ul", { "aria-label": pluralizedPrereq, children: prereqs.map((prerequisite, index) => (
                                 // eslint-disable-next-line react/no-array-index-key
                                 _jsx("li", { children: prerequisite }, index))) }) }) })] }))] }));
 };

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

@@ -27,8 +27,8 @@ describe('JumpButton', () => {
         yield userEvent.click(screen.getByRole('button', { name: /Back to bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
-    it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('should be hidden if isHidden prop is used', () => {
         render(_jsx(JumpButton, { position: "bottom", onClick: jest.fn(), isHidden: true }));
         expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
-    }));
+    });
 });

package/dist/esm/MessageBox/MessageBox.js

@@ -13,50 +13,79 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // ============================================================================
 // Chatbot Main - Messages
 // ============================================================================
-import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useState, useRef, useCallback, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
 import JumpButton from './JumpButton';
+import { getResizeObserver } from '@patternfly/react-core';
+const SCROLL_EDGE_DELTA = 100;
+const getScrollMetrics = (element) => {
+    const { scrollTop, scrollHeight, clientHeight } = element;
+    const roundedScrollTop = Math.round(scrollTop);
+    const roundedClientHeight = Math.round(clientHeight);
+    const roundedScrollHeight = Math.round(scrollHeight);
+    const distanceFromBottom = roundedScrollHeight - roundedScrollTop - roundedClientHeight;
+    return {
+        roundedScrollTop,
+        roundedClientHeight,
+        roundedScrollHeight,
+        distanceFromBottom,
+        atTop: roundedScrollTop === 0,
+        nearBottom: distanceFromBottom <= SCROLL_EDGE_DELTA,
+        isOverflowing: roundedScrollHeight >= roundedClientHeight
+    };
+};
+const isAtBottomEdge = (metrics, enableSmartScroll, autoScroll, pauseAutoScroll, programmaticScroll = false) => metrics.nearBottom ||
+    programmaticScroll ||
+    (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
+const shouldFollowContentGrowth = (metrics, enableSmartScroll, autoScroll, pauseAutoScroll, programmaticScroll) => programmaticScroll ||
+    metrics.nearBottom ||
+    (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
 export const MessageBox = forwardRef((_a, ref) => {
     var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
-    const [atTop, setAtTop] = useState(false);
-    const [atBottom, setAtBottom] = useState(true);
+    const [atTop, setAtTop] = useState(true);
+    const [atBottom, setAtBottom] = useState(false);
     const [isOverflowing, setIsOverflowing] = useState(false);
+    const [hasMeasuredScroll, setHasMeasuredScroll] = useState(false);
     const [autoScroll, setAutoScroll] = useState(true);
+    const autoScrollRef = useRef(autoScroll);
     const lastScrollTop = useRef(0);
     const animationFrame = useRef(null);
     const debounceTimeout = useRef(null);
     const pauseAutoScrollRef = useRef(false);
+    const programmaticScrollRef = useRef(false);
     const messageBoxRef = useRef(null);
     const scrollQueued = useRef(false);
     const resetUserScrollIntentTimeout = useRef();
+    autoScrollRef.current = autoScroll;
     // Configure handlers
     const handleScroll = useCallback(() => {
         const element = messageBoxRef.current;
         if (!element) {
             return;
         }
-        const { scrollTop, scrollHeight, clientHeight } = element;
-        const roundedScrollTop = Math.round(scrollTop);
-        const roundedClientHeight = Math.round(clientHeight);
-        const roundedScrollHeight = Math.round(scrollHeight);
-        const distanceFromBottom = roundedScrollHeight - roundedScrollTop - roundedClientHeight;
+        const metrics = getScrollMetrics(element);
+        const { roundedScrollTop, distanceFromBottom } = metrics;
         const isScrollingDown = roundedScrollTop > lastScrollTop.current;
         const DELTA_UP = 10;
         const DELTA_DOWN = 50;
         const DEBOUNCE_DELAY = 200;
         const delta = isScrollingDown ? DELTA_DOWN : DELTA_UP;
         const isAtBottom = distanceFromBottom <= delta;
-        setAtTop(roundedScrollTop === 0);
-        setAtBottom(roundedScrollTop + roundedClientHeight >= roundedScrollHeight - 1); // rounding means it could be within a pixel of the bottom
+        setAtTop(metrics.atTop);
+        setAtBottom(isAtBottomEdge(metrics, enableSmartScroll, autoScrollRef.current, pauseAutoScrollRef.current, programmaticScrollRef.current));
+        setIsOverflowing(metrics.isOverflowing);
+        if (isAtBottom) {
+            programmaticScrollRef.current = false;
+        }
         if (!enableSmartScroll || scrollQueued.current) {
             return;
         }
-        if (roundedScrollTop === 0) {
+        if (metrics.roundedScrollTop === 0) {
             pauseAutoScrollRef.current = false;
         }
         if (debounceTimeout.current) {
             clearTimeout(debounceTimeout.current);
         }
-        if (!isAtBottom && !pauseAutoScrollRef.current) {
+        if (!isAtBottom && !metrics.nearBottom && !pauseAutoScrollRef.current && !programmaticScrollRef.current) {
             setAutoScroll(false);
         }
         // User is near bottom and scrolling down - debounce re-enabling auto-scroll
@@ -66,14 +95,7 @@ export const MessageBox = forwardRef((_a, ref) => {
             }, DEBOUNCE_DELAY);
         }
         lastScrollTop.current = roundedScrollTop;
-    }, [messageBoxRef]);
-    const checkOverflow = useCallback(() => {
-        const element = messageBoxRef.current;
-        if (element) {
-            const { scrollHeight, clientHeight } = element;
-            setIsOverflowing(scrollHeight >= clientHeight);
-        }
-    }, [messageBoxRef]);
+    }, [enableSmartScroll]);
     const resumeAutoScroll = useCallback(() => {
         if (!enableSmartScroll) {
             return;
@@ -125,6 +147,7 @@ export const MessageBox = forwardRef((_a, ref) => {
             return;
         }
         scrollQueued.current = true;
+        programmaticScrollRef.current = true;
         if (animationFrame.current) {
             cancelAnimationFrame(animationFrame.current);
         }
@@ -132,24 +155,51 @@ export const MessageBox = forwardRef((_a, ref) => {
             element.scrollTo({ top: element.scrollHeight, behavior });
             resumeAutoScroll();
             scrollQueued.current = false;
+            if (behavior === 'auto') {
+                programmaticScrollRef.current = false;
+                lastScrollTop.current = element.scrollTop;
+            }
         });
         onScrollToBottomClick && onScrollToBottomClick();
     }, [messageBoxRef, enableSmartScroll]);
-    // Detect scroll position
-    useEffect(() => {
+    const measureJumpButtonState = useCallback(() => {
+        const element = messageBoxRef.current;
+        if (!element) {
+            return;
+        }
+        const metrics = getScrollMetrics(element);
+        setAtTop(metrics.atTop);
+        setAtBottom(isAtBottomEdge(metrics, enableSmartScroll, autoScrollRef.current, pauseAutoScrollRef.current, programmaticScrollRef.current));
+        setIsOverflowing(metrics.isOverflowing);
+        setHasMeasuredScroll(true);
+    }, [enableSmartScroll]);
+    const handleContentResize = useCallback(() => {
+        const element = messageBoxRef.current;
+        if (element) {
+            const metrics = getScrollMetrics(element);
+            const shouldFollow = shouldFollowContentGrowth(metrics, enableSmartScroll, autoScrollRef.current, pauseAutoScrollRef.current, programmaticScrollRef.current);
+            if (shouldFollow && !scrollQueued.current) {
+                programmaticScrollRef.current = true;
+                element.scrollTop = element.scrollHeight - element.clientHeight;
+                lastScrollTop.current = element.scrollTop;
+            }
+        }
+        measureJumpButtonState();
+    }, [enableSmartScroll, measureJumpButtonState]);
+    // Detect scroll position before paint to avoid jump button flash on mount
+    useLayoutEffect(() => {
         const element = messageBoxRef.current;
         if (!element) {
             return;
         }
-        // Listen for scroll events
+        measureJumpButtonState();
         element.addEventListener('scroll', handleScroll);
-        // Check initial position and overflow
-        handleScroll();
-        checkOverflow();
+        const resizeObserver = getResizeObserver(element, handleContentResize);
         return () => {
             element.removeEventListener('scroll', handleScroll);
+            resizeObserver();
         };
-    }, [checkOverflow, handleScroll, messageBoxRef]);
+    }, [handleContentResize, handleScroll, measureJumpButtonState]);
     useImperativeHandle(ref, () => {
         const node = messageBoxRef.current;
         // Attach custom methods to the element
@@ -170,12 +220,13 @@ export const MessageBox = forwardRef((_a, ref) => {
         }
         if (!isScrollingDown) {
             pauseAutoScrollRef.current = true;
+            programmaticScrollRef.current = false;
             clearTimeout(resetUserScrollIntentTimeout.current);
             return;
         }
         const { scrollTop, scrollHeight, clientHeight } = container;
         const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        if (distanceFromBottom < 100) {
+        if (distanceFromBottom < SCROLL_EDGE_DELTA) {
             pauseAutoScrollRef.current = false;
             setAutoScroll(true);
         }
@@ -200,6 +251,6 @@ export const MessageBox = forwardRef((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] })), _jsx(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsx(JumpButton, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
 });
 export default MessageBox;

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

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

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

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { createRef } from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { MessageBox } from './MessageBox';
 import userEvent from '@testing-library/user-event';
 describe('MessageBox', () => {
@@ -227,4 +228,62 @@ describe('MessageBox', () => {
         });
         expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
     }));
+    it('should keep auto-scroll active during programmatic scroll to bottom', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const ref = createRef();
+        render(_jsx(MessageBox, { ref: ref, enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(element, 'scrollTop', { configurable: true, value: 0, writable: true });
+        act(() => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom({ behavior: 'smooth' });
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(true);
+        act(() => {
+            element.scrollTop = 500;
+            element.dispatchEvent(new Event('scroll', { bubbles: true }));
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+    it('should not scroll to bottom on initial layout when the message box is at the top', () => {
+        render(_jsx(MessageBox, { enableSmartScroll: true, children: _jsx("div", { children: "Tall message content" }) }));
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+        act(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        expect(region.scrollTop).toBe(0);
+    });
+    it('should show the bottom jump button at the top on initial load when overflowing', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(MessageBox, { enableSmartScroll: true, children: _jsx("div", { children: "Tall message content" }) }));
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0, writable: true });
+        act(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield waitFor(() => {
+            expect(screen.queryByRole('button', { name: /Back to top/i })).toBeFalsy();
+            expect(screen.getByRole('button', { name: /Back to bottom/i })).toBeTruthy();
+        });
+    }));
+    it('should hide the bottom jump button while smart scroll is actively following content', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(MessageBox, { enableSmartScroll: true, children: _jsx("div", { children: "Test message content" }) }));
+        const region = screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 640, writable: true });
+        act(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield waitFor(() => {
+            expect(screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
+            expect(screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
+        });
+    }));
 });

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

@@ -11,39 +11,39 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
-import { DownloadIcon } from '@patternfly/react-icons';
+import { RhUiExportIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 describe('ResponseActionButton', () => {
     it('renders aria-label correctly if not clicked', () => {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
         expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     });
     it('renders aria-label correctly if clicked', () => {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
         expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
     });
     it('renders tooltip correctly if not clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
         expect(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 userEvent.click(screen.getByRole('button', { name: 'Download' }));
         expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
     }));
     it('renders tooltip correctly if clicked', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
         expect(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 userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
         expect(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* () {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), tooltipContent: "Download", isClicked: true }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), tooltipContent: "Download", isClicked: true }));
         // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
         yield userEvent.click(screen.getByRole('button', { name: 'Download' }));
         expect(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* () {
-        render(_jsx(ResponseActionButton, { icon: _jsx(DownloadIcon, {}), ariaLabel: "Download", isClicked: true }));
+        render(_jsx(ResponseActionButton, { icon: _jsx(RhUiExportIcon, {}), ariaLabel: "Download", isClicked: true }));
         expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
     }));
 });