@botonic/react 0.20.1-alpha.1 → 0.20.3

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/devices/scrollbar-controller.js"],"names":["debounced","delay","fn","timerId","args","clearTimeout","setTimeout","stopAtScrollLimit","element","scrollTop","scrollHeight","clientHeight","ScrollbarController","currentDevice","host","webchat","DEVICES","MOBILE","IPHONE","limitScrollBoundaries","ontouchstart","e","handleOnTouchMoveEvents","ontouchmove","onmouseover","handleOnMouseOverEvents","scrollableArea","isScrollable","visible","full","target","currentTarget","toggleOnMouseWheelEvents","parentNode","scrollableContent","hasScrollbar","onmousewheel","preventDefault","toggleOnTouchMoveEvents","frame","dStopAtScrollLimit","window","addEventListener","attachEvent"],"mappings":"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","sourcesContent":["import {\n  getScrollableArea,\n  getScrollableContent,\n  getWebchatElement,\n} from '../../util/dom'\nimport { DEVICES, isMobileDevice } from '.'\n\nconst debounced = (delay, fn) => {\n  let timerId\n  return function (...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) element.scrollTop = 1\n  if (element.scrollHeight - element.scrollTop === element.clientHeight)\n    element.scrollTop -= 1\n}\n\nexport class ScrollbarController {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.webchat = getWebchatElement(host)\n  }\n\n  handleScrollEvents() {\n    /*\n      It handles scroll events for Mobile/Desktop.\n      \"ontouchmove\" is the phone equivalent for \"onmouseover\"\n    */\n    if (isMobileDevice()) {\n      if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n      this.limitScrollBoundaries()\n      this.webchat.ontouchstart = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n      this.webchat.ontouchmove = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n    } else {\n      this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e)\n    }\n  }\n\n  hasScrollbar() {\n    const scrollableArea = getScrollableArea(this.webchat)\n    const isScrollable =\n      scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0\n    return isScrollable\n  }\n\n  handleOnMouseOverEvents(e) {\n    let target = e.currentTarget\n    while (target) {\n      this.toggleOnMouseWheelEvents()\n      target = target.parentNode\n    }\n  }\n\n  toggleOnMouseWheelEvents() {\n    const scrollableContent = getScrollableContent(this.webchat)\n    if (this.hasScrollbar()) {\n      scrollableContent.onmousewheel = {}\n      return\n    }\n    scrollableContent.onmousewheel = e => e.preventDefault()\n  }\n\n  handleOnTouchMoveEvents(e) {\n    this.toggleOnTouchMoveEvents()\n  }\n\n  toggleOnTouchMoveEvents() {\n    if (this.hasScrollbar()) {\n      this.webchat.ontouchmove = {}\n      this.webchat.ontouchstart = {}\n      return\n    }\n    this.webchat.ontouchmove = e => e.preventDefault()\n  }\n\n  limitScrollBoundaries() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,\n      as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)\n    */\n    const frame = getScrollableArea(this.webchat).visible\n    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)\n    if (frame) {\n      if (window.addEventListener) {\n        frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true)\n      } else if (window.attachEvent) {\n        frame.attachEvent('scroll', () => dStopAtScrollLimit(frame))\n      }\n    }\n  }\n}\n"],"file":"scrollbar-controller.js"}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebchatResizer = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _dom = require("../../util/dom");
+
+var _ = require(".");
+
+var WebchatResizer = /*#__PURE__*/function () {
+  function WebchatResizer(currentDevice, host) {
+    (0, _classCallCheck2["default"])(this, WebchatResizer);
+    this.currentDevice = currentDevice;
+    this.host = host;
+    this.webchat = (0, _dom.getWebchatElement)(host);
+  }
+
+  (0, _createClass2["default"])(WebchatResizer, [{
+    key: "onFocus",
+    value: function onFocus(onKeyboardShownFn) {
+      var _this = this;
+
+      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
+      */
+
+      var waitUntilKeyboardIsShown = 400;
+
+      var calculateNewWebchatElementHeight = function calculateNewWebchatElementHeight() {
+        var webchatHeight = _this.webchat.clientHeight; // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851
+
+        var keyboardOffset = window.visualViewport && window.visualViewport.height || window.innerHeight;
+        var newWebchatPercentualHeight = keyboardOffset / webchatHeight;
+
+        var toTwoDecimal = function toTwoDecimal(toRound) {
+          return Math.round(toRound * 100) / 100;
+        };
+
+        newWebchatPercentualHeight = toTwoDecimal(newWebchatPercentualHeight) * 100;
+        return newWebchatPercentualHeight;
+      };
+
+      setTimeout(function () {
+        _this.setWebchatElementHeight("".concat(calculateNewWebchatElementHeight(), "%"));
+
+        (0, _dom.scrollToBottom)(_this.host);
+        onKeyboardShownFn();
+      }, waitUntilKeyboardIsShown);
+    }
+  }, {
+    key: "onBlur",
+    value: function onBlur() {
+      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
+      this.setWebchatElementHeight('100%');
+    }
+  }, {
+    key: "setWebchatElementHeight",
+    value: function setWebchatElementHeight(newHeight) {
+      this.webchat.style.height = newHeight;
+    }
+  }]);
+  return WebchatResizer;
+}();
+
+exports.WebchatResizer = WebchatResizer;
+//# sourceMappingURL=webchat-resizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/webchat/devices/webchat-resizer.js"],"names":["WebchatResizer","currentDevice","host","webchat","onKeyboardShownFn","DEVICES","MOBILE","IPHONE","waitUntilKeyboardIsShown","calculateNewWebchatElementHeight","webchatHeight","clientHeight","keyboardOffset","window","visualViewport","height","innerHeight","newWebchatPercentualHeight","toTwoDecimal","toRound","Math","round","setTimeout","setWebchatElementHeight","newHeight","style"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;IAEaA,c;AACX,0BAAYC,aAAZ,EAA2BC,IAA3B,EAAiC;AAAA;AAC/B,SAAKD,aAAL,GAAqBA,aAArB;AACA,SAAKC,IAAL,GAAYA,IAAZ;AACA,SAAKC,OAAL,GAAe,4BAAkBD,IAAlB,CAAf;AACD;;;;WAED,iBAAQE,iBAAR,EAA2B;AAAA;;AACzB,UAAI,KAAKH,aAAL,KAAuBI,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAClD;AACJ;AACA;AACA;;AACI,UAAMC,wBAAwB,GAAG,GAAjC;;AACA,UAAMC,gCAAgC,GAAG,SAAnCA,gCAAmC,GAAM;AAC7C,YAAMC,aAAa,GAAG,KAAI,CAACP,OAAL,CAAaQ,YAAnC,CAD6C,CAE7C;;AACA,YAAMC,cAAc,GACjBC,MAAM,CAACC,cAAP,IAAyBD,MAAM,CAACC,cAAP,CAAsBC,MAAhD,IACAF,MAAM,CAACG,WAFT;AAGA,YAAIC,0BAA0B,GAAGL,cAAc,GAAGF,aAAlD;;AACA,YAAMQ,YAAY,GAAG,SAAfA,YAAe,CAAAC,OAAO;AAAA,iBAAIC,IAAI,CAACC,KAAL,CAAWF,OAAO,GAAG,GAArB,IAA4B,GAAhC;AAAA,SAA5B;;AACAF,QAAAA,0BAA0B,GACxBC,YAAY,CAACD,0BAAD,CAAZ,GAA2C,GAD7C;AAEA,eAAOA,0BAAP;AACD,OAXD;;AAYAK,MAAAA,UAAU,CAAC,YAAM;AACf,QAAA,KAAI,CAACC,uBAAL,WAAgCd,gCAAgC,EAAhE;;AACA,iCAAe,KAAI,CAACP,IAApB;AACAE,QAAAA,iBAAiB;AAClB,OAJS,EAIPI,wBAJO,CAAV;AAKD;;;WAED,kBAAS;AACP,UAAI,KAAKP,aAAL,KAAuBI,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAClD,WAAKgB,uBAAL,CAA6B,MAA7B;AACD;;;WAED,iCAAwBC,SAAxB,EAAmC;AACjC,WAAKrB,OAAL,CAAasB,KAAb,CAAmBV,MAAnB,GAA4BS,SAA5B;AACD","sourcesContent":["import { getWebchatElement, scrollToBottom } from '../../util/dom'\nimport { DEVICES } from '.'\n\nexport class WebchatResizer {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.host = host\n    this.webchat = getWebchatElement(host)\n  }\n\n  onFocus(onKeyboardShownFn) {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      Based on Tip #4 from https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d,\n      taking window.innerHeight as the amount of pixels the virtual keyboard adds\n    */\n    const waitUntilKeyboardIsShown = 400\n    const calculateNewWebchatElementHeight = () => {\n      const webchatHeight = this.webchat.clientHeight\n      // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851\n      const keyboardOffset =\n        (window.visualViewport && window.visualViewport.height) ||\n        window.innerHeight\n      let newWebchatPercentualHeight = keyboardOffset / webchatHeight\n      const toTwoDecimal = toRound => Math.round(toRound * 100) / 100\n      newWebchatPercentualHeight =\n        toTwoDecimal(newWebchatPercentualHeight) * 100\n      return newWebchatPercentualHeight\n    }\n    setTimeout(() => {\n      this.setWebchatElementHeight(`${calculateNewWebchatElementHeight()}%`)\n      scrollToBottom(this.host)\n      onKeyboardShownFn()\n    }, waitUntilKeyboardIsShown)\n  }\n\n  onBlur() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    this.setWebchatElementHeight('100%')\n  }\n\n  setWebchatElementHeight(newHeight) {\n    this.webchat.style.height = newHeight\n  }\n}\n"],"file":"webchat-resizer.js"}

package/lib/webchat/header.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebchatHeader = exports.StyledWebchatHeader = exports.DefaultHeader = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _framerMotion = require("framer-motion");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _contexts = require("../contexts");
+
+var _environment = require("../util/environment");
+
+var _react2 = require("../util/react");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Header = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  height: 55px;\n  border-radius: ", ";\n  z-index: 2;\n"])), _constants.COLORS.BLEACHED_CEDAR_PURPLE, function (props) {
+  return props.color;
+}, _constants.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS);
+
+var ImageContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px;\n  align-items: center;\n"])));
+
+var Image = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 32px;\n  border-radius: 50%;\n"])));
+
+var TextContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1 1 auto;\n"])));
+
+var Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: bold;\n  color: ", ";\n"])), _constants.COLORS.SOLID_WHITE);
+
+var Subtitle = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: inherit;\n  font-size: 11px;\n  color: ", ";\n"])), _constants.COLORS.SOLID_WHITE);
+
+var CloseHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0px 16px;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: 36px;\n"])), _constants.COLORS.SOLID_WHITE);
+
+var DefaultHeader = function DefaultHeader(props) {
+  var getThemeProperty = props.getThemeProperty;
+  var animationsEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+  var headerImage = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandImage, _constants.WEBCHAT.DEFAULTS.LOGO));
+  var headerTitle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerTitle, _constants.WEBCHAT.DEFAULTS.TITLE);
+  var headerSubtitle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle, '');
+  return /*#__PURE__*/_react["default"].createElement(Header, {
+    role: _constants.ROLES.HEADER,
+    color: props.color,
+    style: _objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerStyle))
+  }, headerImage && /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(Image, {
+    src: (0, _environment.resolveImage)(headerImage)
+  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
+    ml: headerImage ? '0px' : '16px'
+  }, /*#__PURE__*/_react["default"].createElement(Title, {
+    mb: headerSubtitle ? '6px' : '0px'
+  }, headerTitle), /*#__PURE__*/_react["default"].createElement(Subtitle, null, headerSubtitle)), /*#__PURE__*/_react["default"].createElement(_react2.ConditionalWrapper, {
+    condition: animationsEnabled,
+    wrapper: function wrapper(children) {
+      return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
+        whileHover: {
+          scale: 1.2
+        }
+      }, children);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(CloseHeader, {
+    onClick: props.onCloseClick
+  }, "\u2A2F")));
+};
+
+exports.DefaultHeader = DefaultHeader;
+
+var WebchatHeader = function WebchatHeader(props) {
+  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
+      webchatState = _useContext.webchatState,
+      getThemeProperty = _useContext.getThemeProperty;
+
+  var handleCloseWebchat = function handleCloseWebchat(event) {
+    props.onCloseClick(event.target.value);
+  };
+
+  var CustomHeader = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customHeader);
+
+  if (CustomHeader) {
+    return /*#__PURE__*/_react["default"].createElement(CustomHeader, {
+      onCloseClick: handleCloseWebchat
+    });
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(DefaultHeader, {
+    webchatState: webchatState,
+    getThemeProperty: getThemeProperty,
+    color: getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandColor, _constants.COLORS.BOTONIC_BLUE),
+    onCloseClick: handleCloseWebchat
+  });
+};
+
+exports.WebchatHeader = WebchatHeader;
+var StyledWebchatHeader = (0, _styledComponents["default"])(WebchatHeader)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 8px 8px 0px 0px;\n  box-shadow: ", " 0px 2px 5px;\n  height: 36px;\n  flex: none;\n"])), _constants.COLORS.PIGEON_POST_BLUE_ALPHA_0_5);
+exports.StyledWebchatHeader = StyledWebchatHeader;
+//# sourceMappingURL=header.js.map

package/lib/webchat/header.js.map

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

package/lib/webchat/hooks.js

@@ -0,0 +1,359 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentVisible = useComponentVisible;
+exports.useComponentWillMount = void 0;
+exports.usePrevious = usePrevious;
+exports.useTyping = useTyping;
+exports.useWebchat = useWebchat;
+exports.webchatInitialState = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var _dom = require("../util/dom");
+
+var _actions = require("./actions");
+
+var _webchatReducer = require("./webchat-reducer");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var webchatInitialState = {
+  width: _constants.WEBCHAT.DEFAULTS.WIDTH,
+  height: _constants.WEBCHAT.DEFAULTS.HEIGHT,
+  messagesJSON: [],
+  messagesComponents: [],
+  replies: [],
+  latestInput: {},
+  typing: false,
+  webview: null,
+  webviewParams: null,
+  session: {
+    user: null
+  },
+  lastRoutePath: null,
+  handoff: false,
+  theme: {
+    headerTitle: _constants.WEBCHAT.DEFAULTS.TITLE,
+    brandColor: _constants.COLORS.BOTONIC_BLUE,
+    brandImage: _constants.WEBCHAT.DEFAULTS.LOGO,
+    triggerButtonImage: undefined,
+    textPlaceholder: _constants.WEBCHAT.DEFAULTS.PLACEHOLDER,
+    style: {
+      fontFamily: _constants.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
+};
+exports.webchatInitialState = webchatInitialState;
+
+function useWebchat() {
+  var _useReducer = (0, _react.useReducer)(_webchatReducer.webchatReducer, webchatInitialState),
+      _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
+      webchatState = _useReducer2[0],
+      webchatDispatch = _useReducer2[1];
+
+  var addMessage = function addMessage(message) {
+    return webchatDispatch({
+      type: _actions.ADD_MESSAGE,
+      payload: message
+    });
+  };
+
+  var addMessageComponent = function addMessageComponent(message) {
+    return webchatDispatch({
+      type: _actions.ADD_MESSAGE_COMPONENT,
+      payload: message
+    });
+  };
+
+  var updateMessage = function updateMessage(message) {
+    return webchatDispatch({
+      type: _actions.UPDATE_MESSAGE,
+      payload: message
+    });
+  };
+
+  var updateReplies = function updateReplies(replies) {
+    return webchatDispatch({
+      type: _actions.UPDATE_REPLIES,
+      payload: replies
+    });
+  };
+
+  var updateLatestInput = function updateLatestInput(input) {
+    return webchatDispatch({
+      type: _actions.UPDATE_LATEST_INPUT,
+      payload: input
+    });
+  };
+
+  var updateTyping = function updateTyping(typing) {
+    return webchatDispatch({
+      type: _actions.UPDATE_TYPING,
+      payload: typing
+    });
+  };
+
+  var updateWebview = function updateWebview(webview, params) {
+    return webchatDispatch({
+      type: _actions.UPDATE_WEBVIEW,
+      payload: {
+        webview: webview,
+        webviewParams: params
+      }
+    });
+  };
+
+  var updateSession = function updateSession(session) {
+    webchatDispatch({
+      type: _actions.UPDATE_SESSION,
+      payload: session
+    });
+  };
+
+  var updateLastRoutePath = function updateLastRoutePath(path) {
+    return webchatDispatch({
+      type: _actions.UPDATE_LAST_ROUTE_PATH,
+      payload: path
+    });
+  };
+
+  var updateHandoff = function updateHandoff(handoff) {
+    return webchatDispatch({
+      type: _actions.UPDATE_HANDOFF,
+      payload: handoff
+    });
+  };
+
+  var updateTheme = function updateTheme(theme) {
+    var themeUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+    var payload = themeUpdates !== undefined ? {
+      theme: theme,
+      themeUpdates: themeUpdates
+    } : {
+      theme: theme
+    };
+    webchatDispatch({
+      type: _actions.UPDATE_THEME,
+      payload: payload
+    });
+  };
+
+  var updateDevSettings = function updateDevSettings(settings) {
+    return webchatDispatch({
+      type: _actions.UPDATE_DEV_SETTINGS,
+      payload: settings
+    });
+  };
+
+  var toggleWebchat = function toggleWebchat(toggle) {
+    return webchatDispatch({
+      type: _actions.TOGGLE_WEBCHAT,
+      payload: toggle
+    });
+  };
+
+  var toggleEmojiPicker = function toggleEmojiPicker(toggle) {
+    return webchatDispatch({
+      type: _actions.TOGGLE_EMOJI_PICKER,
+      payload: toggle
+    });
+  };
+
+  var togglePersistentMenu = function togglePersistentMenu(toggle) {
+    return webchatDispatch({
+      type: _actions.TOGGLE_PERSISTENT_MENU,
+      payload: toggle
+    });
+  };
+
+  var toggleCoverComponent = function toggleCoverComponent(toggle) {
+    return webchatDispatch({
+      type: _actions.TOGGLE_COVER_COMPONENT,
+      payload: toggle
+    });
+  };
+
+  var doRenderCustomComponent = function doRenderCustomComponent(toggle) {
+    return webchatDispatch({
+      type: _actions.DO_RENDER_CUSTOM_COMPONENT,
+      payload: toggle
+    });
+  };
+
+  var setError = function setError(error) {
+    return webchatDispatch({
+      type: _actions.SET_ERROR,
+      payload: error
+    });
+  };
+
+  var setOnline = function setOnline(online) {
+    return webchatDispatch({
+      type: _actions.SET_ONLINE,
+      payload: online
+    });
+  };
+
+  var clearMessages = function clearMessages() {
+    webchatDispatch({
+      type: _actions.CLEAR_MESSAGES
+    });
+  };
+
+  var updateLastMessageDate = function updateLastMessageDate(date) {
+    webchatDispatch({
+      type: _actions.UPDATE_LAST_MESSAGE_DATE,
+      payload: date
+    });
+  };
+
+  var setCurrentAttachment = function setCurrentAttachment(attachment) {
+    webchatDispatch({
+      type: _actions.SET_CURRENT_ATTACHMENT,
+      payload: attachment
+    });
+  };
+
+  var updateJwt = function updateJwt(jwt) {
+    webchatDispatch({
+      type: _actions.UPDATE_JWT,
+      payload: jwt
+    });
+  };
+
+  return {
+    webchatState: webchatState,
+    webchatDispatch: webchatDispatch,
+    addMessage: addMessage,
+    addMessageComponent: addMessageComponent,
+    updateMessage: updateMessage,
+    updateReplies: updateReplies,
+    updateLatestInput: updateLatestInput,
+    updateTyping: updateTyping,
+    updateWebview: updateWebview,
+    updateSession: updateSession,
+    updateLastRoutePath: updateLastRoutePath,
+    updateHandoff: updateHandoff,
+    updateTheme: updateTheme,
+    updateDevSettings: updateDevSettings,
+    toggleWebchat: toggleWebchat,
+    toggleEmojiPicker: toggleEmojiPicker,
+    togglePersistentMenu: togglePersistentMenu,
+    toggleCoverComponent: toggleCoverComponent,
+    doRenderCustomComponent: doRenderCustomComponent,
+    setError: setError,
+    setOnline: setOnline,
+    clearMessages: clearMessages,
+    updateLastMessageDate: updateLastMessageDate,
+    setCurrentAttachment: setCurrentAttachment,
+    updateJwt: updateJwt
+  };
+}
+
+function useTyping(_ref) {
+  var webchatState = _ref.webchatState,
+      updateTyping = _ref.updateTyping,
+      updateMessage = _ref.updateMessage,
+      host = _ref.host;
+  (0, _react.useEffect)(function () {
+    var delayTimeout, typingTimeout;
+    (0, _dom.scrollToBottom)({
+      host: host
+    });
+
+    try {
+      var nextMsg = webchatState.messagesJSON.filter(function (m) {
+        return !m.display;
+      })[0];
+
+      if (nextMsg.delay && nextMsg.typing) {
+        delayTimeout = setTimeout(function () {
+          return updateTyping(true);
+        }, nextMsg.delay * 1000);
+      } else if (nextMsg.typing) updateTyping(true);
+
+      var totalDelay = nextMsg.delay + nextMsg.typing;
+      if (totalDelay) typingTimeout = setTimeout(function () {
+        updateMessage(_objectSpread(_objectSpread({}, nextMsg), {}, {
+          display: true
+        }));
+        updateTyping(false);
+      }, totalDelay * 1000);
+    } catch (e) {}
+
+    return function () {
+      clearTimeout(delayTimeout);
+      clearTimeout(typingTimeout);
+    };
+  }, [webchatState.messagesJSON, webchatState.typing]);
+}
+
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+function useComponentVisible(initialIsVisible, onClickOutside) {
+  var _useState = (0, _react.useState)(initialIsVisible),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isComponentVisible = _useState2[0],
+      setIsComponentVisible = _useState2[1];
+
+  var ref = (0, _react.useRef)(null);
+
+  var handleClickOutside = function handleClickOutside(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsComponentVisible(false);
+      onClickOutside();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('click', handleClickOutside, false);
+    return function () {
+      document.removeEventListener('click', handleClickOutside, false);
+    };
+  });
+  return {
+    ref: ref,
+    isComponentVisible: isComponentVisible,
+    setIsComponentVisible: setIsComponentVisible
+  };
+}
+
+var useComponentWillMount = function useComponentWillMount(func) {
+  (0, _react.useMemo)(func, []);
+};
+
+exports.useComponentWillMount = useComponentWillMount;
+//# sourceMappingURL=hooks.js.map

package/lib/webchat/hooks.js.map

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