@risecx/carespace-chat-ui/es/components/Messages/index.js

carespace-chat-ui React component

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 _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TextMessage from './Text';
import EmojiMessage from './Emoji';
import FileMessage from './File';
import CardMessage from './Card';
import ListMessage from './List';
import VideoMessage from './Video';
import QuickResponseMessage from './QuickResponse';
import CarouselMessage from './Carousel';
import ImageMessage from './Image';
import ButtonMessage from './Button';
import MenuMessage from './Menu';
import chatIconUrl from './../../assets/chat-icon.svg';
import { FavoritesBtn } from '../../components/Favorites';
import ReactTooltip from 'react-tooltip';
import moment from 'moment';

var Message = /*#__PURE__*/function (_Component) {
  _inheritsLoose(Message, _Component);

  function Message() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    _defineProperty(_assertThisInitialized(_this), "onFavoriteTogglingHandler", function (toggleMessage) {
      Object.assign(_this.props.message, _extends({}, toggleMessage));
      if (_this.props.onFavoriteToggling) _this.props.onFavoriteToggling(toggleMessage);
    });

    return _this;
  }

  var _proto = Message.prototype;

  _proto._renderMessageOfType = function _renderMessageOfType(type) {
    switch (type) {
      case 'text':
        return /*#__PURE__*/React.createElement(TextMessage, this.props.message);

      case 'emoji':
        return /*#__PURE__*/React.createElement(EmojiMessage, this.props.message);

      case 'file':
        return /*#__PURE__*/React.createElement(FileMessage, this.props.message);

      case 'card':
        return /*#__PURE__*/React.createElement(CardMessage, _extends({}, this.props.message, {
          onPostBack: this.props.onPayload
        }));

      case 'list':
        return /*#__PURE__*/React.createElement(ListMessage, _extends({}, this.props.message, {
          onPostBack: this.props.onPayload
        }));

      case 'quickResponse':
        return /*#__PURE__*/React.createElement(QuickResponseMessage, _extends({}, this.props.message, {
          onRespond: this.props.onPayload
        }));

      case 'gallery':
        return /*#__PURE__*/React.createElement(CarouselMessage, _extends({}, this.props.message, {
          onPostBack: this.props.onPayload
        }));

      case 'video':
        return /*#__PURE__*/React.createElement(VideoMessage, this.props.message);

      case 'image':
        return /*#__PURE__*/React.createElement(ImageMessage, this.props.message);

      case 'button':
        return /*#__PURE__*/React.createElement(ButtonMessage, _extends({}, this.props.message, {
          onPostBack: this.props.onPayload
        }));

      case 'menu':
        return /*#__PURE__*/React.createElement(MenuMessage, _extends({}, this.props.message, {
          onRespond: this.props.onPayload
        }));

      default:
        console.error("Attempting to load message with unsupported file type '" + type + "'");
    }
  };

  _proto.render = function render() {
    if (!this.props.message) return /*#__PURE__*/React.createElement("div", null);
    var contentClassList = ['sc-message--content', this.props.message && this.props.message.author === 'me' ? 'sent' : 'received'];
    return /*#__PURE__*/React.createElement("div", {
      className: "sc-message",
      "data-tip": moment(this.messageDate).format('MM/DD/YYYY hh:mm:ss')
    }, /*#__PURE__*/React.createElement("div", {
      className: contentClassList.join(' ')
    }, /*#__PURE__*/React.createElement("div", {
      className: "sc-message--avatar",
      style: {
        backgroundImage: "url(" + this.props.agentProfile.avatarImageUrl + ")"
      }
    }), this._renderMessageOfType(this.props.message.type), this.showFavoriteButtons && /*#__PURE__*/React.createElement(FavoritesBtn, _extends({}, this.props, {
      onFavoriteToggling: this.onFavoriteTogglingHandler
    })), /*#__PURE__*/React.createElement(ReactTooltip, {
      delayShow: 3000
    })));
  };

  _createClass(Message, [{
    key: "showFavoriteButtons",
    get: function get() {
      return this.props.message._id && this.props.message.author !== 'me';
    }
  }, {
    key: "messageDate",
    get: function get() {
      return new Date(this.props.message.sent_timestamp);
    }
  }]);

  return Message;
}(Component);

Message.propTypes = process.env.NODE_ENV !== "production" ? {
  message: PropTypes.object,
  agentProfile: PropTypes.object
} : {};
Message.defaultProps = {
  agentProfile: {
    avatarImageUrl: chatIconUrl
  }
};
export default Message;