@subiz/widget-v4 4.1.117 → 4.1.119

package/compiled_src/chatbox/Events.js

@@ -26,9 +26,64 @@ class Events extends _common.Com {
     }, 500);
     this.checkAndSeen();
   }
+  componentDidMount() {
+    this.setState({
+      isShowTyping: false,
+      typing_event: {}
+    });
+    this.props.store.onConvoEvent(this, ev => {
+      if (_index.default.convoOfEv(ev) !== this.props.cid) return;
+      if (_index.default.get(ev, 'by.type') === 'user') return;
+      let oldby = _index.default.get(this.state.typing_event, 'by.id');
+      if (oldby && _index.default.get(ev, 'by.id') !== oldby) return;
+      if (_index.default.get(ev, 'type') === 'message_sent') {
+        if (this.timer) _index.default.clearTimeout(this.timer);
+        this.timer = null;
+        this.setState({
+          isShowTyping: false
+        });
+        return;
+      }
+      if (_index.default.get(ev, 'type') !== 'conversation_typing') return;
+      let ag = this.props.store.matchAgent(_index.default.get(ev, 'by.id')) || {};
+      if (ag.type == 'agent' && !_index.default.get(this.props.plugin, 'chatbox.show_agent_typing')) return;
+      this.setState({
+        typing_event: ev,
+        isShowTyping: true
+      });
+      if (this.timer) _index.default.clearTimeout(this.timer);
+      this.timer = _index.default.setTimeout(() => {
+        if (_index.default.convoOfEv(ev) !== this.props.cid) return;
+        this.timer = null;
+        this.setState({
+          isShowTyping: false
+        });
+      }, 5000);
+    });
+  }
   componentDidUpdate(prevProps) {
     if (prevProps.cid !== this.props.cid) this.loadConvo();
   }
+  ShowTyping() {
+    this.setState({
+      isShowTyping: true,
+      typing_event: {
+        id: 'evzz' + _index.default.Date.now(),
+        created: _index.default.Date.now(),
+        by: {
+          type: 'agent'
+        },
+        type: 'conversation_typing'
+      }
+    });
+    if (this.timer) _index.default.clearTimeout(this.timer);
+    this.timer = _index.default.setTimeout(() => {
+      this.timer = null;
+      this.setState({
+        isShowTyping: false
+      });
+    }, 5000);
+  }
   render() {
     if (this.state.error) return this.renderError();
     let events = _index.default.map(this.props.store.listEvents(this.props.cid));
@@ -51,18 +106,36 @@ class Events extends _common.Com {
     events = _index.default.map(events, ev => ({
       ev: ev
     }));
-    processEvents(convo, events);
-    let lastAgentMessageSentId = '';
-    for (let i = events.length - 1; i >= 0; i--) {
-      let ev = _index.default.get(events, [i, 'ev']) || {};
-      let bytype = _index.default.get(ev, 'by.type');
-      if (bytype !== 'user' && ev.type === 'message_sent') {
-        lastAgentMessageSentId = ev.id;
-        break;
-      }
+    if (this.state.isShowTyping) {
+      let ev = this.state.typing_event || {
+        id: 'evzz' + _index.default.Date.now(),
+        created: _index.default.Date.now(),
+        by: {
+          type: 'agent'
+        }
+      };
+      let fakeev = {
+        is_typing: true,
+        id: ev.id,
+        ev: {
+          id: ev.id,
+          created: ev.created,
+          by: ev.by,
+          type: 'message_sent',
+          data: {
+            message: {
+              text: '...',
+              conversation_id: this.props.cid
+            }
+          }
+        }
+      };
+      console.log('FA', fakeev);
+      events.push(fakeev);
     }
+    processEvents(convo, events);
     let $events = _index.default.map(events, ev => {
-      let isLast = ev.ev.id === lastAgentMessageSentId;
+      let isLast = ev.ev.id === _index.default.get(convo, 'last_message_sent.id');
       return (0, _preact.h)(_Event.default, {
         isLast: isLast,
         chatbox: this.props.chatbox,
@@ -78,7 +151,7 @@ class Events extends _common.Com {
     });
     let $loading = null;
     let style = 'opacity: 1 !important';
-    if (this.state.loading || this.props.creating) {
+    if (this.props.creating) {
       $loading = (0, _preact.h)(_spinner.default, {
         static: true,
         mode: _index.default.get(this.props.chatbox, 'primary_color', 'dark'),
@@ -87,6 +160,17 @@ class Events extends _common.Com {
       });
       style = 'opacity: 0 !important';
     }
+    if (this.state.loading) {
+      if (_index.default.Date.now() - this.state.loading > 500) {
+        $loading = (0, _preact.h)(_spinner.default, {
+          static: true,
+          mode: _index.default.get(this.props.chatbox, 'primary_color', 'dark'),
+          size: "120",
+          center: true
+        });
+        style = 'opacity: 0 !important';
+      }
+    }
     return (0, _preact.h)(_preact.Fragment, null, $loading, (0, _preact.h)("div", {
       style: style,
       ref: ref => this.refBody = ref,
@@ -154,10 +238,16 @@ class Events extends _common.Com {
     if (!this.props.cid) return;
     this.lastContentOffsetY = 0;
     this.setState({
-      loading: true
+      loading: false
     });
     let events = this.props.store.listEvents(this.props.cid);
     if (_index.default.size(events) === 0) {
+      this.setState({
+        loading: _index.default.Date.now()
+      });
+      _index.default.setTimeout(() => {
+        this.forceUpdate();
+      }, 800);
       let cid = this.props.cid;
       let {
         error
@@ -173,17 +263,11 @@ class Events extends _common.Com {
         return;
       }
     }
-    this.setState({
-      loading: true
-    });
     this.props.store.fetchMoreEvents(this.props.cid);
     this.setState({
       error: false
     });
     this.scrollToBottom();
-    _index.default.setTimeout(() => this.setState({
-      loading: false
-    }), 50);
   }
   isBottom() {
     let $container = this.refBody;
@@ -198,7 +282,7 @@ class Events extends _common.Com {
     _index.default.setTimeout(() => {
       const $div = this.refBody;
       if ($div) $div.scrollTop = $div.scrollHeight;
-    }, 200);
+    }, 100);
     if (this.props.isShow) {
       if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
         this.props.store.seenConvo(this.props.cid);
@@ -210,14 +294,19 @@ exports.default = Events;
 function processEvents(convo, events) {
   events = events.filter(event => visibleEvent(event.ev));
   if (events.length < 1) return;
+  var lastAgentEvent;
   for (var i = 1; i < events.length; i++) {
     let curEvent = events[i];
     let lastEvent = events[i - 1];
+    if (_index.default.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
+      lastAgentEvent = curEvent;
+    }
     if (visibleEvent(curEvent.ev)) {
       let elapsedSec = _index.default.unixSec(curEvent.ev.created) - _index.default.unixSec(lastEvent.ev.created);
       if (elapsedSec > 120) curEvent.show_time = true;
     }
   }
+  if (lastAgentEvent) lastAgentEvent.show_time = true;
   for (var i = 0; i < events.length; i++) {
     let curEvent = events[i];
     if (_index.default.get(curEvent, 'ev.type') === 'message_sent') {

package/compiled_src/chatbox/Header.js

@@ -49,11 +49,12 @@ class Header extends _common.Com {
     return (0, _preact.h)("div", {
       class: cls,
       style: style
-    }, $back, (0, _preact.h)(_AgentsAvatar.default, {
+    }, $back, (0, _preact.h)("div", {
+      class: "mr-2"
+    }), (0, _preact.h)(_AgentsAvatar.default, {
       plugin: this.props.plugin,
       store: this.props.store,
-      mode: "secondary",
-      agent_ids: agentIdsJoined
+      mode: "secondary"
     }), (0, _preact.h)("div", {
       class: "widget-header--title-container"
     }, (0, _preact.h)("div", {
@@ -188,7 +189,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
     let accSetting = this.props.plugin.chatbox || {};
     if (accSetting.hide_close_button) return null;
     return (0, _preact.h)("div", {
-      class: "widget-header--button widget-header--button-close",
+      class: "widget-header--button-close",
       "data-tooltip": this.props.t('close'),
       "data-tooltip-position": "bottom",
       onClick: e => this.onCloseClick(e)

package/compiled_src/chatbox/InfoMessage.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _index = _interopRequireDefault(require("../util/index.js"));
-var _time = _interopRequireDefault(require("./time.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,16 +17,6 @@ function getRateLang(rating) {
 class InfoMessage extends _common.Com {
   render() {
     let ev = this.props.ev.ev;
-    var $time = null;
-    if (this.props.ev.show_time) {
-      $time = (0, _preact.h)("div", {
-        class: "convo-event-time"
-      }, (0, _preact.h)(_time.default, {
-        time: ev.created,
-        t: this.props.t
-      }));
-    }
-    if (this.props.store.isAIDevMode()) $time = null;
     if (ev.type === 'conversation_rated') {
       var rating = _index.default.get(ev, 'data.conversation.ratings.0', {
         no_rating: true,
@@ -36,14 +25,14 @@ class InfoMessage extends _common.Com {
       if (rating.no_rating) return null;
       return (0, _preact.h)("div", {
         class: "convo-event"
-      }, $time, (0, _preact.h)("div", {
+      }, (0, _preact.h)("div", {
         class: "info-message"
       }, this.props.t('rated_as') + ' ' + this.props.t(getRateLang(rating.rating)).toLowerCase()));
     }
     if (ev.type === 'conversation_state_updated' && _index.default.get(ev, 'data.conversation.state') === 'ended') {
       return (0, _preact.h)("div", {
         class: "convo-event"
-      }, $time, (0, _preact.h)("div", {
+      }, (0, _preact.h)("div", {
         class: "info-message"
       }, this.props.t('conversation_ended')));
     }

package/compiled_src/chatbox/MessageInput.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
+var _spinner = _interopRequireDefault(require("./spinner.js"));
 var _Emoji = _interopRequireDefault(require("./Emoji.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -43,7 +44,7 @@ class MessageInput extends _common.Com {
     $input.blur();
   }
   render() {
-    var buttons = (0, _preact.h)("div", {
+    var $buttons = (0, _preact.h)("div", {
       class: "d-flex flex-row align-self-end"
     }, this.renderEmoji(), (0, _preact.h)("div", {
       "data-tooltip-poasition": "top-left",
@@ -52,7 +53,7 @@ class MessageInput extends _common.Com {
     }));
     var msg = _index.default.trim(this.state.msgValue);
     if (msg.length > 0) {
-      buttons = (0, _preact.h)("div", {
+      $buttons = (0, _preact.h)("div", {
         class: "d-flex flex-row align-self-end"
       }, this.renderEmoji(), (0, _preact.h)("div", {
         "data-tooltip-position": "top-left",
@@ -60,9 +61,16 @@ class MessageInput extends _common.Com {
         onClick: () => this.submitMessage()
       }));
     }
+    if (this.props.is_loading) {
+      $buttons = (0, _preact.h)("div", {
+        class: "d-flex flex-row align-self-end"
+      }, (0, _preact.h)(_spinner.default, {
+        size: "32"
+      }));
+    }
     var containercls = '';
     var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled;
-    if (disabled) containercls = 'message-input--disabled';
+    if (disabled || this.props.is_loading) containercls = 'message-input--disabled';
     return (0, _preact.h)("div", {
       class: `message-input ${containercls}`,
       onClick: e => {
@@ -78,7 +86,7 @@ class MessageInput extends _common.Com {
       disabled: disabled,
       class: "message-input--input",
       maxlength: "1024",
-      placeholder: this.props.t('message_input_help'),
+      placeholder: this.props.t('message_input_help').substr(0, 25),
       ref: this.refMessageInput,
       rows: "1",
       value: this.state.msgValue,
@@ -86,7 +94,7 @@ class MessageInput extends _common.Com {
       onPaste: e => this.pasteImage(e),
       "data-emojiable": "true",
       onKeydown: e => this.onKeydown(e)
-    }), buttons);
+    }), $buttons);
   }
   hasUnfinishRequiredFormOrLock() {
     let convo = this.props.store.matchConvo(this.props.cid);
@@ -298,15 +306,17 @@ class MessageInput extends _common.Com {
     msg = msg || _index.default.trim(this.state.msgValue) || '';
     if (!msg) return;
     if (this.props.disabled) return;
+    if (this.props.onSend) {
+      await this.props.onSend({
+        text: msg,
+        format: 'plaintext'
+      });
+    }
     this.setState({
       openEmoji: false,
       msgValue: ''
     });
     this.resizeInput();
-    this.props.onSend && this.props.onSend({
-      text: msg,
-      format: 'plaintext'
-    });
   }
   sendTyping() {
     if (!this.props.cid) return;

package/compiled_src/chatbox/TextMessage.js

@@ -9,8 +9,17 @@ var _block = _interopRequireDefault(require("./block.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 var _Emoji = _interopRequireDefault(require("./Emoji.js"));
+var _time = _interopRequireDefault(require("./time.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class TextMessage extends _common.Com {
+  renderTime() {
+    if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
+    return (0, _preact.h)("div", null, (0, _preact.h)(_time.default, {
+      class: "inline-time",
+      time: _index.default.get(this.props.ev, 'created', _index.default.Date.now()),
+      t: this.props.t
+    }));
+  }
   render() {
     var format = _index.default.get(this.props.ev, 'data.message.format', 'plaintext');
     let block = _index.default.get(this.props.ev, 'data.message.block');
@@ -52,7 +61,7 @@ class TextMessage extends _common.Com {
     if (byType === 'agent') return (0, _preact.h)("div", {
       class: "message-agent message-text--agent",
       title: t
-    }, tags);
+    }, tags, this.renderTime());
     return (0, _preact.h)("div", {
       class: "message-user message-text--user",
       title: t
@@ -70,7 +79,7 @@ class TextMessage extends _common.Com {
       }, (0, _preact.h)(_block.default, {
         block: block,
         onLink: this.props.onLink
-      }));
+      }), this.renderTime());
     }
     return (0, _preact.h)("div", {
       class: "message-user message-text--user",

package/compiled_src/chatbox/Widget.js

@@ -11,10 +11,8 @@ var _AgentsAvatar = _interopRequireDefault(require("./AgentsAvatar.js"));
 var _Header = _interopRequireDefault(require("./Header.js"));
 var _MessageInput = _interopRequireDefault(require("./MessageInput.js"));
 var _Events = _interopRequireDefault(require("./Events.js"));
-var _Typing = _interopRequireDefault(require("./Typing.js"));
 var _Rating = _interopRequireDefault(require("./Rating.js"));
 var _ListField = _interopRequireDefault(require("./ListField.js"));
-var _spinner = _interopRequireDefault(require("./spinner.js"));
 var _time = _interopRequireDefault(require("./time.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
@@ -73,26 +71,33 @@ class Widget extends _common.Com {
           initial_by: this.props.store.matchUser().id
         });
         if (_creating != this._creating) return;
-        if (error) {}
+        if (error) {
+          this.setState({
+            creating: false
+          });
+          return;
+        }
         await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
           message
         });
         if (_creating != this._creating) return;
-        this.setState({
-          creating: false
-        });
         this.props.onGo({
           view: 'chat',
           cid: convo.id
         });
+        this.setState({
+          creating: false
+        });
         return;
       }
-      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
-        message
-      });
-      this.setState({
-        creating: false
-      });
+      _index.default.setTimeout(async () => {
+        await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+          message
+        });
+        this.setState({
+          creating: false
+        });
+      }, 1);
     });
     _defineProperty(this, "onLink", (e, url) => {
       if (!url) return e.preventDefault();
@@ -151,14 +156,14 @@ class Widget extends _common.Com {
         quickReplyMessage: {}
       });
       _index.default.setTimeout(() => {
-        this.events && this.events.focus();
+        this.$events && this.$events.focus();
         if (!this.props.store.isMobile()) this.focusInput();
       }, 100);
       this.updateFormDataFields();
     }
   }
   ShowTyping() {
-    this.refTyping.current && this.refTyping.current.ShowTyping();
+    this.$events && this.$events.ShowTyping();
   }
   shouldShowForm() {
     let form;
@@ -783,6 +788,7 @@ class Widget extends _common.Com {
       ref: this.msgInput,
       cid: this.props.cid,
       onChange: this.onChangeMessageInput,
+      is_loading: this.state.creating,
       onSend: this.sendMessage,
       t: this.props.t
     });
@@ -806,18 +812,13 @@ class Widget extends _common.Com {
       store: this.props.store,
       chatbox: this.props.plugin.chatbox || {},
       onFormSubmit: e => this.onEventFormSubmit(e),
-      ref: ref => this.events = ref,
+      ref: ref => this.$events = ref,
       cid: this.props.cid,
       creating: this.creating,
       onSend: e => this.sendMessage(e),
       onPostback: e => this.createPostback(e),
-      t: this.props.t
-    }), (0, _preact.h)(_Typing.default, {
-      store: this.props.store,
-      cid: this.props.cid,
       t: this.props.t,
-      plugin: this.props.plugin,
-      ref: this.refTyping
+      plugin: this.props.plugin
     })), (0, _preact.h)(_Rating.default, {
       forceView: this.props.view,
       plugin: this.props.plugin,

package/compiled_src/chatbox/time.js

@@ -49,6 +49,7 @@ class Time extends _common.Com {
     }
     let title = new Date(this.props.time).toLocaleString(locale);
     return (0, _preact.h)("span", {
+      class: this.props.class,
       style: this.props.style,
       title: title
     }, this.state.t);

package/compiled_src/util/common.js

@@ -29,6 +29,7 @@ exports.getDayName = getDayName;
 exports.getMs = getMs;
 exports.getUrlParameter = getUrlParameter;
 exports.getUserAttr = getUserAttr;
+exports.hslToRgb = hslToRgb;
 exports.includes = includes;
 exports.isConvoSeen = isConvoSeen;
 exports.isEmail = isEmail;
@@ -54,6 +55,7 @@ exports.replaceAll = replaceAll;
 exports.replaceCssVariable = replaceCssVariable;
 exports.replaceCssVariablePlugin = replaceCssVariablePlugin;
 exports.requestAnimationFrame = void 0;
+exports.rgbToHsl = rgbToHsl;
 exports.sameDay = sameDay;
 exports.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded;
 exports.setCss = setCss;
@@ -72,6 +74,55 @@ exports.unicodeToAscii = unicodeToAscii;
 exports.unixSec = unixSec;
 exports.usersOfConvo = usersOfConvo;
 var op = require('./op.js');
+function rgbToHsl(r, g, b) {
+  ;
+  r /= 255, g /= 255, b /= 255;
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l];
+}
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  if (s == 0) {
+    r = g = b = l;
+  } else {
+    function hue2rgb(p, q, t) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    }
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return [r * 255, g * 255, b * 255];
+}
 function extractEmojis(text) {
   var out = [];
   for (var i = 0; i < text.length; i++) {
@@ -201,6 +252,8 @@ function parseJSON(str) {
 var f = document.createElement('iframe');
 f.style.display = 'none';
 document.documentElement.appendChild(f);
+const tempElement = f.contentDocument.createElement('div');
+f.contentDocument.body.appendChild(tempElement);
 var stringify = exports.stringify = f.contentWindow.JSON.stringify;
 var parse = f.contentWindow.JSON.parse;
 var Date = exports.Date = f.contentWindow.Date;
@@ -508,6 +561,16 @@ function replaceCssVariablePlugin(css, setting) {
   tokens = tokenize(tokens, "'@spacer0'");
   tokens = tokenize(tokens, "'@spacer2'");
   tokens = tokenize(tokens, "'@spacer3'");
+  var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
+  let parseColor = parseCssColor(primary_color);
+  if (!parseColor) parseColor = {
+    red: 238,
+    blue: 238,
+    green: 238
+  };
+  let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
+  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
     var item = tokens[i];
@@ -524,6 +587,7 @@ function replaceCssVariablePlugin(css, setting) {
 function replaceCssVariable(css, setting) {
   var tokens = [css];
   tokens = tokenize(tokens, "'@primary_color'");
+  tokens = tokenize(tokens, "'@primary_color_faded'");
   tokens = tokenize(tokens, '@esc-primary-color-esc');
   tokens = tokenize(tokens, "'@secondary_color'");
   tokens = tokenize(tokens, "'@background'");
@@ -548,6 +612,16 @@ function replaceCssVariable(css, setting) {
   tokens = tokenize(tokens, "'@z_index_3'");
   tokens = tokenize(tokens, "'@z_index_4'");
   tokens = tokenize(tokens, "'@z_index_5'");
+  var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
+  let parseColor = parseCssColor(primary_color);
+  if (!parseColor) parseColor = {
+    red: 238,
+    blue: 238,
+    green: 238
+  };
+  let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
+  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
     var item = tokens[i];
@@ -1175,6 +1249,21 @@ function _blockToText(block) {
   });
   return out;
 }
+function parseCssColor(color) {
+  if (!color || !color.split) return '';
+  tempElement.style.color = color;
+  const computedColor = f.contentWindow.getComputedStyle(tempElement).color;
+  const match = computedColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (match) {
+    return {
+      red: parseInt(match[1]),
+      green: parseInt(match[2]),
+      blue: parseInt(match[3])
+    };
+  } else {
+    return null;
+  }
+}
 let emojis = ['like', 'unlike', 'wink', 'tongue-out', 'tired', 'surprised', 'smiling', 'sleepy', 'sad', 'neutral', 'heart-eyes', 'grinning', 'crying', 'confused', 'angry', 'cry', 'heart_eyes', 'neutral_face', 'emoji--disappointed', 'smile', 'open_mouth', 'tired_face', 'stuck_out_tongue', 'moyai', 'thumbsdown', 'dislike', 'thumbsup', 'ok_hand', 'octopus', 'pig2', 'wave', 'mouse', 'mouse2', 'rat'];
 emojis = map(emojis, e => ':' + e + ':');
 function absLink(url) {