@patternfly/chatbot 6.3.0-prerelease.14 → 6.3.0-prerelease.16

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts

@@ -17,6 +17,8 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
     isCompact?: boolean;
     /** Additional props passed to toggle */
     toggleProps?: MenuToggleProps;
+    /** Custom width for the dropdown */
+    dropdownWidth?: string;
 }
 export declare const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps>;
 export default ChatbotHeaderSelectorDropdown;

package/dist/cjs/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -16,12 +16,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotHeaderSelectorDropdown = (_a) => {
-    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel, isCompact, toggleProps } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel", "isCompact", "toggleProps"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel, isCompact, toggleProps, dropdownWidth } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel", "isCompact", "toggleProps", "dropdownWidth"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = (0, react_1.useState)(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = (0, react_1.useState)('Select model');
     const toggle = (toggleRef) => ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ className: "pf-chatbot__tooltip", 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.MenuToggle, Object.assign({ variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined, className: `${isCompact ? 'pf-m-compact' : ''}` }, toggleProps, { children: value })) })));
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.MenuToggle, Object.assign({ variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined, className: `${isCompact ? 'pf-m-compact' : ''}` }, toggleProps, { style: {
+                width: dropdownWidth
+            }, children: value })) })));
     return ((0, jsx_runtime_1.jsx)(react_core_1.Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
             setDefaultAriaLabel(`Select model: ${value}`);

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

@@ -1,14 +1,14 @@
-import type { HTMLProps } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     /** Content that can be announced, such as a new message, for screen readers */
     announcement?: string;
     /** Custom aria-label for scrollable portion of message box */
     ariaLabel?: string;
     /** Content to be displayed in the message box */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Custom classname for the MessageBox component */
     className?: string;
-    /** Ref applied to message box */
+    /** @deprecated innerRef has been deprecated. Use ref instead. Ref applied to message box  */
     innerRef?: React.Ref<HTMLDivElement>;
     /** Modifier that controls how content in MessageBox is positioned within the container */
     position?: 'top' | 'bottom';
@@ -16,6 +16,18 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     onScrollToTopClick?: () => void;
     /** Click handler for additional logic for when scroll to bottom jump button is clicked */
     onScrollToBottomClick?: () => void;
+    /** Flag to enable automatic scrolling when new messages are added */
+    enableSmartScroll?: boolean;
 }
-export declare const MessageBox: import("react").ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & import("react").RefAttributes<any>>;
+export interface MessageBoxHandle extends HTMLDivElement {
+    /** Scrolls to the top of the message box */
+    scrollToTop: (options?: ScrollOptions) => void;
+    /** Scrolls to the bottom of the message box */
+    scrollToBottom: (options?: {
+        resumeSmartScroll?: boolean;
+    } & ScrollOptions) => void;
+    /** Returns whether the smart scroll feature is currently active */
+    isSmartScrollActive: () => boolean;
+}
+export declare const MessageBox: import("react").ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & import("react").RefAttributes<MessageBoxHandle | null>>;
 export default MessageBox;

package/dist/cjs/MessageBox/MessageBox.js

@@ -16,29 +16,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// ============================================================================
+// Chatbot Main - Messages
+// ============================================================================
 const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
-const MessageBoxBase = (_a) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
+exports.MessageBox = (0, react_1.forwardRef)((_a, ref) => {
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll"]);
     const [atTop, setAtTop] = (0, react_1.useState)(false);
     const [atBottom, setAtBottom] = (0, react_1.useState)(true);
     const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
-    const defaultRef = (0, react_1.useRef)(null);
-    let messageBoxRef;
-    if (innerRef) {
-        messageBoxRef = innerRef;
-    }
-    else {
-        messageBoxRef = defaultRef;
-    }
+    const [autoScroll, setAutoScroll] = (0, react_1.useState)(true);
+    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 messageBoxRef = (0, react_1.useRef)(null);
+    const scrollQueued = (0, react_1.useRef)(false);
+    const resetUserScrollIntentTimeout = (0, react_1.useRef)();
     // Configure handlers
     const handleScroll = (0, react_1.useCallback)(() => {
         const element = messageBoxRef.current;
-        if (element) {
-            const { scrollTop, scrollHeight, clientHeight } = element;
-            setAtTop(scrollTop === 0);
-            setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
+        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 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
+        if (!enableSmartScroll || scrollQueued.current) {
+            return;
+        }
+        if (roundedScrollTop === 0) {
+            pauseAutoScrollRef.current = false;
+        }
+        if (debounceTimeout.current) {
+            clearTimeout(debounceTimeout.current);
+        }
+        if (!isAtBottom && !pauseAutoScrollRef.current) {
+            setAutoScroll(false);
         }
+        // User is near bottom and scrolling down - debounce re-enabling auto-scroll
+        if (isAtBottom && isScrollingDown && !pauseAutoScrollRef.current) {
+            debounceTimeout.current = setTimeout(() => {
+                setAutoScroll(true);
+            }, DEBOUNCE_DELAY);
+        }
+        lastScrollTop.current = roundedScrollTop;
     }, [messageBoxRef]);
     const checkOverflow = (0, react_1.useCallback)(() => {
         const element = messageBoxRef.current;
@@ -47,35 +80,132 @@ const MessageBoxBase = (_a) => {
             setIsOverflowing(scrollHeight >= clientHeight);
         }
     }, [messageBoxRef]);
-    const scrollToTop = (0, react_1.useCallback)(() => {
+    const resumeAutoScroll = (0, react_1.useCallback)(() => {
+        if (!enableSmartScroll) {
+            return;
+        }
+        pauseAutoScrollRef.current = false;
+        setAutoScroll(true);
+    }, [enableSmartScroll]);
+    const pauseAutoScroll = (0, react_1.useCallback)(() => {
+        if (!enableSmartScroll) {
+            return;
+        }
+        pauseAutoScrollRef.current = true;
+        setAutoScroll(false);
+    }, [enableSmartScroll]);
+    /**
+     * Scrolls to the top of the message box.
+     *
+     */
+    const scrollToTop = (0, react_1.useCallback)((options) => {
+        const { behavior = 'smooth' } = options || {};
         const element = messageBoxRef.current;
-        if (element) {
-            element.scrollTo({ top: 0, behavior: 'smooth' });
+        if (!element || scrollQueued.current) {
+            return;
+        }
+        scrollQueued.current = true;
+        pauseAutoScroll();
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
+            animationFrame.current = null;
         }
+        animationFrame.current = requestAnimationFrame(() => {
+            element.scrollTo({ top: 0, behavior });
+            scrollQueued.current = false;
+        });
         onScrollToTopClick && onScrollToTopClick();
     }, [messageBoxRef]);
-    const scrollToBottom = (0, react_1.useCallback)(() => {
+    /**
+     * Scrolls to the bottom of the message box.
+     *
+     * @param options.resumeSmartScroll - If true, resumes smart scroll behavior;
+     *                                    if false or omitted, scrolls without resuming auto-scroll.
+     * @param options.scrollOptions - Additional scroll options. behavior can be 'smooth' or 'auto'.
+     */
+    const scrollToBottom = (0, react_1.useCallback)((options) => {
+        const { behavior = 'smooth', resumeSmartScroll = false } = options || {};
+        resumeSmartScroll && resumeAutoScroll();
         const element = messageBoxRef.current;
-        if (element) {
-            element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
+        if (!element || pauseAutoScrollRef.current || scrollQueued.current) {
+            return;
+        }
+        scrollQueued.current = true;
+        if (animationFrame.current) {
+            cancelAnimationFrame(animationFrame.current);
         }
+        animationFrame.current = requestAnimationFrame(() => {
+            element.scrollTo({ top: element.scrollHeight, behavior });
+            resumeAutoScroll();
+            scrollQueued.current = false;
+        });
         onScrollToBottomClick && onScrollToBottomClick();
-    }, [messageBoxRef]);
+    }, [messageBoxRef, enableSmartScroll]);
     // Detect scroll position
     (0, react_1.useEffect)(() => {
         const element = messageBoxRef.current;
-        if (element) {
-            // Listen for scroll events
-            element.addEventListener('scroll', handleScroll);
-            // Check initial position and overflow
-            handleScroll();
-            checkOverflow();
-            return () => {
-                element.removeEventListener('scroll', handleScroll);
-            };
+        if (!element) {
+            return;
         }
+        // Listen for scroll events
+        element.addEventListener('scroll', handleScroll);
+        // Check initial position and overflow
+        handleScroll();
+        checkOverflow();
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+        };
     }, [checkOverflow, handleScroll, messageBoxRef]);
-    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 }), (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: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props, { children: [children, (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })] }));
-};
-exports.MessageBox = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(MessageBoxBase, Object.assign({ innerRef: ref }, props))));
+    (0, react_1.useImperativeHandle)(ref, () => {
+        const node = messageBoxRef.current;
+        // Attach custom methods to the element
+        node.scrollToTop = scrollToTop;
+        node.scrollToBottom = scrollToBottom;
+        node.isSmartScrollActive = () => enableSmartScroll && autoScroll;
+        return node;
+    });
+    let lastTouchY = null;
+    const onTouchEnd = (event) => {
+        lastTouchY = null;
+        props.onTouchEnd && props.onTouchEnd(event);
+    };
+    const handleUserScroll = (isScrollingDown) => {
+        const container = messageBoxRef.current;
+        if (!enableSmartScroll || !container) {
+            return;
+        }
+        if (!isScrollingDown) {
+            pauseAutoScrollRef.current = true;
+            clearTimeout(resetUserScrollIntentTimeout.current);
+            return;
+        }
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        if (distanceFromBottom < 100) {
+            pauseAutoScrollRef.current = false;
+            setAutoScroll(true);
+        }
+    };
+    const onWheel = (event) => {
+        const isScrollingDown = event.deltaY > 0;
+        handleUserScroll(isScrollingDown);
+        props.onWheel && props.onWheel(event);
+    };
+    const onTouchMove = (event) => {
+        const currentTouchY = event.touches[0].clientY;
+        let isScrollingDown = false;
+        if (lastTouchY !== null) {
+            isScrollingDown = currentTouchY < lastTouchY;
+        }
+        lastTouchY = currentTouchY;
+        handleUserScroll(isScrollingDown);
+        props.onTouchMove && props.onTouchMove(event);
+    };
+    const smartScrollHandlers = {
+        onWheel,
+        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 }), (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", "aria-live": "polite", children: announcement })] })), (0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }) })] }));
+});
 exports.default = exports.MessageBox;

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

@@ -18,17 +18,33 @@ const react_2 = require("@testing-library/react");
 const MessageBox_1 = require("./MessageBox");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('MessageBox', () => {
+    beforeEach(() => {
+        jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
+            cb(0); // Immediately call the callback
+            return 0;
+        });
+    });
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
     it('should render Message box', () => {
         (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Chatbot Messages" }) }));
         expect(react_2.screen.getByText('Chatbot Messages')).toBeTruthy();
     });
     it('should assign ref to Message box', () => {
+        var _a, _b, _c, _d;
         const ref = (0, react_1.createRef)();
-        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { "data-testid": "message-box", ref: ref, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        react_2.screen.getByText('Test message content');
         expect(ref.current).not.toBeNull();
+        // should contain custom methods exposed by the ref
+        expect(typeof ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive)).toBe('function');
+        expect(typeof ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollToTop)).toBe('function');
+        expect(typeof ((_c = ref.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom)).toBe('function');
+        expect((_d = ref.current) === null || _d === void 0 ? void 0 : _d.isSmartScrollActive()).toBe(false);
         expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
-    it('should call onScrollToBottomClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('should call onScrollToBottomClick when scroll to bottom button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { onScrollToBottomClick: spy, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
         // this forces button to show
@@ -36,7 +52,9 @@ describe('MessageBox', () => {
         Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
         Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
         Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
-        region.dispatchEvent(new Event('scroll'));
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
         yield (0, react_2.waitFor)(() => {
             user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom/i }));
             expect(spy).toHaveBeenCalled();
@@ -53,10 +71,165 @@ describe('MessageBox', () => {
             configurable: true,
             value: 500
         });
-        region.dispatchEvent(new Event('scroll'));
+        (0, react_2.act)(() => {
+            region.dispatchEvent(new Event('scroll'));
+        });
         yield (0, react_2.waitFor)(() => {
             user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump top/i }));
             expect(spy).toHaveBeenCalled();
         });
     }));
+    it('should call user defined onWheel, onTouchMove and onTouchEnd handlers', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ref = (0, react_1.createRef)();
+        const onWheel = jest.fn();
+        const onTouchMove = jest.fn();
+        const onTouchEnd = jest.fn();
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(MessageBox_1.MessageBox, { ref: ref, enableSmartScroll: true, onWheel: onWheel, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: (0, jsx_runtime_1.jsx)("div", { children: "Test message content" }) }));
+        const element = ref.current;
+        (0, react_2.act)(() => {
+            react_2.fireEvent.wheel(element, { deltaY: 10 });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            react_2.fireEvent.touchEnd(element);
+        });
+        expect(onWheel).toHaveBeenCalled();
+        expect(onTouchMove).toHaveBeenCalled();
+        expect(onTouchEnd).toHaveBeenCalled();
+    }));
+    it('should scroll to the bottom when the method is called ', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        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;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        (0, react_2.act)(() => {
+            var _a, _b, _c;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom();
+            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.scrollToBottom();
+            (_c = ref.current) === null || _c === void 0 ? void 0 : _c.scrollToBottom();
+        });
+        expect(scrollSpy).toHaveBeenCalledWith({ top: element.scrollHeight, behavior: 'smooth' });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(true);
+    }));
+    it('should scroll to the top when the method is called ', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        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;
+        const scrollSpy = jest.spyOn(element, 'scrollTo');
+        (0, react_2.act)(() => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToTop();
+        });
+        expect(scrollSpy).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+    }));
+    it('should pause automatic scrolling when user scrolls up ', () => __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" }) }));
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(true);
+        const element = ref.current;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 200;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(false);
+    }));
+    it('should resume automatic scrolling when user scrolls down to the bottom using scroll event', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        jest.useFakeTimers();
+        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;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 100;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        (0, react_2.act)(() => {
+            // Simulate scroll down by changing scrollTop
+            element.scrollTop = 650; // scrollHeight - scrollTop - clientHeight - DELTA_DOWN (50) = 0
+            const scrollEvent = new Event('scroll', { bubbles: true });
+            element.dispatchEvent(scrollEvent);
+            jest.advanceTimersByTime(250);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+        jest.useRealTimers();
+    }));
+    it('should resume automatic scrolling when scrollToBottom method is used', () => __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;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        // Simulate scroll up by changing scrollTop
+        element.scrollTop = 100;
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        (0, react_2.act)(() => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollToBottom({ resumeSmartScroll: true, behavior: 'auto' }); // resumes auto scroll and scrolls to bottom.
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+    it('should resume automatic scrolling when mouse wheel event is used', () => __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;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate mouse wheel event
+        (0, react_2.act)(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            react_2.fireEvent.wheel(element, { deltaY: 10 });
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
+    it('should resume automatic scrolling when user swipes up in touch screen', () => __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;
+        // Manually set scrollHeight and clientHeight for calculations
+        Object.defineProperty(element, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(element, 'clientHeight', { configurable: true, value: 300 });
+        Object.defineProperty(element, 'scrollTop', { configurable: true, value: 350 });
+        const scrollEvent = new Event('scroll', { bubbles: true });
+        (0, react_2.act)(() => {
+            element.dispatchEvent(scrollEvent);
+        });
+        expect((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isSmartScrollActive()).toBe(false);
+        // Simulate touch event - swipe up
+        (0, react_2.act)(() => {
+            Object.defineProperty(element, 'scrollTop', { configurable: true, value: 650 });
+            react_2.fireEvent.touchStart(element, { touches: [{ clientY: 700 }] });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 700 }] });
+            react_2.fireEvent.touchMove(element, { touches: [{ clientY: 600 }] });
+            react_2.fireEvent.touchEnd(element);
+        });
+        expect((_b = ref.current) === null || _b === void 0 ? void 0 : _b.isSmartScrollActive()).toBe(true);
+    }));
 });

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.d.ts

@@ -17,6 +17,8 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
     isCompact?: boolean;
     /** Additional props passed to toggle */
     toggleProps?: MenuToggleProps;
+    /** Custom width for the dropdown */
+    dropdownWidth?: string;
 }
 export declare const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps>;
 export default ChatbotHeaderSelectorDropdown;

package/dist/esm/ChatbotHeader/ChatbotHeaderSelectorDropdown.js

@@ -13,12 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Tooltip, Dropdown, MenuToggle } from '@patternfly/react-core';
 export const ChatbotHeaderSelectorDropdown = (_a) => {
-    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel, isCompact, toggleProps } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel", "isCompact", "toggleProps"]);
+    var { value, className, children, onSelect, tooltipProps, tooltipContent = 'Select model', menuToggleAriaLabel, isCompact, toggleProps, dropdownWidth } = _a, props = __rest(_a, ["value", "className", "children", "onSelect", "tooltipProps", "tooltipContent", "menuToggleAriaLabel", "isCompact", "toggleProps", "dropdownWidth"]);
     const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
     const [defaultAriaLabel, setDefaultAriaLabel] = useState('Select model');
     const toggle = (toggleRef) => (_jsx(Tooltip, Object.assign({ className: "pf-chatbot__tooltip", content: tooltipContent, position: "bottom", 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps, { children: _jsx(MenuToggle, Object.assign({ variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined, className: `${isCompact ? 'pf-m-compact' : ''}` }, toggleProps, { children: value })) })));
+        aria: "none" }, tooltipProps, { children: _jsx(MenuToggle, Object.assign({ variant: "secondary", "aria-label": menuToggleAriaLabel !== null && menuToggleAriaLabel !== void 0 ? menuToggleAriaLabel : defaultAriaLabel, ref: toggleRef, isExpanded: isOptionsMenuOpen, onClick: () => setIsOptionsMenuOpen(!isOptionsMenuOpen), size: isCompact ? 'sm' : undefined, className: `${isCompact ? 'pf-m-compact' : ''}` }, toggleProps, { style: {
+                width: dropdownWidth
+            }, children: value })) })));
     return (_jsx(Dropdown, Object.assign({ className: `pf-chatbot__selections ${className !== null && className !== void 0 ? className : ''}`, isOpen: isOptionsMenuOpen, onSelect: (e, value) => {
             onSelect && onSelect(e, value);
             setDefaultAriaLabel(`Select model: ${value}`);

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

@@ -1,14 +1,14 @@
-import type { HTMLProps } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     /** Content that can be announced, such as a new message, for screen readers */
     announcement?: string;
     /** Custom aria-label for scrollable portion of message box */
     ariaLabel?: string;
     /** Content to be displayed in the message box */
-    children: React.ReactNode;
+    children: ReactNode;
     /** Custom classname for the MessageBox component */
     className?: string;
-    /** Ref applied to message box */
+    /** @deprecated innerRef has been deprecated. Use ref instead. Ref applied to message box  */
     innerRef?: React.Ref<HTMLDivElement>;
     /** Modifier that controls how content in MessageBox is positioned within the container */
     position?: 'top' | 'bottom';
@@ -16,6 +16,18 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     onScrollToTopClick?: () => void;
     /** Click handler for additional logic for when scroll to bottom jump button is clicked */
     onScrollToBottomClick?: () => void;
+    /** Flag to enable automatic scrolling when new messages are added */
+    enableSmartScroll?: boolean;
 }
-export declare const MessageBox: import("react").ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & import("react").RefAttributes<any>>;
+export interface MessageBoxHandle extends HTMLDivElement {
+    /** Scrolls to the top of the message box */
+    scrollToTop: (options?: ScrollOptions) => void;
+    /** Scrolls to the bottom of the message box */
+    scrollToBottom: (options?: {
+        resumeSmartScroll?: boolean;
+    } & ScrollOptions) => void;
+    /** Returns whether the smart scroll feature is currently active */
+    isSmartScrollActive: () => boolean;
+}
+export declare const MessageBox: import("react").ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & import("react").RefAttributes<MessageBoxHandle | null>>;
 export default MessageBox;