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

package/lib/webchat/webchat.js

@@ -1,1108 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getParsedAction = exports.Webchat = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@botonic/core");
-
-var _framerMotion = require("framer-motion");
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _useAsyncEffect = require("use-async-effect");
-
-var _uuid = require("uuid");
-
-var _components = require("../components");
-
-var _handoff = require("../components/handoff");
-
-var _webchatSettings = require("../components/webchat-settings");
-
-var _constants = require("../constants");
-
-var _contexts = require("../contexts");
-
-var _messageUtils = require("../message-utils");
-
-var _msgToBotonic = require("../msg-to-botonic");
-
-var _dom = require("../util/dom");
-
-var _environment = require("../util/environment");
-
-var _regexs = require("../util/regexs");
-
-var _webchat = require("../util/webchat");
-
-var _attachment = require("./components/attachment");
-
-var _emojiPicker = require("./components/emoji-picker");
-
-var _persistentMenu = require("./components/persistent-menu");
-
-var _sendButton = require("./components/send-button");
-
-var _typingIndicator = require("./components/typing-indicator");
-
-var _deviceAdapter = require("./devices/device-adapter");
-
-var _header = require("./header");
-
-var _hooks = require("./hooks");
-
-var _messageList = require("./message-list");
-
-var _replies = require("./replies");
-
-var _useStorageStateHook = require("./use-storage-state-hook");
-
-var _webview = require("./webview");
-
-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; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-var getParsedAction = function getParsedAction(botonicAction) {
-  var splittedAction = botonicAction.split('create_case:');
-  if (splittedAction.length <= 1) return undefined;
-  return JSON.parse(splittedAction[1]);
-};
-
-exports.getParsedAction = getParsedAction;
-
-var StyledWebchat = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  right: 20px;\n  bottom: 20px;\n  width: ", "px;\n  height: ", "px;\n  margin: auto;\n  background-color: ", ";\n  border-radius: 10px;\n  box-shadow: ", " 0px 0px 12px;\n  display: flex;\n  flex-direction: column;\n"])), function (props) {
-  return props.width;
-}, function (props) {
-  return props.height;
-}, _constants.COLORS.SOLID_WHITE, _constants.COLORS.SOLID_BLACK_ALPHA_0_2);
-
-var StyledTriggerButton = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  position: fixed;\n  background: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  width: 65px;\n  height: 65px;\n  bottom: 20px;\n  right: 10px;\n  padding: 8px;\n"])), _constants.COLORS.SOLID_WHITE);
-
-var UserInputContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 52px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 16px;\n  padding: 0px 16px;\n  z-index: 1;\n  border-top: 1px solid ", ";\n"])), _constants.COLORS.SOLID_BLACK_ALPHA_0_5);
-
-var TextAreaContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n"])));
-
-var TriggerImage = _styledComponents["default"].img(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-
-var ErrorMessageContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  width: 100%;\n"])));
-
-var ErrorMessage = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 10px;\n  font-size: 14px;\n  line-height: 20px;\n  padding: 4px 11px;\n  display: flex;\n  background-color: ", ";\n  color: ", ";\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  font-family: ", ";\n"])), _constants.COLORS.ERROR_RED, _constants.COLORS.CONCRETE_WHITE, _constants.WEBCHAT.DEFAULTS.FONT_FAMILY);
-
-var DarkBackgroundMenu = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  opacity: 0.3;\n  z-index: 1;\n  right: 0;\n  bottom: 0;\n  border-radius: 10px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n"])), _constants.COLORS.SOLID_BLACK); // eslint-disable-next-line complexity
-
-
-var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _ref = props.webchatHooks || (0, _hooks.useWebchat)(),
-      webchatState = _ref.webchatState,
-      addMessage = _ref.addMessage,
-      addMessageComponent = _ref.addMessageComponent,
-      updateMessage = _ref.updateMessage,
-      updateReplies = _ref.updateReplies,
-      updateLatestInput = _ref.updateLatestInput,
-      updateTyping = _ref.updateTyping,
-      updateWebview = _ref.updateWebview,
-      updateSession = _ref.updateSession,
-      updateLastRoutePath = _ref.updateLastRoutePath,
-      updateHandoff = _ref.updateHandoff,
-      updateTheme = _ref.updateTheme,
-      updateDevSettings = _ref.updateDevSettings,
-      _toggleWebchat = _ref.toggleWebchat,
-      toggleEmojiPicker = _ref.toggleEmojiPicker,
-      togglePersistentMenu = _ref.togglePersistentMenu,
-      _toggleCoverComponent = _ref.toggleCoverComponent,
-      doRenderCustomComponent = _ref.doRenderCustomComponent,
-      setError = _ref.setError,
-      setOnline = _ref.setOnline,
-      _clearMessages = _ref.clearMessages,
-      openWebviewT = _ref.openWebviewT,
-      closeWebviewT = _ref.closeWebviewT,
-      updateLastMessageDate = _ref.updateLastMessageDate,
-      setCurrentAttachment = _ref.setCurrentAttachment;
-
-  var firstUpdate = (0, _react.useRef)(true);
-
-  var isOnline = function isOnline() {
-    return webchatState.online;
-  };
-
-  var currentDateString = function currentDateString() {
-    return new Date().toISOString();
-  };
-
-  var theme = (0, _lodash["default"])(webchatState.theme, props.theme);
-  var initialSession = props.initialSession,
-      initialDevSettings = props.initialDevSettings,
-      onStateChange = props.onStateChange;
-  var getThemeProperty = (0, _webchat._getThemeProperty)(theme);
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      customComponent = _useState2[0],
-      setCustomComponent = _useState2[1];
-
-  var storage = props.storage;
-  var storageKey = typeof props.storageKey === 'function' ? props.storageKey() : props.storageKey;
-
-  var _useStorageState = (0, _useStorageStateHook.useStorageState)(storage, storageKey),
-      _useStorageState2 = (0, _slicedToArray2["default"])(_useStorageState, 2),
-      botonicState = _useStorageState2[0],
-      saveState = _useStorageState2[1];
-
-  var host = props.host || document.body;
-  var deviceAdapter = new _deviceAdapter.DeviceAdapter();
-
-  var saveWebchatState = function saveWebchatState(webchatState) {
-    storage && saveState(JSON.parse((0, _regexs.stringifyWithRegexs)({
-      messages: webchatState.messagesJSON,
-      session: webchatState.session,
-      lastRoutePath: webchatState.lastRoutePath,
-      devSettings: webchatState.devSettings,
-      lastMessageUpdate: webchatState.lastMessageUpdate,
-      themeUpdates: webchatState.themeUpdates
-    })));
-  };
-
-  var handleAttachment = function handleAttachment(event) {
-    if (!(0, _messageUtils.isAllowedSize)(event.target.files[0].size)) {
-      throw new Error("The file is too large. A maximum of ".concat(_constants.MAX_ALLOWED_SIZE_MB, "MB is allowed."));
-    }
-
-    setCurrentAttachment({
-      fileName: event.target.files[0].name,
-      file: event.target.files[0],
-      // TODO: Attach more files?
-      attachmentType: (0, _messageUtils.getMediaType)(event.target.files[0].type)
-    });
-  };
-
-  (0, _react.useEffect)(function () {
-    if (webchatState.currentAttachment) sendAttachment(webchatState.currentAttachment);
-  }, [webchatState.currentAttachment]);
-
-  var sendUserInput = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(input) {
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              props.onUserInput && props.onUserInput({
-                user: webchatState.session.user,
-                input: input,
-                session: webchatState.session,
-                lastRoutePath: webchatState.lastRoutePath
-              });
-
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function sendUserInput(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
-  var sendChatEvent = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(chatEvent) {
-      var chatEventInput;
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              chatEventInput = {
-                id: (0, _uuid.v4)(),
-                type: _core.INPUT.CHAT_EVENT,
-                data: chatEvent
-              };
-              props.onUserInput && props.onUserInput({
-                user: webchatState.session.user,
-                input: chatEventInput,
-                session: webchatState.session,
-                lastRoutePath: webchatState.lastRoutePath
-              });
-
-            case 2:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function sendChatEvent(_x2) {
-      return _ref3.apply(this, arguments);
-    };
-  }(); // Load styles stored in window._botonicInsertStyles by Webpack
-
-
-  (0, _hooks.useComponentWillMount)(function () {
-    if (window._botonicInsertStyles && window._botonicInsertStyles.length) {
-      var _iterator = _createForOfIteratorHelper(window._botonicInsertStyles),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var botonicStyle = _step.value;
-          // Injecting styles at head is needed even if we use shadowDOM
-          // as some dependencies like simplebar rely on creating ephemeral elements
-          // on document.body and assume styles will be available globally
-          document.head.appendChild(botonicStyle); // injecting styles in host node too so that shadowDOM works
-
-          if (props.shadowDOM) host.appendChild(botonicStyle.cloneNode(true));
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-
-      delete window._botonicInsertStyles;
-    }
-
-    if (props.shadowDOM) {
-      // emoji-picker-react injects styles in head, so we need to
-      // re-inject them in our host node to make it work with shadowDOM
-      var _iterator2 = _createForOfIteratorHelper(document.querySelectorAll('style')),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var style = _step2.value;
-          if (style.textContent && style.textContent.includes('emoji-picker-react')) host.appendChild(style.cloneNode(true));
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
-      }
-    }
-  }); // Load initial state from storage
-
-  (0, _react.useEffect)(function () {
-    var _ref4 = botonicState || {},
-        messages = _ref4.messages,
-        session = _ref4.session,
-        lastRoutePath = _ref4.lastRoutePath,
-        devSettings = _ref4.devSettings,
-        lastMessageUpdate = _ref4.lastMessageUpdate,
-        themeUpdates = _ref4.themeUpdates;
-
-    session = (0, _webchat.initSession)(session);
-    updateSession(session);
-
-    if ((0, _webchat.shouldKeepSessionOnReload)({
-      initialDevSettings: initialDevSettings,
-      devSettings: devSettings
-    })) {
-      if (messages) {
-        messages.forEach(function (m) {
-          addMessage(m);
-          var newComponent = (0, _msgToBotonic.msgToBotonic)(_objectSpread(_objectSpread({}, m), {}, {
-            delay: 0,
-            typing: 0
-          }), props.theme.message && props.theme.message.customTypes || props.theme.customMessageTypes);
-          if (newComponent) addMessageComponent(newComponent);
-        });
-      }
-
-      if (initialSession) updateSession((0, _lodash["default"])(initialSession, session));
-      if (lastRoutePath) updateLastRoutePath(lastRoutePath);
-    } else updateSession((0, _lodash["default"])(initialSession, session));
-
-    if (devSettings) updateDevSettings(devSettings);else if (initialDevSettings) updateDevSettings(initialDevSettings);
-    if (lastMessageUpdate) updateLastMessageDate(lastMessageUpdate);
-    if (themeUpdates !== undefined) updateTheme((0, _lodash["default"])(props.theme, themeUpdates), themeUpdates);
-    if (props.onInit) setTimeout(function () {
-      return props.onInit();
-    }, 100);
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!webchatState.isWebchatOpen) return;
-    deviceAdapter.init(host);
-    (0, _dom.scrollToBottom)({
-      behavior: 'auto',
-      host: host
-    });
-  }, [webchatState.isWebchatOpen]);
-  (0, _react.useEffect)(function () {
-    if (onStateChange && typeof onStateChange === 'function') onStateChange(webchatState);
-    saveWebchatState(webchatState);
-  }, [webchatState.messagesJSON, webchatState.session, webchatState.lastRoutePath, webchatState.devSettings, webchatState.lastMessageUpdate]);
-  (0, _useAsyncEffect.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    return _regenerator["default"].wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!webchatState.online) {
-              setError({
-                message: (0, _webchat.getServerErrorMessage)(props.server)
-              });
-            } else {
-              if (!firstUpdate.current) {
-                setError(undefined);
-              }
-            }
-
-          case 1:
-          case "end":
-            return _context3.stop();
-        }
-      }
-    }, _callee3);
-  })), [webchatState.online]);
-  (0, _hooks.useTyping)({
-    webchatState: webchatState,
-    updateTyping: updateTyping,
-    updateMessage: updateMessage,
-    host: host
-  });
-  (0, _react.useEffect)(function () {
-    updateTheme((0, _lodash["default"])(props.theme, theme, webchatState.themeUpdates));
-  }, [props.theme, webchatState.themeUpdates]);
-
-  var openWebview = function openWebview(webviewComponent, params) {
-    return updateWebview(webviewComponent, params);
-  };
-
-  var handleSelectedEmoji = function handleSelectedEmoji(event, emojiObject) {
-    textArea.current.value += emojiObject.emoji;
-    textArea.current.focus();
-  };
-
-  var closeWebview = function closeWebview(options) {
-    updateWebview();
-
-    if (userInputEnabled) {
-      textArea.current.focus();
-    }
-
-    if (options && options.payload) {
-      sendPayload(options.payload);
-    } else if (options && options.path) {
-      var params = '';
-      if (options.params) params = (0, _core.params2queryString)(options.params);
-      sendPayload("__PATH_PAYLOAD__".concat(options.path, "?").concat(params));
-    }
-  };
-
-  var handleMenu = function handleMenu() {
-    togglePersistentMenu(!webchatState.isPersistentMenuOpen);
-  };
-
-  var handleEmojiClick = function handleEmojiClick() {
-    toggleEmojiPicker(!webchatState.isEmojiPickerOpen);
-  };
-
-  var persistentMenuOptions = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.persistentMenu, props.persistentMenu);
-  var darkBackgroundMenu = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.darkBackgroundMenu, false);
-
-  var getBlockInputs = function getBlockInputs(rule, inputData) {
-    var processedInput = rule.preprocess ? rule.preprocess(inputData) : inputData;
-    return rule.match.some(function (regex) {
-      if (typeof regex === 'string') regex = (0, _regexs.deserializeRegex)(regex);
-      return regex.test(processedInput);
-    });
-  };
-
-  var checkBlockInput = function checkBlockInput(input) {
-    // if is a text we check if it is a serialized RE
-    var blockInputs = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.blockInputs, props.blockInputs);
-    if (!Array.isArray(blockInputs)) return false;
-
-    var _iterator3 = _createForOfIteratorHelper(blockInputs),
-        _step3;
-
-    try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var rule = _step3.value;
-
-        if (getBlockInputs(rule, input.data)) {
-          addMessageComponent( /*#__PURE__*/_react["default"].createElement(_components.Text, {
-            id: input.id,
-            from: _constants.SENDERS.user,
-            blob: false,
-            style: {
-              backgroundColor: _constants.COLORS.SCORPION_GRAY,
-              borderColor: _constants.COLORS.SCORPION_GRAY,
-              padding: '8px 12px'
-            }
-          }, rule.message));
-          updateReplies(false);
-          return true;
-        }
-      }
-    } catch (err) {
-      _iterator3.e(err);
-    } finally {
-      _iterator3.f();
-    }
-
-    return false;
-  };
-
-  var closeMenu = function closeMenu() {
-    togglePersistentMenu(false);
-  };
-
-  var persistentMenu = function persistentMenu() {
-    return /*#__PURE__*/_react["default"].createElement(_persistentMenu.OpenedPersistentMenu, {
-      onClick: closeMenu,
-      options: persistentMenuOptions,
-      borderRadius: webchatState.theme.style.borderRadius || '10px'
-    });
-  };
-
-  var getCoverComponent = function getCoverComponent() {
-    return getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.coverComponent, props.coverComponent && (props.coverComponent.component || props.coverComponent));
-  };
-
-  var CoverComponent = getCoverComponent();
-
-  var closeCoverComponent = function closeCoverComponent() {
-    _toggleCoverComponent(false);
-  };
-
-  (0, _react.useEffect)(function () {
-    if (!CoverComponent) return;
-    if (!botonicState || botonicState.messages && botonicState.messages.length == 0) _toggleCoverComponent(true);
-  }, []);
-
-  var coverComponent = function coverComponent() {
-    var coverComponentProps = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.coverComponentProps, props.coverComponent && props.coverComponent.props);
-    if (CoverComponent && webchatState.isCoverComponentOpen) return /*#__PURE__*/_react["default"].createElement(CoverComponent, (0, _extends2["default"])({
-      closeComponent: closeCoverComponent
-    }, coverComponentProps));
-    return null;
-  };
-
-  var messageComponentFromInput = function messageComponentFromInput(input) {
-    var messageComponent = null;
-
-    if ((0, _messageUtils.isText)(input)) {
-      messageComponent = /*#__PURE__*/_react["default"].createElement(_components.Text, {
-        id: input.id,
-        payload: input.payload,
-        from: _constants.SENDERS.user
-      }, input.data);
-    } else if ((0, _messageUtils.isMedia)(input)) {
-      var temporaryDisplayUrl = URL.createObjectURL(input.data);
-      var mediaProps = {
-        id: input.id,
-        from: _constants.SENDERS.user,
-        src: temporaryDisplayUrl
-      };
-      if ((0, _messageUtils.isImage)(input)) messageComponent = /*#__PURE__*/_react["default"].createElement(_components.Image, mediaProps);else if ((0, _messageUtils.isAudio)(input)) messageComponent = /*#__PURE__*/_react["default"].createElement(_components.Audio, mediaProps);else if ((0, _messageUtils.isVideo)(input)) messageComponent = /*#__PURE__*/_react["default"].createElement(_components.Video, mediaProps);else if ((0, _messageUtils.isDocument)(input)) messageComponent = /*#__PURE__*/_react["default"].createElement(_components.Document, mediaProps);
-    }
-
-    return messageComponent;
-  };
-
-  var sendInput = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(input) {
-      var messageComponent;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              if (!(!input || Object.keys(input).length == 0)) {
-                _context4.next = 2;
-                break;
-              }
-
-              return _context4.abrupt("return");
-
-            case 2:
-              if (!((0, _messageUtils.isText)(input) && (!input.data || !input.data.trim()))) {
-                _context4.next = 4;
-                break;
-              }
-
-              return _context4.abrupt("return");
-
-            case 4:
-              if (!((0, _messageUtils.isText)(input) && checkBlockInput(input))) {
-                _context4.next = 6;
-                break;
-              }
-
-              return _context4.abrupt("return");
-
-            case 6:
-              if (!input.id) input.id = (0, _uuid.v4)();
-              messageComponent = messageComponentFromInput(input);
-              if (messageComponent) addMessageComponent(messageComponent);
-
-              if (!(0, _messageUtils.isMedia)(input)) {
-                _context4.next = 13;
-                break;
-              }
-
-              _context4.next = 12;
-              return (0, _messageUtils.readDataURL)(input.data);
-
-            case 12:
-              input.data = _context4.sent;
-
-            case 13:
-              sendUserInput(input);
-              updateLatestInput(input);
-              isOnline() && updateLastMessageDate(currentDateString());
-              updateReplies(false);
-              togglePersistentMenu(false);
-              toggleEmojiPicker(false);
-
-            case 19:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    return function sendInput(_x3) {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-  /* This is the public API this component exposes to its parents
-  https://stackoverflow.com/questions/37949981/call-child-method-from-parent
-  */
-
-
-  var updateSessionWithUser = function updateSessionWithUser(userToUpdate) {
-    return updateSession((0, _lodash["default"])(webchatState.session, {
-      user: userToUpdate
-    }));
-  };
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      addBotResponse: function addBotResponse(_ref7) {
-        var response = _ref7.response,
-            session = _ref7.session,
-            lastRoutePath = _ref7.lastRoutePath;
-        updateTyping(false);
-        if (Array.isArray(response)) response.map(function (r) {
-          return addMessageComponent(r);
-        });else if (response) addMessageComponent(response);
-
-        if (session) {
-          updateSession((0, _lodash["default"])(session, {
-            user: webchatState.session.user
-          }));
-          var action = session._botonic_action || '';
-          var handoff = action.startsWith('create_case');
-          if (handoff && _environment.isDev) addMessageComponent( /*#__PURE__*/_react["default"].createElement(_handoff.Handoff, null));
-          updateHandoff(handoff);
-        }
-
-        if (lastRoutePath) updateLastRoutePath(lastRoutePath);
-        updateLastMessageDate(currentDateString());
-      },
-      setTyping: function setTyping(typing) {
-        return updateTyping(typing);
-      },
-      addUserMessage: function addUserMessage(message) {
-        return sendInput(message);
-      },
-      updateUser: updateSessionWithUser,
-      openWebchat: function openWebchat() {
-        return _toggleWebchat(true);
-      },
-      closeWebchat: function closeWebchat() {
-        return _toggleWebchat(false);
-      },
-      toggleWebchat: function toggleWebchat() {
-        return _toggleWebchat(!webchatState.isWebchatOpen);
-      },
-      openCoverComponent: function openCoverComponent() {
-        return _toggleCoverComponent(true);
-      },
-      closeCoverComponent: function closeCoverComponent() {
-        return _toggleCoverComponent(false);
-      },
-      renderCustomComponent: function renderCustomComponent(_customComponent) {
-        setCustomComponent(_customComponent);
-        doRenderCustomComponent(true);
-      },
-      unmountCustomComponent: function unmountCustomComponent() {
-        return doRenderCustomComponent(false);
-      },
-      toggleCoverComponent: function toggleCoverComponent() {
-        return _toggleCoverComponent(!webchatState.isCoverComponentOpen);
-      },
-      openWebviewApi: function openWebviewApi(component) {
-        return openWebviewT(component);
-      },
-      setError: setError,
-      setOnline: setOnline,
-      getMessages: function getMessages() {
-        return webchatState.messagesJSON;
-      },
-      isOnline: isOnline,
-      clearMessages: function clearMessages() {
-        _clearMessages();
-
-        updateReplies(false);
-      },
-      getLastMessageUpdate: function getLastMessageUpdate() {
-        return webchatState.lastMessageUpdate;
-      },
-      updateMessageInfo: function updateMessageInfo(msgId, messageInfo) {
-        var messageToUpdate = webchatState.messagesJSON.filter(function (m) {
-          return m.id == msgId;
-        })[0];
-        var updatedMsg = (0, _lodash["default"])(messageToUpdate, messageInfo);
-        if (updatedMsg.ack === 1) delete updatedMsg.unsentInput;
-        updateMessage(updatedMsg);
-      },
-      updateWebchatSettings: function updateWebchatSettings(settings) {
-        var themeUpdates = (0, _webchatSettings.normalizeWebchatSettings)(settings);
-        updateTheme((0, _lodash["default"])(webchatState.theme, themeUpdates), themeUpdates);
-      }
-    };
-  });
-
-  var resolveCase = function resolveCase() {
-    updateHandoff(false);
-    updateSession(_objectSpread(_objectSpread({}, webchatState.session), {}, {
-      _botonic_action: null
-    }));
-  };
-
-  var prevSession = (0, _hooks.usePrevious)(webchatState.session);
-  (0, _react.useEffect)(function () {
-    // Resume conversation after handoff
-    if (prevSession && prevSession._botonic_action && !webchatState.session._botonic_action) {
-      var action = getParsedAction(prevSession._botonic_action);
-      if (action && action.on_finish) sendPayload(action.on_finish);
-    }
-  }, [webchatState.session._botonic_action]);
-
-  var sendText = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(text, payload) {
-      var input;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              if (text) {
-                _context5.next = 2;
-                break;
-              }
-
-              return _context5.abrupt("return");
-
-            case 2:
-              input = {
-                type: _core.INPUT.TEXT,
-                data: text,
-                payload: payload
-              };
-              _context5.next = 5;
-              return sendInput(input);
-
-            case 5:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    }));
-
-    return function sendText(_x4, _x5) {
-      return _ref8.apply(this, arguments);
-    };
-  }();
-
-  var sendPayload = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(payload) {
-      var input;
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
-        while (1) {
-          switch (_context6.prev = _context6.next) {
-            case 0:
-              if (payload) {
-                _context6.next = 2;
-                break;
-              }
-
-              return _context6.abrupt("return");
-
-            case 2:
-              input = {
-                type: _core.INPUT.POSTBACK,
-                payload: payload
-              };
-              _context6.next = 5;
-              return sendInput(input);
-
-            case 5:
-            case "end":
-              return _context6.stop();
-          }
-        }
-      }, _callee6);
-    }));
-
-    return function sendPayload(_x6) {
-      return _ref9.apply(this, arguments);
-    };
-  }();
-
-  var sendAttachment = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(attachment) {
-      var attachmentType, input;
-      return _regenerator["default"].wrap(function _callee7$(_context7) {
-        while (1) {
-          switch (_context7.prev = _context7.next) {
-            case 0:
-              if (!attachment.file) {
-                _context7.next = 8;
-                break;
-              }
-
-              attachmentType = (0, _messageUtils.getMediaType)(attachment.file.type);
-
-              if (attachmentType) {
-                _context7.next = 4;
-                break;
-              }
-
-              return _context7.abrupt("return");
-
-            case 4:
-              input = {
-                type: attachmentType,
-                data: attachment.file
-              };
-              _context7.next = 7;
-              return sendInput(input);
-
-            case 7:
-              setCurrentAttachment(undefined);
-
-            case 8:
-            case "end":
-              return _context7.stop();
-          }
-        }
-      }, _callee7);
-    }));
-
-    return function sendAttachment(_x7) {
-      return _ref10.apply(this, arguments);
-    };
-  }();
-
-  var sendTextAreaText = function sendTextAreaText() {
-    sendText(textArea.current.value);
-    textArea.current.value = '';
-  };
-
-  var isTyping = false;
-  var typingTimeout = null;
-
-  function clearTimeoutWithReset(reset) {
-    var waitTime = 20 * 1000;
-    if (typingTimeout) clearTimeout(typingTimeout);
-    if (reset) typingTimeout = setTimeout(stopTyping, waitTime);
-  }
-
-  function startTyping() {
-    isTyping = true;
-    sendChatEvent('typing_on');
-  }
-
-  function stopTyping() {
-    clearTimeoutWithReset(false);
-    isTyping = false;
-    sendChatEvent('typing_off');
-  }
-
-  var _onKeyDown = function onKeyDown(event) {
-    if (event.keyCode === 13 && event.shiftKey === false) {
-      event.preventDefault();
-      sendTextAreaText();
-      stopTyping();
-    }
-  };
-
-  var onKeyUp = function onKeyUp() {
-    if (textArea.current.value === '') {
-      stopTyping();
-      return;
-    }
-
-    if (!isTyping) {
-      startTyping();
-    }
-
-    clearTimeoutWithReset(true);
-  };
-
-  var webviewRequestContext = {
-    getString: function getString(stringId) {
-      return props.getString(stringId, webchatState.session);
-    },
-    setLocale: function setLocale(locale) {
-      return props.getString(locale, webchatState.session);
-    },
-    session: webchatState.session || {},
-    params: webchatState.webviewParams || {},
-    closeWebview: closeWebview,
-    defaultDelay: props.defaultDelay || 0,
-    defaultTyping: props.defaultTyping || 0
-  };
-  (0, _react.useEffect)(function () {
-    if (firstUpdate.current) {
-      firstUpdate.current = false;
-      return;
-    }
-
-    if (webchatState.isWebchatOpen && props.onOpen) props.onOpen();
-
-    if (!webchatState.isWebchatOpen && props.onClose && !firstUpdate.current) {
-      props.onClose();
-      toggleEmojiPicker(false);
-      togglePersistentMenu(false);
-    }
-  }, [webchatState.isWebchatOpen]);
-  var textArea = (0, _react.useRef)();
-
-  var getTriggerImage = function getTriggerImage() {
-    var triggerImage = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage, null);
-
-    if (triggerImage === null) {
-      webchatState.theme.triggerButtonImage = _constants.WEBCHAT.DEFAULTS.LOGO;
-      return null;
-    }
-
-    return triggerImage;
-  };
-
-  var triggerButtonStyle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle);
-  var CustomTriggerButton = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customTrigger, undefined);
-
-  var triggerButton = function triggerButton() {
-    if (CustomTriggerButton) {
-      return /*#__PURE__*/_react["default"].createElement(CustomTriggerButton, null);
-    }
-
-    return /*#__PURE__*/_react["default"].createElement(StyledTriggerButton, {
-      role: _constants.ROLES.TRIGGER_BUTTON,
-      style: _objectSpread({}, triggerButtonStyle)
-    }, getTriggerImage() && /*#__PURE__*/_react["default"].createElement(TriggerImage, {
-      src: (0, _environment.resolveImage)(getTriggerImage())
-    }));
-  };
-
-  var webchatMessageList = function webchatMessageList() {
-    return /*#__PURE__*/_react["default"].createElement(_messageList.WebchatMessageList, {
-      style: {
-        flex: 1
-      }
-    }, webchatState.typing && /*#__PURE__*/_react["default"].createElement(_typingIndicator.TypingIndicator, null));
-  };
-
-  var webchatReplies = function webchatReplies() {
-    return /*#__PURE__*/_react["default"].createElement(_replies.WebchatReplies, {
-      replies: webchatState.replies
-    });
-  };
-
-  var isUserInputEnabled = function isUserInputEnabled() {
-    var isUserInputEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableUserInput, props.enableUserInput !== undefined ? props.enableUserInput : true);
-    return isUserInputEnabled && !webchatState.isCoverComponentOpen;
-  };
-
-  var userInputEnabled = isUserInputEnabled();
-
-  var userInputArea = function userInputArea() {
-    return userInputEnabled && /*#__PURE__*/_react["default"].createElement(UserInputContainer, {
-      style: _objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.userInputStyle)),
-      className: "user-input-container"
-    }, webchatState.isEmojiPickerOpen && /*#__PURE__*/_react["default"].createElement(_emojiPicker.OpenedEmojiPicker, {
-      height: webchatState.theme.style.height,
-      onEmojiClick: handleSelectedEmoji,
-      onClick: handleEmojiClick
-    }), /*#__PURE__*/_react["default"].createElement(_persistentMenu.PersistentMenu, {
-      onClick: handleMenu,
-      persistentMenu: props.persistentMenu
-    }), /*#__PURE__*/_react["default"].createElement(TextAreaContainer, null, /*#__PURE__*/_react["default"].createElement(_reactTextareaAutosize["default"], {
-      name: "text",
-      onFocus: function onFocus() {
-        return deviceAdapter.onFocus(host);
-      },
-      onBlur: function onBlur() {
-        return deviceAdapter.onBlur();
-      },
-      maxRows: 4,
-      wrap: "soft",
-      maxLength: "1000",
-      placeholder: getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.textPlaceholder, _constants.WEBCHAT.DEFAULTS.PLACEHOLDER),
-      autoFocus: true,
-      inputRef: textArea,
-      onKeyDown: function onKeyDown(e) {
-        return _onKeyDown(e);
-      },
-      onKeyUp: onKeyUp,
-      style: _objectSpread({
-        display: 'flex',
-        fontSize: deviceAdapter.fontSize(14),
-        width: '100%',
-        border: 'none',
-        resize: 'none',
-        overflow: 'auto',
-        outline: 'none',
-        flex: '1 1 auto',
-        padding: 10,
-        paddingLeft: persistentMenuOptions ? 0 : 10,
-        fontFamily: 'inherit'
-      }, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.userInputBoxStyle))
-    })), /*#__PURE__*/_react["default"].createElement(_emojiPicker.EmojiPicker, {
-      enableEmojiPicker: props.enableEmojiPicker,
-      onClick: handleEmojiClick
-    }), /*#__PURE__*/_react["default"].createElement(_attachment.Attachment, {
-      enableAttachments: props.enableAttachments,
-      onChange: handleAttachment,
-      accept: (0, _messageUtils.getFullMimeWhitelist)().join(',')
-    }), /*#__PURE__*/_react["default"].createElement(_sendButton.SendButton, {
-      onClick: sendTextAreaText
-    }));
-  };
-
-  var webchatWebview = function webchatWebview() {
-    return /*#__PURE__*/_react["default"].createElement(_contexts.RequestContext.Provider, {
-      value: webviewRequestContext
-    }, /*#__PURE__*/_react["default"].createElement(_webview.WebviewContainer, {
-      style: _objectSpread(_objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)), mobileStyle),
-      webview: webchatState.webview
-    }));
-  };
-
-  var mobileStyle = {};
-
-  if ((0, _core.isMobile)(getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.mobileBreakpoint))) {
-    mobileStyle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.mobileStyle) || {
-      width: '100%',
-      height: '100%',
-      right: 0,
-      bottom: 0,
-      borderRadius: 0
-    };
-  }
-
-  (0, _react.useEffect)(function () {
-    // Prod mode
-    saveWebchatState(webchatState);
-    (0, _dom.scrollToBottom)({
-      host: host
-    });
-  }, [webchatState.themeUpdates]); // Only needed for dev/serve mode
-
-  var updateWebchatDevSettings = function updateWebchatDevSettings(settings) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useEffect)(function () {
-      var themeUpdates = (0, _webchatSettings.normalizeWebchatSettings)(settings);
-      updateTheme((0, _lodash["default"])(webchatState.theme, themeUpdates), themeUpdates);
-    }, [webchatState.messagesJSON]);
-  };
-
-  var DarkenBackground = function DarkenBackground(_ref11) {
-    var component = _ref11.component;
-    return /*#__PURE__*/_react["default"].createElement("div", null, darkBackgroundMenu && /*#__PURE__*/_react["default"].createElement(DarkBackgroundMenu, {
-      style: {
-        borderRadius: webchatState.theme.style.borderRadius
-      }
-    }), component);
-  };
-
-  var _renderCustomComponent = function _renderCustomComponent() {
-    if (!customComponent) return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);else return customComponent;
-  };
-
-  var WebchatComponent = /*#__PURE__*/_react["default"].createElement(_contexts.WebchatContext.Provider, {
-    value: {
-      sendText: sendText,
-      sendAttachment: sendAttachment,
-      sendPayload: sendPayload,
-      sendInput: sendInput,
-      openWebview: openWebview,
-      resolveCase: resolveCase,
-      webchatState: webchatState,
-      getThemeProperty: getThemeProperty,
-      addMessage: addMessage,
-      toggleWebchat: _toggleWebchat,
-      updateMessage: updateMessage,
-      updateReplies: updateReplies,
-      updateLatestInput: updateLatestInput,
-      updateUser: updateSessionWithUser,
-      updateWebchatDevSettings: updateWebchatDevSettings
-    }
-  }, !webchatState.isWebchatOpen && /*#__PURE__*/_react["default"].createElement("div", {
-    onClick: function onClick(event) {
-      _toggleWebchat(true);
-
-      event.preventDefault();
-    }
-  }, triggerButton()), webchatState.isWebchatOpen && /*#__PURE__*/_react["default"].createElement(StyledWebchat // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-webchat`
-  , {
-    role: _constants.ROLES.WEBCHAT,
-    id: _constants.WEBCHAT.DEFAULTS.ID,
-    width: webchatState.width,
-    height: webchatState.height,
-    style: _objectSpread(_objectSpread({}, webchatState.theme.style), mobileStyle)
-  }, /*#__PURE__*/_react["default"].createElement(_header.StyledWebchatHeader, {
-    onCloseClick: function onCloseClick() {
-      _toggleWebchat(false);
-    }
-  }), webchatState.error.message && /*#__PURE__*/_react["default"].createElement(ErrorMessageContainer, null, /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, webchatState.error.message)), webchatMessageList(), webchatState.replies && Object.keys(webchatState.replies).length > 0 && webchatReplies(), webchatState.isPersistentMenuOpen && /*#__PURE__*/_react["default"].createElement(DarkenBackground, {
-    component: persistentMenu()
-  }), !webchatState.handoff && userInputArea(), webchatState.webview && webchatWebview(), webchatState.isCoverComponentOpen && coverComponent(), webchatState.isCustomComponentRendered && customComponent && _renderCustomComponent()));
-
-  return props.shadowDOM ? /*#__PURE__*/_react["default"].createElement(_styledComponents.StyleSheetManager, {
-    target: host
-  }, WebchatComponent) : WebchatComponent;
-});
-exports.Webchat = Webchat;
-//# sourceMappingURL=webchat.js.map