@botonic/react 0.30.0-alpha.1 → 0.30.0

package/src/webchat/webchat.jsx

@@ -33,7 +33,6 @@ import {
   readDataURL,
 } from '../message-utils'
 import { msgToBotonic } from '../msg-to-botonic'
-import { scrollToBottom } from '../util/dom'
 import { isDev } from '../util/environment'
 import { deserializeRegex, stringifyWithRegexs } from '../util/regexs'
 import {
@@ -43,19 +42,19 @@ import {
   shouldKeepSessionOnReload,
 } from '../util/webchat'
 import { OpenedPersistentMenu } from './components/opened-persistent-menu'
-import { DeviceAdapter } from './devices/device-adapter'
-import { StyledWebchatHeader } from './header'
+import { BotonicContainerId } from './constants'
+import { WebchatHeader } from './header'
 import {
   useComponentWillMount,
   usePrevious,
+  useScrollToBottom,
   useTyping,
   useWebchat,
 } from './hooks'
-import { WebchatMessageList } from './message-list'
-import { WebchatReplies } from './replies'
 import { TriggerButton } from './trigger-button'
 import { useStorageState } from './use-storage-state-hook'
 import { getParsedAction } from './utils'
+import { WebchatChatArea } from './webchat-chat-area'
 import { WebchatInputPanel } from './webchat-input-panel'
 import { WebviewContainer } from './webview'
 
@@ -71,6 +70,7 @@ const StyledWebchat = styled.div`
   box-shadow: ${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
 `
 
 const ErrorMessageContainer = styled.div`
@@ -137,6 +137,12 @@ export const Webchat = forwardRef((props, ref) => {
     updateTyping,
     updateWebview,
     webchatState,
+    webchatRef,
+    chatAreaRef,
+    inputPanelRef,
+    headerRef,
+    scrollableMessagesListRef,
+
     // eslint-disable-next-line react-hooks/rules-of-hooks
   } = props.webchatHooks || useWebchat()
   const firstUpdate = useRef(true)
@@ -157,7 +163,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const host = props.host || document.body
 
-  const deviceAdapter = new DeviceAdapter()
+  const { scrollToBottom } = useScrollToBottom({ host })
 
   const saveWebchatState = webchatState => {
     storage &&
@@ -276,7 +282,6 @@ export const Webchat = forwardRef((props, ref) => {
       }
       return
     }
-    deviceAdapter.init(host)
   }, [webchatState.isWebchatOpen])
 
   useEffect(() => {
@@ -316,16 +321,16 @@ export const Webchat = forwardRef((props, ref) => {
 
   const textareaRef = useRef(null)
 
-  const closeWebview = options => {
+  const closeWebview = async options => {
     updateWebview()
     if (userInputEnabled) {
       textareaRef.current.focus()
     }
     if (options?.payload) {
-      sendPayload(options.payload)
+      await sendPayload(options.payload)
     } else if (options?.path) {
       const params = options.params ? params2queryString(options.params) : ''
-      sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`)
+      await sendPayload(`__PATH_PAYLOAD__${options.path}?${params}`)
     }
   }
 
@@ -709,15 +714,21 @@ export const Webchat = forwardRef((props, ref) => {
         updateWebchatDevSettings: updateWebchatDevSettings,
         webchatState,
         trackEvent: props.onTrackEvent,
+        webchatRef,
+        chatAreaRef,
+        inputPanelRef,
+        headerRef,
+        scrollableMessagesListRef,
       }}
     >
       {!webchatState.isWebchatOpen && <TriggerButton />}
 
       {webchatState.isWebchatOpen && (
         <StyledWebchat
+          id={BotonicContainerId.Webchat}
+          ref={webchatRef}
           // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
           role={ROLES.WEBCHAT}
-          id={WEBCHAT.DEFAULTS.ID}
           width={webchatState.width}
           height={webchatState.height}
           style={{
@@ -725,7 +736,9 @@ export const Webchat = forwardRef((props, ref) => {
             ...mobileStyle,
           }}
         >
-          <StyledWebchatHeader
+          <WebchatHeader
+            id={BotonicContainerId.Header}
+            ref={headerRef}
             onCloseClick={() => {
               toggleWebchat(false)
             }}
@@ -735,13 +748,7 @@ export const Webchat = forwardRef((props, ref) => {
               <ErrorMessage>{webchatState.error.message}</ErrorMessage>
             </ErrorMessageContainer>
           )}
-
-          <WebchatMessageList />
-
-          {webchatState.replies &&
-            Object.keys(webchatState.replies).length > 0 && (
-              <WebchatReplies replies={webchatState.replies} />
-            )}
+          <WebchatChatArea />
 
           {webchatState.isPersistentMenuOpen && (
             <DarkenBackground component={persistentMenu()} />
@@ -753,7 +760,7 @@ export const Webchat = forwardRef((props, ref) => {
               enableAttachments={props.enableAttachments}
               handleAttachment={handleAttachment}
               textareaRef={textareaRef}
-              deviceAdapter={deviceAdapter}
+              host={host}
               onUserInput={props.onUserInput}
             />
           )}

package/src/webchat/webview.jsx

@@ -1,5 +1,4 @@
 import React, { useContext, useEffect } from 'react'
-import Frame from 'react-frame-component'
 import styled from 'styled-components'
 
 import { COLORS, ROLES, WEBCHAT } from '../constants'
@@ -35,31 +34,19 @@ const StyledWebviewContent = styled.div`
   overflow: auto;
 `
 
-const StyledFrame = styled.iframe`
+const FrameStyles = `
   border-style: none;
   width: 100%;
   height: 100%;
 `
 
-const WebviewMode = props => {
-  /*
-    Default mode is with divs.
-    Setting the prop "asframe" will render the webview inside an iframe.
-    Pros and Cons of this "asframe" mode are:
-    Pros: OAuth2 flows can be tested locally with an iframe.
-    Cons: We won't be able to visualize correctly css styles in botonic serve (although styles will work in production).
-   */
+const StyledFrame = styled.iframe`
+  ${FrameStyles}
+`
 
-  const style = {
-    borderStyle: 'none',
-    width: '100%',
-    height: '100%',
-  }
-  if (props.asframe) {
-    return <Frame style={style}>{props.children}</Frame>
-  }
-  return <div style={style}>{props.children}</div>
-}
+const StyledFrameAsDiv = styled.div`
+  ${FrameStyles}
+`
 
 export const WebviewHeader = () => {
   const { closeWebview } = useContext(WebviewRequestContext)
@@ -81,7 +68,11 @@ export const WebviewContainer = props => {
   const { closeWebview } = useContext(WebviewRequestContext)
   const Webview = webchatState.webview
 
-  const close = e => e.data === 'botonicCloseWebview' && closeWebview()
+  const close = async e => {
+    if (e.data === 'botonicCloseWebview') {
+      await closeWebview()
+    }
+  }
 
   useEffect(() => {
     if (window.addEventListener) {
@@ -104,9 +95,9 @@ export const WebviewContainer = props => {
         {typeof Webview === 'string' ? (
           <StyledFrame src={Webview} />
         ) : (
-          <WebviewMode>
+          <StyledFrameAsDiv>
             <Webview />
-          </WebviewMode>
+          </StyledFrameAsDiv>
         )}
       </StyledWebviewContent>
     </StyledWebview>

package/src/webchat-app.jsx

@@ -211,8 +211,8 @@ export class WebchatApp {
     this.webchatRef.current.closeWebchat()
   }
 
-  closeWebview() {
-    this.webchatRef.current.closeWebview()
+  async closeWebview() {
+    await this.webchatRef.current.closeWebview()
   }
 
   toggle() {

package/src/webview-app.tsx

@@ -12,35 +12,40 @@ class App extends React.Component {
     super(props)
     const url = new URL(window.location.href)
     const params = Array.from(url.searchParams.entries())
-      .filter(([key, value]) => key != 'context')
+      .filter(([key, value]) => key !== 'context')
       .reduce((o, [key, value]) => {
         o[key] = value
         return o
       }, {})
-    const session = JSON.parse(url.searchParams.get('context') || {})
+    const urlContext = url.searchParams.get('context')
+    const session = JSON.parse(urlContext || '{}')
     this.state = { session, params }
   }
 
   async close(options?: CloseWebviewOptions) {
     let payload = options ? options.payload : null
-    if (options?.path) payload = `__PATH_PAYLOAD__${options.path}`
+
+    if (options?.path) {
+      payload = `__PATH_PAYLOAD__${options.path}`
+    }
+
     if (payload) {
       if (options?.params) {
         payload = `${payload}?${params2queryString(options.params)}`
       }
-      const s = this.state.session
+
+      const session = this.state.session
       try {
-        const baseUrl = s._hubtype_api || 'https://api.hubtype.com'
-        const resp = await axios({
-          method: 'post',
-          url: `${baseUrl}/v1/bots/${s.bot.id}/send_postback/`,
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          data: { payload: payload, chat_id: s.user.id },
-        })
+        const baseUrl = session._hubtype_api || 'https://api.hubtype.com'
+        const url = `${baseUrl}/v1/bots/${session.bot.id}/send_postback/`
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const data = { payload: payload, chat_id: session.user.id }
+        await axios.post(url, data)
       } catch (e) {
         console.log(e)
       }
     }
+
     const provider = this.state.session.user.provider
     const impId = this.state.session.user.imp_id
     if (provider === PROVIDER.WHATSAPP) {

package/lib/cjs/webchat/components/styled-scrollbar.d.ts

@@ -1,2 +0,0 @@
-export const StyledScrollbar: import("styled-components").StyledComponent<typeof SimpleBar, any, {}, never>;
-import SimpleBar from "simplebar-react";

package/lib/cjs/webchat/components/styled-scrollbar.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledScrollbar = void 0;
-const tslib_1 = require("tslib");
-require("simplebar/dist/simplebar.css");
-require("./styled-scrollbar.scss");
-const simplebar_react_1 = tslib_1.__importDefault(require("simplebar-react"));
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const constants_1 = require("../../constants");
-exports.StyledScrollbar = (0, styled_components_1.default)(simplebar_react_1.default) `
-  ${props => props.ismessagescontainer === 'true' &&
-    (0, styled_components_1.css) `
-      display: flex;
-      flex-direction: column;
-      overflow-y: auto;
-      overflow-x: hidden;
-    `}
-  & .simplebar-scrollbar::before {
-    background-color: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.color
-    ? scrollbar.thumb.color
-    : `${constants_1.COLORS.GRAY}`};
-    background-image: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.bgcolor
-    ? scrollbar.thumb.bgcolor
-    : `${constants_1.COLORS.GRAY}`};
-    border-radius: ${({ scrollbar }) => scrollbar && scrollbar.thumb && scrollbar.thumb.border
-    ? scrollbar.thumb.border
-    : '20px'};
-  }
-  & .simplebar-track .simplebar-scrollbar.simplebar-visible::before {
-    opacity: ${({ scrollbar }) => scrollbar && !scrollbar.enable
-    ? '0'
-    : scrollbar && scrollbar.thumb && scrollbar.thumb.opacity
-        ? scrollbar.thumb.opacity
-        : '0.75'};
-  }
-  & .simplebar-track {
-    background-color: ${({ scrollbar }) => scrollbar &&
-    scrollbar.track &&
-    scrollbar.track.color &&
-    !(scrollbar && !scrollbar.enable)
-    ? scrollbar.track.color
-    : constants_1.COLORS.TRANSPARENT};
-    background-image: ${({ scrollbar }) => scrollbar &&
-    scrollbar.track &&
-    scrollbar.track.bgcolor &&
-    !(scrollbar && !scrollbar.enable)
-    ? scrollbar.track.bgcolor
-    : constants_1.COLORS.TRANSPARENT};
-    border-radius: ${({ scrollbar }) => scrollbar && scrollbar.track && scrollbar.track.border
-    ? scrollbar.track.border
-    : '20px'};
-  }
-`;
-//# sourceMappingURL=styled-scrollbar.js.map

package/lib/cjs/webchat/components/styled-scrollbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styled-scrollbar.js","sourceRoot":"","sources":["../../../../src/webchat/components/styled-scrollbar.jsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AACrC,mCAAgC;AAEhC,8EAAuC;AACvC,+EAA+C;AAE/C,+CAAwC;AAE3B,QAAA,eAAe,GAAG,IAAA,2BAAM,EAAC,yBAAS,CAAC,CAAA;IAC5C,KAAK,CAAC,EAAE,CACR,KAAK,CAAC,mBAAmB,KAAK,MAAM;IACpC,IAAA,uBAAG,EAAA;;;;;KAKF;;wBAEmB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK;IACnD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK;IACvB,CAAC,CAAC,GAAG,kBAAM,CAAC,IAAI,EAAE;wBACF,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO;IACrD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;IACzB,CAAC,CAAC,GAAG,kBAAM,CAAC,IAAI,EAAE;qBACL,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACjC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM;IACpD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM;IACxB,CAAC,CAAC,MAAM;;;eAGD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAC3B,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM;IAC5B,CAAC,CAAC,GAAG;IACL,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,OAAO;QACvD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;QACzB,CAAC,CAAC,MAAM;;;wBAGM,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS;IACT,SAAS,CAAC,KAAK;IACf,SAAS,CAAC,KAAK,CAAC,KAAK;IACrB,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK;IACvB,CAAC,CAAC,kBAAM,CAAC,WAAW;wBACJ,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACpC,SAAS;IACT,SAAS,CAAC,KAAK;IACf,SAAS,CAAC,KAAK,CAAC,OAAO;IACvB,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO;IACzB,CAAC,CAAC,kBAAM,CAAC,WAAW;qBACP,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CACjC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM;IACpD,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM;IACxB,CAAC,CAAC,MAAM;;CAEf,CAAA"}

package/lib/cjs/webchat/components/styled-scrollbar.scss

@@ -1,12 +0,0 @@
-#botonic-scrollable-content
-  > div.simplebar-wrapper
-  > div.simplebar-mask
-  > div
-  > div {
-  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
-  -webkit-overflow-scrolling: touch;
-  ::-webkit-scrollbar {
-    // https://github.com/Grsmto/simplebar/issues/445#issuecomment-586902814
-    display: none;
-  }
-}

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

@@ -1 +0,0 @@
-export function TypingIndicator(props: any): JSX.Element;

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

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypingIndicator = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("./typing-indicator.scss");
-const react_1 = tslib_1.__importDefault(require("react"));
-const constants_1 = require("../../constants");
-const TypingIndicator = props => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: constants_1.ROLES.TYPING_INDICATOR, className: 'typing-indicator', style: { backgroundColor: constants_1.COLORS.SEASHELL_WHITE } }, { children: [(0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsx)("span", {})] })));
-exports.TypingIndicator = TypingIndicator;
-//# sourceMappingURL=typing-indicator.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"typing-indicator.js","sourceRoot":"","sources":["../../../../src/webchat/components/typing-indicator.jsx"],"names":[],"mappings":";;;;;AAAA,mCAAgC;AAEhC,0DAAyB;AAEzB,+CAA+C;AAExC,MAAM,eAAe,GAAG,KAAK,CAAC,EAAE,CAAC,CACtC,+CACE,IAAI,EAAE,iBAAK,CAAC,gBAAgB,EAC5B,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,EAAE,eAAe,EAAE,kBAAM,CAAC,cAAc,EAAE,iBAEjD,kCAAQ,EACR,kCAAQ,EACR,kCAAQ,KACJ,CACP,CAAA;AAVY,QAAA,eAAe,mBAU3B"}

package/lib/cjs/webchat/components/typing-indicator.scss

@@ -1,38 +0,0 @@
-.typing-indicator {
-  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;
-  span {
-    height: 6px;
-    width: 6px;
-    margin: 0 1px;
-    background-color: #9e9ea1;
-    display: inline-block;
-    border-radius: 50%;
-    opacity: 0.4;
-    @for $i from 1 through 3 {
-      &:nth-of-type(#{$i}) {
-        animation: 1s blink infinite ($i * 0.3333s);
-      }
-    }
-  }
-}
-
-@keyframes blink {
-  50% {
-    opacity: 1;
-  }
-}
-
-@keyframes bulge {
-  50% {
-    transform: scale(1.05);
-  }
-}

package/lib/cjs/webchat/devices/device-adapter.d.ts

@@ -1,12 +0,0 @@
-export class DeviceAdapter {
-    currentDevice: any;
-    init(host: any): void;
-    webchatResizer: WebchatResizer | undefined;
-    scrollbarController: ScrollbarController | undefined;
-    getCurrentDevice(): any;
-    onFocus(): void;
-    onBlur(): void;
-    fontSize(defaultFontSize?: number): number | "initial";
-}
-import { WebchatResizer } from "./webchat-resizer";
-import { ScrollbarController } from "./scrollbar-controller";

package/lib/cjs/webchat/devices/device-adapter.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DeviceAdapter = void 0;
-const dom_1 = require("../../util/dom");
-const _1 = require(".");
-const scrollbar_controller_1 = require("./scrollbar-controller");
-const webchat_resizer_1 = require("./webchat-resizer");
-class DeviceAdapter {
-    constructor() {
-        this.currentDevice = this.getCurrentDevice();
-    }
-    init(host) {
-        this.webchatResizer = new webchat_resizer_1.WebchatResizer(this.currentDevice, host);
-        this.scrollbarController = new scrollbar_controller_1.ScrollbarController(this.currentDevice, host);
-        this.scrollbarController.handleScrollEvents();
-    }
-    getCurrentDevice() {
-        // navigator.platform deprecated. Ref: (https://erikmartinjordan.com/navigator-platform-deprecated-alternative)
-        if (navigator.userAgentData)
-            return navigator.userAgentData.platform;
-        return navigator.platform;
-    }
-    onFocus() {
-        setTimeout(() => {
-            var _a;
-            // Place onFocus logic to be run the last on the queue of asynchronous events to give enough time to init method to be called. Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#zero_delays
-            (_a = this.webchatResizer) === null || _a === void 0 ? void 0 : _a.onFocus(() => this.scrollbarController.handleOnTouchMoveEvents());
-        }, 0);
-    }
-    onBlur() {
-        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-            return;
-        this.webchatResizer.onBlur();
-        this.scrollbarController.handleOnTouchMoveEvents();
-    }
-    fontSize(defaultFontSize = 14) {
-        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-            return defaultFontSize;
-        // Disabling auto-zoom on input (iPhone devices): https://stackoverflow.com/a/25614477, https://stackoverflow.com/a/6394497
-        return 'initial';
-    }
-}
-exports.DeviceAdapter = DeviceAdapter;
-//# sourceMappingURL=device-adapter.js.map

package/lib/cjs/webchat/devices/device-adapter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"device-adapter.js","sourceRoot":"","sources":["../../../../src/webchat/devices/device-adapter.js"],"names":[],"mappings":";;;AAAA,wCAA+C;AAC/C,wBAA2B;AAC3B,iEAA4D;AAC5D,uDAAkD;AAElD,MAAa,aAAa;IACxB;QACE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAA;IAC9C,CAAC;IAED,IAAI,CAAC,IAAI;QACP,IAAI,CAAC,cAAc,GAAG,IAAI,gCAAc,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;QAClE,IAAI,CAAC,mBAAmB,GAAG,IAAI,0CAAmB,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAA;QAC5E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,CAAA;IAC/C,CAAC;IAED,gBAAgB;QACd,+GAA+G;QAC/G,IAAI,SAAS,CAAC,aAAa;YAAE,OAAO,SAAS,CAAC,aAAa,CAAC,QAAQ,CAAA;QACpE,OAAO,SAAS,CAAC,QAAQ,CAAA;IAC3B,CAAC;IAED,OAAO;QACL,UAAU,CAAC,GAAG,EAAE;;YACd,iNAAiN;YACjN,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,GAAG,EAAE,CAChC,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,CACnD,CAAA;QACH,CAAC,EAAE,CAAC,CAAC,CAAA;IACP,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAA;QAC5B,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,CAAA;IACpD,CAAC;IAED,QAAQ,CAAC,eAAe,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,aAAa,KAAK,UAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAO,eAAe,CAAA;QACxE,2HAA2H;QAC3H,OAAO,SAAS,CAAA;IAClB,CAAC;CACF;AArCD,sCAqCC"}

package/lib/cjs/webchat/devices/scrollbar-controller.d.ts

@@ -1,12 +0,0 @@
-export class ScrollbarController {
-    constructor(currentDevice: any, host: any);
-    currentDevice: any;
-    webchat: any;
-    handleScrollEvents(): void;
-    hasScrollbar(): boolean;
-    handleOnMouseOverEvents(e: any): void;
-    toggleOnMouseWheelEvents(): void;
-    handleOnTouchMoveEvents(e: any): void;
-    toggleOnTouchMoveEvents(): void;
-    limitScrollBoundaries(): void;
-}

package/lib/cjs/webchat/devices/scrollbar-controller.js

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollbarController = void 0;
-const dom_1 = require("../../util/dom");
-const _1 = require(".");
-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;
-};
-class ScrollbarController {
-    constructor(currentDevice, host) {
-        this.currentDevice = currentDevice;
-        this.webchat = (0, dom_1.getWebchatElement)(host);
-    }
-    handleScrollEvents() {
-        /*
-          It handles scroll events for Mobile/Desktop.
-          "ontouchmove" is the phone equivalent for "onmouseover"
-        */
-        if ((0, _1.isMobileDevice)()) {
-            if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-                return;
-            this.limitScrollBoundaries();
-            this.webchat.ontouchstart = e => {
-                this.handleOnTouchMoveEvents(e);
-            };
-            this.webchat.ontouchmove = e => {
-                this.handleOnTouchMoveEvents(e);
-            };
-        }
-        else {
-            this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e);
-        }
-    }
-    hasScrollbar() {
-        const scrollableArea = (0, dom_1.getScrollableArea)(this.webchat);
-        const isScrollable = scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0;
-        return isScrollable;
-    }
-    handleOnMouseOverEvents(e) {
-        let target = e.currentTarget;
-        while (target) {
-            this.toggleOnMouseWheelEvents();
-            target = target.parentNode;
-        }
-    }
-    toggleOnMouseWheelEvents() {
-        const scrollableContent = (0, dom_1.getScrollableContent)(this.webchat);
-        if (this.hasScrollbar()) {
-            scrollableContent.onmousewheel = {};
-            return;
-        }
-        scrollableContent.onmousewheel = e => e.preventDefault();
-    }
-    handleOnTouchMoveEvents(e) {
-        this.toggleOnTouchMoveEvents();
-    }
-    toggleOnTouchMoveEvents() {
-        if (this.hasScrollbar()) {
-            this.webchat.ontouchmove = {};
-            this.webchat.ontouchstart = {};
-            return;
-        }
-        this.webchat.ontouchmove = e => {
-            if (e.target === e.currentTarget)
-                e.preventDefault();
-        };
-    }
-    limitScrollBoundaries() {
-        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-            return;
-        /*
-          It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,
-          as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
-        */
-        const frame = (0, dom_1.getScrollableArea)(this.webchat).visible;
-        const dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
-        if (frame) {
-            if (window.addEventListener) {
-                frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true);
-            }
-            else if (window.attachEvent) {
-                frame.attachEvent('scroll', () => dStopAtScrollLimit(frame));
-            }
-        }
-    }
-}
-exports.ScrollbarController = ScrollbarController;
-//# sourceMappingURL=scrollbar-controller.js.map

package/lib/cjs/webchat/devices/scrollbar-controller.js.map

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

package/lib/cjs/webchat/devices/webchat-resizer.d.ts

@@ -1,9 +0,0 @@
-export class WebchatResizer {
-    constructor(currentDevice: any, host: any);
-    currentDevice: any;
-    host: any;
-    webchat: any;
-    onFocus(onKeyboardShownFn: any): void;
-    onBlur(): void;
-    setWebchatElementHeight(newHeight: any): void;
-}

package/lib/cjs/webchat/devices/webchat-resizer.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebchatResizer = void 0;
-const dom_1 = require("../../util/dom");
-const _1 = require(".");
-class WebchatResizer {
-    constructor(currentDevice, host) {
-        this.currentDevice = currentDevice;
-        this.host = host;
-        this.webchat = (0, dom_1.getWebchatElement)(host);
-    }
-    onFocus(onKeyboardShownFn) {
-        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-            return;
-        /*
-          Based on Tip #4 from https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d,
-          taking window.innerHeight as the amount of pixels the virtual keyboard adds
-        */
-        const waitUntilKeyboardIsShown = 400;
-        const calculateNewWebchatElementHeight = () => {
-            const webchatHeight = this.webchat.clientHeight;
-            // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851
-            const keyboardOffset = (window.visualViewport && window.visualViewport.height) ||
-                window.innerHeight;
-            let newWebchatPercentualHeight = keyboardOffset / webchatHeight;
-            const toTwoDecimal = toRound => Math.round(toRound * 100) / 100;
-            newWebchatPercentualHeight =
-                toTwoDecimal(newWebchatPercentualHeight) * 100;
-            return newWebchatPercentualHeight;
-        };
-        setTimeout(() => {
-            this.setWebchatElementHeight(`${calculateNewWebchatElementHeight()}%`);
-            // scrollToBottom(this.host)
-            onKeyboardShownFn();
-        }, waitUntilKeyboardIsShown);
-    }
-    onBlur() {
-        if (this.currentDevice !== _1.DEVICES.MOBILE.IPHONE)
-            return;
-        this.setWebchatElementHeight('100%');
-    }
-    setWebchatElementHeight(newHeight) {
-        this.webchat.style.height = newHeight;
-    }
-}
-exports.WebchatResizer = WebchatResizer;
-//# sourceMappingURL=webchat-resizer.js.map