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

carespace-chat-ui React component

import _regeneratorRuntime from "@babel/runtime/regenerator";

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); }); }; }

import React, { useState, useReducer, useEffect, Fragment } from 'react';
import PropTypes from 'prop-types';
import Websocket from 'react-websocket';
import { MessageService } from '../../services';
import { StateProvider, useStateValue } from '../Provider';
import { DEFAULT_ADAPTER } from '../../adapter';
import MainReducer from '../MainReducer';
import { Reducer, Actions } from './Reducer';
import { Reducer as loginReducer, Actions as loginActions } from '../Auth/Login/Reducer';
import Launcher from '../Launcher';

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

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

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

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

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


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


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

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

  var _useReducer3 = useReducer(loginReducer.reducer, loginReducer.initialState.user),
      user = _useReducer3[0];

  useEffect(function () {
    mountMessageService();

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

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

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

  var onClose = function onClose() {
    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__*/_regeneratorRuntime.mark(function _callee() {
      var history;
      return _regeneratorRuntime.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();
    loginActions.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.createElement(Fragment, null, /*#__PURE__*/React.createElement(Websocket, {
    url: props.clientConfig.wsUrl,
    onMessage: onWsMessageHandler,
    onOpen: onOpen,
    onClose: onClose,
    reconnect: true,
    debug: true,
    ref: function ref(Websocket) {
      refWebSocket = Websocket;
    }
  }), /*#__PURE__*/React.createElement(StateProvider, {
    initialState: _extends({}, Reducer.initialState, loginReducer.initialState),
    reducer: MainReducer
  }, /*#__PURE__*/React.createElement(Launcher, {
    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.object,
  launcherIcon: PropTypes.string,
  agentProfile: PropTypes.object,
  onAuthChange: PropTypes.func
} : {};
Messenger.defaultProps = {
  clientConfig: {
    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);
  }
};
export default Messenger;