@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/cjs/MessageBar/StopButton.js

@@ -10,25 +10,16 @@ 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.StopButton = void 0;
-// ============================================================================
-// Chatbot Footer - Message Bar - Stop
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const StopButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
+    var { className, onClick, tooltipProps, tooltipContent = 'Stop', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
+    return ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));
+        aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop', onClick: onClick, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }) }) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 exports.StopButton = StopButton;
 exports.default = exports.StopButton;

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

@@ -12,43 +12,47 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const StopButton_1 = require("./StopButton");
 const renderStop = (props) => {
     const spy = jest.fn();
-    (0, react_2.render)(react_1.default.createElement(StopButton_1.StopButton, Object.assign({ onClick: spy }, props)));
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(StopButton_1.StopButton, Object.assign({ onClick: spy }, props)));
 };
 describe('Stop button', () => {
     it('should render button correctly', () => {
         renderStop();
-        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(StopButton_1.StopButton, { onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(StopButton_1.StopButton, { onClick: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(StopButton_1.StopButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(StopButton_1.StopButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle className prop', () => {
         renderStop({ className: 'test' });
-        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+        expect(react_1.screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
     });
     it('should handle spread props, including aria-label', () => {
         renderStop({ 'aria-label': 'test' });
-        expect(react_2.screen.getByRole('button', { name: 'test' }));
+        expect(react_1.screen.getByRole('button', { name: 'test' }));
     });
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         renderStop({ tooltipProps: { id: 'test' } });
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderStop({ 'data-testid': 'button', isCompact: true });
+        expect(react_1.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface JumpButtonProps {
     /** Position of the Jump Button(top/bottom) */
     position: 'top' | 'bottom';
@@ -7,5 +7,5 @@ export interface JumpButtonProps {
     /** Flag to change the visibilty of the button */
     isHidden?: boolean;
 }
-declare const JumpButton: React.FunctionComponent<JumpButtonProps>;
+declare const JumpButton: FunctionComponent<JumpButtonProps>;
 export default JumpButton;

package/dist/cjs/MessageBox/JumpButton.js

@@ -1,17 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-// ============================================================================
-// Chatbot Main - Messages - Jump to Top
-// ============================================================================
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const arrow_up_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-up-icon");
 const arrow_down_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-down-icon");
-const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : (react_1.default.createElement(react_core_1.Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top" },
-    react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position} button`, onClick: onClick },
-        react_1.default.createElement(react_core_1.Icon, { iconSize: "lg", isInline: true }, position === 'top' ? react_1.default.createElement(arrow_up_icon_1.ArrowUpIcon, null) : react_1.default.createElement(arrow_down_icon_1.ArrowDownIcon, null)))));
+const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : ((0, jsx_runtime_1.jsx)(react_core_1.Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top", children: (0, jsx_runtime_1.jsx)(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position}`, onClick: onClick, children: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: "lg", isInline: true, children: position === 'top' ? (0, jsx_runtime_1.jsx)(arrow_up_icon_1.ArrowUpIcon, {}) : (0, jsx_runtime_1.jsx)(arrow_down_icon_1.ArrowDownIcon, {}) }) }) }));
 exports.default = JumpButton;

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

@@ -12,28 +12,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('JumpButton', () => {
     it('should render top button correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "top", onClick: jest.fn() }));
-        expect(react_2.screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "top", onClick: jest.fn() }));
+        expect(react_1.screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
     });
     it('should render bottom button correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: jest.fn() }));
-        expect(react_2.screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: jest.fn() }));
+        expect(react_1.screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
     });
     it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom button/i }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(JumpButton_1.default, { position: "bottom", onClick: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: /Jump bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: jest.fn(), isHidden: true }));
-        expect(react_2.screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+        (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: /Jump bottom/i })).toBeFalsy();
     }));
 });

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

@@ -1,17 +1,33 @@
-import React from 'react';
-export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
+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';
+    /** Click handler for additional logic for when scroll to top jump button is clicked */
+    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: React.ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & 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

@@ -1,74 +1,211 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 // ============================================================================
 // Chatbot Main - Messages
 // ============================================================================
-const react_1 = __importDefault(require("react"));
+const react_1 = require("react");
 const JumpButton_1 = __importDefault(require("./JumpButton"));
-const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
-    const [atTop, setAtTop] = react_1.default.useState(false);
-    const [atBottom, setAtBottom] = react_1.default.useState(true);
-    const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
-    const defaultRef = react_1.default.useRef(null);
-    let messageBoxRef;
-    if (innerRef) {
-        messageBoxRef = innerRef;
-    }
-    else {
-        messageBoxRef = defaultRef;
-    }
+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 [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 = react_1.default.useCallback(() => {
+    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 = react_1.default.useCallback(() => {
+    const checkOverflow = (0, react_1.useCallback)(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
     }, [messageBoxRef]);
-    const scrollToTop = react_1.default.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 = react_1.default.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;
         }
-    }, [messageBoxRef]);
+        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, enableSmartScroll]);
     // Detect scroll position
-    react_1.default.useEffect(() => {
+    (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 (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
-        react_1.default.createElement("div", { 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 },
-            children,
-            react_1.default.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
-        react_1.default.createElement(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));
-};
-exports.MessageBox = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(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;