@botonic/react 0.22.0-alpha.0 → 0.22.0-alpha.1

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

@@ -0,0 +1,12 @@
+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/esm/webchat/devices/scrollbar-controller.js

@@ -0,0 +1,99 @@
+import { getScrollableArea, getScrollableContent, getWebchatElement, } from '../../util/dom';
+import { DEVICES, isMobileDevice } from '.';
+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 class ScrollbarController {
+    constructor(currentDevice, host) {
+        this.currentDevice = currentDevice;
+        this.webchat = getWebchatElement(host);
+    }
+    handleScrollEvents() {
+        /*
+          It handles scroll events for Mobile/Desktop.
+          "ontouchmove" is the phone equivalent for "onmouseover"
+        */
+        if (isMobileDevice()) {
+            if (this.currentDevice !== 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 = 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 = 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 !== 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 = 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));
+            }
+        }
+    }
+}
+//# sourceMappingURL=scrollbar-controller.js.map

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

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

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

@@ -0,0 +1,9 @@
+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/esm/webchat/devices/webchat-resizer.js

@@ -0,0 +1,43 @@
+import { getWebchatElement, scrollToBottom } from '../../util/dom';
+import { DEVICES } from '.';
+export class WebchatResizer {
+    constructor(currentDevice, host) {
+        this.currentDevice = currentDevice;
+        this.host = host;
+        this.webchat = getWebchatElement(host);
+    }
+    onFocus(onKeyboardShownFn) {
+        if (this.currentDevice !== 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 !== DEVICES.MOBILE.IPHONE)
+            return;
+        this.setWebchatElementHeight('100%');
+    }
+    setWebchatElementHeight(newHeight) {
+        this.webchat.style.height = newHeight;
+    }
+}
+//# sourceMappingURL=webchat-resizer.js.map

package/lib/esm/webchat/devices/webchat-resizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat-resizer.js","sourceRoot":"src/","sources":["webchat/devices/webchat-resizer.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,GAAG,CAAA;AAE3B,MAAM,OAAO,cAAc;IACzB,YAAY,aAAa,EAAE,IAAI;QAC7B,IAAI,CAAC,aAAa,GAAG,aAAa,CAAA;QAClC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAA;IACxC,CAAC;IAED,OAAO,CAAC,iBAAiB;QACvB,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD;;;UAGE;QACF,MAAM,wBAAwB,GAAG,GAAG,CAAA;QACpC,MAAM,gCAAgC,GAAG,GAAG,EAAE;YAC5C,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;YAC/C,4GAA4G;YAC5G,MAAM,cAAc,GAClB,CAAC,MAAM,CAAC,cAAc,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC;gBACvD,MAAM,CAAC,WAAW,CAAA;YACpB,IAAI,0BAA0B,GAAG,cAAc,GAAG,aAAa,CAAA;YAC/D,MAAM,YAAY,GAAG,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;YAC/D,0BAA0B;gBACxB,YAAY,CAAC,0BAA0B,CAAC,GAAG,GAAG,CAAA;YAChD,OAAO,0BAA0B,CAAA;QACnC,CAAC,CAAA;QACD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,uBAAuB,CAAC,GAAG,gCAAgC,EAAE,GAAG,CAAC,CAAA;YACtE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACzB,iBAAiB,EAAE,CAAA;QACrB,CAAC,EAAE,wBAAwB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,aAAa,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM;YAAE,OAAM;QACxD,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAA;IACtC,CAAC;IAED,uBAAuB,CAAC,SAAS;QAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;IACvC,CAAC;CACF"}

package/lib/esm/webchat/header.d.ts

@@ -0,0 +1,3 @@
+export function DefaultHeader(props: any): JSX.Element;
+export function WebchatHeader(props: any): JSX.Element;
+export const StyledWebchatHeader: any;

package/lib/esm/webchat/header.js

@@ -0,0 +1,89 @@
+import { motion } from 'framer-motion';
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { COLORS, ROLES, WEBCHAT } from '../constants';
+import { WebchatContext } from '../contexts';
+import { resolveImage } from '../util/environment';
+import { ConditionalWrapper } from '../util/react';
+const Header = styled.div `
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  height: 55px;
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+`;
+const ImageContainer = styled.div `
+  padding: 10px;
+  align-items: center;
+`;
+const Image = styled.img `
+  width: 32px;
+  border-radius: 50%;
+`;
+const TextContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`;
+const Title = styled.div `
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`;
+const Subtitle = styled.div `
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`;
+const CloseHeader = styled.div `
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`;
+export const DefaultHeader = props => {
+    const { getThemeProperty } = props;
+    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+    const headerImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandImage, WEBCHAT.DEFAULTS.LOGO));
+    const headerTitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerTitle, WEBCHAT.DEFAULTS.TITLE);
+    const headerSubtitle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle, '');
+    return (<Header role={ROLES.HEADER} color={props.color} style={Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle))}>
+      {headerImage && (<ImageContainer>
+          <Image src={resolveImage(headerImage)}/>
+        </ImageContainer>)}
+      <TextContainer ml={headerImage ? '0px' : '16px'}>
+        <Title mb={headerSubtitle ? '6px' : '0px'}>{headerTitle}</Title>
+        <Subtitle>{headerSubtitle}</Subtitle>
+      </TextContainer>
+      <ConditionalWrapper condition={animationsEnabled} wrapper={children => (<motion.div whileHover={{ scale: 1.2 }}>{children}</motion.div>)}>
+        <CloseHeader onClick={props.onCloseClick}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </Header>);
+};
+export const WebchatHeader = props => {
+    const { webchatState, getThemeProperty } = useContext(WebchatContext);
+    const handleCloseWebchat = event => {
+        props.onCloseClick(event.target.value);
+    };
+    const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader);
+    if (CustomHeader) {
+        return <CustomHeader onCloseClick={handleCloseWebchat}/>;
+    }
+    return (<DefaultHeader webchatState={webchatState} getThemeProperty={getThemeProperty} color={getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.brandColor, COLORS.BOTONIC_BLUE)} onCloseClick={handleCloseWebchat}/>);
+};
+export const StyledWebchatHeader = styled(WebchatHeader) `
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 36px;
+  flex: none;
+`;
+//# sourceMappingURL=header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"src/","sources":["webchat/header.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;MAInB,MAAM,CAAC,qBAAqB;MAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK;;;mBAGP,OAAO,CAAC,QAAQ,CAAC,yBAAyB;;CAE5D,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvB,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK/B,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;WAKb,MAAM,CAAC,WAAW;CAC5B,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIhB,MAAM,CAAC,WAAW;CAC5B,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGnB,MAAM,CAAC,WAAW;;;CAG5B,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE;IACnC,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IAClC,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IACD,MAAM,WAAW,GAAG,gBAAgB,CAClC,OAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,gBAAgB,CACd,OAAO,CAAC,iBAAiB,CAAC,UAAU,EACpC,OAAO,CAAC,QAAQ,CAAC,IAAI,CACtB,CACF,CAAA;IAED,MAAM,WAAW,GAAG,gBAAgB,CAClC,OAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CACvB,CAAA;IACD,MAAM,cAAc,GAAG,gBAAgB,CACrC,OAAO,CAAC,iBAAiB,CAAC,cAAc,EACxC,EAAE,CACH,CAAA;IAED,OAAO,CACL,CAAC,MAAM,CACL,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CACnB,KAAK,CAAC,mBAAM,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAG,CAEtE;MAAA,CAAC,WAAW,IAAI,CACd,CAAC,cAAc,CACb;UAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,EACxC;QAAA,EAAE,cAAc,CAAC,CAClB,CACD;MAAA,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAC9C;QAAA,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,CAC/D;QAAA,CAAC,QAAQ,CAAC,CAAC,cAAc,CAAC,EAAE,QAAQ,CACtC;MAAA,EAAE,aAAa,CACf;MAAA,CAAC,kBAAkB,CACjB,SAAS,CAAC,CAAC,iBAAiB,CAAC,CAC7B,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CACnB,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAChE,CAAC,CAEF;QAAA,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,WAAW,CAC1D;MAAA,EAAE,kBAAkB,CACtB;IAAA,EAAE,MAAM,CAAC,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE;IACnC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAErE,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE;QACjC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC,CAAA;IACD,MAAM,YAAY,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAA;IAC7E,IAAI,YAAY,EAAE;QAChB,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,kBAAkB,CAAC,EAAG,CAAA;KAC1D;IACD,OAAO,CACL,CAAC,aAAa,CACZ,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,KAAK,CAAC,CAAC,gBAAgB,CACrB,OAAO,CAAC,iBAAiB,CAAC,UAAU,EACpC,MAAM,CAAC,YAAY,CACpB,CAAC,CACF,YAAY,CAAC,CAAC,kBAAkB,CAAC,EACjC,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;gBAExC,MAAM,CAAC,0BAA0B;;;CAGhD,CAAA"}

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

@@ -0,0 +1,80 @@
+export function useWebchat(): {
+    webchatState: any;
+    webchatDispatch: import("react").DispatchWithoutAction;
+    addMessage: (message: any) => void;
+    addMessageComponent: (message: any) => void;
+    updateMessage: (message: any) => void;
+    updateReplies: (replies: any) => void;
+    updateLatestInput: (input: any) => void;
+    updateTyping: (typing: any) => void;
+    updateWebview: (webview: any, params: any) => void;
+    updateSession: (session: any) => void;
+    updateLastRoutePath: (path: any) => void;
+    updateHandoff: (handoff: any) => void;
+    updateTheme: (theme: any, themeUpdates?: undefined) => void;
+    updateDevSettings: (settings: any) => void;
+    toggleWebchat: (toggle: any) => void;
+    toggleEmojiPicker: (toggle: any) => void;
+    togglePersistentMenu: (toggle: any) => void;
+    toggleCoverComponent: (toggle: any) => void;
+    doRenderCustomComponent: (toggle: any) => void;
+    setError: (error: any) => void;
+    setOnline: (online: any) => void;
+    clearMessages: () => void;
+    updateLastMessageDate: (date: any) => void;
+    setCurrentAttachment: (attachment: any) => void;
+    updateJwt: (jwt: any) => void;
+};
+export function useTyping({ webchatState, updateTyping, updateMessage, host }: {
+    webchatState: any;
+    updateTyping: any;
+    updateMessage: any;
+    host: any;
+}): void;
+export function usePrevious(value: any): undefined;
+export function useComponentVisible(initialIsVisible: any, onClickOutside: any): {
+    ref: import("react").MutableRefObject<null>;
+    isComponentVisible: any;
+    setIsComponentVisible: import("react").Dispatch<any>;
+};
+export namespace webchatInitialState {
+    const width: number;
+    const height: number;
+    const messagesJSON: never[];
+    const messagesComponents: never[];
+    const replies: never[];
+    const latestInput: {};
+    const typing: boolean;
+    const webview: null;
+    const webviewParams: null;
+    namespace session {
+        const user: null;
+    }
+    const lastRoutePath: null;
+    const handoff: boolean;
+    namespace theme {
+        const headerTitle: string;
+        const brandColor: string;
+        const brandImage: any;
+        const triggerButtonImage: undefined;
+        const textPlaceholder: string;
+        namespace style {
+            const fontFamily: string;
+        }
+    }
+    const themeUpdates: {};
+    const error: {};
+    const online: boolean;
+    namespace devSettings {
+        const keepSessionOnReload: boolean;
+    }
+    const isWebchatOpen: boolean;
+    const isEmojiPickerOpen: boolean;
+    const isPersistentMenuOpen: boolean;
+    const isCoverComponentOpen: boolean;
+    const isCustomComponentRendered: boolean;
+    const lastMessageUpdate: undefined;
+    const currentAttachment: undefined;
+    const jwt: null;
+}
+export function useComponentWillMount(func: any): void;

package/lib/esm/webchat/hooks.js

@@ -0,0 +1,210 @@
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { COLORS, WEBCHAT } from '../constants';
+import { scrollToBottom } from '../util/dom';
+import { ADD_MESSAGE, ADD_MESSAGE_COMPONENT, CLEAR_MESSAGES, DO_RENDER_CUSTOM_COMPONENT, SET_CURRENT_ATTACHMENT, SET_ERROR, SET_ONLINE, TOGGLE_COVER_COMPONENT, TOGGLE_EMOJI_PICKER, TOGGLE_PERSISTENT_MENU, TOGGLE_WEBCHAT, UPDATE_DEV_SETTINGS, UPDATE_HANDOFF, UPDATE_JWT, UPDATE_LAST_MESSAGE_DATE, UPDATE_LAST_ROUTE_PATH, UPDATE_LATEST_INPUT, UPDATE_MESSAGE, UPDATE_REPLIES, UPDATE_SESSION, UPDATE_THEME, UPDATE_TYPING, UPDATE_WEBVIEW, } from './actions';
+import { webchatReducer } from './webchat-reducer';
+export const webchatInitialState = {
+    width: WEBCHAT.DEFAULTS.WIDTH,
+    height: WEBCHAT.DEFAULTS.HEIGHT,
+    messagesJSON: [],
+    messagesComponents: [],
+    replies: [],
+    latestInput: {},
+    typing: false,
+    webview: null,
+    webviewParams: null,
+    session: { user: null },
+    lastRoutePath: null,
+    handoff: false,
+    theme: {
+        headerTitle: WEBCHAT.DEFAULTS.TITLE,
+        brandColor: COLORS.BOTONIC_BLUE,
+        brandImage: WEBCHAT.DEFAULTS.LOGO,
+        triggerButtonImage: undefined,
+        textPlaceholder: WEBCHAT.DEFAULTS.PLACEHOLDER,
+        style: {
+            fontFamily: WEBCHAT.DEFAULTS.FONT_FAMILY,
+        },
+    },
+    themeUpdates: {},
+    error: {},
+    online: true,
+    devSettings: { keepSessionOnReload: false },
+    isWebchatOpen: false,
+    isEmojiPickerOpen: false,
+    isPersistentMenuOpen: false,
+    isCoverComponentOpen: false,
+    isCustomComponentRendered: false,
+    lastMessageUpdate: undefined,
+    currentAttachment: undefined,
+    jwt: null,
+};
+export function useWebchat() {
+    const [webchatState, webchatDispatch] = useReducer(webchatReducer, webchatInitialState);
+    const addMessage = message => webchatDispatch({ type: ADD_MESSAGE, payload: message });
+    const addMessageComponent = message => webchatDispatch({ type: ADD_MESSAGE_COMPONENT, payload: message });
+    const updateMessage = message => webchatDispatch({ type: UPDATE_MESSAGE, payload: message });
+    const updateReplies = replies => webchatDispatch({ type: UPDATE_REPLIES, payload: replies });
+    const updateLatestInput = input => webchatDispatch({ type: UPDATE_LATEST_INPUT, payload: input });
+    const updateTyping = typing => webchatDispatch({ type: UPDATE_TYPING, payload: typing });
+    const updateWebview = (webview, params) => webchatDispatch({
+        type: UPDATE_WEBVIEW,
+        payload: { webview, webviewParams: params },
+    });
+    const updateSession = session => {
+        webchatDispatch({
+            type: UPDATE_SESSION,
+            payload: session,
+        });
+    };
+    const updateLastRoutePath = path => webchatDispatch({
+        type: UPDATE_LAST_ROUTE_PATH,
+        payload: path,
+    });
+    const updateHandoff = handoff => webchatDispatch({
+        type: UPDATE_HANDOFF,
+        payload: handoff,
+    });
+    const updateTheme = (theme, themeUpdates = undefined) => {
+        const payload = themeUpdates !== undefined ? { theme, themeUpdates } : { theme };
+        webchatDispatch({
+            type: UPDATE_THEME,
+            payload,
+        });
+    };
+    const updateDevSettings = settings => webchatDispatch({
+        type: UPDATE_DEV_SETTINGS,
+        payload: settings,
+    });
+    const toggleWebchat = toggle => webchatDispatch({
+        type: TOGGLE_WEBCHAT,
+        payload: toggle,
+    });
+    const toggleEmojiPicker = toggle => webchatDispatch({
+        type: TOGGLE_EMOJI_PICKER,
+        payload: toggle,
+    });
+    const togglePersistentMenu = toggle => webchatDispatch({
+        type: TOGGLE_PERSISTENT_MENU,
+        payload: toggle,
+    });
+    const toggleCoverComponent = toggle => webchatDispatch({
+        type: TOGGLE_COVER_COMPONENT,
+        payload: toggle,
+    });
+    const doRenderCustomComponent = toggle => webchatDispatch({
+        type: DO_RENDER_CUSTOM_COMPONENT,
+        payload: toggle,
+    });
+    const setError = error => webchatDispatch({
+        type: SET_ERROR,
+        payload: error,
+    });
+    const setOnline = online => webchatDispatch({
+        type: SET_ONLINE,
+        payload: online,
+    });
+    const clearMessages = () => {
+        webchatDispatch({
+            type: CLEAR_MESSAGES,
+        });
+    };
+    const updateLastMessageDate = date => {
+        webchatDispatch({
+            type: UPDATE_LAST_MESSAGE_DATE,
+            payload: date,
+        });
+    };
+    const setCurrentAttachment = attachment => {
+        webchatDispatch({
+            type: SET_CURRENT_ATTACHMENT,
+            payload: attachment,
+        });
+    };
+    const updateJwt = jwt => {
+        webchatDispatch({
+            type: UPDATE_JWT,
+            payload: jwt,
+        });
+    };
+    return {
+        webchatState,
+        webchatDispatch,
+        addMessage,
+        addMessageComponent,
+        updateMessage,
+        updateReplies,
+        updateLatestInput,
+        updateTyping,
+        updateWebview,
+        updateSession,
+        updateLastRoutePath,
+        updateHandoff,
+        updateTheme,
+        updateDevSettings,
+        toggleWebchat,
+        toggleEmojiPicker,
+        togglePersistentMenu,
+        toggleCoverComponent,
+        doRenderCustomComponent,
+        setError,
+        setOnline,
+        clearMessages,
+        updateLastMessageDate,
+        setCurrentAttachment,
+        updateJwt,
+    };
+}
+export function useTyping({ webchatState, updateTyping, updateMessage, host }) {
+    useEffect(() => {
+        let delayTimeout, typingTimeout;
+        scrollToBottom({ host });
+        try {
+            const nextMsg = webchatState.messagesJSON.filter(m => !m.display)[0];
+            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(Object.assign(Object.assign({}, nextMsg), { display: true }));
+                    updateTyping(false);
+                }, totalDelay * 1000);
+        }
+        catch (e) { }
+        return () => {
+            clearTimeout(delayTimeout);
+            clearTimeout(typingTimeout);
+        };
+    }, [webchatState.messagesJSON, webchatState.typing]);
+}
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+}
+export function useComponentVisible(initialIsVisible, onClickOutside) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+    const handleClickOutside = event => {
+        if (ref.current && !ref.current.contains(event.path[0])) {
+            setIsComponentVisible(false);
+            onClickOutside();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside, false);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, false);
+        };
+    });
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+export const useComponentWillMount = func => {
+    useMemo(func, []);
+};
+//# sourceMappingURL=hooks.js.map

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * @returns {WebChatApp}
+ */
+export function getBotonicApp(): WebChatApp;
+export { Webchat } from "./webchat";
+export { WebchatDev } from "./webchat-dev";

package/lib/esm/webchat/index.js

@@ -0,0 +1,11 @@
+export { Webchat } from './webchat';
+export { WebchatDev } from './webchat-dev';
+/**
+ * @returns {WebChatApp}
+ */
+export function getBotonicApp() {
+    // Botonic is exported from your bot
+    // eslint-disable-next-line no-undef
+    return Botonic;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["webchat/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C;;GAEG;AACH,MAAM,UAAU,aAAa;IAC3B,oCAAoC;IACpC,oCAAoC;IACpC,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/esm/webchat/message-list.d.ts

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

package/lib/esm/webchat/message-list.js

@@ -0,0 +1,41 @@
+import React, { useContext } from 'react';
+import Fade from 'react-reveal/Fade';
+import styled from 'styled-components';
+import { ROLES, WEBCHAT } from '../constants';
+import { WebchatContext } from '../contexts';
+import { resolveImage } from '../util/environment';
+import { ConditionalWrapper } from '../util/react';
+import { StyledScrollbar } from './components/styled-scrollbar';
+const StyledMessages = styled.div `
+  display: flex;
+  overflow-x: hidden;
+  flex-direction: column;
+  flex: none;
+  white-space: pre;
+  word-wrap: break-word;
+`;
+const DefaultIntroImage = styled.img `
+  max-height: 50%;
+  width: 100%;
+`;
+export const WebchatMessageList = props => {
+    const { webchatState, getThemeProperty } = useContext(WebchatContext);
+    const animationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+    const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro);
+    const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage);
+    const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle);
+    const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+    const DefaultIntro = introImage && (<DefaultIntroImage style={Object.assign({}, introStyle)} src={resolveImage(introImage)}/>);
+    return (<StyledScrollbar role={ROLES.MESSAGE_LIST} 
+    // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
+    id='botonic-scrollable-content' scrollbar={scrollbarOptions} autoHide={scrollbarOptions.autoHide} ismessagescontainer='true' style={Object.assign({}, props.style)}>
+      {(CustomIntro || DefaultIntro) && (<ConditionalWrapper condition={animationsEnabled} wrapper={children => <Fade>{children}</Fade>}>
+          {CustomIntro ? <CustomIntro /> : DefaultIntro}
+        </ConditionalWrapper>)}
+      {webchatState.messagesComponents.map((e, i) => (<StyledMessages role={ROLES.MESSAGE} key={i}>
+          {e}
+        </StyledMessages>))}
+      {props.children}
+    </StyledScrollbar>);
+};
+//# sourceMappingURL=message-list.js.map

package/lib/esm/webchat/message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-list.js","sourceRoot":"src/","sources":["webchat/message-list.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAE/D,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGnC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,EAAE;IACxC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACrE,MAAM,iBAAiB,GAAG,gBAAgB,CACxC,OAAO,CAAC,iBAAiB,CAAC,gBAAgB,EAC1C,IAAI,CACL,CAAA;IACD,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC3E,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IACzE,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAA;IAEzE,MAAM,gBAAgB,iBACjB,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChC,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,CACzD,CAAA;IAED,MAAM,YAAY,GAAG,UAAU,IAAI,CACjC,CAAC,iBAAiB,CAChB,KAAK,CAAC,mBACD,UAAU,EACb,CACF,GAAG,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,EAC9B,CACH,CAAA;IAED,OAAO,CACL,CAAC,eAAe,CACd,IAAI,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;IACzB,gGAAgG;IAChG,EAAE,CAAC,4BAA4B,CAC/B,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,QAAQ,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CACpC,mBAAmB,CAAC,MAAM,CAC1B,KAAK,CAAC,mBACD,KAAK,CAAC,KAAK,EACd,CAEF;MAAA,CAAC,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAChC,CAAC,kBAAkB,CACjB,SAAS,CAAC,CAAC,iBAAiB,CAAC,CAC7B,OAAO,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAE7C;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,YAAY,CAC/C;QAAA,EAAE,kBAAkB,CAAC,CACtB,CACD;MAAA,CAAC,YAAY,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7C,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1C;UAAA,CAAC,CAAC,CACJ;QAAA,EAAE,cAAc,CAAC,CAClB,CAAC,CACF;MAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC,CAAA"}