@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.1

package/lib/webchat/header/styles.js

@@ -0,0 +1,67 @@
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const HeaderContainer = styled_components.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${(props)=>props.color} 100%
+  );
+  border-radius: ${(props)=>props.theme.header?.style?.borderRadius};
+  z-index: 2;
+  height: inherit;
+
+  @media (max-width: ${(props)=>props.theme.mobileBreakpoint}px) {
+    border-radius: ${(props)=>props.theme.header?.mobileStyle?.borderRadius};
+  }
+`;
+const ImageContainer = styled_components.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`;
+const TextContainer = styled_components.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`;
+const Title = styled_components.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`;
+const Subtitle = styled_components.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`;
+const CloseHeader = styled_components.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`;
+const StyledWebchatHeader = styled_components.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`;
+
+export { CloseHeader, HeaderContainer, ImageContainer, StyledWebchatHeader, Subtitle, TextContainer, Title };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/header/styles.js","sources":["../../../src/webchat/header/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const HeaderContainer = styled.div`\n  display: flex;\n  background: linear-gradient(\n    90deg,\n    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,\n    ${props => props.color} 100%\n  );\n  border-radius: ${props => props.theme.header?.style?.borderRadius};\n  z-index: 2;\n  height: inherit;\n\n  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {\n    border-radius: ${props => props.theme.header?.mobileStyle?.borderRadius};\n  }\n`\n\nexport const ImageContainer = styled.div`\n  padding: 10px;\n  align-items: center;\n\n  img {\n    width: 32px;\n    border-radius: 50%;\n  }\n`\n\nexport const TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1 1 auto;\n`\n\nexport const Title = styled.div`\n  display: flex;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: bold;\n  color: ${COLORS.SOLID_WHITE};\n`\n\nexport const Subtitle = styled.div`\n  display: flex;\n  font-family: inherit;\n  font-size: 11px;\n  color: ${COLORS.SOLID_WHITE};\n`\n\nexport const CloseHeader = styled.div`\n  padding: 0px 16px;\n  cursor: pointer;\n  color: ${COLORS.SOLID_WHITE};\n  font-family: inherit;\n  font-size: 36px;\n`\n\nexport const StyledWebchatHeader = styled.div`\n  border-radius: 8px 8px 0px 0px;\n  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;\n  height: 55px;\n  flex: none;\n`\n"],"names":["styled","COLORS","HeaderContainer","props","ImageContainer","TextContainer","Title","Subtitle","CloseHeader","StyledWebchatHeader"],"mappings":";;;;;AAAsC;AAEE;AAEjC,MAAME,eAAeA,GAAGF,qBAAU,CAAC;;;;IAItC,EAAEC,4BAA4B,CAAC;IAC/B,EAAEE,CAAAA,QAASA,MAAM,KAAK,CAAC;;iBAEV,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,aAAa;;;;qBAI/C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,gBAAgB,CAAC;mBAC1C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,MAAM,EAAE,aAAa,aAAa;;AAE5E,CAAC;AAEM,MAAMC,cAAcA,GAAGJ,qBAAU,CAAC;;;;;;;;AAQzC,CAAC;AAEM,MAAMK,aAAaA,GAAGL,qBAAU,CAAC;;;;;AAKxC,CAAC;AAEM,MAAMM,KAAKA,GAAGN,qBAAU,CAAC;;;;;SAKvB,EAAEC,kBAAkB,CAAC;AAC9B,CAAC;AAEM,MAAMM,QAAQA,GAAGP,qBAAU,CAAC;;;;SAI1B,EAAEC,kBAAkB,CAAC;AAC9B,CAAC;AAEM,MAAMO,WAAWA,GAAGR,qBAAU,CAAC;;;SAG7B,EAAEC,kBAAkB,CAAC;;;AAG9B,CAAC;AAEM,MAAMQ,mBAAmBA,GAAGT,qBAAU,CAAC;;cAEhC,EAAEC,iCAAiC,CAAC;;;AAGlD,CAAC"}

package/lib/webchat/hooks/index.d.ts

@@ -0,0 +1,10 @@
+export { useComponentVisible } from './use-component-visible.js';
+export { useComponentWillMount } from './use-component-will-mount.js';
+export { useDeviceAdapter } from './use-device-adapter.js';
+export { usePrevious } from './use-previous.js';
+export { useScrollToBottom } from './use-scroll-to-bottom.js';
+export { useScrollbarController } from './use-scrollbar-controller.js';
+export { useTyping } from './use-typing.js';
+export { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection.js';
+export { useWebchatDimensions } from './use-webchat-dimensions.js';
+export { useWebchatResizer } from './use-webchat-resizer.js';

package/lib/webchat/hooks/index.js

@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export { useComponentVisible } from "./use-component-visible.js";
+export { useComponentWillMount } from "./use-component-will-mount.js";
+export { useDeviceAdapter } from "./use-device-adapter.js";
+export { usePrevious } from "./use-previous.js";
+export { useScrollToBottom } from "./use-scroll-to-bottom.js";
+export { useScrollbarController } from "./use-scrollbar-controller.js";
+export { useTyping } from "./use-typing.js";
+export { useVirtualKeyboardDetection } from "./use-virtual-keyboard-detection.js";
+export { useWebchatDimensions } from "./use-webchat-dimensions.js";
+export { useWebchatResizer } from "./use-webchat-resizer.js";
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/index.js","sources":["../../../src/webchat/hooks/index.ts"],"sourcesContent":["export { useComponentVisible } from './use-component-visible'\nexport { useComponentWillMount } from './use-component-will-mount'\nexport { useDeviceAdapter } from './use-device-adapter'\nexport { usePrevious } from './use-previous'\nexport { useScrollToBottom } from './use-scroll-to-bottom'\nexport { useScrollbarController } from './use-scrollbar-controller'\nexport { useTyping } from './use-typing'\nexport { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'\nexport { useWebchatDimensions } from './use-webchat-dimensions'\nexport { useWebchatResizer } from './use-webchat-resizer'\n"],"names":["useComponentVisible","useComponentWillMount","useDeviceAdapter","usePrevious","useScrollToBottom","useScrollbarController","useTyping","useVirtualKeyboardDetection","useWebchatDimensions","useWebchatResizer"],"mappings":";;;;;;;;;;AAA6D;AACK;AACX;AACX;AACc;AACS;AAC3B;AACsC;AACf;AACN"}

package/lib/webchat/hooks/use-component-visible.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from "react";
+
+
+
+function useComponentVisible(initialIsVisible, onClickOutside) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+    const handleClickOutside = (event)=>{
+        const target = event.path ? event.path[0] : event.target;
+        if (ref.current && !ref.current.contains(target)) {
+            setIsComponentVisible(false);
+            onClickOutside();
+        }
+    };
+    useEffect(()=>{
+        document.addEventListener('click', handleClickOutside, false);
+        return ()=>{
+            document.removeEventListener('click', handleClickOutside, false);
+        };
+    });
+    return {
+        ref,
+        isComponentVisible,
+        setIsComponentVisible
+    };
+}
+
+export { useComponentVisible };
+
+//# sourceMappingURL=use-component-visible.js.map

package/lib/webchat/hooks/use-component-visible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-component-visible.js","sources":["../../../src/webchat/hooks/use-component-visible.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\ninterface ComponentVisible {\n  ref: React.RefObject<HTMLElement>\n  isComponentVisible: boolean\n  setIsComponentVisible: React.Dispatch<React.SetStateAction<boolean>>\n}\n\nexport function useComponentVisible(\n  initialIsVisible: boolean,\n  onClickOutside: () => void\n): ComponentVisible {\n  const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)\n  const ref = useRef<HTMLElement>(null)\n  const handleClickOutside = event => {\n    const target = event.path ? event.path[0] : event.target\n    if (ref.current && !ref.current.contains(target)) {\n      setIsComponentVisible(false)\n      onClickOutside()\n    }\n  }\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, false)\n    return () => {\n      document.removeEventListener('click', handleClickOutside, false)\n    }\n  })\n  return { ref, isComponentVisible, setIsComponentVisible }\n}\n"],"names":["useEffect","useRef","useState","useComponentVisible","initialIsVisible","onClickOutside","isComponentVisible","setIsComponentVisible","ref","handleClickOutside","event","target","document"],"mappings":";;;AAAmD;AAQ5C,SAASG,mBAAmBA,CACjCC,gBAAyB,EACzBC,cAA0B;IAE1B,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGL,QAAQA,CAACE;IAC7D,MAAMI,MAAMP,MAAMA,CAAc;IAChC,MAAMQ,qBAAqBC,CAAAA;QACzB,MAAMC,SAASD,MAAM,IAAI,GAAGA,MAAM,IAAI,CAAC,EAAE,GAAGA,MAAM,MAAM;QACxD,IAAIF,IAAI,OAAO,IAAI,CAACA,IAAI,OAAO,CAAC,QAAQ,CAACG,SAAS;YAChDJ,sBAAsB;YACtBF;QACF;IACF;IACAL,SAASA,CAAC;QACRY,SAAS,gBAAgB,CAAC,SAASH,oBAAoB;QACvD,OAAO;YACLG,SAAS,mBAAmB,CAAC,SAASH,oBAAoB;QAC5D;IACF;IACA,OAAO;QAAED;QAAKF;QAAoBC;IAAsB;AAC1D"}

package/lib/webchat/hooks/use-component-will-mount.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+
+
+const useComponentWillMount = (func)=>{
+    useMemo(func, []);
+};
+
+export { useComponentWillMount };
+
+//# sourceMappingURL=use-component-will-mount.js.map

package/lib/webchat/hooks/use-component-will-mount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-component-will-mount.js","sources":["../../../src/webchat/hooks/use-component-will-mount.ts"],"sourcesContent":["import { useMemo } from 'react'\n\nexport const useComponentWillMount = func => {\n  useMemo(func, [])\n}\n"],"names":["useMemo","useComponentWillMount","func"],"mappings":";;;AAA+B;AAExB,MAAMC,qBAAqBA,GAAGC,CAAAA;IACnCF,OAAOA,CAACE,MAAM,EAAE;AAClB,EAAC"}

package/lib/webchat/hooks/use-device-adapter.js

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+import { DEVICES } from "../devices/index.js";
+import { useScrollToBottom } from "./use-scroll-to-bottom.js";
+import { useScrollbarController } from "./use-scrollbar-controller.js";
+import { useVirtualKeyboardDetection } from "./use-virtual-keyboard-detection.js";
+import { useWebchatResizer } from "./use-webchat-resizer.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+function getCurrentDevice() {
+    const nav = navigator;
+    if (nav.userAgentData) {
+        return nav.userAgentData.platform;
+    }
+    return navigator.platform;
+}
+const useDeviceAdapter = (host, isWebchatOpen)=>{
+    const currentDevice = getCurrentDevice();
+    const { scrollToBottom } = useScrollToBottom({
+        host
+    });
+    const { isVirtualKeyboardVisible } = useVirtualKeyboardDetection(window.innerHeight);
+    const { handleKeyboardShown, handleKeyboardHidden } = useWebchatResizer();
+    const { handleScrollEvents } = useScrollbarController(currentDevice, host);
+    useEffect(()=>{
+        if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+            return;
+        }
+        if (isVirtualKeyboardVisible) {
+            handleKeyboardShown();
+            scrollToBottom();
+        } else {
+            handleKeyboardHidden();
+        }
+        return;
+    }, [
+        isVirtualKeyboardVisible
+    ]);
+    useEffect(()=>{
+        if (host && isWebchatOpen) {
+            if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+                return;
+            }
+            handleScrollEvents();
+        }
+    }, [
+        host,
+        isWebchatOpen,
+        handleScrollEvents
+    ]);
+    return {
+        currentDevice
+    };
+};
+
+export { useDeviceAdapter };
+
+//# sourceMappingURL=use-device-adapter.js.map

package/lib/webchat/hooks/use-device-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-device-adapter.js","sources":["../../../src/webchat/hooks/use-device-adapter.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nimport { DEVICES } from '../devices'\nimport { useScrollToBottom } from './use-scroll-to-bottom'\nimport { useScrollbarController } from './use-scrollbar-controller'\nimport { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'\nimport { useWebchatResizer } from './use-webchat-resizer'\n\n// To avoid type error using experimental new API supported by some browsers like Chrome but not in Safari\ninterface NavigatorWithUserAgentData extends Navigator {\n  userAgentData?: {\n    platform: string\n  }\n}\n\nfunction getCurrentDevice() {\n  const nav = navigator as NavigatorWithUserAgentData\n  if (nav.userAgentData) {\n    return nav.userAgentData.platform\n  }\n  return navigator.platform\n}\n\nexport const useDeviceAdapter = (host, isWebchatOpen) => {\n  const currentDevice = getCurrentDevice()\n\n  const { scrollToBottom } = useScrollToBottom({ host })\n\n  const { isVirtualKeyboardVisible } = useVirtualKeyboardDetection(\n    window.innerHeight\n  )\n\n  const { handleKeyboardShown, handleKeyboardHidden } = useWebchatResizer()\n\n  const { handleScrollEvents } = useScrollbarController(currentDevice, host)\n\n  useEffect(() => {\n    if (currentDevice !== DEVICES.MOBILE.IPHONE) {\n      return\n    }\n    if (isVirtualKeyboardVisible) {\n      handleKeyboardShown()\n      scrollToBottom()\n    } else {\n      handleKeyboardHidden()\n    }\n\n    return\n  }, [isVirtualKeyboardVisible])\n\n  useEffect(() => {\n    if (host && isWebchatOpen) {\n      if (currentDevice !== DEVICES.MOBILE.IPHONE) {\n        return\n      }\n      handleScrollEvents()\n    }\n  }, [host, isWebchatOpen, handleScrollEvents])\n\n  return {\n    currentDevice,\n  }\n}\n"],"names":["useEffect","DEVICES","useScrollToBottom","useScrollbarController","useVirtualKeyboardDetection","useWebchatResizer","getCurrentDevice","nav","navigator","useDeviceAdapter","host","isWebchatOpen","currentDevice","scrollToBottom","isVirtualKeyboardVisible","window","handleKeyboardShown","handleKeyboardHidden","handleScrollEvents"],"mappings":";;;;;;;;;;;;;AAAiC;AAEG;AACsB;AACS;AACW;AACrB;AASzD,SAASM,gBAAgBA;IACvB,MAAMC,MAAMC;IACZ,IAAID,IAAI,aAAa,EAAE;QACrB,OAAOA,IAAI,aAAa,CAAC,QAAQ;IACnC;IACA,OAAOC,UAAU,QAAQ;AAC3B;AAEO,MAAMC,gBAAgBA,GAAG,CAACC,MAAMC;IACrC,MAAMC,gBAAgBN,gBAAgBA;IAEtC,MAAM,EAAEO,cAAc,EAAE,GAAGX,iBAAiBA,CAAC;QAAEQ;IAAK;IAEpD,MAAM,EAAEI,wBAAwB,EAAE,GAAGV,2BAA2BA,CAC9DW,OAAO,WAAW;IAGpB,MAAM,EAAEC,mBAAmB,EAAEC,oBAAoB,EAAE,GAAGZ,iBAAiBA;IAEvE,MAAM,EAAEa,kBAAkB,EAAE,GAAGf,sBAAsBA,CAACS,eAAeF;IAErEV,SAASA,CAAC;QACR,IAAIY,kBAAkBX,qBAAqB,EAAE;YAC3C;QACF;QACA,IAAIa,0BAA0B;YAC5BE;YACAH;QACF,OAAO;YACLI;QACF;QAEA;IACF,GAAG;QAACH;KAAyB;IAE7Bd,SAASA,CAAC;QACR,IAAIU,QAAQC,eAAe;YACzB,IAAIC,kBAAkBX,qBAAqB,EAAE;gBAC3C;YACF;YACAiB;QACF;IACF,GAAG;QAACR;QAAMC;QAAeO;KAAmB;IAE5C,OAAO;QACLN;IACF;AACF,EAAC"}

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

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+
+
+function usePrevious(value) {
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    });
+    return ref.current;
+}
+
+export { usePrevious };
+
+//# sourceMappingURL=use-previous.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-previous.js","sources":["../../../src/webchat/hooks/use-previous.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport function usePrevious(value: any): any {\n  const ref = useRef()\n  useEffect(() => {\n    ref.current = value\n  })\n  return ref.current\n}\n"],"names":["useEffect","useRef","usePrevious","value","ref"],"mappings":";;;AAAyC;AAElC,SAASE,WAAWA,CAACC,KAAU;IACpC,MAAMC,MAAMH,MAAMA;IAClBD,SAASA,CAAC;QACRI,IAAI,OAAO,GAAGD;IAChB;IACA,OAAOC,IAAI,OAAO;AACpB"}

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

@@ -0,0 +1,29 @@
+import { getScrollableMessagesListElement, getWebchatElement } from "../../util/dom.js";
+
+
+
+const useScrollToBottom = ({ host, behavior = 'smooth', timeout = 200 })=>{
+    const scrollToBottom = ()=>{
+        const webchatElement = getWebchatElement(host);
+        if (!webchatElement) {
+            return;
+        }
+        const scrollableMessagesListElement = getScrollableMessagesListElement(host);
+        if (!scrollableMessagesListElement) {
+            return;
+        }
+        setTimeout(()=>{
+            scrollableMessagesListElement.scrollTo({
+                top: scrollableMessagesListElement.scrollHeight,
+                behavior: behavior
+            });
+        }, timeout);
+    };
+    return {
+        scrollToBottom
+    };
+};
+
+export { useScrollToBottom };
+
+//# sourceMappingURL=use-scroll-to-bottom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-scroll-to-bottom.js","sources":["../../../src/webchat/hooks/use-scroll-to-bottom.ts"],"sourcesContent":["import {\n  getScrollableMessagesListElement,\n  getWebchatElement,\n} from '../../util/dom'\n\ninterface UseScrollToBottom {\n  host: any\n  behavior?: ScrollBehavior\n  timeout?: number\n}\n\nexport const useScrollToBottom = ({\n  host,\n  behavior = 'smooth',\n  timeout = 200,\n}: UseScrollToBottom) => {\n  const scrollToBottom = () => {\n    const webchatElement = getWebchatElement(host)\n    if (!webchatElement) {\n      return\n    }\n    const scrollableMessagesListElement = getScrollableMessagesListElement(host)\n    if (!scrollableMessagesListElement) {\n      return\n    }\n\n    setTimeout(() => {\n      scrollableMessagesListElement.scrollTo({\n        top: scrollableMessagesListElement.scrollHeight,\n        behavior: behavior,\n      })\n    }, timeout)\n  }\n\n  return { scrollToBottom }\n}\n"],"names":["getScrollableMessagesListElement","getWebchatElement","useScrollToBottom","host","behavior","timeout","scrollToBottom","webchatElement","scrollableMessagesListElement","setTimeout"],"mappings":";;;AAGuB;AAQhB,MAAME,iBAAiBA,GAAG,CAAC,EAChCC,IAAI,EACJC,WAAW,QAAQ,EACnBC,UAAU,GAAG,EACK;IAClB,MAAMC,iBAAiB;QACrB,MAAMC,iBAAiBN,iBAAiBA,CAACE;QACzC,IAAI,CAACI,gBAAgB;YACnB;QACF;QACA,MAAMC,gCAAgCR,gCAAgCA,CAACG;QACvE,IAAI,CAACK,+BAA+B;YAClC;QACF;QAEAC,WAAW;YACTD,8BAA8B,QAAQ,CAAC;gBACrC,KAAKA,8BAA8B,YAAY;gBAC/C,UAAUJ;YACZ;QACF,GAAGC;IACL;IAEA,OAAO;QAAEC;IAAe;AAC1B,EAAC"}

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

@@ -0,0 +1,148 @@
+import { useContext, useEffect } from "react";
+import { WebchatContext } from "../context/index.js";
+import { DEVICES, isMobileDevice } from "../devices/index.js";
+
+
+
+
+
+
+
+// TODO: Investigate why when we have some messages, scroll actions are not disabled properly
+const debounced = (delay, fn)=>{
+    let timerId = null;
+    return (...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 { webchatContainerRef, chatAreaRef, repliesRef, scrollableMessagesListRef } = useContext(WebchatContext);
+    const hasScrollbar = ()=>{
+        if (chatAreaRef.current && scrollableMessagesListRef.current) {
+            if (!repliesRef?.current) {
+                return scrollableMessagesListRef.current?.scrollHeight > chatAreaRef.current?.clientHeight;
+            }
+            if (repliesRef.current) {
+                return scrollableMessagesListRef.current?.scrollHeight > chatAreaRef.current?.clientHeight - repliesRef.current?.clientHeight;
+            }
+        }
+        return false;
+    };
+    const toggleOnMouseWheelEvents = ()=>{
+        if (scrollableMessagesListRef.current) {
+            if (hasScrollbar()) {
+                // @ts-expect-error
+                scrollableMessagesListRef.current.onmousewheel = {};
+                return;
+            }
+            // @ts-expect-error
+            scrollableMessagesListRef.current.onmousewheel = (e)=>{
+                e.preventDefault();
+            };
+        }
+    };
+    const handleOnMouseOverEvents = (e)=>{
+        let target = e.currentTarget;
+        while(target){
+            toggleOnMouseWheelEvents();
+            target = target.parentNode;
+        }
+    };
+    const toggleOnTouchMoveEvents = ()=>{
+        if (webchatContainerRef.current && scrollableMessagesListRef.current) {
+            if (hasScrollbar()) {
+                scrollableMessagesListRef.current.style.touchAction = 'auto';
+                webchatContainerRef.current.style.touchAction = 'auto';
+                webchatContainerRef.current.ontouchmove = null;
+                webchatContainerRef.current.ontouchstart = null;
+                return;
+            }
+            scrollableMessagesListRef.current.style.touchAction = 'none';
+            webchatContainerRef.current.style.touchAction = 'none';
+        }
+        if (webchatContainerRef.current) {
+            webchatContainerRef.current.ontouchstart = (e)=>{
+                if (e.target === e.currentTarget) {
+                    e.preventDefault();
+                }
+            };
+            webchatContainerRef.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-expect-error
+            if (window.addEventListener) {
+                chatArea.addEventListener('scroll', ()=>dStopAtScrollLimit(chatArea), true);
+            // @ts-expect-error
+            } else if (window.attachEvent) {
+                // @ts-expect-error
+                chatAreaRef.attachEvent('scroll', ()=>dStopAtScrollLimit(chatArea));
+            }
+        }
+    };
+    const handleScrollEvents = ()=>{
+        if (webchatContainerRef.current) {
+            if (isMobileDevice()) {
+                if (currentDevice !== DEVICES.MOBILE.IPHONE) {
+                    return;
+                }
+                limitScrollBoundaries();
+                webchatContainerRef.current.ontouchstart = handleOnTouchMoveEvents;
+                webchatContainerRef.current.ontouchmove = handleOnTouchMoveEvents;
+            } else {
+                webchatContainerRef.current.onmouseover = (e)=>handleOnMouseOverEvents(e);
+            }
+        }
+    };
+    useEffect(()=>{
+        const webchat = webchatContainerRef.current;
+        handleScrollEvents();
+        return ()=>{
+            if (webchat) {
+                webchat.onmouseover = null;
+                webchat.ontouchstart = null;
+                webchat.ontouchmove = null;
+            }
+        };
+    }, [
+        currentDevice,
+        host
+    ]);
+    return {
+        handleScrollEvents,
+        handleOnTouchMoveEvents,
+        handleOnMouseOverEvents,
+        hasScrollbar
+    };
+};
+
+export { useScrollbarController };
+
+//# sourceMappingURL=use-scrollbar-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-scrollbar-controller.js","sources":["../../../src/webchat/hooks/use-scrollbar-controller.ts"],"sourcesContent":["import { useContext, useEffect } from 'react'\n\nimport { WebchatContext } from '../../webchat/context'\nimport { DEVICES, isMobileDevice } from '../devices'\n\n// TODO: Investigate why when we have some messages, scroll actions are not disabled properly\n\nconst debounced = (delay, fn) => {\n  let timerId: NodeJS.Timeout | null = null\n  return (...args) => {\n    if (timerId) {\n      clearTimeout(timerId)\n    }\n    timerId = setTimeout(() => {\n      fn(...args)\n      timerId = null\n    }, delay)\n  }\n}\n\nconst stopAtScrollLimit = element => {\n  if (element.scrollTop === 0) {\n    element.scrollTop = 1\n  }\n  if (element.scrollHeight - element.scrollTop === element.clientHeight) {\n    element.scrollTop -= 1\n  }\n}\n\nexport const useScrollbarController = (currentDevice, host) => {\n  const {\n    webchatContainerRef,\n    chatAreaRef,\n    repliesRef,\n    scrollableMessagesListRef,\n  } = useContext(WebchatContext)\n\n  const hasScrollbar = () => {\n    if (chatAreaRef.current && scrollableMessagesListRef.current) {\n      if (!repliesRef?.current) {\n        return (\n          scrollableMessagesListRef.current?.scrollHeight >\n          chatAreaRef.current?.clientHeight\n        )\n      }\n      if (repliesRef.current) {\n        return (\n          scrollableMessagesListRef.current?.scrollHeight >\n          chatAreaRef.current?.clientHeight - repliesRef.current?.clientHeight\n        )\n      }\n    }\n\n    return false\n  }\n\n  const toggleOnMouseWheelEvents = () => {\n    if (scrollableMessagesListRef.current) {\n      if (hasScrollbar()) {\n        // @ts-expect-error\n        scrollableMessagesListRef.current.onmousewheel = {}\n        return\n      }\n      // @ts-expect-error\n      scrollableMessagesListRef.current.onmousewheel = e => {\n        e.preventDefault()\n      }\n    }\n  }\n\n  const handleOnMouseOverEvents = e => {\n    let target = e.currentTarget\n    while (target) {\n      toggleOnMouseWheelEvents()\n      target = target.parentNode\n    }\n  }\n\n  const toggleOnTouchMoveEvents = () => {\n    if (webchatContainerRef.current && scrollableMessagesListRef.current) {\n      if (hasScrollbar()) {\n        scrollableMessagesListRef.current.style.touchAction = 'auto'\n        webchatContainerRef.current.style.touchAction = 'auto'\n        webchatContainerRef.current.ontouchmove = null\n        webchatContainerRef.current.ontouchstart = null\n        return\n      }\n\n      scrollableMessagesListRef.current.style.touchAction = 'none'\n      webchatContainerRef.current.style.touchAction = 'none'\n    }\n    if (webchatContainerRef.current) {\n      webchatContainerRef.current.ontouchstart = e => {\n        if (e.target === e.currentTarget) {\n          e.preventDefault()\n        }\n      }\n      webchatContainerRef.current.ontouchmove = e => {\n        if (e.target === e.currentTarget) {\n          e.preventDefault()\n        }\n      }\n    }\n  }\n\n  const handleOnTouchMoveEvents = () => {\n    toggleOnTouchMoveEvents()\n  }\n\n  const limitScrollBoundaries = () => {\n    if (currentDevice !== DEVICES.MOBILE.IPHONE) {\n      return\n    }\n    const chatArea = chatAreaRef.current\n    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)\n\n    if (chatArea) {\n      // @ts-expect-error\n      if (window.addEventListener) {\n        chatArea.addEventListener(\n          'scroll',\n          () => dStopAtScrollLimit(chatArea),\n          true\n        )\n        // @ts-expect-error\n      } else if (window.attachEvent) {\n        // @ts-expect-error\n        chatAreaRef.attachEvent('scroll', () => dStopAtScrollLimit(chatArea))\n      }\n    }\n  }\n\n  const handleScrollEvents = () => {\n    if (webchatContainerRef.current) {\n      if (isMobileDevice()) {\n        if (currentDevice !== DEVICES.MOBILE.IPHONE) {\n          return\n        }\n\n        limitScrollBoundaries()\n\n        webchatContainerRef.current.ontouchstart = handleOnTouchMoveEvents\n        webchatContainerRef.current.ontouchmove = handleOnTouchMoveEvents\n      } else {\n        webchatContainerRef.current.onmouseover = e =>\n          handleOnMouseOverEvents(e)\n      }\n    }\n  }\n\n  useEffect(() => {\n    const webchat = webchatContainerRef.current\n\n    handleScrollEvents()\n\n    return () => {\n      if (webchat) {\n        webchat.onmouseover = null\n        webchat.ontouchstart = null\n        webchat.ontouchmove = null\n      }\n    }\n  }, [currentDevice, host])\n\n  return {\n    handleScrollEvents,\n    handleOnTouchMoveEvents,\n    handleOnMouseOverEvents,\n    hasScrollbar,\n  }\n}\n"],"names":["useContext","useEffect","WebchatContext","DEVICES","isMobileDevice","debounced","delay","fn","timerId","args","clearTimeout","setTimeout","stopAtScrollLimit","element","useScrollbarController","currentDevice","host","webchatContainerRef","chatAreaRef","repliesRef","scrollableMessagesListRef","hasScrollbar","toggleOnMouseWheelEvents","e","handleOnMouseOverEvents","target","toggleOnTouchMoveEvents","handleOnTouchMoveEvents","limitScrollBoundaries","chatArea","dStopAtScrollLimit","window","handleScrollEvents","webchat"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+import type { WebchatMessage } from '../../index-types.js';
+import type { WebchatState } from '../context/index.js';
+interface UseTyping {
+    webchatState: WebchatState;
+    updateTyping: (typing: boolean) => void;
+    updateMessage: (message: WebchatMessage) => void;
+    host: any;
+}
+export declare function useTyping({ webchatState, updateTyping, updateMessage, }: UseTyping): void;
+export {};

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

@@ -0,0 +1,42 @@
+import { useEffect } from "react";
+
+
+/* eslint-disable no-empty */ 
+function useTyping({ webchatState, updateTyping, updateMessage }) {
+    useEffect(()=>{
+        let delayTimeout = null;
+        let typingTimeout = null;
+        try {
+            const nextMsg = webchatState.messagesJSON.filter((m)=>!m.display)[0];
+            if (nextMsg) {
+                if (nextMsg.delay && nextMsg.typing) {
+                    delayTimeout = setTimeout(()=>updateTyping(true), nextMsg.delay * 1000);
+                } else if (nextMsg.typing) {
+                    updateTyping(true);
+                }
+                const totalDelay = nextMsg.delay + nextMsg.typing;
+                if (totalDelay) {
+                    typingTimeout = setTimeout(()=>{
+                        updateMessage({
+                            ...nextMsg,
+                            display: true
+                        });
+                        updateTyping(false);
+                    }, totalDelay * 1000);
+                }
+            }
+        // biome-ignore lint/suspicious/noEmptyBlockStatements: error is not used
+        } catch (_e) {}
+        return ()=>{
+            delayTimeout && clearTimeout(delayTimeout);
+            typingTimeout && clearTimeout(typingTimeout);
+        };
+    }, [
+        webchatState.messagesJSON,
+        webchatState.typing
+    ]);
+}
+
+export { useTyping };
+
+//# sourceMappingURL=use-typing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-typing.js","sources":["../../../src/webchat/hooks/use-typing.ts"],"sourcesContent":["/* eslint-disable no-empty */\nimport { useEffect } from 'react'\n\nimport type { WebchatMessage } from '../../index-types'\nimport type { WebchatState } from '../context'\n\ninterface UseTyping {\n  webchatState: WebchatState\n  updateTyping: (typing: boolean) => void\n  updateMessage: (message: WebchatMessage) => void\n  host: any\n}\n\nexport function useTyping({\n  webchatState,\n  updateTyping,\n  updateMessage,\n}: UseTyping): void {\n  useEffect(() => {\n    let delayTimeout: NodeJS.Timeout | null = null\n    let typingTimeout: NodeJS.Timeout | null = null\n    try {\n      const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0]\n      if (nextMsg) {\n        if (nextMsg.delay && nextMsg.typing) {\n          delayTimeout = setTimeout(\n            () => updateTyping(true),\n            nextMsg.delay * 1000\n          )\n        } else if (nextMsg.typing) {\n          updateTyping(true)\n        }\n        const totalDelay = nextMsg.delay + nextMsg.typing\n        if (totalDelay) {\n          typingTimeout = setTimeout(() => {\n            updateMessage({ ...nextMsg, display: true })\n            updateTyping(false)\n          }, totalDelay * 1000)\n        }\n      }\n      // biome-ignore lint/suspicious/noEmptyBlockStatements: error is not used\n    } catch (_e) {}\n    return () => {\n      delayTimeout && clearTimeout(delayTimeout)\n      typingTimeout && clearTimeout(typingTimeout)\n    }\n  }, [webchatState.messagesJSON, webchatState.typing])\n}\n"],"names":["useEffect","useTyping","webchatState","updateTyping","updateMessage","delayTimeout","typingTimeout","nextMsg","m","setTimeout","totalDelay","_e","clearTimeout"],"mappings":";;;AAAA,2BAA2B,GACM;AAY1B,SAASC,SAASA,CAAC,EACxBC,YAAY,EACZC,YAAY,EACZC,aAAa,EACH;IACVJ,SAASA,CAAC;QACR,IAAIK,eAAsC;QAC1C,IAAIC,gBAAuC;QAC3C,IAAI;YACF,MAAMC,UAAUL,aAAa,YAAY,CAAC,MAAM,CAACM,CAAAA,IAAK,CAACA,EAAE,OAAO,CAAC,CAAC,EAAE;YACpE,IAAID,SAAS;gBACX,IAAIA,QAAQ,KAAK,IAAIA,QAAQ,MAAM,EAAE;oBACnCF,eAAeI,WACb,IAAMN,aAAa,OACnBI,QAAQ,KAAK,GAAG;gBAEpB,OAAO,IAAIA,QAAQ,MAAM,EAAE;oBACzBJ,aAAa;gBACf;gBACA,MAAMO,aAAaH,QAAQ,KAAK,GAAGA,QAAQ,MAAM;gBACjD,IAAIG,YAAY;oBACdJ,gBAAgBG,WAAW;wBACzBL,cAAc;4BAAE,GAAGG,OAAO;4BAAE,SAAS;wBAAK;wBAC1CJ,aAAa;oBACf,GAAGO,aAAa;gBAClB;YACF;QACA,yEAAyE;QAC3E,EAAE,OAAOC,IAAI,CAAC;QACd,OAAO;YACLN,gBAAgBO,aAAaP;YAC7BC,iBAAiBM,aAAaN;QAChC;IACF,GAAG;QAACJ,aAAa,YAAY;QAAEA,aAAa,MAAM;KAAC;AACrD"}

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

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+
+
+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?.addEventListener('resize', handleResize);
+        return ()=>{
+            window.visualViewport?.removeEventListener('resize', handleResize);
+        };
+    }, [
+        originalHeight
+    ]);
+    return {
+        isVirtualKeyboardVisible
+    };
+};
+
+export { useVirtualKeyboardDetection };
+
+//# sourceMappingURL=use-virtual-keyboard-detection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-virtual-keyboard-detection.js","sources":["../../../src/webchat/hooks/use-virtual-keyboard-detection.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nexport const useVirtualKeyboardDetection = (originalHeight: number) => {\n  const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] =\n    useState(false)\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (window.visualViewport) {\n        if (window.visualViewport.height < originalHeight) {\n          setIsVirtualKeyboardVisible(true)\n          return\n        }\n        setIsVirtualKeyboardVisible(false)\n        return\n      }\n    }\n    window.visualViewport?.addEventListener('resize', handleResize)\n\n    return () => {\n      window.visualViewport?.removeEventListener('resize', handleResize)\n    }\n  }, [originalHeight])\n\n  return { isVirtualKeyboardVisible }\n}\n"],"names":["useEffect","useState","useVirtualKeyboardDetection","originalHeight","isVirtualKeyboardVisible","setIsVirtualKeyboardVisible","handleResize","window"],"mappings":";;;AAA2C;AAEpC,MAAME,2BAA2BA,GAAG,CAACC;IAC1C,MAAM,CAACC,0BAA0BC,4BAA4B,GAC3DJ,QAAQA,CAAC;IAEXD,SAASA,CAAC;QACR,MAAMM,eAAe;YACnB,IAAIC,OAAO,cAAc,EAAE;gBACzB,IAAIA,OAAO,cAAc,CAAC,MAAM,GAAGJ,gBAAgB;oBACjDE,4BAA4B;oBAC5B;gBACF;gBACAA,4BAA4B;gBAC5B;YACF;QACF;QACAE,OAAO,cAAc,EAAE,iBAAiB,UAAUD;QAElD,OAAO;YACLC,OAAO,cAAc,EAAE,oBAAoB,UAAUD;QACvD;IACF,GAAG;QAACH;KAAe;IAEnB,OAAO;QAAEC;IAAyB;AACpC,EAAC"}

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

@@ -0,0 +1,44 @@
+import { useCallback, useContext } from "react";
+import { WebchatContext } from "../context/index.js";
+
+
+
+
+
+const useWebchatDimensions = ()=>{
+    const { webchatContainerRef, headerRef, inputPanelRef, webchatState: { isWebchatOpen } } = useContext(WebchatContext);
+    const calculateResizedPercentualWebchatHeight = useCallback(()=>{
+        const webchatElement = webchatContainerRef.current;
+        if (!isWebchatOpen || !webchatElement) {
+            return 0;
+        }
+        const webchatHeight = webchatElement.clientHeight || 0;
+        const keyboardOffset = 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 = webchatContainerRef.current;
+        const headerElement = headerRef.current;
+        const inputPanelElement = inputPanelRef.current;
+        if (!isWebchatOpen || !webchatElement) {
+            return 0;
+        }
+        const headerElementHeight = headerElement ? headerElement.clientHeight : 0;
+        const inputPanelElementHeight = inputPanelElement ? inputPanelElement.clientHeight : 0;
+        return webchatElement.clientHeight - headerElementHeight - inputPanelElementHeight;
+    }, [
+        isWebchatOpen
+    ]);
+    return {
+        calculateResizedPercentualWebchatHeight,
+        calculateResizedPxChatAreaHeight
+    };
+};
+
+export { useWebchatDimensions };
+
+//# sourceMappingURL=use-webchat-dimensions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/hooks/use-webchat-dimensions.js","sources":["../../../src/webchat/hooks/use-webchat-dimensions.ts"],"sourcesContent":["import { useCallback, useContext } from 'react'\n\nimport { WebchatContext } from '../../webchat/context'\n\nexport const useWebchatDimensions = () => {\n  const {\n    webchatContainerRef,\n    headerRef,\n    inputPanelRef,\n    webchatState: { isWebchatOpen },\n  } = useContext(WebchatContext)\n\n  const calculateResizedPercentualWebchatHeight = useCallback(() => {\n    const webchatElement = webchatContainerRef.current\n    if (!isWebchatOpen || !webchatElement) {\n      return 0\n    }\n    const webchatHeight = webchatElement.clientHeight || 0\n    const keyboardOffset = window.visualViewport?.height || window.innerHeight\n    let newWebchatPercentualHeight = keyboardOffset / webchatHeight\n    newWebchatPercentualHeight =\n      Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places\n    return newWebchatPercentualHeight\n  }, [isWebchatOpen])\n\n  const calculateResizedPxChatAreaHeight = useCallback(() => {\n    const webchatElement = webchatContainerRef.current\n    const headerElement = headerRef.current\n    const inputPanelElement = inputPanelRef.current\n\n    if (!isWebchatOpen || !webchatElement) {\n      return 0\n    }\n\n    const headerElementHeight = headerElement ? headerElement.clientHeight : 0\n    const inputPanelElementHeight = inputPanelElement\n      ? inputPanelElement.clientHeight\n      : 0\n\n    return (\n      webchatElement.clientHeight -\n      headerElementHeight -\n      inputPanelElementHeight\n    )\n  }, [isWebchatOpen])\n\n  return {\n    calculateResizedPercentualWebchatHeight,\n    calculateResizedPxChatAreaHeight,\n  }\n}\n"],"names":["useCallback","useContext","WebchatContext","useWebchatDimensions","webchatContainerRef","headerRef","inputPanelRef","isWebchatOpen","calculateResizedPercentualWebchatHeight","webchatElement","webchatHeight","keyboardOffset","window","newWebchatPercentualHeight","Math","calculateResizedPxChatAreaHeight","headerElement","inputPanelElement","headerElementHeight","inputPanelElementHeight"],"mappings":";;;;;AAA+C;AAEO;AAE/C,MAAMG,oBAAoBA,GAAG;IAClC,MAAM,EACJC,mBAAmB,EACnBC,SAAS,EACTC,aAAa,EACb,cAAc,EAAEC,aAAa,EAAE,EAChC,GAAGN,UAAUA,CAACC,cAAcA;IAE7B,MAAMM,0CAA0CR,WAAWA,CAAC;QAC1D,MAAMS,iBAAiBL,oBAAoB,OAAO;QAClD,IAAI,CAACG,iBAAiB,CAACE,gBAAgB;YACrC,OAAO;QACT;QACA,MAAMC,gBAAgBD,eAAe,YAAY,IAAI;QACrD,MAAME,iBAAiBC,OAAO,cAAc,EAAE,UAAUA,OAAO,WAAW;QAC1E,IAAIC,6BAA6BF,iBAAiBD;QAClDG,6BACEC,KAAK,KAAK,CAACD,6BAA6B,MAAM,OAAO,KAAI,qBAAqB;QAChF,OAAOA;IACT,GAAG;QAACN;KAAc;IAElB,MAAMQ,mCAAmCf,WAAWA,CAAC;QACnD,MAAMS,iBAAiBL,oBAAoB,OAAO;QAClD,MAAMY,gBAAgBX,UAAU,OAAO;QACvC,MAAMY,oBAAoBX,cAAc,OAAO;QAE/C,IAAI,CAACC,iBAAiB,CAACE,gBAAgB;YACrC,OAAO;QACT;QAEA,MAAMS,sBAAsBF,gBAAgBA,cAAc,YAAY,GAAG;QACzE,MAAMG,0BAA0BF,oBAC5BA,kBAAkB,YAAY,GAC9B;QAEJ,OACER,eAAe,YAAY,GAC3BS,sBACAC;IAEJ,GAAG;QAACZ;KAAc;IAElB,OAAO;QACLC;QACAO;IACF;AACF,EAAC"}