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

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.js

@@ -1,19 +1,16 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotConversationHistoryDropdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
-const ellipsis_v_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon"));
+const rh_ui_ellipsis_vertical_fill_icon_1 = require("@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon");
 const ChatbotConversationHistoryDropdown = ({ menuItems, menuClassName, onSelect, label = 'Conversation options', 'aria-label': ariaLabel, id }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { className: "pf-chatbot__tooltip", content: label, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.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: (0, jsx_runtime_1.jsx)(ellipsis_v_icon_1.default, {}) }) }));
+        aria: "none", children: (0, jsx_runtime_1.jsx)(react_core_1.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: (0, jsx_runtime_1.jsx)(rh_ui_ellipsis_vertical_fill_icon_1.RhUiEllipsisVerticalFillIcon, {}) }) }));
     return ((0, jsx_runtime_1.jsx)(react_core_1.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/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -25,7 +25,7 @@ const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotC
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
 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 = (0, jsx_runtime_1.jsx)(react_icons_1.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 = (0, jsx_runtime_1.jsx)(react_icons_1.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 = (0, react_1.useRef)(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -33,7 +33,7 @@ const ChatbotConversationHistoryNav = (_a) => {
     const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
     const getNavItem = (conversation) => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(react_core_1.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 : (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCommentAltIcon, {}) }), (conversation.menuItems
+        return ((0, jsx_runtime_1.jsx)(react_core_1.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 : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCommentIcon, {}) }), (conversation.menuItems
             ? {
                 actions: ((0, jsx_runtime_1.jsx)(ChatbotConversationHistoryDropdown_1.default, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
             }
@@ -78,7 +78,7 @@ const ChatbotConversationHistoryNav = (_a) => {
         return searchActionStart || searchActionEnd ? ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__history-search-actions", children: (0, jsx_runtime_1.jsxs)(react_core_1.InputGroup, { children: [searchActionStart && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { children: searchActionStart }), searchInputContainer && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { isFill: true, children: searchInputContainer }), searchActionEnd && (0, jsx_runtime_1.jsx)(react_core_1.InputGroupItem, { children: searchActionEnd })] }) })) : (searchInputContainer);
     };
     const renderPanelContent = () => {
-        const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.PenToSquareIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && (0, jsx_runtime_1.jsx)(react_core_1.Divider, { className: "pf-chatbot__heading-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__heading-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
+        const drawer = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerHead, Object.assign({}, drawerHeadProps, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DrawerActions, Object.assign({ "data-testid": drawerActionsTestId, className: reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : '' }, drawerActionsProps, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DrawerCloseButton, Object.assign({ onClick: onDrawerToggle }, drawerCloseButtonProps)), onNewChat && ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ size: isCompact ? 'sm' : undefined, onClick: onNewChat, icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiEditFillIcon, {}) }, newChatButtonProps, { children: newChatButtonText })))] })) })), hasDrawerHeadDivider && (0, jsx_runtime_1.jsx)(react_core_1.Divider, { className: "pf-chatbot__heading-divider" }), (0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__heading-container", children: [(0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__title-container", children: [(0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: "lg", className: "pf-chatbot__title-icon", children: navTitleIcon }), (0, jsx_runtime_1.jsx)(react_core_1.Title, Object.assign({ className: "pf-chatbot__title", headingLevel: "h2" }, navTitleProps, { children: title }))] }), !isLoading && renderSearchAndActions()] }), isLoading ? (0, jsx_runtime_1.jsx)(LoadingState_1.default, Object.assign({}, loadingState)) : renderDrawerContent()] }));
         return ((0, jsx_runtime_1.jsx)(react_core_1.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/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -20,6 +20,6 @@ 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 ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(react_icons_1.CloseIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsCloseIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
 };
 exports.ChatbotHeaderCloseButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js

@@ -10,15 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const bars_icon_1 = __importDefault(require("@patternfly/react-icons/dist/esm/icons/bars-icon"));
+const rh_ui_menu_bars_icon_1 = require("@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon");
 const ChatbotHeaderMenuBase = (_a) => {
     var { className, onMenuToggle, tooltipProps, menuAriaLabel = 'Chat history drawer', innerRef, tooltipContent = 'Chat history drawer', isCompact } = _a, props = __rest(_a, ["className", "onMenuToggle", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
     const [isDrawerAnimating, setIsDrawerAnimating] = (0, react_1.useState)(false);
@@ -45,7 +42,7 @@ const ChatbotHeaderMenuBase = (_a) => {
             return () => clearTimeout(timeout);
         }
     }, [drawerState, isDrawerOpen]);
-    const button = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef !== null && innerRef !== void 0 ? innerRef : buttonRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(bars_icon_1.default, {}) }), size: isCompact ? 'sm' : undefined }, props))), 
+    const button = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef !== null && innerRef !== void 0 ? innerRef : buttonRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(rh_ui_menu_bars_icon_1.RhUiMenuBarsIcon, {}) }), size: isCompact ? 'sm' : undefined }, props))), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isCompact, menuAriaLabel, onMenuToggle, innerRef, buttonRef]);
     return ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu ${className}`, children: isDrawerAnimating ? (button) : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 

package/dist/cjs/ChatbotHeader/ChatbotHeaderNewChatButton.js

@@ -15,11 +15,11 @@ exports.ChatbotHeaderNewChatButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const pen_to_square_icon_1 = require("@patternfly/react-icons/dist/esm/icons/pen-to-square-icon");
+const rh_ui_edit_fill_icon_1 = require("@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 ((0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
             // prevents VO announcements of both aria label and tooltip
-            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(pen_to_square_icon_1.PenToSquareIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
+            aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(rh_ui_edit_fill_icon_1.RhUiEditFillIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })) }));
 };
 exports.ChatbotHeaderNewChatButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(ChatbotHeaderNewChatButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/FileDropZone/FileDropZone.js

@@ -19,7 +19,7 @@ const react_icons_1 = require("@patternfly/react-icons");
 const FileDropZone = (_a) => {
     var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "displayMode"]);
     const [showDropZone, setShowDropZone] = (0, react_1.useState)(false);
-    const renderDropZone = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUploadMain, { titleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.UploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
+    const renderDropZone = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUploadMain, { titleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiUploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
     return ((0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: (acceptedFiles, fileRejections, event) => {
                 setShowDropZone(false);
                 onAttach && onAttach(acceptedFiles, fileRejections, event);

package/dist/cjs/MarkdownContent/MarkdownContent.js

@@ -175,7 +175,21 @@ const MarkdownContent = ({ content, isMarkdownDisabled, codeBlockProps, tablePro
             }
         }, remarkPlugins: [[remark_gfm_1.default, 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 })));
 };
 exports.MarkdownContent = MarkdownContent;
 exports.default = exports.MarkdownContent;

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -19,8 +19,8 @@ const react_1 = require("react");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const check_icon_1 = require("@patternfly/react-icons/dist/esm/icons/check-icon");
-const copy_icon_1 = require("@patternfly/react-icons/dist/esm/icons/copy-icon");
 const react_styles_1 = require("@patternfly/react-styles");
+const react_icons_1 = require("@patternfly/react-icons");
 const DEFAULT_EXPANDED_TEXT = 'Show less';
 const DEFAULT_COLLAPSED_TEXT = 'Show more';
 const CodeBlockMessage = (_a) => {
@@ -75,7 +75,7 @@ const CodeBlockMessage = (_a) => {
         return ((0, jsx_runtime_1.jsx)("code", Object.assign({}, props, { className: `pf-chatbot__message-inline-code ${isPrimary ? 'pf-m-primary' : ''}`, children: children })));
     }
     // Setup code block header
-    const actions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block-language", children: language }), (0, jsx_runtime_1.jsx)(react_core_1.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 ? (0, jsx_runtime_1.jsx)(check_icon_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(copy_icon_1.CopyIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
+    const actions = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_core_1.CodeBlockAction, { className: "pf-chatbot__message-code-block-default-action", children: [language && (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-code-block-language", children: language }), (0, jsx_runtime_1.jsx)(react_core_1.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 ? (0, jsx_runtime_1.jsx)(check_icon_1.CheckIcon, {}) : (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCopyFillIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef })] }), customActions] }));
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-code-block', shouldRetainStyles && 'pf-m-markdown'), ref: codeBlockRef, children: (0, jsx_runtime_1.jsxs)(react_core_1.CodeBlock, { actions: actions, children: [(0, jsx_runtime_1.jsx)(react_core_1.CodeBlockCode, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isExpandable ? ((0, jsx_runtime_1.jsx)(react_core_1.ExpandableSection, Object.assign({ variant: react_core_1.ExpandableSectionVariant.truncate, isExpanded: isExpanded, isDetached: true, toggleId: toggleId, contentId: contentId }, expandableSectionProps, { children: children }))) : (children) }) }), isExpandable && ((0, jsx_runtime_1.jsx)(react_core_1.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 })))] }) }));
 };
 exports.default = CodeBlockMessage;

package/dist/cjs/Message/LinkMessage/LinkMessage.js

@@ -18,13 +18,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
 const react_styles_1 = require("@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 ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: "link", href: href, icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkSquareAltIcon, {}), iconPosition: "end", isInline: true, target: target, 
+        return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ component: "a", variant: "link", href: href, icon: (0, jsx_runtime_1.jsx)(react_icons_1.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: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));
     }
+    if (isFootnoteBackref(props.className)) {
+        return ((0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id, icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiBackwardsIcon, {}) }, props, { className: (0, react_styles_1.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
     (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ isInline: true, component: "a", href: href, variant: "link", id: id }, props, { className: (0, react_styles_1.css)(shouldRetainStyles && 'pf-m-markdown', props === null || props === void 0 ? void 0 : props.className), children: children })));

package/dist/cjs/Message/Message.test.js

@@ -23,24 +23,7 @@ const monitor_sampleapp_quickstart_with_image_1 = require("./QuickStarts/monitor
 const rehype_external_links_1 = __importDefault(require("../__mocks__/rehype-external-links"));
 const react_core_1 = require("@patternfly/react-core");
 // Mock the icon components
-jest.mock('@patternfly/react-icons', () => ({
-    RhUiLikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeIcon" }),
-    RhUiLikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeFillIcon" }),
-    RhUiDislikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeIcon" }),
-    RhUiDislikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeFillIcon" }),
-    RhUiCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyIcon" }),
-    RhUiCopyFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyFillIcon" }),
-    RhUiEditIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditIcon" }),
-    RhUiEditFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditFillIcon" }),
-    RhUiVolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpIcon" }),
-    RhUiVolumeUpFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpFillIcon" }),
-    RhUiExportIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportIcon" }),
-    RhUiExportFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportFillIcon" }),
-    CheckIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "CheckIcon" }),
-    CloseIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "CloseIcon" }),
-    ExternalLinkSquareAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ExternalLinkSquareAltIcon" }),
-    TimesIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "TimesIcon" })
-}));
+jest.mock('@patternfly/react-icons', () => (Object.assign(Object.assign({}, jest.requireActual('@patternfly/react-icons')), { RhUiLikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeIcon" }), RhUiLikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeFillIcon" }), RhUiDislikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeIcon" }), RhUiDislikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeFillIcon" }), RhUiCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyIcon" }), RhUiCopyFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyFillIcon" }), RhUiEditIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditIcon" }), RhUiEditFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditFillIcon" }), RhUiVolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpIcon" }), RhUiVolumeUpFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpFillIcon" }), RhUiExportIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportIcon" }), RhUiExportFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportFillIcon" }), RhMicronsInformationFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhMicronsInformationFillIcon" }), RhUiBackwardsIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiBackwardsIcon" }), RhMicronsExternalLinkIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhMicronsExternalLinkIcon" }) })));
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },

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

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pluralizeWord = pluralizeWord;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
-const info_circle_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/info-circle-icon"));
+const react_icons_1 = require("@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
@@ -28,7 +25,7 @@ const QuickStartTileDescription = ({ description, prerequisites, prerequisiteWor
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [description, prereqs && prereqs.length > 0 && ((0, jsx_runtime_1.jsxs)(react_core_1.Flex, { spaceItems: { default: 'spaceItemsSm' }, children: [(0, jsx_runtime_1.jsx)("h5", { children: (0, react_core_1.pluralize)(prereqs.length, prerequisiteWord, prerequisiteWordPlural) }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
-                        }, "aria-label": quickStartButtonAriaLabel, children: (0, jsx_runtime_1.jsx)(info_circle_icon_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { "aria-label": pluralizedPrereq, children: prereqs.map((prerequisite, index) => (
+                        }, "aria-label": quickStartButtonAriaLabel, children: (0, jsx_runtime_1.jsx)(react_icons_1.RhMicronsInformationFillIcon, {}) }), (0, jsx_runtime_1.jsx)(react_core_1.Popover, { "aria-label": pluralizedPrereq, headerContent: pluralizedPrereq, triggerRef: buttonRef, bodyContent: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { "aria-label": pluralizedPrereq, children: prereqs.map((prerequisite, index) => (
                                 // eslint-disable-next-line react/no-array-index-key
                                 (0, jsx_runtime_1.jsx)("li", { children: prerequisite }, index))) }) }) })] }))] }));
 };

package/dist/cjs/MessageBar/MessageBar.test.js

@@ -23,7 +23,7 @@ const SourceDetailsMenuItem_1 = __importDefault(require("../SourceDetailsMenuIte
 const MessageBar_1 = require("./MessageBar");
 const ATTACH_MENU_ITEMS = [
     (0, jsx_runtime_1.jsx)(react_core_1.DropdownList, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0", children: (0, jsx_runtime_1.jsx)(SourceDetailsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_3280_27488)", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z", fill: "white" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_3280_27488", children: (0, jsx_runtime_1.jsx)("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" }) }) })] }), name: "auth-operator", type: "Pod" }) }) }, "list-1"),
-    (0, jsx_runtime_1.jsx)(react_core_1.DropdownGroup, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DropdownList, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, {}), children: "Alerts" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Events", id: "2", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CalendarAltIcon, {}), children: "Events" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ClipboardIcon, {}), children: "Logs" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - Status" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - All contents" })] }) }, "group2")
+    (0, jsx_runtime_1.jsx)(react_core_1.DropdownGroup, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DropdownList, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiAttentionBellIcon, {}), children: "Alerts" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Events", id: "2", icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCalendarIcon, {}), children: "Events" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiClipboardIcon, {}), children: "Logs" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCodeIcon, {}), children: "YAML - Status" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCodeIcon, {}), children: "YAML - All contents" })] }) }, "group2")
 ];
 const originalSpeechRecognition = window.SpeechRecognition;
 const mockSpeechRecognition = () => {

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

@@ -32,8 +32,8 @@ describe('JumpButton', () => {
         yield user_event_1.default.click(react_1.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', () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn(), isHidden: true }));
         expect(react_1.screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
-    }));
+    });
 });

package/dist/cjs/MessageBox/MessageBox.js

@@ -21,48 +21,77 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
+const react_core_1 = require("@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);
 exports.MessageBox = (0, react_1.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] = (0, react_1.useState)(false);
-    const [atBottom, setAtBottom] = (0, react_1.useState)(true);
+    const [atTop, setAtTop] = (0, react_1.useState)(true);
+    const [atBottom, setAtBottom] = (0, react_1.useState)(false);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
+    const [hasMeasuredScroll, setHasMeasuredScroll] = (0, react_1.useState)(false);
     const [autoScroll, setAutoScroll] = (0, react_1.useState)(true);
+    const autoScrollRef = (0, react_1.useRef)(autoScroll);
     const lastScrollTop = (0, react_1.useRef)(0);
     const animationFrame = (0, react_1.useRef)(null);
     const debounceTimeout = (0, react_1.useRef)(null);
     const pauseAutoScrollRef = (0, react_1.useRef)(false);
+    const programmaticScrollRef = (0, react_1.useRef)(false);
     const messageBoxRef = (0, react_1.useRef)(null);
     const scrollQueued = (0, react_1.useRef)(false);
     const resetUserScrollIntentTimeout = (0, react_1.useRef)();
+    autoScrollRef.current = autoScroll;
     // Configure handlers
     const handleScroll = (0, react_1.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
@@ -72,14 +101,7 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
             }, DEBOUNCE_DELAY);
         }
         lastScrollTop.current = roundedScrollTop;
-    }, [messageBoxRef]);
-    const checkOverflow = (0, react_1.useCallback)(() => {
-        const element = messageBoxRef.current;
-        if (element) {
-            const { scrollHeight, clientHeight } = element;
-            setIsOverflowing(scrollHeight >= clientHeight);
-        }
-    }, [messageBoxRef]);
+    }, [enableSmartScroll]);
     const resumeAutoScroll = (0, react_1.useCallback)(() => {
         if (!enableSmartScroll) {
             return;
@@ -131,6 +153,7 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
             return;
         }
         scrollQueued.current = true;
+        programmaticScrollRef.current = true;
         if (animationFrame.current) {
             cancelAnimationFrame(animationFrame.current);
         }
@@ -138,24 +161,51 @@ exports.MessageBox = (0, react_1.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
-    (0, react_1.useEffect)(() => {
+    const measureJumpButtonState = (0, react_1.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 = (0, react_1.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
+    (0, react_1.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 = (0, react_core_1.getResizeObserver)(element, handleContentResize);
         return () => {
             element.removeEventListener('scroll', handleScroll);
+            resizeObserver();
         };
-    }, [checkOverflow, handleScroll, messageBoxRef]);
+    }, [handleContentResize, handleScroll, measureJumpButtonState]);
     (0, react_1.useImperativeHandle)(ref, () => {
         const node = messageBoxRef.current;
         // Attach custom methods to the element
@@ -176,12 +226,13 @@ exports.MessageBox = (0, react_1.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);
         }
@@ -206,6 +257,6 @@ exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
 });
 exports.default = exports.MessageBox;

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

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

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

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
 const MessageBox_1 = require("./MessageBox");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('MessageBox', () => {
@@ -232,4 +233,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 = (0, react_1.createRef)();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        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 });
+        (0, react_2.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);
+        (0, react_2.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', () => {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Tall message content" }) }));
+        const region = react_2.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 });
+        (0, react_2.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* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Tall message content" }) }));
+        const region = react_2.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 });
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(react_2.screen.queryByRole('button', { name: /Back to top/i })).toBeFalsy();
+            expect(react_2.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* () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { enableSmartScroll: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const region = react_2.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 });
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
+        yield (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByRole('button', { name: /Back to top/i })).toBeTruthy();
+            expect(react_2.screen.queryByRole('button', { name: /Back to bottom/i })).toBeFalsy();
+        });
+    }));
 });