@pioneer-platform/pioneer 1.0.5

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org>

package/README.md

@@ -0,0 +1,204 @@
+# popup-chat-react
+
+`popup-chat-react` provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.
+
+![GitHub license](https://img.shields.io/github/package-json/v/asliddinusmonov/popup-chat-react.svg?style=flat-square) <a href="https://www.npmjs.com/package/popup-chat-react" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/popup-chat-react.svg" />
+</a>
+<a href="https://github.com/asliddinusmonov/popup-chat-react" target="\_parent">
+  <img alt="" src="https://img.shields.io/github/stars/asliddinusmonov/popup-chat-react.svg?style=social&label=Star" />
+</a>
+<br/>
+
+![Demo gif of popup-chat-react being used](https://puu.sh/xei2F/fd4a121185.gif)
+
+## Features
+
+- Customizeable
+- Backend agnostic
+- Free
+
+## [Demo](https://asliddinusmonov.github.io/popup-chat-react/)
+
+## Table of Contents
+- [Installation](#installation)
+- [Example](#example)
+- [Components](#components)
+
+## Installation
+
+```
+$ npm install popup-chat-react
+```
+
+## Example
+
+``` javascript
+import React, { useState } from 'react';
+import { Launcher } from '../../src';
+
+function Demo() {
+  const [state, setState] = useState({
+    messageList: [],
+    newMessagesCount: 0,
+    isOpen: false,
+    fileUpload: true,
+  });
+
+  function onMessageWasSent(message) {
+    setState(state => ({
+      ...state,
+      messageList: [...state.messageList, message]
+    }));
+  }
+
+  function onFilesSelected(fileList) {
+    const objectURL = window.URL.createObjectURL(fileList[0]);
+
+    setState(state => ({
+      ...state,
+      messageList: [
+        ...state.messageList,
+        {
+          type: 'file', author: 'me',
+          data: {
+            url: objectURL,
+            fileName: fileList[0].name,
+          }
+        }
+      ]
+    }));
+  }
+
+  function sendMessage(text) {
+    if (text.length > 0) {
+      const newMessagesCount = state.isOpen ? state.newMessagesCount : state.newMessagesCount + 1;
+
+      setState(state => ({
+        ...state,
+        newMessagesCount: newMessagesCount,
+        messageList: [
+          ...state.messageList,
+          {
+            author: 'them',
+            type: 'text',
+            data: { text }
+          }
+        ]
+      }));
+    }
+  }
+
+  function onClick() {
+    setState(state => ({
+      ...state,
+      isOpen: !state.isOpen,
+      newMessagesCount: 0
+    }));
+  }
+
+  return (
+    <div>
+      <Header />
+
+      <TestArea
+        onMessage={sendMessage}
+      />
+
+      <Launcher
+        agentProfile={{
+          teamName: 'popup-chat-react',
+          imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
+        }}
+        onMessageWasSent={onMessageWasSent}
+        onFilesSelected={onFilesSelected}
+        messageList={state.messageList}
+        newMessagesCount={state.newMessagesCount}
+        onClick={onClick}
+        isOpen={state.isOpen}
+        showEmoji
+        fileUpload={state.fileUpload}
+        pinMessage={{
+          imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png',
+          title: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
+          text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
+        }}
+        placeholder='placeholder'
+      />
+
+      <img className="demo-monster-img" src={monsterImgUrl} />
+      <Footer />
+    </div>
+  );
+}
+```
+
+For more detailed examples see the demo folder.
+
+## Components
+
+# Launcher
+
+`Launcher` is the only component needed to use popup-chat-react. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.
+
+Launcher props:
+
+|      prop        | type   | required | description |
+|------------------|--------|----------|-------------|
+| agentProfile     | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
+| onClick          | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
+| isOpen           | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
+| messageList      | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
+| mute             | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
+| newMessagesCount | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
+| onFilesSelected  | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
+| onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
+| showEmoji        | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
+| fileUpload       | boolean | no | 
+| pinMessage       | object  | no | 
+| placeholder      | string  | no | 
+
+
+### Message Objects
+
+Message objects are rendered differently depending on their type. Currently, only text, file, and emoji types are supported. Each message object has an `author` field which can have the value 'me' or 'them'.
+
+``` javascript
+{
+  author: 'them',
+  type: 'text',
+  data: {
+    text: 'some text'
+  }
+}
+
+{
+  author: 'me',
+  type: 'emoji',
+  data: {
+    code: 'someCode'
+  }
+}
+
+
+{
+  author: 'me',
+  type: 'file',
+  data: {
+    url: 'somefile.mp3',
+    fileName: 'Any old name'
+  }
+}
+
+```
+
+### Agent Profile Objects
+
+Look like this:
+
+```js
+{
+  imageUrl: 'https://somewhere.on/the_web.png',
+  teamName: 'Da best'
+}
+```

package/es/assets/chat-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-4749.48 -5020 35.036 35.036"><defs><style>.a{fill:none;}.b{fill:#4e8cff;}.c{clip-path:url(#a);}.d{fill:#fff;}.e{fill:#eff4f9;}</style><clipPath id="a"><path class="a" d="M0-399.479H17.555v17.555H0Z" transform="translate(0 399.479)"/></clipPath></defs><g transform="translate(-4886 -5075)"><circle class="b" cx="17.518" cy="17.518" r="17.518" transform="translate(136.52 55)"/><g transform="translate(145.13 64)"><g class="c"><g transform="translate(0 0)"><path class="d" d="M-381.924-190.962a8.778,8.778,0,0,0-8.778-8.778,8.778,8.778,0,0,0-8.778,8.778,8.745,8.745,0,0,0,2.26,5.879v1.442c0,.8.492,1.457,1.1,1.457h5.83a.843.843,0,0,0,.183-.02,8.778,8.778,0,0,0,8.184-8.757" transform="translate(399.479 199.74)"/></g><g transform="translate(0 0)"><path class="e" d="M-68.763-194.079a9.292,9.292,0,0,1,6.38-8.888c-.252-.022-.506-.033-.763-.033a8.774,8.774,0,0,0-8.778,8.778A9.508,9.508,0,0,0-69.7-188.3c.005,0,0,.009,0,.01-.311.352-1.924,2.849.021,2.849h2.25c-1.23-.022,1.263-2.107.269-3.494a8.225,8.225,0,0,1-1.6-5.141" transform="translate(71.924 203)"/></g></g></g></g></svg>

package/es/assets/logo-no-bg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-4749.48 -5020 35.036 35.036"><defs><style>.a{fill:none;}.b{fill:#4e8cff;}.c{clip-path:url(#a);}.d{fill:#fff;}.e{fill:#eff4f9;}</style><clipPath id="a"><path class="a" d="M0-399.479H17.555v17.555H0Z" transform="translate(0 399.479)"/></clipPath></defs><g transform="translate(-4886 -5075)"><g transform="translate(145.13 64)"><g class="c"><g transform="translate(0 0)"><path class="d" d="M-381.924-190.962a8.778,8.778,0,0,0-8.778-8.778,8.778,8.778,0,0,0-8.778,8.778,8.745,8.745,0,0,0,2.26,5.879v1.442c0,.8.492,1.457,1.1,1.457h5.83a.843.843,0,0,0,.183-.02,8.778,8.778,0,0,0,8.184-8.757" transform="translate(399.479 199.74)"/></g><g transform="translate(0 0)"><path class="e" d="M-68.763-194.079a9.292,9.292,0,0,1,6.38-8.888c-.252-.022-.506-.033-.763-.033a8.774,8.774,0,0,0-8.778,8.778A9.508,9.508,0,0,0-69.7-188.3c.005,0,0,.009,0,.01-.311.352-1.924,2.849.021,2.849h2.25c-1.23-.022,1.263-2.107.269-3.494a8.225,8.225,0,0,1-1.6-5.141" transform="translate(71.924 203)"/></g></g></g></g></svg>

package/es/components/ChatWindow.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import MessageList from './MessageList';
+import UserInput from './UserInput';
+import Header from './Header';
+import PinMessage from './PinMessage';
+function ChatWindow(props) {
+  var isOpen = props.isOpen,
+    onClose = props.onClose,
+    agentProfile = props.agentProfile,
+    showEmoji = props.showEmoji,
+    fileUpload = props.fileUpload,
+    messageList = props.messageList,
+    onUserInputSubmit = props.onUserInputSubmit,
+    onFilesSelected = props.onFilesSelected,
+    pinMessage = props.pinMessage,
+    onPinMessage = props.onPinMessage,
+    placeholder = props.placeholder;
+  var teamName = agentProfile.teamName,
+    imageUrl = agentProfile.imageUrl;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('sc-chat-window', {
+      'opened': isOpen
+    }, {
+      'closed': !isOpen
+    })
+  }, /*#__PURE__*/React.createElement(Header, {
+    teamName: teamName,
+    imageUrl: imageUrl,
+    onClose: onClose
+  }), pinMessage && /*#__PURE__*/React.createElement(PinMessage, {
+    pinMessage: pinMessage,
+    onPinMessage: onPinMessage
+  }), /*#__PURE__*/React.createElement(MessageList, {
+    messages: messageList,
+    imageUrl: imageUrl
+  }), /*#__PURE__*/React.createElement(UserInput, {
+    onSubmit: onUserInputSubmit,
+    onFilesSelected: onFilesSelected,
+    showEmoji: showEmoji,
+    fileUpload: fileUpload,
+    placeholder: placeholder
+  }));
+}
+ChatWindow.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  agentProfile: PropTypes.object.isRequired,
+  showEmoji: PropTypes.bool,
+  fileUpload: PropTypes.bool,
+  messageList: PropTypes.array,
+  onUserInputSubmit: PropTypes.func.isRequired,
+  onFilesSelected: PropTypes.func,
+  pinMessage: PropTypes.object,
+  onPinMessage: PropTypes.func,
+  placeholder: PropTypes.string
+} : {};
+export default ChatWindow;

package/es/components/Header.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import closeIcon from './../assets/close-icon.png';
+function Header(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sc-header"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "sc-header--img",
+    src: props.imageUrl,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sc-header--team-name"
+  }, " ", props.teamName, " "), /*#__PURE__*/React.createElement("div", {
+    className: "sc-header--close-button",
+    onClick: props.onClose
+  }, /*#__PURE__*/React.createElement("img", {
+    src: closeIcon,
+    alt: ""
+  })));
+}
+export default Header;

package/es/components/Launcher.js

@@ -0,0 +1,96 @@
+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); }
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import ChatWindow from './ChatWindow';
+import launcherIcon from './../assets/logo-no-bg.svg';
+import incomingMessageSound from './../assets/sounds/notification.mp3';
+import launcherIconActive from './../assets/close-icon.png';
+var Launcher = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Launcher, _Component);
+  function Launcher() {
+    var _this;
+    _this = _Component.call(this) || this;
+    _this.state = {
+      launcherIcon: launcherIcon,
+      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(incomingMessageSound);
+    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.createElement("div", {
+      id: "sc-launcher"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classList.join(' '),
+      onClick: this.handleClick.bind(this)
+    }, /*#__PURE__*/React.createElement(MessageCount, {
+      count: this.props.newMessagesCount,
+      isOpen: isOpen
+    }), /*#__PURE__*/React.createElement("img", {
+      className: 'sc-open-icon',
+      src: launcherIconActive
+    }), /*#__PURE__*/React.createElement("img", {
+      className: 'sc-closed-icon',
+      src: launcherIcon
+    })), /*#__PURE__*/React.createElement(ChatWindow, {
+      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;
+}(Component);
+var MessageCount = function MessageCount(props) {
+  if (props.count === 0 || props.isOpen === true) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'sc-new-messages-count'
+  }, props.count);
+};
+Launcher.propTypes = process.env.NODE_ENV !== "production" ? {
+  onMessageWasReceived: PropTypes.func,
+  onMessageWasSent: PropTypes.func,
+  newMessagesCount: PropTypes.number,
+  isOpen: PropTypes.bool,
+  handleClick: PropTypes.func,
+  messageList: PropTypes.arrayOf(PropTypes.object),
+  mute: PropTypes.bool,
+  showEmoji: PropTypes.bool
+} : {};
+Launcher.defaultProps = {
+  newMessagesCount: 0,
+  showEmoji: true
+};
+export default Launcher;

package/es/components/LauncherNew.js

@@ -0,0 +1,130 @@
+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); }
+import { pipe, prop, length, last, equals } from 'ramda';
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ChatWindow from './ChatWindow';
+import launcherIcon from '../assets/logo-no-bg.svg';
+import launcherIconActive from '../assets/close-icon.png';
+import incomingMessageSound from '../assets/sounds/notification.mp3';
+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 = useState(defaultState),
+    state = _useState[0],
+    setState = _useState[1];
+  useEffect(function () {
+    setState(function (state) {
+      return _extends({}, state, {
+        isOpen: isOpen
+      });
+    });
+  }, [isOpen]);
+  useEffect(function () {
+    var prevMessageListLength = pipe(prop('messageList'), length)(state);
+    var massageListLength = length(messageList);
+    var isIncoming = pipe(last, prop('author'), 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(incomingMessageSound);
+    audio.play();
+  }
+  function handleClick() {
+    if (onClick) {
+      onClick();
+    } else {
+      setState(function (state) {
+        return _extends({}, state, {
+          isOpen: !state.isOpen
+        });
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    id: "sc-launcher"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('sc-launcher', {
+      'opened': state.isOpen
+    }),
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(MessageCount, {
+    count: newMessagesCount,
+    isOpen: state.isOpen
+  }), /*#__PURE__*/React.createElement("img", {
+    className: 'sc-open-icon',
+    src: launcherIconActive
+  }), /*#__PURE__*/React.createElement("img", {
+    className: 'sc-closed-icon',
+    src: launcherIcon
+  })), /*#__PURE__*/React.createElement(ChatWindow, {
+    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.createElement("div", {
+    className: "sc-new-messages-count"
+  }, count);
+};
+LauncherNew.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: PropTypes.bool,
+  onClick: PropTypes.func,
+  mute: PropTypes.bool,
+  showEmoji: PropTypes.bool,
+  messageList: PropTypes.arrayOf(PropTypes.object),
+  newMessagesCount: PropTypes.number,
+  onMessageWasSent: PropTypes.func,
+  onMessageWasReceived: PropTypes.func,
+  fileUpload: PropTypes.bool,
+  pinMessage: PropTypes.object,
+  onPinMessage: PropTypes.func,
+  placeholder: PropTypes.string
+} : {};
+LauncherNew.defaultProps = {
+  isOpen: false,
+  mute: false,
+  showEmoji: true,
+  messageList: [],
+  newMessagesCount: 0,
+  fileUpload: true,
+  placeholder: 'Write a reply...'
+};
+export default LauncherNew;

package/es/components/MessageList.js

@@ -0,0 +1,22 @@
+import { prop } from 'ramda';
+import React, { useRef, useEffect } from 'react';
+import Message from './Messages';
+function MessageList(props) {
+  var element = useRef(null);
+  var elementCurrent = prop('current', element);
+  useEffect(function () {
+    if (elementCurrent) {
+      elementCurrent.scrollTop = elementCurrent.scrollHeight;
+    }
+  }, [props]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sc-message-list",
+    ref: element
+  }, props.messages.map(function (message, i) {
+    return /*#__PURE__*/React.createElement(Message, {
+      message: message,
+      key: i
+    });
+  }));
+}
+export default MessageList;

package/es/components/Messages/EmojiMessage.js

@@ -0,0 +1,7 @@
+import React from 'react';
+var EmojiMessage = function EmojiMessage(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sc-message--emoji"
+  }, props.data.emoji);
+};
+export default EmojiMessage;

package/es/components/Messages/FileMessage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import FileIcon from './../icons/FileIcon';
+var FileMessage = function FileMessage(props) {
+  return /*#__PURE__*/React.createElement("a", {
+    className: "sc-message--file",
+    href: props.data.url,
+    download: props.data.fileName
+  }, /*#__PURE__*/React.createElement(FileIcon, null), /*#__PURE__*/React.createElement("p", null, props.data.fileName));
+};
+export default FileMessage;

package/es/components/Messages/TextMessage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+var TextMessage = function TextMessage(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sc-message--text"
+  }, /*#__PURE__*/React.createElement(Linkify, {
+    properties: {
+      target: '_blank'
+    }
+  }, props.data.text));
+};
+export default TextMessage;

package/es/components/Messages/index.js

@@ -0,0 +1,40 @@
+import { prop, equals } from 'ramda';
+import React from 'react';
+import classNames from 'classnames';
+import TextMessage from './TextMessage';
+import EmojiMessage from './EmojiMessage';
+import FileMessage from './FileMessage';
+import chatIconUrl from './../../assets/chat-icon.svg';
+function Message(_ref) {
+  var message = _ref.message;
+  var type = prop('type', message);
+  var author = prop('author', message);
+  var me = equals(author, 'me');
+  function renderMessageOfType(type) {
+    switch (type) {
+      case 'text':
+        return /*#__PURE__*/React.createElement(TextMessage, message);
+      case 'emoji':
+        return /*#__PURE__*/React.createElement(EmojiMessage, message);
+      case 'file':
+        return /*#__PURE__*/React.createElement(FileMessage, message);
+      default:
+        console.error("Attempting to load message with unsupported file type '" + type + "'");
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sc-message"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('sc-message--content', {
+      'sent': me
+    }, {
+      'received': !me
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sc-message--avatar",
+    style: {
+      backgroundImage: "url(" + chatIconUrl + ")"
+    }
+  }), renderMessageOfType(type)));
+}
+export default Message;