@risecx/carespace-chat-ui/lib/components/Messenger/Messenger.js

carespace-chat-ui React component

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactWebsocket = _interopRequireDefault(require("react-websocket"));

var _services = require("../../services");

var _Provider = require("../Provider");

var _adapter = require("../../adapter");

var _MainReducer = _interopRequireDefault(require("../MainReducer"));

var _Reducer = require("./Reducer");

var _Reducer2 = require("../Auth/Login/Reducer");

var _Launcher = _interopRequireDefault(require("../Launcher"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

var Messenger = function Messenger(props) {
  var refWebSocket;
  var messageService;

  var _useState = (0, _react.useState)(false),
      isOpen = _useState[0],
      setIsOpen = _useState[1];

  var _useState2 = (0, _react.useState)([]),
      messageList = _useState2[0],
      setMessageList = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      newMessagesCount = _useState3[0],
      setMessagesCount = _useState3[1];

  var _useState4 = (0, _react.useState)(false),
      recoveryHistoryAttempting = _useState4[0],
      setRecoveryHistoryAttempting = _useState4[1]; //const[mainReducer, dispatch] = useStateValue()
  //const [getStartedMessageSent, setGetStartedMessageSent] = useState(false);


  var _useReducer = (0, _react.useReducer)(_Reducer.Reducer.reducer, _Reducer.Reducer.initialState.hasWebsocketConnection),
      hasWebsocketConnection = _useReducer[0],
      hasWebsocketConnectionDispatch = _useReducer[1]; //Enhance it...


  var _useState5 = (0, _react.useState)(false),
      identified = _useState5[0],
      setIsIdentified = _useState5[1];

  var _useReducer2 = (0, _react.useReducer)(_Reducer2.Reducer.reducer, _Reducer2.Reducer.initialState.isLogged),
      isLogged = _useReducer2[0],
      isLoggedDispatch = _useReducer2[1];

  var _useReducer3 = (0, _react.useReducer)(_Reducer2.Reducer.reducer, _Reducer2.Reducer.initialState.user),
      user = _useReducer3[0];

  (0, _react.useEffect)(function () {
    mountMessageService();

    if (isLogged && hasWebsocketConnection) {
      if (!identified) {
        __identify();
      }
    }
  });

  var mountMessageService = function mountMessageService() {
    messageService = new _services.MessageService(props.clientConfig);
    messageService.WsInstance = refWebSocket;
  };

  var onOpen = function onOpen() {
    _Reducer.Actions.setHasWebsocketConnection(hasWebsocketConnectionDispatch, true);
  };

  var onClose = function onClose() {
    _Reducer.Actions.setHasWebsocketConnection(hasWebsocketConnectionDispatch, false);

    setIsIdentified(false);
  };

  var onWsMessageHandler = function onWsMessageHandler(data) {
    if (!messageService) mountMessageService();
    var dataParsed = JSON.parse(data);

    if (dataParsed.type === 'identify') {
      messageService.setUserObject(dataParsed.userObject);
      return;
    }

    setMessageList([].concat(messageList, [messageService.receiveMessage(dataParsed)]));
  };

  var onMessageWasSentHandler = function onMessageWasSentHandler(message) {
    setMessageList([].concat(messageList, [message]));
    messageService.sendMessage(message);
  };

  var onMessageWasReceivedHandler = function onMessageWasReceivedHandler() {
    setMessagesCount(isOpen ? newMessagesCount : newMessagesCount + 1);
  };

  var onFilesSelectedHandler = function onFilesSelectedHandler(fileList) {
    var objectURL = window.URL.createObjectURL(fileList[0]);
    setMessageList([].concat(messageList, [messageService.attachFile({
      url: objectURL,
      fileName: fileList[0].name
    })]));
  };

  var handleClick = function handleClick() {
    setIsOpen(!isOpen);
    setMessagesCount(0);
  };

  var onPayloadClickHandler = function onPayloadClickHandler(button, silently) {
    if (silently === void 0) {
      silently = false;
    }

    if (!silently) setMessageList([].concat(messageList, [messageService.quickReply(button)]));else messageService.quickReply(button, silently);
  };

  var recoveryMessageHistory = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
      var history;
      return _regenerator["default"].wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _context.prev = 0;
              _context.next = 3;
              return messageService.getMessageHistory();

            case 3:
              history = _context.sent;
              setMessageList([].concat(history));
              setRecoveryHistoryAttempting(true);

              if (history.length === 0) {
                __sendGetStartedMessage();
              }

              _context.next = 12;
              break;

            case 9:
              _context.prev = 9;
              _context.t0 = _context["catch"](0);
              throw _context.t0;

            case 12:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[0, 9]]);
    }));

    return function recoveryMessageHistory() {
      return _ref.apply(this, arguments);
    };
  }();

  var onAuthHandler = function onAuthHandler(_ref2) {
    var isAnonymous = _ref2.isAnonymous,
        loggedIn = _ref2.loggedIn,
        loginData = _ref2.loginData;
    if (!messageService) mountMessageService();

    _Reducer2.Actions.setIsLogged(isLoggedDispatch, loggedIn);

    if (isAnonymous && !loggedIn) setMessageList([]);

    if (loggedIn) {
      recoveryMessageHistory(); // if (isAnonymous) setTimeout(__sendGetStartedMessage, 500);
    }

    if (props.onAuthChange) props.onAuthChange({
      isAnonymous: isAnonymous,
      loggedIn: loggedIn,
      loginData: loginData
    });
  };

  var __identify = function __identify() {
    console.log('identifying user');
    var user = messageService.getUserData();

    if (user) {
      messageService.sendMessage({
        type: 'identify',
        user: user,
        channel: 'socket',
        isAnonymous: messageService.isAnonymous()
      });
      console.log('user successfully identified');
      setIsIdentified(true);
    }
  };

  var __sendGetStartedMessage = function __sendGetStartedMessage() {
    console.log('preparing to send start message...');
    console.log('sending start message...');
    return onPayloadClickHandler({
      payload: 'GET_STARTED',
      title: 'Get Started'
    });
  };

  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactWebsocket["default"], {
    url: props.clientConfig.wsUrl,
    onMessage: onWsMessageHandler,
    onOpen: onOpen,
    onClose: onClose,
    reconnect: true,
    debug: true,
    ref: function ref(Websocket) {
      refWebSocket = Websocket;
    }
  }), /*#__PURE__*/_react["default"].createElement(_Provider.StateProvider, {
    initialState: _extends({}, _Reducer.Reducer.initialState, _Reducer2.Reducer.initialState),
    reducer: _MainReducer["default"]
  }, /*#__PURE__*/_react["default"].createElement(_Launcher["default"], {
    clientConfig: props.clientConfig,
    agentProfile: props.agentProfile,
    isOpen: isOpen,
    messageList: messageList,
    showEmoji: false,
    newMessagesCount: newMessagesCount,
    onMessageWasSent: onMessageWasSentHandler,
    onMessageWasReceived: onMessageWasReceivedHandler,
    onFilesSelected: onFilesSelectedHandler,
    handleClick: handleClick,
    onPayloadClick: onPayloadClickHandler,
    recoveryMessageHistory: recoveryMessageHistory,
    onAuth: onAuthHandler
  })));
};

Messenger.propTypes = process.env.NODE_ENV !== "production" ? {
  clientConfig: _propTypes["default"].object,
  launcherIcon: _propTypes["default"].string,
  agentProfile: _propTypes["default"].object,
  onAuthChange: _propTypes["default"].func
} : {};
Messenger.defaultProps = {
  clientConfig: {
    adapter: _adapter.DEFAULT_ADAPTER,
    wsUrl: 'wss://develop.carespace.ai/api/bot/web',
    token: '',
    urlAPI: 'https://develop.carespace.ai/api/admin'
  },
  agentProfile: {
    teamName: 'carespace-chat-ui',
    avatarImageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
  },
  onAuthChange: function onAuthChange(status) {// console.log(status);
  }
};
var _default = Messenger;
exports["default"] = _default;
module.exports = exports.default;