@botonic/react 0.30.0-alpha.1 → 0.30.0-alpha.2

package/lib/cjs/webchat/hooks/use-scrollbar-controller.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollbarController = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../../contexts");
+const devices_1 = require("../devices");
+// TODO: Investigate why when we have some messages, scroll actions are not disabled properly
+const debounced = (delay, fn) => {
+    let timerId;
+    return function (...args) {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => {
+            fn(...args);
+            timerId = null;
+        }, delay);
+    };
+};
+const stopAtScrollLimit = element => {
+    if (element.scrollTop === 0)
+        element.scrollTop = 1;
+    if (element.scrollHeight - element.scrollTop === element.clientHeight)
+        element.scrollTop -= 1;
+};
+const useScrollbarController = (currentDevice, host) => {
+    const { webchatRef, chatAreaRef, repliesRef, scrollableMessagesListRef } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const hasScrollbar = () => {
+        var _a, _b, _c, _d, _e;
+        if (chatAreaRef.current && scrollableMessagesListRef.current) {
+            if (!repliesRef) {
+                return (((_a = scrollableMessagesListRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) >
+                    ((_b = chatAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight));
+            }
+            if (repliesRef.current) {
+                return (((_c = scrollableMessagesListRef.current) === null || _c === void 0 ? void 0 : _c.scrollHeight) >
+                    ((_d = chatAreaRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) - ((_e = repliesRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight));
+            }
+        }
+        return false;
+    };
+    const toggleOnMouseWheelEvents = () => {
+        if (scrollableMessagesListRef.current) {
+            if (hasScrollbar()) {
+                // @ts-ignore
+                scrollableMessagesListRef.current.onmousewheel = {};
+                return;
+            }
+            // @ts-ignore
+            scrollableMessagesListRef.current.onmousewheel = e => {
+                e.preventDefault();
+            };
+        }
+    };
+    const handleOnMouseOverEvents = e => {
+        let target = e.currentTarget;
+        while (target) {
+            toggleOnMouseWheelEvents();
+            target = target.parentNode;
+        }
+    };
+    const toggleOnTouchMoveEvents = () => {
+        if (webchatRef.current && scrollableMessagesListRef.current) {
+            if (hasScrollbar()) {
+                scrollableMessagesListRef.current.style.touchAction = 'auto';
+                webchatRef.current.style.touchAction = 'auto';
+                webchatRef.current.ontouchmove = null;
+                webchatRef.current.ontouchstart = null;
+                return;
+            }
+            scrollableMessagesListRef.current.style.touchAction = 'none';
+            webchatRef.current.style.touchAction = 'none';
+        }
+        if (webchatRef.current) {
+            webchatRef.current.ontouchstart = e => {
+                if (e.target === e.currentTarget) {
+                    e.preventDefault();
+                }
+            };
+            webchatRef.current.ontouchmove = e => {
+                if (e.target === e.currentTarget) {
+                    e.preventDefault();
+                }
+            };
+        }
+    };
+    const handleOnTouchMoveEvents = () => {
+        toggleOnTouchMoveEvents();
+    };
+    const limitScrollBoundaries = () => {
+        if (currentDevice !== devices_1.DEVICES.MOBILE.IPHONE)
+            return;
+        const chatArea = chatAreaRef.current;
+        const dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
+        if (chatArea) {
+            // @ts-ignore
+            if (window.addEventListener) {
+                chatArea.addEventListener('scroll', () => dStopAtScrollLimit(chatArea), true);
+                // @ts-ignore
+            }
+            else if (window.attachEvent) {
+                // @ts-ignore
+                chatAreaRef.attachEvent('scroll', () => dStopAtScrollLimit(chatArea));
+            }
+        }
+    };
+    const handleScrollEvents = () => {
+        if (webchatRef.current) {
+            if ((0, devices_1.isMobileDevice)()) {
+                if (currentDevice !== devices_1.DEVICES.MOBILE.IPHONE)
+                    return;
+                limitScrollBoundaries();
+                webchatRef.current.ontouchstart = handleOnTouchMoveEvents;
+                webchatRef.current.ontouchmove = handleOnTouchMoveEvents;
+            }
+            else {
+                webchatRef.current.onmouseover = e => handleOnMouseOverEvents(e);
+            }
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const webchat = webchatRef.current;
+        handleScrollEvents();
+        return () => {
+            if (webchat) {
+                webchat.onmouseover = null;
+                webchat.ontouchstart = null;
+                webchat.ontouchmove = null;
+            }
+        };
+    }, [currentDevice, host]);
+    return {
+        handleScrollEvents,
+        handleOnTouchMoveEvents,
+        handleOnMouseOverEvents,
+        hasScrollbar,
+    };
+};
+exports.useScrollbarController = useScrollbarController;
+//# sourceMappingURL=use-scrollbar-controller.js.map

package/lib/cjs/webchat/hooks/use-scrollbar-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scrollbar-controller.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-scrollbar-controller.ts"],"names":[],"mappings":"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"}

package/lib/cjs/webchat/hooks/use-virtual-keyboard-detection.d.ts

@@ -0,0 +1,3 @@
+export declare const useVirtualKeyboardDetection: (originalHeight: any) => {
+    isVirtualKeyboardVisible: boolean;
+};

package/lib/cjs/webchat/hooks/use-virtual-keyboard-detection.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualKeyboardDetection = void 0;
+const react_1 = require("react");
+const useVirtualKeyboardDetection = originalHeight => {
+    const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => {
+            if (window.visualViewport) {
+                if (window.visualViewport.height < originalHeight) {
+                    setIsVirtualKeyboardVisible(true);
+                    return;
+                }
+                setIsVirtualKeyboardVisible(false);
+                return;
+            }
+        };
+        window.visualViewport &&
+            window.visualViewport.addEventListener('resize', handleResize);
+        return () => {
+            window.visualViewport &&
+                window.visualViewport.removeEventListener('resize', handleResize);
+        };
+    }, [originalHeight]);
+    return { isVirtualKeyboardVisible };
+};
+exports.useVirtualKeyboardDetection = useVirtualKeyboardDetection;
+//# sourceMappingURL=use-virtual-keyboard-detection.js.map

package/lib/cjs/webchat/hooks/use-virtual-keyboard-detection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-virtual-keyboard-detection.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-virtual-keyboard-detection.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAEpC,MAAM,2BAA2B,GAAG,cAAc,CAAC,EAAE;IAC1D,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC3D,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,IAAI,MAAM,CAAC,cAAc,EAAE;gBACzB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,GAAG,cAAc,EAAE;oBACjD,2BAA2B,CAAC,IAAI,CAAC,CAAA;oBACjC,OAAM;iBACP;gBACD,2BAA2B,CAAC,KAAK,CAAC,CAAA;gBAClC,OAAM;aACP;QACH,CAAC,CAAA;QACD,MAAM,CAAC,cAAc;YACnB,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAEhE,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,cAAc;gBACnB,MAAM,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QACrE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAA;IAEpB,OAAO,EAAE,wBAAwB,EAAE,CAAA;AACrC,CAAC,CAAA;AAxBY,QAAA,2BAA2B,+BAwBvC"}

package/lib/cjs/webchat/hooks/use-webchat-dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useWebchatDimensions: () => {
+    calculateResizedPercentualWebchatHeight: () => number;
+    calculateResizedPxChatAreaHeight: () => number;
+};

package/lib/cjs/webchat/hooks/use-webchat-dimensions.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebchatDimensions = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../../contexts");
+const useWebchatDimensions = () => {
+    const { webchatRef, headerRef, inputPanelRef, webchatState: { isWebchatOpen }, } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const calculateResizedPercentualWebchatHeight = (0, react_1.useCallback)(() => {
+        const webchatElement = webchatRef.current;
+        if (!isWebchatOpen || !webchatElement)
+            return 0;
+        const webchatHeight = webchatElement.clientHeight || 0;
+        const keyboardOffset = (window.visualViewport && window.visualViewport.height) ||
+            window.innerHeight;
+        let newWebchatPercentualHeight = keyboardOffset / webchatHeight;
+        newWebchatPercentualHeight =
+            Math.round(newWebchatPercentualHeight * 100 * 100) / 100; // Two decimal places
+        return newWebchatPercentualHeight;
+    }, [isWebchatOpen]);
+    const calculateResizedPxChatAreaHeight = (0, react_1.useCallback)(() => {
+        const webchatElement = webchatRef.current;
+        const headerElement = headerRef.current;
+        const inputPanelElement = inputPanelRef.current;
+        if (!isWebchatOpen ||
+            !webchatElement ||
+            !headerElement ||
+            !inputPanelElement)
+            return 0;
+        return (webchatElement.clientHeight -
+            headerElement.clientHeight -
+            inputPanelElement.clientHeight);
+    }, [isWebchatOpen]);
+    return {
+        calculateResizedPercentualWebchatHeight,
+        calculateResizedPxChatAreaHeight,
+    };
+};
+exports.useWebchatDimensions = useWebchatDimensions;
+//# sourceMappingURL=use-webchat-dimensions.js.map

package/lib/cjs/webchat/hooks/use-webchat-dimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-webchat-dimensions.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat-dimensions.ts"],"names":[],"mappings":";;;AAAA,iCAA+C;AAE/C,6CAA+C;AAExC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,EACJ,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EAAE,EAAE,aAAa,EAAE,GAChC,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAE9B,MAAM,uCAAuC,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/D,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAA;QACzC,IAAI,CAAC,aAAa,IAAI,CAAC,cAAc;YAAE,OAAO,CAAC,CAAA;QAC/C,MAAM,aAAa,GAAG,cAAc,CAAC,YAAY,IAAI,CAAC,CAAA;QACtD,MAAM,cAAc,GAClB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;YACvD,MAAM,CAAC,WAAW,CAAA;QACpB,IAAI,0BAA0B,GAAG,cAAc,GAAG,aAAa,CAAA;QAC/D,0BAA0B;YACxB,IAAI,CAAC,KAAK,CAAC,0BAA0B,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA,CAAC,qBAAqB;QAChF,OAAO,0BAA0B,CAAA;IACnC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,MAAM,gCAAgC,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxD,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAA;QACzC,MAAM,aAAa,GAAG,SAAS,CAAC,OAAO,CAAA;QACvC,MAAM,iBAAiB,GAAG,aAAa,CAAC,OAAO,CAAA;QAE/C,IACE,CAAC,aAAa;YACd,CAAC,cAAc;YACf,CAAC,aAAa;YACd,CAAC,iBAAiB;YAElB,OAAO,CAAC,CAAA;QAEV,OAAO,CACL,cAAc,CAAC,YAAY;YAC3B,aAAa,CAAC,YAAY;YAC1B,iBAAiB,CAAC,YAAY,CAC/B,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,OAAO;QACL,uCAAuC;QACvC,gCAAgC;KACjC,CAAA;AACH,CAAC,CAAA;AA7CY,QAAA,oBAAoB,wBA6ChC"}

package/lib/cjs/webchat/hooks/use-webchat-resizer.d.ts

@@ -0,0 +1,4 @@
+export declare const useWebchatResizer: () => {
+    handleKeyboardShown: () => void;
+    handleKeyboardHidden: () => void;
+};

package/lib/cjs/webchat/hooks/use-webchat-resizer.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWebchatResizer = void 0;
+const react_1 = require("react");
+const contexts_1 = require("../../contexts");
+const use_webchat_dimensions_1 = require("./use-webchat-dimensions");
+const useWebchatResizer = () => {
+    const { webchatRef, chatAreaRef, inputPanelRef, headerRef } = (0, react_1.useContext)(contexts_1.WebchatContext);
+    const { calculateResizedPercentualWebchatHeight, calculateResizedPxChatAreaHeight, } = (0, use_webchat_dimensions_1.useWebchatDimensions)();
+    const handleKeyboardShown = () => {
+        if (webchatRef.current &&
+            chatAreaRef.current &&
+            headerRef.current &&
+            inputPanelRef.current) {
+            webchatRef.current.style.height = `${calculateResizedPercentualWebchatHeight()}%`;
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    const handleKeyboardHidden = () => {
+        if (webchatRef.current &&
+            chatAreaRef.current &&
+            inputPanelRef.current &&
+            headerRef.current) {
+            webchatRef.current.style.height = '100%';
+            chatAreaRef.current.style.height = `${calculateResizedPxChatAreaHeight()}px`;
+        }
+    };
+    return {
+        handleKeyboardShown,
+        handleKeyboardHidden,
+    };
+};
+exports.useWebchatResizer = useWebchatResizer;
+//# sourceMappingURL=use-webchat-resizer.js.map

package/lib/cjs/webchat/hooks/use-webchat-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-webchat-resizer.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat-resizer.ts"],"names":[],"mappings":";;;AAAA,iCAAkC;AAElC,6CAA+C;AAC/C,qEAA+D;AAExD,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,GACzD,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAE5B,MAAM,EACJ,uCAAuC,EACvC,gCAAgC,GACjC,GAAG,IAAA,6CAAoB,GAAE,CAAA;IAE1B,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IACE,UAAU,CAAC,OAAO;YAClB,WAAW,CAAC,OAAO;YACnB,SAAS,CAAC,OAAO;YACjB,aAAa,CAAC,OAAO,EACrB;YACA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,uCAAuC,EAAE,GAAG,CAAA;YACjF,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gCAAgC,EAAE,IAAI,CAAA;SAC7E;IACH,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IACE,UAAU,CAAC,OAAO;YAClB,WAAW,CAAC,OAAO;YACnB,aAAa,CAAC,OAAO;YACrB,SAAS,CAAC,OAAO,EACjB;YACA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACxC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,gCAAgC,EAAE,IAAI,CAAA;SAC7E;IACH,CAAC,CAAA;IAED,OAAO;QACL,mBAAmB;QACnB,oBAAoB;KACrB,CAAA;AACH,CAAC,CAAA;AArCY,QAAA,iBAAiB,qBAqC7B"}

package/lib/cjs/webchat/hooks/use-webchat.d.ts

@@ -23,7 +23,6 @@ export declare function useWebchat(): {
     toggleWebchat: (toggle: boolean) => void;
     updateDevSettings: (settings: DevSettings) => void;
     updateHandoff: (handoff: boolean) => void;
-    updateJwt: (jwt: string) => void;
     updateLastMessageDate: (date: string) => void;
     updateLastRoutePath: (path: string) => void;
     updateLatestInput: (input: Input) => void;
@@ -38,4 +37,10 @@ export declare function useWebchat(): {
         payload?: any;
     }>;
     webchatState: WebchatState;
+    webchatRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    headerRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    chatAreaRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    scrollableMessagesListRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    repliesRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    inputPanelRef: import("react").MutableRefObject<HTMLDivElement | null>;
 };

package/lib/cjs/webchat/hooks/use-webchat.js

@@ -39,12 +39,17 @@ exports.webchatInitialState = {
     isCustomComponentRendered: false,
     lastMessageUpdate: undefined,
     currentAttachment: undefined,
-    jwt: undefined,
     numUnreadMessages: 0,
     isLastMessageVisible: true,
 };
 function useWebchat() {
     const [webchatState, webchatDispatch] = (0, react_1.useReducer)(webchat_reducer_1.webchatReducer, exports.webchatInitialState);
+    const webchatRef = (0, react_1.useRef)(null);
+    const chatAreaRef = (0, react_1.useRef)(null);
+    const inputPanelRef = (0, react_1.useRef)(null);
+    const headerRef = (0, react_1.useRef)(null);
+    const scrollableMessagesListRef = (0, react_1.useRef)(null);
+    const repliesRef = (0, react_1.useRef)(null);
     const addMessage = (message) => webchatDispatch({ type: actions_1.WebchatAction.ADD_MESSAGE, payload: message });
     const addMessageComponent = (message) => webchatDispatch({
         type: actions_1.WebchatAction.ADD_MESSAGE_COMPONENT,
@@ -130,12 +135,6 @@ function useWebchat() {
             payload: attachment,
         });
     };
-    const updateJwt = (jwt) => {
-        webchatDispatch({
-            type: actions_1.WebchatAction.UPDATE_JWT,
-            payload: jwt,
-        });
-    };
     const resetUnreadMessages = () => {
         webchatDispatch({
             type: actions_1.WebchatAction.RESET_UNREAD_MESSAGES,
@@ -163,7 +162,6 @@ function useWebchat() {
         toggleWebchat,
         updateDevSettings,
         updateHandoff,
-        updateJwt,
         updateLastMessageDate,
         updateLastRoutePath,
         updateLatestInput,
@@ -175,6 +173,12 @@ function useWebchat() {
         updateWebview,
         webchatDispatch,
         webchatState,
+        webchatRef,
+        headerRef,
+        chatAreaRef,
+        scrollableMessagesListRef,
+        repliesRef,
+        inputPanelRef,
     };
 }
 exports.useWebchat = useWebchat;

package/lib/cjs/webchat/hooks/use-webchat.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-webchat.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-webchat.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-webchat.ts"],"names":[],"mappings":"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"}

package/lib/cjs/webchat/index-types.d.ts

@@ -43,7 +43,6 @@ export interface WebchatState {
     isCustomComponentRendered: boolean;
     lastMessageUpdate?: string;
     currentAttachment?: File;
-    jwt?: string;
     numUnreadMessages: number;
     isLastMessageVisible: boolean;
 }

package/lib/cjs/webchat/message-list/index.js

@@ -5,16 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
 const contexts_1 = require("../../contexts");
-const styled_scrollbar_1 = require("../components/styled-scrollbar");
-const typing_indicator_1 = require("../components/typing-indicator");
+const constants_2 = require("../constants");
+const typing_indicator_1 = require("../typing-indicator");
 const intro_message_1 = require("./intro-message");
 const scroll_button_1 = require("./scroll-button");
 const styles_1 = require("./styles");
 const unread_messages_banner_1 = require("./unread-messages-banner");
 const use_notifications_1 = require("./use-notifications");
 const WebchatMessageList = () => {
-    const { webchatState, getThemeProperty, resetUnreadMessages, setLastMessageVisible, } = (0, react_1.useContext)(contexts_1.WebchatContext);
-    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const { webchatState, resetUnreadMessages, setLastMessageVisible, scrollableMessagesListRef, } = (0, react_1.useContext)(contexts_1.WebchatContext);
     const [firstUnreadMessageId, setFirstUnreadMessageId] = (0, react_1.useState)();
     const lastMessageBottomRef = (0, react_1.useRef)(null);
     const scrollToBottom = () => {
@@ -77,11 +76,7 @@ const WebchatMessageList = () => {
         }
     }, [firstUnreadMessageId, webchatState.isWebchatOpen, webchatState.typing]);
     const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styled_scrollbar_1.StyledScrollbar, Object.assign({ role: constants_1.ROLES.MESSAGE_LIST, 
-                // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
-                id: 'botonic-scrollable-content', 
-                // @ts-ignore
-                scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide, ismessagescontainer: true.toString(), style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(intro_message_1.IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.ScrollableMessageList, Object.assign({ id: constants_2.BotonicContainerId.ScrollableMessagesList, ref: scrollableMessagesListRef, role: constants_1.ROLES.MESSAGE_LIST }, { children: [(0, jsx_runtime_1.jsx)(intro_message_1.IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
                         return ((0, jsx_runtime_1.jsxs)(styles_1.ContainerMessage, Object.assign({ role: constants_1.ROLES.MESSAGE }, { children: [showUnreadMessagesBanner(messageComponent.props.id) && ((0, jsx_runtime_1.jsx)(unread_messages_banner_1.UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), messageComponent, index === webchatState.messagesComponents.length - 1 && ((0, jsx_runtime_1.jsx)("div", { ref: lastMessageBottomRef, style: {
                                         content: '',
                                     } }))] }), index));

package/lib/cjs/webchat/message-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/index.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/webchat/message-list/scroll-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-button.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/scroll-button.tsx"],"names":[],"mappings":";;;;;AAEA,uGAAgE;AAGhE,wDAAqD;AACrD,qCAAgD;AAChD,iDAA4C;AAC5C,2DAAsD;AAM/C,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,IAAA,oCAAgB,GAAE,CAAA;IAEtE,MAAM,IAAI,GAAG,IAAA,0BAAW,GAAE,CAAA;IAE1B,OAAO,CACL,2DACG,mBAAmB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7B,2DACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uBAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,uBAAC,8BAAqB,kBAAC,OAAO,EAAE,WAAW,gBACzC,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,+BAAe,CAAC,GAAI,IACrB,CACzB,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AAtBY,QAAA,YAAY,gBAsBxB"}
+{"version":3,"file":"scroll-button.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/scroll-button.tsx"],"names":[],"mappings":";;;;;AAEA,uGAAgE;AAChE,wDAAqD;AACrD,qCAAgD;AAChD,iDAA4C;AAC5C,2DAAsD;AAM/C,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,IAAA,oCAAgB,GAAE,CAAA;IAEtE,MAAM,IAAI,GAAG,IAAA,0BAAW,GAAE,CAAA;IAE1B,OAAO,CACL,2DACG,mBAAmB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7B,2DACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uBAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,uBAAC,8BAAqB,kBAAC,OAAO,EAAE,WAAW,gBACzC,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,+BAAe,CAAC,GAAI,IACrB,CACzB,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AAtBY,QAAA,YAAY,gBAsBxB"}

package/lib/cjs/webchat/message-list/styles.d.ts

@@ -2,3 +2,4 @@ export declare const ContainerMessage: import("styled-components").StyledCompone
 export declare const DefaultIntroImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const ContainerScrollButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContainerUnreadMessagesBanner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollableMessageList: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/cjs/webchat/message-list/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContainerUnreadMessagesBanner = exports.ContainerScrollButton = exports.DefaultIntroImage = exports.ContainerMessage = void 0;
+exports.ScrollableMessageList = exports.ContainerUnreadMessagesBanner = exports.ContainerScrollButton = exports.DefaultIntroImage = exports.ContainerMessage = void 0;
 const tslib_1 = require("tslib");
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 exports.ContainerMessage = styled_components_1.default.div `
@@ -47,4 +47,13 @@ exports.ContainerUnreadMessagesBanner = styled_components_1.default.div `
     width: 10px;
   }
 `;
+exports.ScrollableMessageList = styled_components_1.default.div `
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  -webkit-overflow-scrolling: touch;
+`;
 //# sourceMappingURL=styles.js.map

package/lib/cjs/webchat/message-list/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEzB,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA;AAEY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAEY,QAAA,6BAA6B,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEzB,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA;AAEY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAEY,QAAA,6BAA6B,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ9C,CAAA"}

package/lib/cjs/webchat/replies.js

@@ -7,7 +7,11 @@ const react_1 = tslib_1.__importStar(require("react"));
 const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 const constants_1 = require("../constants");
 const contexts_1 = require("../contexts");
-const styled_scrollbar_1 = require("../webchat/components/styled-scrollbar");
+const constants_2 = require("./constants");
+const ScrollableReplies = styled_components_1.default.div `
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`;
 const RepliesContainer = styled_components_1.default.div `
   display: flex;
   text-align: center;
@@ -16,6 +20,7 @@ const RepliesContainer = styled_components_1.default.div `
   padding-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
+  overflow-x: scroll;
 `;
 const ReplyContainer = styled_components_1.default.div `
   flex: none;
@@ -28,8 +33,7 @@ const options = {
     right: 'flex-end',
 };
 const WebchatReplies = props => {
-    const { webchatState, getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
-    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const { webchatState, getThemeProperty, repliesRef } = (0, react_1.useContext)(contexts_1.WebchatContext);
     let justifyContent = 'center';
     const flexWrap = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
     if (flexWrap == 'nowrap')
@@ -37,7 +41,7 @@ const WebchatReplies = props => {
     else if (getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.alignReplies))
         justifyContent =
             options[getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
-    return ((0, jsx_runtime_1.jsx)(styled_scrollbar_1.StyledScrollbar, Object.assign({ scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide }, { children: (0, jsx_runtime_1.jsx)(RepliesContainer, Object.assign({ className: 'replies-container', justify: justifyContent, wrap: flexWrap }, { children: webchatState.replies.map((r, i) => ((0, jsx_runtime_1.jsx)(ReplyContainer, { children: r }, i))) })) })));
+    return ((0, jsx_runtime_1.jsx)(ScrollableReplies, { children: (0, jsx_runtime_1.jsx)(RepliesContainer, Object.assign({ id: constants_2.BotonicContainerId.RepliesContainer, ref: repliesRef, className: 'replies-container', justify: justifyContent, wrap: flexWrap }, { children: webchatState.replies.map((r, i) => ((0, jsx_runtime_1.jsx)(ReplyContainer, { children: r }, i))) })) }));
 };
 exports.WebchatReplies = WebchatReplies;
 //# sourceMappingURL=replies.js.map

package/lib/cjs/webchat/replies.js.map

@@ -1 +1 @@
-{"version":3,"file":"replies.js","sourceRoot":"","sources":["../../../src/webchat/replies.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAyC;AACzC,kFAAsC;AAEtC,4CAAsC;AACtC,0CAA4C;AAC5C,6EAAwE;AAExE,MAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;qBAGd,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO;eAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;;;CAIjC,CAAA;AAED,MAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIhC,CAAA;AAED,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;CAClB,CAAA;AAEM,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;IACpC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IACrE,MAAM,gBAAgB,iBACjB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CACzD,CAAA;IACD,IAAI,cAAc,GAAG,QAAQ,CAAA;IAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAC/B,mBAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,MAAM,CACP,CAAA;IACD,IAAI,QAAQ,IAAI,QAAQ;QAAE,cAAc,GAAG,YAAY,CAAA;SAClD,IAAI,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC;QAC/D,cAAc;YACZ,OAAO,CAAC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IAErE,OAAO,CACL,uBAAC,kCAAe,kBACd,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,gBAEnC,uBAAC,gBAAgB,kBACf,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,QAAQ,gBAEb,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClC,uBAAC,cAAc,cAAU,CAAC,IAAL,CAAC,CAAsB,CAC7C,CAAC,IACe,IACH,CACnB,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,cAAc,kBAgC1B"}
+{"version":3,"file":"replies.js","sourceRoot":"","sources":["../../../src/webchat/replies.jsx"],"names":[],"mappings":";;;;;AAAA,uDAAyC;AACzC,kFAAsC;AAEtC,4CAAsC;AACtC,0CAA4C;AAC5C,2CAAgD;AAEhD,MAAM,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAED,MAAM,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;qBAGd,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO;eAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;CAKjC,CAAA;AAED,MAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIhC,CAAA;AAED,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;CAClB,CAAA;AAEM,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;IACpC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAClD,IAAA,kBAAU,EAAC,yBAAc,CAAC,CAAA;IAC5B,IAAI,cAAc,GAAG,QAAQ,CAAA;IAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAC/B,mBAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,MAAM,CACP,CAAA;IACD,IAAI,QAAQ,IAAI,QAAQ;QAAE,cAAc,GAAG,YAAY,CAAA;SAClD,IAAI,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC;QAC/D,cAAc;YACZ,OAAO,CAAC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IAErE,OAAO,CACL,uBAAC,iBAAiB,cAChB,uBAAC,gBAAgB,kBACf,EAAE,EAAE,8BAAkB,CAAC,gBAAgB,EACvC,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,QAAQ,gBAEb,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAClC,uBAAC,cAAc,cAAU,CAAC,IAAL,CAAC,CAAsB,CAC7C,CAAC,IACe,GACD,CACrB,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,cAAc,kBA4B1B"}

package/lib/cjs/webchat/typing-indicator/index.d.ts

@@ -0,0 +1 @@
+export declare const TypingIndicator: () => JSX.Element;

package/lib/cjs/webchat/typing-indicator/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypingIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const styles_1 = require("./styles");
+const TypingIndicator = () => ((0, jsx_runtime_1.jsxs)(styles_1.TypingIndicatorWrapper, Object.assign({ role: constants_1.ROLES.TYPING_INDICATOR, className: 'typing-indicator', backgroundColor: constants_1.COLORS.SEASHELL_WHITE }, { children: [(0, jsx_runtime_1.jsx)(styles_1.Dot, {}), (0, jsx_runtime_1.jsx)(styles_1.Dot, {}), (0, jsx_runtime_1.jsx)(styles_1.Dot, {})] })));
+exports.TypingIndicator = TypingIndicator;
+//# sourceMappingURL=index.js.map

package/lib/cjs/webchat/typing-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/index.tsx"],"names":[],"mappings":";;;;AAEA,+CAA+C;AAC/C,qCAAsD;AAE/C,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CACnC,wBAAC,+BAAsB,kBACrB,IAAI,EAAE,iBAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,kBAAM,CAAC,cAAc,iBAEtC,uBAAC,YAAG,KAAG,EACP,uBAAC,YAAG,KAAG,EACP,uBAAC,YAAG,KAAG,KACgB,CAC1B,CAAA;AAVY,QAAA,eAAe,mBAU3B"}

package/lib/cjs/webchat/typing-indicator/styles.d.ts

@@ -0,0 +1,6 @@
+interface TypingIndicatorWrapperProps {
+    backgroundColor: string;
+}
+export declare const TypingIndicatorWrapper: import("styled-components").StyledComponent<"div", any, TypingIndicatorWrapperProps, never>;
+export declare const Dot: import("styled-components").StyledComponent<"span", any, {}, never>;
+export {};

package/lib/cjs/webchat/typing-indicator/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dot = exports.TypingIndicatorWrapper = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const blink = (0, styled_components_1.keyframes) `
+  50% {
+    opacity: 1;
+  }
+`;
+const bulge = (0, styled_components_1.keyframes) `
+  50% {
+    transform: scale(1.05);
+  }
+`;
+exports.TypingIndicatorWrapper = styled_components_1.default.div `
+  will-change: transform;
+  width: 44px;
+  line-height: 0px;
+  border-radius: 20px;
+  padding: 8px 2px 8px;
+  text-align: center;
+  display: block;
+  margin: 8px;
+  position: relative;
+  animation: 2s ${bulge} infinite ease-out;
+  background-color: ${props => props.backgroundColor};
+`;
+exports.Dot = styled_components_1.default.span `
+  height: 6px;
+  width: 6px;
+  margin: 0 1px;
+  background-color: #9e9ea1;
+  display: inline-block;
+  border-radius: 50%;
+  opacity: 0.4;
+  &:nth-of-type(1) {
+    animation: 1s ${blink} infinite 0.3333s;
+  }
+  &:nth-of-type(2) {
+    animation: 1s ${blink} infinite 0.6666s;
+  }
+  &:nth-of-type(3) {
+    animation: 1s ${blink} infinite 1s;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/lib/cjs/webchat/typing-indicator/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/typing-indicator/styles.ts"],"names":[],"mappings":";;;;AAAA,+EAAqD;AAErD,MAAM,KAAK,GAAG,IAAA,6BAAS,EAAA;;;;CAItB,CAAA;AAED,MAAM,KAAK,GAAG,IAAA,6BAAS,EAAA;;;;CAItB,CAAA;AAMY,QAAA,sBAAsB,GAAG,2BAAM,CAAC,GAAG,CAA6B;;;;;;;;;;kBAU3D,KAAK;sBACD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe;CACnD,CAAA;AAEY,QAAA,GAAG,GAAG,2BAAM,CAAC,IAAI,CAAA;;;;;;;;;oBASV,KAAK;;;oBAGL,KAAK;;;oBAGL,KAAK;;CAExB,CAAA"}

package/lib/cjs/webchat/webchat-chat-area/index.d.ts

@@ -0,0 +1 @@
+export declare const WebchatChatArea: () => JSX.Element;