@botonic/react 0.30.0-alpha.1 → 0.30.0

package/lib/esm/webchat/hooks/use-scroll-to-bottom.js

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { WebchatContext } from '../../contexts';
+import { getWebchatElement } from '../../util/dom';
+export const useScrollToBottom = ({ host, behavior = 'smooth', timeout = 200, }) => {
+    const { webchatState: { isWebchatOpen }, scrollableMessagesListRef, } = useContext(WebchatContext);
+    const scrollToBottom = () => {
+        const webchatElement = getWebchatElement(host);
+        if (!webchatElement)
+            return;
+        if (!isWebchatOpen)
+            return;
+        setTimeout(() => {
+            var _a, _b;
+            (_a = scrollableMessagesListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                top: (_b = scrollableMessagesListRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+                behavior: behavior,
+            });
+        }, timeout);
+    };
+    return { scrollToBottom };
+};
+//# sourceMappingURL=use-scroll-to-bottom.js.map

package/lib/esm/webchat/hooks/use-scroll-to-bottom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scroll-to-bottom.js","sourceRoot":"","sources":["../../../../src/webchat/hooks/use-scroll-to-bottom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,QAAQ,GAAG,QAAQ,EACnB,OAAO,GAAG,GAAG,GACd,EAAE,EAAE;IACH,MAAM,EACJ,YAAY,EAAE,EAAE,aAAa,EAAE,EAC/B,yBAAyB,GAC1B,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAA;QAC9C,IAAI,CAAC,cAAc;YAAE,OAAM;QAC3B,IAAI,CAAC,aAAa;YAAE,OAAM;QAC1B,UAAU,CAAC,GAAG,EAAE;;YACd,MAAA,yBAAyB,CAAC,OAAO,0CAAE,QAAQ,CAAC;gBAC1C,GAAG,EAAE,MAAA,yBAAyB,CAAC,OAAO,0CAAE,YAAY;gBACpD,QAAQ,EAAE,QAA0B;aACrC,CAAC,CAAA;QACJ,CAAC,EAAE,OAAO,CAAC,CAAA;IACb,CAAC,CAAA;IAED,OAAO,EAAE,cAAc,EAAE,CAAA;AAC3B,CAAC,CAAA"}

package/lib/esm/webchat/hooks/use-scrollbar-controller.d.ts

@@ -0,0 +1,6 @@
+export declare const useScrollbarController: (currentDevice: any, host: any) => {
+    handleScrollEvents: () => void;
+    handleOnTouchMoveEvents: () => void;
+    handleOnMouseOverEvents: (e: any) => void;
+    hasScrollbar: () => boolean;
+};

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

@@ -0,0 +1,136 @@
+import { useContext, useEffect } from 'react';
+import { WebchatContext } from '../../contexts';
+import { DEVICES, isMobileDevice } from '../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;
+};
+export const useScrollbarController = (currentDevice, host) => {
+    const { webchatRef, chatAreaRef, repliesRef, scrollableMessagesListRef } = useContext(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.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 (isMobileDevice()) {
+                if (currentDevice !== DEVICES.MOBILE.IPHONE)
+                    return;
+                limitScrollBoundaries();
+                webchatRef.current.ontouchstart = handleOnTouchMoveEvents;
+                webchatRef.current.ontouchmove = handleOnTouchMoveEvents;
+            }
+            else {
+                webchatRef.current.onmouseover = e => handleOnMouseOverEvents(e);
+            }
+        }
+    };
+    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,
+    };
+};
+//# sourceMappingURL=use-scrollbar-controller.js.map

package/lib/esm/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/esm/webchat/hooks/use-virtual-keyboard-detection.d.ts

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

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

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+export const useVirtualKeyboardDetection = originalHeight => {
+    const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] = useState(false);
+    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 };
+};
+//# sourceMappingURL=use-virtual-keyboard-detection.js.map

package/lib/esm/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,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,CAAC,MAAM,2BAA2B,GAAG,cAAc,CAAC,EAAE;IAC1D,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAC3D,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,SAAS,CAAC,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"}

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

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

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

@@ -0,0 +1,35 @@
+import { useCallback, useContext } from 'react';
+import { WebchatContext } from '../../contexts';
+export const useWebchatDimensions = () => {
+    const { webchatRef, headerRef, inputPanelRef, webchatState: { isWebchatOpen }, } = useContext(WebchatContext);
+    const calculateResizedPercentualWebchatHeight = 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 = 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,
+    };
+};
+//# sourceMappingURL=use-webchat-dimensions.js.map

package/lib/esm/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,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,EACJ,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EAAE,EAAE,aAAa,EAAE,GAChC,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAE9B,MAAM,uCAAuC,GAAG,WAAW,CAAC,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,WAAW,CAAC,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"}

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

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

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

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { WebchatContext } from '../../contexts';
+import { useWebchatDimensions } from './use-webchat-dimensions';
+export const useWebchatResizer = () => {
+    const { webchatRef, chatAreaRef, inputPanelRef, headerRef } = useContext(WebchatContext);
+    const { calculateResizedPercentualWebchatHeight, calculateResizedPxChatAreaHeight, } = 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,
+    };
+};
+//# sourceMappingURL=use-webchat-resizer.js.map

package/lib/esm/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,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAE/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,GACzD,UAAU,CAAC,cAAc,CAAC,CAAA;IAE5B,MAAM,EACJ,uCAAuC,EACvC,gCAAgC,GACjC,GAAG,oBAAoB,EAAE,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"}

package/lib/esm/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/esm/webchat/hooks/use-webchat.js

@@ -1,4 +1,4 @@
-import { useReducer } from 'react';
+import { useReducer, useRef } from 'react';
 import { COLORS, WEBCHAT } from '../../constants';
 import { WebchatAction } from '../actions';
 import { webchatReducer } from '../webchat-reducer';
@@ -36,12 +36,17 @@ export const webchatInitialState = {
     isCustomComponentRendered: false,
     lastMessageUpdate: undefined,
     currentAttachment: undefined,
-    jwt: undefined,
     numUnreadMessages: 0,
     isLastMessageVisible: true,
 };
 export function useWebchat() {
     const [webchatState, webchatDispatch] = useReducer(webchatReducer, webchatInitialState);
+    const webchatRef = useRef(null);
+    const chatAreaRef = useRef(null);
+    const inputPanelRef = useRef(null);
+    const headerRef = useRef(null);
+    const scrollableMessagesListRef = useRef(null);
+    const repliesRef = useRef(null);
     const addMessage = (message) => webchatDispatch({ type: WebchatAction.ADD_MESSAGE, payload: message });
     const addMessageComponent = (message) => webchatDispatch({
         type: WebchatAction.ADD_MESSAGE_COMPONENT,
@@ -127,12 +132,6 @@ export function useWebchat() {
             payload: attachment,
         });
     };
-    const updateJwt = (jwt) => {
-        webchatDispatch({
-            type: WebchatAction.UPDATE_JWT,
-            payload: jwt,
-        });
-    };
     const resetUnreadMessages = () => {
         webchatDispatch({
             type: WebchatAction.RESET_UNREAD_MESSAGES,
@@ -160,7 +159,6 @@ export function useWebchat() {
         toggleWebchat,
         updateDevSettings,
         updateHandoff,
-        updateJwt,
         updateLastMessageDate,
         updateLastRoutePath,
         updateLatestInput,
@@ -172,6 +170,12 @@ export function useWebchat() {
         updateWebview,
         webchatDispatch,
         webchatState,
+        webchatRef,
+        headerRef,
+        chatAreaRef,
+        scrollableMessagesListRef,
+        repliesRef,
+        inputPanelRef,
     };
 }
 //# sourceMappingURL=use-webchat.js.map

package/lib/esm/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/esm/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/esm/webchat/message-list/index.js

@@ -1,17 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useRef, useState } from 'react';
-import { ROLES, WEBCHAT } from '../../constants';
+import { ROLES } from '../../constants';
 import { WebchatContext } from '../../contexts';
-import { StyledScrollbar } from '../components/styled-scrollbar';
-import { TypingIndicator } from '../components/typing-indicator';
+import { BotonicContainerId } from '../constants';
+import { TypingIndicator } from '../typing-indicator';
 import { IntroMessage } from './intro-message';
 import { ScrollButton } from './scroll-button';
-import { ContainerMessage } from './styles';
+import { ContainerMessage, ScrollableMessageList } from './styles';
 import { UnreadMessagesBanner } from './unread-messages-banner';
 import { useNotifications } from './use-notifications';
 export const WebchatMessageList = () => {
-    const { webchatState, getThemeProperty, resetUnreadMessages, setLastMessageVisible, } = useContext(WebchatContext);
-    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const { webchatState, resetUnreadMessages, setLastMessageVisible, scrollableMessagesListRef, } = useContext(WebchatContext);
     const [firstUnreadMessageId, setFirstUnreadMessageId] = useState();
     const lastMessageBottomRef = useRef(null);
     const scrollToBottom = () => {
@@ -74,11 +73,7 @@ export const WebchatMessageList = () => {
         }
     }, [firstUnreadMessageId, webchatState.isWebchatOpen, webchatState.typing]);
     const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
-    return (_jsxs(_Fragment, { children: [_jsxs(StyledScrollbar, Object.assign({ role: 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: [_jsx(IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ScrollableMessageList, Object.assign({ id: BotonicContainerId.ScrollableMessagesList, ref: scrollableMessagesListRef, role: ROLES.MESSAGE_LIST }, { children: [_jsx(IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
                         return (_jsxs(ContainerMessage, Object.assign({ role: ROLES.MESSAGE }, { children: [showUnreadMessagesBanner(messageComponent.props.id) && (_jsx(UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), messageComponent, index === webchatState.messagesComponents.length - 1 && (_jsx("div", { ref: lastMessageBottomRef, style: {
                                         content: '',
                                     } }))] }), index));

package/lib/esm/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/esm/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,OAAO,eAAe,MAAM,oCAAoC,CAAA;AAGhE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAMtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAEtE,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,OAAO,CACL,4BACG,mBAAmB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7B,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,kBAAC,OAAO,EAAE,WAAW,gBACzC,cAAK,GAAG,EAAE,YAAY,CAAC,eAAe,CAAC,GAAI,IACrB,CACzB,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"scroll-button.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/scroll-button.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,MAAM,oCAAoC,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAMtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,WAAW,GACO,EAAe,EAAE;IACnC,MAAM,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAA;IAEtE,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,OAAO,CACL,4BACG,mBAAmB,IAAI,IAAI,CAAC,CAAC,CAAC,CAC7B,4BACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,KAAC,kBAAkB,IAAC,oBAAoB,EAAE,WAAW,GAAI,CAC1D,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,kBAAC,OAAO,EAAE,WAAW,gBACzC,cAAK,GAAG,EAAE,YAAY,CAAC,eAAe,CAAC,GAAI,IACrB,CACzB,GACA,CACJ,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/lib/esm/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/esm/webchat/message-list/styles.js

@@ -43,4 +43,13 @@ export const ContainerUnreadMessagesBanner = styled.div `
     width: 10px;
   }
 `;
+export const ScrollableMessageList = styled.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/esm/webchat/message-list/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAED,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAED,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ9C,CAAA"}

package/lib/esm/webchat/replies.js

@@ -3,7 +3,11 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 import { WEBCHAT } from '../constants';
 import { WebchatContext } from '../contexts';
-import { StyledScrollbar } from '../webchat/components/styled-scrollbar';
+import { BotonicContainerId } from './constants';
+const ScrollableReplies = styled.div `
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+`;
 const RepliesContainer = styled.div `
   display: flex;
   text-align: center;
@@ -12,6 +16,7 @@ const RepliesContainer = styled.div `
   padding-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
+  overflow-x: scroll;
 `;
 const ReplyContainer = styled.div `
   flex: none;
@@ -24,8 +29,7 @@ const options = {
     right: 'flex-end',
 };
 export const WebchatReplies = props => {
-    const { webchatState, getThemeProperty } = useContext(WebchatContext);
-    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const { webchatState, getThemeProperty, repliesRef } = useContext(WebchatContext);
     let justifyContent = 'center';
     const flexWrap = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
     if (flexWrap == 'nowrap')
@@ -33,6 +37,6 @@ export const WebchatReplies = props => {
     else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies))
         justifyContent =
             options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
-    return (_jsx(StyledScrollbar, Object.assign({ scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide }, { children: _jsx(RepliesContainer, Object.assign({ className: 'replies-container', justify: justifyContent, wrap: flexWrap }, { children: webchatState.replies.map((r, i) => (_jsx(ReplyContainer, { children: r }, i))) })) })));
+    return (_jsx(ScrollableReplies, { children: _jsx(RepliesContainer, Object.assign({ id: BotonicContainerId.RepliesContainer, ref: repliesRef, className: 'replies-container', justify: justifyContent, wrap: flexWrap }, { children: webchatState.replies.map((r, i) => (_jsx(ReplyContainer, { children: r }, i))) })) }));
 };
 //# sourceMappingURL=replies.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"replies.js","sourceRoot":"","sources":["../../../src/webchat/replies.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAA;AAExE,MAAM,gBAAgB,GAAG,MAAM,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,MAAM,CAAC,GAAG,CAAA;;;;CAIhC,CAAA;AAED,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;IACpC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACrE,MAAM,gBAAgB,iBACjB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CACzD,CAAA;IACD,IAAI,cAAc,GAAG,QAAQ,CAAA;IAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAC/B,OAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,MAAM,CACP,CAAA;IACD,IAAI,QAAQ,IAAI,QAAQ;QAAE,cAAc,GAAG,YAAY,CAAA;SAClD,IAAI,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC;QAC/D,cAAc;YACZ,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IAErE,OAAO,CACL,KAAC,eAAe,kBACd,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,gBAEnC,KAAC,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,KAAC,cAAc,cAAU,CAAC,IAAL,CAAC,CAAsB,CAC7C,CAAC,IACe,IACH,CACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"replies.js","sourceRoot":"","sources":["../../../src/webchat/replies.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAEhD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAED,MAAM,gBAAgB,GAAG,MAAM,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,MAAM,CAAC,GAAG,CAAA;;;;CAIhC,CAAA;AAED,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;IACpC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAClD,UAAU,CAAC,cAAc,CAAC,CAAA;IAC5B,IAAI,cAAc,GAAG,QAAQ,CAAA;IAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAC/B,OAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,MAAM,CACP,CAAA;IACD,IAAI,QAAQ,IAAI,QAAQ;QAAE,cAAc,GAAG,YAAY,CAAA;SAClD,IAAI,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC;QAC/D,cAAc;YACZ,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IAErE,OAAO,CACL,KAAC,iBAAiB,cAChB,KAAC,gBAAgB,kBACf,EAAE,EAAE,kBAAkB,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,KAAC,cAAc,cAAU,CAAC,IAAL,CAAC,CAAsB,CAC7C,CAAC,IACe,GACD,CACrB,CAAA;AACH,CAAC,CAAA"}

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS, ROLES } from '../../constants';
+import { Dot, TypingIndicatorWrapper } from './styles';
+export const TypingIndicator = () => (_jsxs(TypingIndicatorWrapper, Object.assign({ role: ROLES.TYPING_INDICATOR, className: 'typing-indicator', backgroundColor: COLORS.SEASHELL_WHITE }, { children: [_jsx(Dot, {}), _jsx(Dot, {}), _jsx(Dot, {})] })));
+//# sourceMappingURL=index.js.map

package/lib/esm/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,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAEtD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CACnC,MAAC,sBAAsB,kBACrB,IAAI,EAAE,KAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,eAAe,EAAE,MAAM,CAAC,cAAc,iBAEtC,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,EACP,KAAC,GAAG,KAAG,KACgB,CAC1B,CAAA"}

package/lib/esm/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/esm/webchat/typing-indicator/styles.js

@@ -0,0 +1,43 @@
+import styled, { keyframes } from 'styled-components';
+const blink = keyframes `
+  50% {
+    opacity: 1;
+  }
+`;
+const bulge = keyframes `
+  50% {
+    transform: scale(1.05);
+  }
+`;
+export const TypingIndicatorWrapper = styled.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};
+`;
+export const Dot = styled.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