@pioneer-platform/pioneer 1.0.5

package/es/messageTypes.js

@@ -0,0 +1,12 @@
+var MESSAGE_TYPES = {
+  CLIENT: {
+    NEW_VISITOR: 'client.new_visitor',
+    MESSAGE: 'client.message',
+    RETURNING_VISITOR: 'client.returning_visitor'
+  },
+  BROKER: {
+    VISITOR_ID: 'broker.visitor_id',
+    MESSAGE: 'broker.message'
+  }
+};
+module.exports = MESSAGE_TYPES;

package/es/styles/chat-window.css

@@ -0,0 +1,55 @@
+.sc-chat-window {
+  width: 370px;
+  height: calc(100% - 120px);
+  max-height: 590px;
+  position: fixed;
+  right: 25px;
+  bottom: 10px;
+  box-sizing: border-box;
+  box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: 0.3s ease-in-out;
+  border-radius: 10px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.sc-chat-window.closed {
+  opacity: 0;
+  visibility: hidden;
+  bottom: 30px;
+}
+
+.sc-message-list {
+  height: 80%;
+  overflow-y: auto;
+  background-color: white;
+  background-size: 100%;
+  padding: 40px 0px;
+}
+
+.sc-message--me {
+  text-align: right;
+}
+.sc-message--them {
+  text-align: left;
+}
+
+@media (max-width: 450px) {
+  .sc-chat-window {
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    right: 0px;
+    bottom: 0px;
+    border-radius: 0px;
+  }
+  .sc-chat-window {
+    transition: 0.1s ease-in-out;
+  }
+  .sc-chat-window.closed {
+    bottom: 0px;
+  }
+}

package/es/styles/emojiPicker.css

@@ -0,0 +1,38 @@
+.sc-emoji-picker {
+  overflow: auto;
+  width: 100%;
+  max-height: calc(100% - 40px);
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+.sc-emoji-picker--category {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.sc-emoji-picker--category-title {
+  min-width: 100%;
+  color: #b8c3ca;
+  font-weight: 200;
+  font-size: 13px;
+  margin: 5px;
+  letter-spacing: 1px;
+}
+
+.sc-emoji-picker--emoji {
+  margin: 5px;
+  width: 30px;
+  line-height: 30px;
+  text-align: center;
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: 28px;
+  transition: transform 60ms ease-out,-webkit-transform 60ms ease-out;
+  transition-delay: 60ms;
+}
+
+.sc-emoji-picker--emoji:hover {
+  transform: scale(1.4);
+}

package/es/styles/header.css

@@ -0,0 +1,53 @@
+.sc-header {
+  background: #f39314;
+  min-height: 75px;
+  border-top-left-radius: 9px;
+  border-top-right-radius: 9px;
+  color: white;
+  padding: 10px;
+  box-shadow: 0 1px 4px rgba(0,0,0,.2);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.sc-header--img {
+  border-radius: 50%;
+  align-self: center;
+  padding: 10px;
+}
+
+.sc-header--team-name {
+  align-self: center;
+  padding: 10px;
+  flex: 1;
+  user-select: none;
+  border-radius: 5px;
+}
+
+.sc-header--close-button {
+  width: 40px;
+  align-self: center;
+  height: 40px;
+  margin-right: 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.sc-header--close-button:hover {
+  background: #ed8701;
+}
+
+.sc-header--close-button img {
+  width: 100%;
+  height: 100%;
+  padding: 13px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 450px) {
+  .sc-header {
+    border-radius: 0px;
+  }
+}

package/es/styles/index.js

@@ -0,0 +1,8 @@
+import './emojiPicker.css';
+import './chat-window.css';
+import './launcher.css';
+import './header.css';
+import './message.css';
+import './user-input.css';
+import './popup-window.css';
+import './pin-message.css';

package/es/styles/launcher.css

@@ -0,0 +1,87 @@
+.sc-launcher {
+  width: 60px;
+  height: 60px;
+  background-color: #f39314;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: fixed;
+  right: 25px;
+  bottom: 25px;
+  border-radius: 50%;
+  box-shadow: none;
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.sc-launcher:before {
+  content: '';
+  position: relative;
+  display: block;
+  width: 60px;
+  height: 60px;  
+  border-radius: 50%;
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.sc-launcher.opened {
+  visibility: hidden;
+}
+
+.sc-launcher .sc-open-icon,
+.sc-launcher .sc-closed-icon {
+  width: 60px;
+  height: 60px;
+  position: fixed;
+  right: 25px;
+  bottom: 25px;
+  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
+}
+
+.sc-launcher .sc-closed-icon {
+  transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
+  width: 60px;
+  height: 60px;
+
+}
+
+.sc-launcher .sc-open-icon {
+  padding: 20px;
+  box-sizing: border-box;
+  opacity: 0;
+}
+
+.sc-launcher.opened .sc-open-icon {
+  transform: rotate(-90deg);
+  opacity: 1;
+}
+
+.sc-launcher.opened .sc-closed-icon {
+  transform: rotate(-90deg);
+  opacity: 0;
+}
+
+.sc-launcher.opened:before {
+  box-shadow: 0px 0px 400px 250px rgba(148, 149, 150, 0.2);
+}
+
+.sc-launcher:hover {
+  box-shadow: 0 0px 27px 1.5px rgba(0,0,0,0.2);
+}
+
+.sc-new-messages-count {
+  position: absolute;
+  top: -3px;
+  left: 41px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 50%;
+	width: 22px;
+  height: 22px;
+  background: #ff4646;
+  color: white;
+  text-align: center;
+  margin: auto;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3);
+}

package/es/styles/message.css

@@ -0,0 +1,88 @@
+.sc-message {
+  width: 300px;
+  margin: auto;
+  padding-bottom: 10px;
+  display: flex;
+}
+
+.sc-message--content {
+  width: 100%;
+  display: flex;
+}
+
+.sc-message--content.sent {
+  justify-content: flex-end;
+}
+
+.sc-message--content.sent .sc-message--avatar {
+  display: none;
+}
+
+.sc-message--avatar {
+  background-image: url(https://d13yacurqjgara.cloudfront.net/assets/avatar-default-aa2eab7684294781f93bc99ad394a0eb3249c5768c21390163c9f55ea8ef83a4.gif);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center;
+  min-width: 30px;
+  min-height: 30px;
+  border-radius: 50%;
+  align-self: center;
+  margin-right: 15px;
+}
+
+.sc-message--text {
+  padding: 17px 20px;
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  -webkit-font-smoothing: subpixel-antialiased;
+  word-wrap: break-word;
+  width: calc(100% - 90px);
+}
+
+.sc-message--content.sent .sc-message--text {
+  color: white;
+  background-color: #f39314;
+  max-width: calc(100% - 120px);
+  word-wrap: break-word;
+}
+
+.sc-message--content.received .sc-message--text {
+  color: #263238;
+  background-color: #f4f7f9;
+  margin-right: 40px;
+}
+
+.sc-message--emoji {
+  font-size: 40px;
+}
+
+.sc-message--file {
+  background: white;
+  border: solid 1px #CCCDD1;
+  padding: 15px 20px;
+  border-radius: 5px;
+  display: flex;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.sc-message--file p {
+  margin: 0px 0px 0px 10px;
+  color: rgba(86, 88, 103, 0.6);
+}
+
+.sc-message--file .sc-user-input--file-icon:hover path {
+  fill: rgba(86, 88, 103, 0.3);
+}
+
+@media (max-width: 450px) {
+  .sc-message {
+    width: 80%;
+  }
+}

package/es/styles/pin-message.css

@@ -0,0 +1,24 @@
+.sc-pin--message {
+  display: flex;
+  padding: 5px;
+  background-color: #f4f7f9;
+  cursor: pointer;
+}
+
+.sc-pin--message--img {
+  border-radius: 15px;
+  align-self: center;
+  width: 45px;
+  height: 45px;
+  padding: 5px;
+}
+
+.sc-pin--message--desc {
+  padding: 10px;
+  font-size: 12px;
+}
+
+.sc-pin--message--title {
+  font-size: 16px;
+  margin-bottom: 2px;
+}

package/es/styles/popup-window.css

@@ -0,0 +1,61 @@
+.sc-popup-window {
+  position: relative;
+  width: 150px;
+}
+
+.sc-popup-window--cointainer {
+  position: absolute;
+  bottom: 20px;
+  right: 100px;
+  width: 330px;
+  max-height: 260px;
+  height: 260px;
+  box-shadow: 0px 7px 40px 2px rgba(148, 149, 150, 0.3);
+  background: white;
+  border-radius: 10px;
+  outline: none;
+  transition: 0.2s ease-in-out;
+  z-index: 1;
+  padding: 0px 5px 5px 5px;
+  box-sizing: border-box;
+}
+
+.sc-popup-window--cointainer.closed {
+  opacity: 0;
+  visibility: hidden;
+  bottom: 14px;
+}
+
+.sc-popup-window--cointainer:after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: white;
+  position: absolute;
+  z-index: -1;
+  bottom: -6px;
+  right: 28px;
+  transform: rotate(45deg);
+  border-radius: 2px;
+}
+
+.sc-popup-window--search {
+  width: 290px;
+  box-sizing: border-box;
+  margin: auto;
+  display: block;
+  border-width: 0px 0px 1px 0px;
+  color: #565867;
+  padding-left: 25px;
+  height: 40px;
+  font-size: 14px;
+  background-image: url(https://js.intercomcdn.com/images/search@2x.32fca88e.png);
+  background-size: 16px 16px;
+  background-repeat: no-repeat;
+  background-position: 0 12px;
+  outline: none;
+}
+
+.sc-popup-window--search::placeholder {
+  color: #C1C7CD;
+}

package/es/styles/user-input.css

@@ -0,0 +1,140 @@
+.sc-user-input {
+  min-height: 55px;
+  margin: 0px;
+  position: relative;
+  bottom: 0;
+  display: flex;
+  background-color: #f4f7f9;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  transition: background-color .2s ease,box-shadow .2s ease;
+}
+
+
+.sc-user-input--text {
+  width: 300px;
+  resize: none;
+  border: none;
+  outline: none;
+  border-bottom-left-radius: 10px;
+  box-sizing: border-box;
+  padding: 18px;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.33;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: #565867;
+  -webkit-font-smoothing: antialiased;
+  max-height: 200px;
+  overflow: scroll;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.sc-user-input--text:empty:before {
+  content: attr(placeholder);
+  display: block; /* For Firefox */
+  color: rgba(86, 88, 103, 0.3);
+  outline: none;
+}
+
+.sc-user-input--buttons {
+  width: 100px;
+  position: absolute;
+  right: 10px;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.sc-user-input--button:first-of-type {
+  width: 40px;
+}
+
+.sc-user-input--button {
+  width: 30px;
+  height: 55px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.sc-user-input--button button {
+  cursor: pointer;
+}
+
+.sc-user-input--buttons input[type="file"] {
+  display: none;
+}
+
+.sc-user-input--picker-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.sc-user-input.active {
+  box-shadow: none;
+  background-color: white;
+  box-shadow: 0px -5px 20px 0px rgba(150, 165, 190, 0.2);
+}
+
+.sc-user-input--file-icon,
+.sc-user-input--send-icon {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  align-self: center;
+  outline: none;
+}
+
+.sc-user-input--file-icon path,
+.sc-user-input--send-icon path {
+  fill: rgba(86, 88, 103, 0.3);
+}
+
+.sc-user-input--file-icon:hover path,
+.sc-user-input--send-icon:hover path {
+  fill: rgba(86, 88, 103, 1);
+}
+
+.sc-user-input--emoji-icon-wrapper,
+.sc-user-input--send-icon-wrapper,
+.sc-user-input--file-icon-wrapper {
+  background: none;
+  border: none;
+  padding: 2px;
+  margin: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.sc-user-input--send-icon-wrapper,
+.sc-user-input--file-icon-wrapper {
+  flex-direction: row;
+}
+
+.sc-user-input--emoji-icon-wrapper:focus {
+  outline: none;
+}
+
+.sc-user-input--emoji-icon {
+  height: 18px;
+  cursor: pointer;
+  align-self: center;
+}
+
+.sc-user-input--emoji-icon path, .sc-user-input--emoji-icon circle {
+  fill: rgba(86, 88, 103, 0.3);
+}
+
+.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon path,
+.sc-user-input--emoji-icon-wrapper:focus .sc-user-input--emoji-icon circle,
+.sc-user-input--emoji-icon.active path,
+.sc-user-input--emoji-icon.active circle,
+.sc-user-input--emoji-icon:hover path,
+.sc-user-input--emoji-icon:hover circle {
+  fill: rgba(86, 88, 103, 1);
+}

package/lib/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/lib/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/lib/components/ChatWindow.js

@@ -0,0 +1,66 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _MessageList = _interopRequireDefault(require("./MessageList"));
+var _UserInput = _interopRequireDefault(require("./UserInput"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _PinMessage = _interopRequireDefault(require("./PinMessage"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+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["default"].createElement("div", {
+    className: (0, _classnames["default"])('sc-chat-window', {
+      'opened': isOpen
+    }, {
+      'closed': !isOpen
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    teamName: teamName,
+    imageUrl: imageUrl,
+    onClose: onClose
+  }), pinMessage && /*#__PURE__*/_react["default"].createElement(_PinMessage["default"], {
+    pinMessage: pinMessage,
+    onPinMessage: onPinMessage
+  }), /*#__PURE__*/_react["default"].createElement(_MessageList["default"], {
+    messages: messageList,
+    imageUrl: imageUrl
+  }), /*#__PURE__*/_react["default"].createElement(_UserInput["default"], {
+    onSubmit: onUserInputSubmit,
+    onFilesSelected: onFilesSelected,
+    showEmoji: showEmoji,
+    fileUpload: fileUpload,
+    placeholder: placeholder
+  }));
+}
+ChatWindow.propTypes = process.env.NODE_ENV !== "production" ? {
+  isOpen: _propTypes["default"].bool.isRequired,
+  onClose: _propTypes["default"].func.isRequired,
+  agentProfile: _propTypes["default"].object.isRequired,
+  showEmoji: _propTypes["default"].bool,
+  fileUpload: _propTypes["default"].bool,
+  messageList: _propTypes["default"].array,
+  onUserInputSubmit: _propTypes["default"].func.isRequired,
+  onFilesSelected: _propTypes["default"].func,
+  pinMessage: _propTypes["default"].object,
+  onPinMessage: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string
+} : {};
+var _default = ChatWindow;
+exports["default"] = _default;
+module.exports = exports.default;

package/lib/components/Header.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _closeIcon = _interopRequireDefault(require("./../assets/close-icon.png"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function Header(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-header"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    className: "sc-header--img",
+    src: props.imageUrl,
+    alt: ""
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-header--team-name"
+  }, " ", props.teamName, " "), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sc-header--close-button",
+    onClick: props.onClose
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _closeIcon["default"],
+    alt: ""
+  })));
+}
+var _default = Header;
+exports["default"] = _default;
+module.exports = exports.default;