@botonic/react 0.20.8 → 0.21.0

package/lib/webchat/webchat.js

@@ -181,10 +181,10 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       customComponent = _useState2[0],
       setCustomComponent = _useState2[1];
 
-  var storage = props.storage === undefined ? localStorage : props.storage;
+  var storage = props.storage;
   var storageKey = typeof props.storageKey === 'function' ? props.storageKey() : props.storageKey;
 
-  var _useStorageState = (0, _useStorageStateHook.useStorageState)(storage, storageKey || _constants.WEBCHAT.DEFAULTS.STORAGE_KEY),
+  var _useStorageState = (0, _useStorageStateHook.useStorageState)(storage, storageKey),
       _useStorageState2 = (0, _slicedToArray2["default"])(_useStorageState, 2),
       botonicState = _useStorageState2[0],
       saveState = _useStorageState2[1];
@@ -244,6 +244,38 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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
 
 
@@ -291,13 +323,13 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }); // Load initial state from storage
 
   (0, _react.useEffect)(function () {
-    var _ref3 = botonicState || {},
-        messages = _ref3.messages,
-        session = _ref3.session,
-        lastRoutePath = _ref3.lastRoutePath,
-        devSettings = _ref3.devSettings,
-        lastMessageUpdate = _ref3.lastMessageUpdate,
-        themeUpdates = _ref3.themeUpdates;
+    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);
@@ -340,10 +372,10 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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 _callee2() {
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
+  (0, _useAsyncEffect.useAsyncEffect)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
-        switch (_context2.prev = _context2.next) {
+        switch (_context3.prev = _context3.next) {
           case 0:
             if (!webchatState.online) {
               setError({
@@ -357,10 +389,10 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
           case 1:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }
-    }, _callee2);
+    }, _callee3);
   })), [webchatState.online]);
   (0, _hooks.useTyping)({
     webchatState: webchatState,
@@ -511,34 +543,34 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   };
 
   var sendInput = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(input) {
+    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(input) {
       var messageComponent;
-      return _regenerator["default"].wrap(function _callee3$(_context3) {
+      return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
               if (!(!input || Object.keys(input).length == 0)) {
-                _context3.next = 2;
+                _context4.next = 2;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context4.abrupt("return");
 
             case 2:
               if (!((0, _messageUtils.isText)(input) && (!input.data || !input.data.trim()))) {
-                _context3.next = 4;
+                _context4.next = 4;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context4.abrupt("return");
 
             case 4:
               if (!((0, _messageUtils.isText)(input) && checkBlockInput(input))) {
-                _context3.next = 6;
+                _context4.next = 6;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context4.abrupt("return");
 
             case 6:
               if (!input.id) input.id = (0, _uuid.v4)();
@@ -546,15 +578,15 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
               if (messageComponent) addMessageComponent(messageComponent);
 
               if (!(0, _messageUtils.isMedia)(input)) {
-                _context3.next = 13;
+                _context4.next = 13;
                 break;
               }
 
-              _context3.next = 12;
+              _context4.next = 12;
               return (0, _messageUtils.readDataURL)(input.data);
 
             case 12:
-              input.data = _context3.sent;
+              input.data = _context4.sent;
 
             case 13:
               sendUserInput(input);
@@ -566,14 +598,14 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
             case 19:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3);
+      }, _callee4);
     }));
 
-    return function sendInput(_x2) {
-      return _ref5.apply(this, arguments);
+    return function sendInput(_x3) {
+      return _ref6.apply(this, arguments);
     };
   }();
   /* This is the public API this component exposes to its parents
@@ -589,10 +621,10 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {
-      addBotResponse: function addBotResponse(_ref6) {
-        var response = _ref6.response,
-            session = _ref6.session,
-            lastRoutePath = _ref6.lastRoutePath;
+      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);
@@ -692,18 +724,18 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, [webchatState.session._botonic_action]);
 
   var sendText = /*#__PURE__*/function () {
-    var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(text, payload) {
+    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(text, payload) {
       var input;
-      return _regenerator["default"].wrap(function _callee4$(_context4) {
+      return _regenerator["default"].wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               if (text) {
-                _context4.next = 2;
+                _context5.next = 2;
                 break;
               }
 
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
 
             case 2:
               input = {
@@ -711,84 +743,84 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
                 data: text,
                 payload: payload
               };
-              _context4.next = 5;
+              _context5.next = 5;
               return sendInput(input);
 
             case 5:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4);
+      }, _callee5);
     }));
 
-    return function sendText(_x3, _x4) {
-      return _ref7.apply(this, arguments);
+    return function sendText(_x4, _x5) {
+      return _ref8.apply(this, arguments);
     };
   }();
 
   var sendPayload = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5(payload) {
+    var _ref9 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(payload) {
       var input;
-      return _regenerator["default"].wrap(function _callee5$(_context5) {
+      return _regenerator["default"].wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               if (payload) {
-                _context5.next = 2;
+                _context6.next = 2;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context6.abrupt("return");
 
             case 2:
               input = {
                 type: _core.INPUT.POSTBACK,
                 payload: payload
               };
-              _context5.next = 5;
+              _context6.next = 5;
               return sendInput(input);
 
             case 5:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5);
+      }, _callee6);
     }));
 
-    return function sendPayload(_x5) {
-      return _ref8.apply(this, arguments);
+    return function sendPayload(_x6) {
+      return _ref9.apply(this, arguments);
     };
   }();
 
   var sendAttachment = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6(attachment) {
+    var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7(attachment) {
       var attachmentType, input;
-      return _regenerator["default"].wrap(function _callee6$(_context6) {
+      return _regenerator["default"].wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
               if (!attachment.file) {
-                _context6.next = 8;
+                _context7.next = 8;
                 break;
               }
 
               attachmentType = (0, _messageUtils.getMediaType)(attachment.file.type);
 
               if (attachmentType) {
-                _context6.next = 4;
+                _context7.next = 4;
                 break;
               }
 
-              return _context6.abrupt("return");
+              return _context7.abrupt("return");
 
             case 4:
               input = {
                 type: attachmentType,
                 data: attachment.file
               };
-              _context6.next = 7;
+              _context7.next = 7;
               return sendInput(input);
 
             case 7:
@@ -796,14 +828,14 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
             case 8:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
         }
-      }, _callee6);
+      }, _callee7);
     }));
 
-    return function sendAttachment(_x6) {
-      return _ref9.apply(this, arguments);
+    return function sendAttachment(_x7) {
+      return _ref10.apply(this, arguments);
     };
   }();
 
@@ -812,13 +844,47 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     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) {
+    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);
@@ -940,6 +1006,7 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e);
       },
+      onKeyUp: onKeyUp,
       style: _objectSpread({
         display: 'flex',
         fontSize: deviceAdapter.fontSize(14),
@@ -1000,8 +1067,8 @@ var Webchat = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, [webchatState.messagesJSON]);
   };
 
-  var DarkenBackground = function DarkenBackground(_ref10) {
-    var component = _ref10.component;
+  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