@pioneer-platform/pioneer 1.0.5

package/lib/components/Launcher.js

@@ -0,0 +1,105 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _ChatWindow = _interopRequireDefault(require("./ChatWindow"));
+var _logoNoBg = _interopRequireDefault(require("./../assets/logo-no-bg.svg"));
+var _notification = _interopRequireDefault(require("./../assets/sounds/notification.mp3"));
+var _closeIcon = _interopRequireDefault(require("./../assets/close-icon.png"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var Launcher = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Launcher, _Component);
+  function Launcher() {
+    var _this;
+    _this = _Component.call(this) || this;
+    _this.state = {
+      launcherIcon: _logoNoBg["default"],
+      isOpen: false
+    };
+    return _this;
+  }
+  var _proto = Launcher.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.mute) {
+      return;
+    }
+    var nextMessage = nextProps.messageList[nextProps.messageList.length - 1];
+    var isIncoming = (nextMessage || {}).author === 'them';
+    var isNew = nextProps.messageList.length > this.props.messageList.length;
+    if (isIncoming && isNew) {
+      this.playIncomingMessageSound();
+    }
+  };
+  _proto.playIncomingMessageSound = function playIncomingMessageSound() {
+    var audio = new Audio(_notification["default"]);
+    audio.play();
+  };
+  _proto.handleClick = function handleClick() {
+    if (this.props.handleClick !== undefined) {
+      this.props.handleClick();
+    } else {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    }
+  };
+  _proto.render = function render() {
+    var isOpen = this.props.hasOwnProperty('isOpen') ? this.props.isOpen : this.state.isOpen;
+    var classList = ['sc-launcher', isOpen ? 'opened' : ''];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      id: "sc-launcher"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classList.join(' '),
+      onClick: this.handleClick.bind(this)
+    }, /*#__PURE__*/_react["default"].createElement(MessageCount, {
+      count: this.props.newMessagesCount,
+      isOpen: isOpen
+    }), /*#__PURE__*/_react["default"].createElement("img", {
+      className: 'sc-open-icon',
+      src: _closeIcon["default"]
+    }), /*#__PURE__*/_react["default"].createElement("img", {
+      className: 'sc-closed-icon',
+      src: _logoNoBg["default"]
+    })), /*#__PURE__*/_react["default"].createElement(_ChatWindow["default"], {
+      messageList: this.props.messageList,
+      onUserInputSubmit: this.props.onMessageWasSent,
+      onFilesSelected: this.props.onFilesSelected,
+      agentProfile: this.props.agentProfile,
+      isOpen: isOpen,
+      onClose: this.handleClick.bind(this),
+      showEmoji: this.props.showEmoji
+    }));
+  };
+  return Launcher;
+}(_react.Component);
+var MessageCount = function MessageCount(props) {
+  if (props.count === 0 || props.isOpen === true) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'sc-new-messages-count'
+  }, props.count);
+};
+Launcher.propTypes = process.env.NODE_ENV !== "production" ? {
+  onMessageWasReceived: _propTypes["default"].func,
+  onMessageWasSent: _propTypes["default"].func,
+  newMessagesCount: _propTypes["default"].number,
+  isOpen: _propTypes["default"].bool,
+  handleClick: _propTypes["default"].func,
+  messageList: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  mute: _propTypes["default"].bool,
+  showEmoji: _propTypes["default"].bool
+} : {};
+Launcher.defaultProps = {
+  newMessagesCount: 0,
+  showEmoji: true
+};
+var _default = Launcher;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/LauncherNew.js

@@ -0,0 +1,139 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _ramda = require("ramda");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ChatWindow = _interopRequireDefault(require("./ChatWindow"));
+var _logoNoBg = _interopRequireDefault(require("../assets/logo-no-bg.svg"));
+var _closeIcon = _interopRequireDefault(require("../assets/close-icon.png"));
+var _notification = _interopRequireDefault(require("../assets/sounds/notification.mp3"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 LauncherNew(props) {
+  var isOpen = props.isOpen,
+    onClick = props.onClick,
+    mute = props.mute,
+    showEmoji = props.showEmoji,
+    agentProfile = props.agentProfile,
+    messageList = props.messageList,
+    newMessagesCount = props.newMessagesCount,
+    onMessageWasSent = props.onMessageWasSent,
+    onFilesSelected = props.onFilesSelected,
+    fileUpload = props.fileUpload,
+    pinMessage = props.pinMessage,
+    onPinMessage = props.onPinMessage,
+    placeholder = props.placeholder;
+  var defaultState = {
+    isOpen: false,
+    messageList: messageList
+  };
+  var _useState = (0, _react.useState)(defaultState),
+    state = _useState[0],
+    setState = _useState[1];
+  (0, _react.useEffect)(function () {
+    setState(function (state) {
+      return _extends({}, state, {
+        isOpen: isOpen
+      });
+    });
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    var prevMessageListLength = (0, _ramda.pipe)((0, _ramda.prop)('messageList'), _ramda.length)(state);
+    var massageListLength = (0, _ramda.length)(messageList);
+    var isIncoming = (0, _ramda.pipe)(_ramda.last, (0, _ramda.prop)('author'), (0, _ramda.equals)('them'))(messageList);
+    var isNew = massageListLength > prevMessageListLength;
+    if (isIncoming && isNew) {
+      if (!mute) {
+        playIncomingMessageSound();
+      }
+      setState(function (state) {
+        return _extends({}, state, {
+          messageList: messageList
+        });
+      });
+    }
+  }, [messageList]);
+  function playIncomingMessageSound() {
+    var audio = new Audio(_notification["default"]);
+    audio.play();
+  }
+  function handleClick() {
+    if (onClick) {
+      onClick();
+    } else {
+      setState(function (state) {
+        return _extends({}, state, {
+          isOpen: !state.isOpen
+        });
+      });
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sc-launcher"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sc-launcher', {
+      'opened': state.isOpen
+    }),
+    onClick: handleClick
+  }, /*#__PURE__*/_react["default"].createElement(MessageCount, {
+    count: newMessagesCount,
+    isOpen: state.isOpen
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: 'sc-open-icon',
+    src: _closeIcon["default"]
+  }), /*#__PURE__*/_react["default"].createElement("img", {
+    className: 'sc-closed-icon',
+    src: _logoNoBg["default"]
+  })), /*#__PURE__*/_react["default"].createElement(_ChatWindow["default"], {
+    messageList: messageList,
+    onUserInputSubmit: onMessageWasSent,
+    onFilesSelected: onFilesSelected,
+    agentProfile: agentProfile,
+    isOpen: state.isOpen,
+    onClose: onClick,
+    showEmoji: showEmoji,
+    fileUpload: fileUpload,
+    pinMessage: pinMessage,
+    onPinMessage: onPinMessage,
+    placeholder: placeholder
+  }));
+}
+var MessageCount = function MessageCount(_ref) {
+  var count = _ref.count,
+    isOpen = _ref.isOpen;
+  if (count === 0 || isOpen === true) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-new-messages-count"
+  }, count);
+};
+LauncherNew.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  mute: _propTypes["default"].bool,
+  showEmoji: _propTypes["default"].bool,
+  messageList: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  newMessagesCount: _propTypes["default"].number,
+  onMessageWasSent: _propTypes["default"].func,
+  onMessageWasReceived: _propTypes["default"].func,
+  fileUpload: _propTypes["default"].bool,
+  pinMessage: _propTypes["default"].object,
+  onPinMessage: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string
+} : {};
+LauncherNew.defaultProps = {
+  isOpen: false,
+  mute: false,
+  showEmoji: true,
+  messageList: [],
+  newMessagesCount: 0,
+  fileUpload: true,
+  placeholder: 'Write a reply...'
+};
+var _default = LauncherNew;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/MessageList.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _ramda = require("ramda");
+var _react = _interopRequireWildcard(require("react"));
+var _Messages = _interopRequireDefault(require("./Messages"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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 MessageList(props) {
+  var element = (0, _react.useRef)(null);
+  var elementCurrent = (0, _ramda.prop)('current', element);
+  (0, _react.useEffect)(function () {
+    if (elementCurrent) {
+      elementCurrent.scrollTop = elementCurrent.scrollHeight;
+    }
+  }, [props]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-message-list",
+    ref: element
+  }, props.messages.map(function (message, i) {
+    return /*#__PURE__*/_react["default"].createElement(_Messages["default"], {
+      message: message,
+      key: i
+    });
+  }));
+}
+var _default = MessageList;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/Messages/EmojiMessage.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var EmojiMessage = function EmojiMessage(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-message--emoji"
+  }, props.data.emoji);
+};
+var _default = EmojiMessage;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/Messages/FileMessage.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FileIcon = _interopRequireDefault(require("./../icons/FileIcon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var FileMessage = function FileMessage(props) {
+  return /*#__PURE__*/_react["default"].createElement("a", {
+    className: "sc-message--file",
+    href: props.data.url,
+    download: props.data.fileName
+  }, /*#__PURE__*/_react["default"].createElement(_FileIcon["default"], null), /*#__PURE__*/_react["default"].createElement("p", null, props.data.fileName));
+};
+var _default = FileMessage;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/Messages/TextMessage.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactLinkify = _interopRequireDefault(require("react-linkify"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var TextMessage = function TextMessage(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-message--text"
+  }, /*#__PURE__*/_react["default"].createElement(_reactLinkify["default"], {
+    properties: {
+      target: '_blank'
+    }
+  }, props.data.text));
+};
+var _default = TextMessage;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/Messages/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _ramda = require("ramda");
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _TextMessage = _interopRequireDefault(require("./TextMessage"));
+var _EmojiMessage = _interopRequireDefault(require("./EmojiMessage"));
+var _FileMessage = _interopRequireDefault(require("./FileMessage"));
+var _chatIcon = _interopRequireDefault(require("./../../assets/chat-icon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function Message(_ref) {
+  var message = _ref.message;
+  var type = (0, _ramda.prop)('type', message);
+  var author = (0, _ramda.prop)('author', message);
+  var me = (0, _ramda.equals)(author, 'me');
+  function renderMessageOfType(type) {
+    switch (type) {
+      case 'text':
+        return /*#__PURE__*/_react["default"].createElement(_TextMessage["default"], message);
+      case 'emoji':
+        return /*#__PURE__*/_react["default"].createElement(_EmojiMessage["default"], message);
+      case 'file':
+        return /*#__PURE__*/_react["default"].createElement(_FileMessage["default"], message);
+      default:
+        console.error("Attempting to load message with unsupported file type '" + type + "'");
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-message"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sc-message--content', {
+      'sent': me
+    }, {
+      'received': !me
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-message--avatar",
+    style: {
+      backgroundImage: "url(" + _chatIcon["default"] + ")"
+    }
+  }), renderMessageOfType(type)));
+}
+var _default = Message;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/PinMessage.js

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _ramda = require("ramda");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _image = _interopRequireDefault(require("../assets/image.png"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function PinMessage(_ref) {
+  var pinMessage = _ref.pinMessage,
+    onPinMessage = _ref.onPinMessage;
+  var image = (0, _ramda.propOr)(_image["default"], 'imageUrl', pinMessage);
+  var title = (0, _ramda.pipe)((0, _ramda.prop)('title'), (0, _ramda.ifElse)(function (item) {
+    return (0, _ramda.length)(item) > 34;
+  }, function (item) {
+    return item.slice(0, 34) + "...";
+  }, function (item) {
+    return item;
+  }))(pinMessage);
+  var text = (0, _ramda.pipe)((0, _ramda.prop)('text'), (0, _ramda.ifElse)(function (item) {
+    return (0, _ramda.length)(item) > 50;
+  }, function (item) {
+    return item.slice(0, 50) + "...";
+  }, function (item) {
+    return item;
+  }))(pinMessage);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-pin--message",
+    onClick: function onClick() {
+      return onPinMessage(pinMessage);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "sc-pin--message--img",
+    src: image,
+    alt: ""
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-pin--message--desc"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-pin--message--title"
+  }, title), /*#__PURE__*/_react["default"].createElement("div", null, text)));
+}
+PinMessage.propTypes = process.env.NODE_ENV !== "production" ? {
+  pinMessage: _propTypes["default"].object,
+  onPinMessage: _propTypes["default"].func
+} : {};
+var _default = PinMessage;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/UserInput.js

@@ -0,0 +1,199 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _SendIcon = _interopRequireDefault(require("./icons/SendIcon"));
+var _FileIcon = _interopRequireDefault(require("./icons/FileIcon"));
+var _EmojiIcon = _interopRequireDefault(require("./icons/EmojiIcon"));
+var _PopupWindow = _interopRequireDefault(require("./popups/PopupWindow"));
+var _EmojiPicker = _interopRequireDefault(require("./emoji-picker/EmojiPicker"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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; _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var UserInput = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(UserInput, _Component);
+  function UserInput() {
+    var _this;
+    _this = _Component.call(this) || this;
+    _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function (e) {
+      e.preventDefault();
+      if (!_this.state.emojiPickerIsOpen) {
+        _this.setState({
+          emojiPickerIsOpen: true
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "closeEmojiPicker", function (e) {
+      if (_this.emojiPickerButton.contains(e.target)) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      _this.setState({
+        emojiPickerIsOpen: false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_handleEmojiPicked", function (emoji) {
+      _this.setState({
+        emojiPickerIsOpen: false
+      });
+      if (_this.state.inputHasText) {
+        _this.userInput.innerHTML += emoji;
+      } else {
+        _this.props.onSubmit({
+          author: 'me',
+          type: 'emoji',
+          data: {
+            emoji: emoji
+          }
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleEmojiFilterChange", function (event) {
+      var emojiFilter = event.target.value;
+      _this.setState({
+        emojiFilter: emojiFilter
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "_renderEmojiPopup", function () {
+      return /*#__PURE__*/_react["default"].createElement(_PopupWindow["default"], {
+        isOpen: _this.state.emojiPickerIsOpen,
+        onClickedOutside: _this.closeEmojiPicker,
+        onInputChange: _this.handleEmojiFilterChange
+      }, /*#__PURE__*/_react["default"].createElement(_EmojiPicker["default"], {
+        onEmojiPicked: _this._handleEmojiPicked,
+        filter: _this.state.emojiFilter
+      }));
+    });
+    _this.state = {
+      inputActive: false,
+      inputHasText: false,
+      emojiPickerIsOpen: false,
+      emojiFilter: ''
+    };
+    return _this;
+  }
+  var _proto = UserInput.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.emojiPickerButton = document.querySelector('#sc-emoji-picker-button');
+  };
+  _proto.handleKeyDown = function handleKeyDown(event) {
+    if (event.keyCode === 13 && !event.shiftKey) {
+      return this._submitText(event);
+    }
+  };
+  _proto.handleKeyUp = function handleKeyUp(event) {
+    var inputHasText = event.target.innerHTML.length !== 0 && event.target.innerText !== '\n';
+    this.setState({
+      inputHasText: inputHasText
+    });
+  };
+  _proto._showFilePicker = function _showFilePicker() {
+    this._fileUploadButton.click();
+  };
+  _proto._submitText = function _submitText(event) {
+    event.preventDefault();
+    var text = this.userInput.textContent;
+    if (text && text.length > 0) {
+      this.props.onSubmit({
+        author: 'me',
+        type: 'text',
+        data: {
+          text: text
+        }
+      });
+      this.userInput.innerHTML = '';
+    }
+  };
+  _proto._onFilesSelected = function _onFilesSelected(event) {
+    if (event.target.files && event.target.files.length > 0) {
+      this.props.onFilesSelected(event.target.files);
+    }
+  };
+  _proto._renderSendOrFileIcon = function _renderSendOrFileIcon() {
+    var _this2 = this;
+    if (!this.props.fileUpload) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sc-user-input--button"
+      }, /*#__PURE__*/_react["default"].createElement(_SendIcon["default"], {
+        onClick: this._submitText.bind(this)
+      }));
+    }
+    if (this.state.inputHasText) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "sc-user-input--button"
+      }, /*#__PURE__*/_react["default"].createElement(_SendIcon["default"], {
+        onClick: this._submitText.bind(this)
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-user-input--button"
+    }, /*#__PURE__*/_react["default"].createElement(_FileIcon["default"], {
+      onClick: this._showFilePicker.bind(this)
+    }), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "file",
+      name: "files[]",
+      multiple: true,
+      ref: function ref(e) {
+        _this2._fileUploadButton = e;
+      },
+      onChange: this._onFilesSelected.bind(this)
+    }));
+  };
+  _proto.render = function render() {
+    var _this3 = this;
+    var _this$state = this.state,
+      emojiPickerIsOpen = _this$state.emojiPickerIsOpen,
+      inputActive = _this$state.inputActive;
+    return /*#__PURE__*/_react["default"].createElement("form", {
+      className: "sc-user-input " + (inputActive ? 'active' : '')
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      role: "button",
+      tabIndex: "0",
+      onFocus: function onFocus() {
+        _this3.setState({
+          inputActive: true
+        });
+      },
+      onBlur: function onBlur() {
+        _this3.setState({
+          inputActive: false
+        });
+      },
+      ref: function ref(e) {
+        _this3.userInput = e;
+      },
+      onKeyDown: this.handleKeyDown.bind(this),
+      onKeyUp: this.handleKeyUp.bind(this),
+      contentEditable: "true",
+      placeholder: this.props.placeholder,
+      className: "sc-user-input--text"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-user-input--buttons"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-user-input--button"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-user-input--button"
+    }, this.props.showEmoji && /*#__PURE__*/_react["default"].createElement(_EmojiIcon["default"], {
+      onClick: this.toggleEmojiPicker,
+      isActive: emojiPickerIsOpen,
+      tooltip: this._renderEmojiPopup()
+    })), this._renderSendOrFileIcon()));
+  };
+  return UserInput;
+}(_react.Component);
+UserInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  onSubmit: _propTypes["default"].func.isRequired,
+  onFilesSelected: _propTypes["default"].func.isRequired,
+  showEmoji: _propTypes["default"].bool
+} : {};
+var _default = UserInput;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/emoji-picker/EmojiPicker.js

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _emojiJs = _interopRequireDefault(require("emoji-js"));
+var _emojiData = _interopRequireDefault(require("./emojiData"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var emojiConvertor = new _emojiJs["default"]();
+emojiConvertor.init_env();
+var EmojiPicker = function EmojiPicker(_ref) {
+  var onEmojiPicked = _ref.onEmojiPicked,
+    filter = _ref.filter;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-emoji-picker"
+  }, _emojiData["default"].map(function (category) {
+    var filteredEmojis = category.emojis.filter(function (_ref2) {
+      var name = _ref2.name;
+      return name.includes(filter);
+    });
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-emoji-picker--category",
+      key: category.name
+    }, filteredEmojis.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sc-emoji-picker--category-title"
+    }, category.name), filteredEmojis.map(function (_ref3) {
+      var _char = _ref3["char"],
+        _name = _ref3._name;
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: _char,
+        className: "sc-emoji-picker--emoji",
+        onClick: function onClick() {
+          return onEmojiPicked(_char);
+        }
+      }, _char);
+    }));
+  }));
+};
+var _default = EmojiPicker;
+exports["default"] = _default;
+module.exports = exports.default;