@subiz/widget-v4 4.0.53 → 4.0.58

package/dist/74.js

@@ -0,0 +1,4734 @@
+(self["webpackChunk_subiz_widget_v4"] = self["webpackChunk_subiz_widget_v4"] || []).push([[74],{
+
+/***/ 1074:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ Main)
+});
+
+// EXTERNAL MODULE: ./src/util/index.js + 2 modules
+var util = __webpack_require__(819);
+// EXTERNAL MODULE: ./src/common.js
+var common = __webpack_require__(2493);
+// EXTERNAL MODULE: ./node_modules/preact/dist/preact.module.js
+var preact_module = __webpack_require__(6400);
+;// CONCATENATED MODULE: ./src/chatbox/Emoji.js
+
+
+
+class Emoji extends common/* Com */.M {
+  render() {
+    var emojiCode = this.props.emojiCode;
+    if (util/* default.size */.Z.size(emojiCode) < 3) return null;
+    var emojiText = emojiCode.replace(/:/g, '');
+    return (0,preact_module.h)("i", {
+      "data-tooltip": emojiCode,
+      class: `emoji emoji--${emojiText}`
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/ChatButton.js
+
+
+
+var defaultBubble = __webpack_require__(6755);
+
+let defaultAvatar = __webpack_require__(4761);
+
+
+
+class ChatButton extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.setState({
+      opacity: 0,
+      previewEvent: {},
+      displayPreview: false
+    });
+    this.loadGreeting();
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+    this.props.store.onConvoEvent(this, ev => {
+      if (util/* default.get */.Z.get(ev, 'type') !== 'message_sent') return;
+      let bytype = util/* default.get */.Z.get(ev, 'by.type');
+      if (bytype !== 'system' && bytype !== 'agent') return;
+      let isquickreplies = false;
+      util/* default.map */.Z.map(util/* default.get */.Z.get(ev, 'data.message.attachments', []), att => {
+        if (!att) return;
+
+        if (att.type === 'quick_replies') {
+          isquickreplies = true;
+        }
+      });
+      if (isquickreplies) return;
+      this.setState({
+        displayPreview: true,
+        previewEvent: ev
+      });
+    });
+  }
+
+  fixMissingSetting(chatbox) {
+    chatbox = util/* default.cloneDeep */.Z.cloneDeep(chatbox);
+
+    if (util/* default.get */.Z.get(chatbox, 'desktop_button.background_image_url')) {
+      chatbox.desktop_button.background_image_url = this.props.store.replaceFileUrl(chatbox.desktop_button.background_image_url);
+    }
+
+    if (util/* default.get */.Z.get(chatbox, 'desktop_button.background_mask_url')) {
+      chatbox.desktop_button.background_mask_url = this.props.store.replaceFileUrl(chatbox.desktop_button.background_mask_url);
+    }
+
+    if (util/* default.get */.Z.get(chatbox, 'mobile_button.background_image_url')) {
+      chatbox.mobile_button.background_image_url = this.props.store.replaceFileUrl(chatbox.mobile_button.background_image_url);
+    }
+
+    if (util/* default.get */.Z.get(chatbox, 'mobile_button.background_mask_url')) {
+      chatbox.mobile_button.background_mask_url = this.props.store.replaceFileUrl(chatbox.mobile_button.background_mask_url);
+    }
+
+    return chatbox;
+  }
+
+  render() {
+    let accountSetting = this.props.plugin.chatbox;
+    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
+
+    if (this.props.store.isMobile()) {
+      position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position') || position;
+      let hiddenButtonMobile = util/* default.get */.Z.get(accountSetting, 'mobile_button.hidden');
+      if (hiddenButtonMobile) return null;
+    }
+
+    let hiddenButtonDesktop = util/* default.get */.Z.get(accountSetting, 'desktop_button.hidden');
+    if (hiddenButtonDesktop) return null;
+    let cls = 'widget-layout widget-layout--' + position;
+    let opacity = this.state.opacity;
+
+    if (!this.props.isShow) {
+      cls += ' widget-layout--hidden';
+      opacity = 0;
+    }
+
+    return (0,preact_module.h)("div", {
+      class: cls,
+      style: 'opacity: ' + opacity + ' !important'
+    }, this.renderPreview(), this.renderButton());
+  }
+
+  ClearPreview() {
+    this.setState({
+      previewEvent: {}
+    });
+  }
+
+  ShowGreeting() {
+    let greeting = util/* default.get */.Z.get(this.props.plugin, 'chatbox.greeting', {});
+    let agentM = this.props.store.matchAgent('*');
+    let byid = greeting.agent_id;
+    if (!byid) byid = randomAgent(agentM).id;
+    let text = this.props.t.i18n(util/* default.get */.Z.get(greeting, 'greeting', {})) || greeting.message;
+    this.setState({
+      previewEvent: {
+        by: {
+          id: byid,
+          type: 'agent'
+        },
+        data: {
+          message: {
+            text,
+            format: 'plaintext'
+          }
+        }
+      },
+      displayPreview: true
+    });
+  }
+
+  HideGreeting() {
+    this.setState({
+      previewEvent: {}
+    });
+  }
+
+  loadGreeting() {
+    let accountSetting = this.props.plugin.chatbox;
+    if (new util/* default.Date */.Z.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return;
+    let greeting = util/* default.get */.Z.get(accountSetting, 'greeting', {});
+
+    if (!greeting.message || !greeting.enabled) {
+      this.setState({
+        previewEvent: {}
+      });
+      return;
+    }
+
+    this.ShowGreeting();
+  }
+
+  onClick() {
+    let lastview = this.props.store.matchLastview();
+
+    if (util/* default.get */.Z.get(lastview, 'view')) {
+      if (lastview.view !== 'list' || util/* default.size */.Z.size(this.props.store.matchConvo('*')) > 0) {
+        return this.props.onClick && this.props.onClick(Object.assign({}, lastview.opts, {
+          view: lastview.view
+        }));
+      }
+    }
+
+    return this.onPreviewClick();
+  }
+
+  onPreviewClick(e) {
+    let cid = util/* default.convoOfEv */.Z.convoOfEv(this.state.previewEvent);
+
+    if (!cid) {
+      let convos = util/* default.map */.Z.map(this.props.store.matchConvo('*'));
+      let convo = util/* default.find */.Z.find(convos, convo => !util/* default.isConvoSeen */.Z.isConvoSeen(convo, this.props.store.matchUser().id));
+      if (!convo) convo = convos[0] || {};
+      cid = convo.id;
+    }
+
+    this.closePreview(e);
+    this.props.onClick && this.props.onClick({
+      view: 'chat',
+      cid
+    });
+  }
+
+  renderUnread() {
+    let unreadcount = this.props.store.matchUnread();
+    if (unreadcount === 0) return null;
+    return (0,preact_module.h)("div", {
+      class: "chat-button--unread"
+    }, unreadcount);
+  }
+
+  renderPreview() {
+    let account = this.props.store.matchAccount();
+    let accountSetting = this.props.plugin.chatbox;
+    let byid = util/* default.get */.Z.get(this.state.previewEvent, 'by.display_id', util/* default.get */.Z.get(this.state.previewEvent, 'by.id'));
+    let agent = util/* default.cloneDeep */.Z.cloneDeep(this.props.store.matchAgent(byid)) || {};
+    agent.fullname = agent.fullname || util/* default.get */.Z.get(account, 'name') || this.props.t('agent');
+    agent.avatar_url = agent.avatar_url || defaultAvatar;
+    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
+
+    if (this.props.store.isMobile()) {
+      position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position') || position;
+    }
+
+    let cls = 'widget-preview widget-preview--' + position;
+    if (!this.state.displayPreview) cls += ' widget-preview--hidden';
+    var tags = this.renderMessagePreview(this.state.previewEvent, this.props.t('sent_you_a_message'));
+    if (util/* default.size */.Z.size(tags) === 0) cls += ' widget-preview--hidden';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)("div", {
+      class: "widget-preview--body"
+    }, (0,preact_module.h)("img", {
+      alt: "widget avatar",
+      class: "widget-preview--avatar",
+      src: this.props.store.replaceFileUrl(agent.avatar_url),
+      onError: ev => this.onProfileError(ev),
+      onload: _ => this.onProfileReady()
+    }), (0,preact_module.h)("div", {
+      class: "widget-preview--content",
+      onClick: e => this.onPreviewClick(e)
+    }, (0,preact_module.h)("div", {
+      class: "widget-preview--title"
+    }, agent.fullname), (0,preact_module.h)("p", {
+      class: "widget-preview--message"
+    }, tags)), (0,preact_module.h)("div", {
+      class: "widget-preview--btn-close",
+      onClick: e => this.closePreview(e)
+    })), (0,preact_module.h)("div", {
+      class: "widget-preview--action",
+      onClick: e => this.onPreviewClick(e)
+    }, (0,preact_module.h)("div", {
+      class: "widget-preview--action-text"
+    }, this.props.t('chat_now'))));
+  }
+
+  onProfileReady() {
+    if (this.state.buttonLoaded) this.setState({
+      opacity: 1
+    });
+    this.setState({
+      profileLoaded: true
+    });
+  }
+
+  onButtonReady() {
+    if (this.state.profileLoaded) this.setState({
+      opacity: 1
+    });
+    this.setState({
+      buttonLoaded: true
+    });
+  }
+
+  renderButton() {
+    let accountSetting = this.props.plugin.chatbox;
+    accountSetting = this.fixMissingSetting(accountSetting);
+    let imgsrc = util/* default.get */.Z.get(accountSetting, 'desktop_button.background_image_url') || util/* default.get */.Z.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
+    let background = util/* default.get */.Z.get(accountSetting, 'background') || DEF_BG;
+    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
+    let imgurl = util/* default.get */.Z.get(accountSetting, 'desktop_button.background_image_url');
+    let maskurl = util/* default.get */.Z.get(accountSetting, 'desktop_button.background_mask_url');
+
+    if (this.props.store.isMobile()) {
+      imgsrc = util/* default.get */.Z.get(accountSetting, 'mobile_button.background_image_url') || util/* default.get */.Z.get(accountSetting, 'mobile_button.background_mask_url') || imgsrc;
+      position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position') || position;
+      let mobileimgurl = util/* default.get */.Z.get(accountSetting, 'mobile_button.background_image_url');
+      let mobilemaskurl = util/* default.get */.Z.get(accountSetting, 'mobile_button.background_mask_url');
+
+      if (mobileimgurl || mobilemaskurl) {
+        imgurl = mobileimgurl;
+        maskurl = mobilemaskurl;
+      }
+    }
+
+    let whitebgcls = 'chat-button--white-bg';
+    if (!imgurl && maskurl) whitebgcls += ' chat-button--white-bg--mask-only';
+    let imgcontainerstyle = '';
+    imgurl = this.props.store.replaceFileUrl(imgurl);
+    imgsrc = this.props.store.replaceFileUrl(imgsrc);
+    maskurl = this.props.store.replaceFileUrl(maskurl);
+
+    if (!imgurl && !maskurl) {
+      whitebgcls += ' chat-button--white-bg--mask-only';
+      imgcontainerstyle = `
+				-webkit-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				-o-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				-moz-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				height: 70px !important;
+				width: 70px !important;
+				background: ${background} !important;
+			`;
+    }
+
+    if (imgurl && maskurl) {
+      imgcontainerstyle = `
+				-webkit-mask-image: url("${encodeURI(maskurl)}") !important;
+				-o-mask-image: url("${encodeURI(maskurl)}") !important;
+				-moz-mask-image: url("${encodeURI(maskurl)}") !important;
+				mask-image: url("${encodeURI(maskurl)}") !important;
+				background-image: url("${encodeURI(imgurl)}") !important;
+				background-repeat: no-repeat !important;
+			`;
+    }
+
+    if (imgurl && !maskurl) {
+      imgcontainerstyle = `
+				background-image: url("${encodeURI(imgurl)}") !important;
+				background-repeat: no-repeat !important;
+			`;
+    }
+
+    if (!imgurl && maskurl) {
+      imgcontainerstyle = `
+				-webkit-mask-image: url("${encodeURI(maskurl)}") !important;
+				-o-mask-image: url("${encodeURI(maskurl)}") !important;
+				-moz-mask-image: url("${encodeURI(maskurl)}") !important;
+				mask-image: url("${encodeURI(maskurl)}") !important;
+				height: 70px !important;
+				width: 70px !important;
+				background: ${background} !important;
+			`;
+    }
+
+    let cls = 'chat-button chat-button--' + position;
+    return (0,preact_module.h)("div", {
+      class: cls,
+      onClick: e => this.onClick(e)
+    }, (0,preact_module.h)("div", {
+      class: whitebgcls
+    }), (0,preact_module.h)("div", {
+      class: "chat-button--img-container",
+      style: imgcontainerstyle
+    }, (0,preact_module.h)("img", {
+      width: "70",
+      height: "70",
+      alt: "chat button",
+      class: "chat-button--img",
+      onload: () => this.onButtonReady(),
+      src: imgsrc,
+      onError: (e, a) => this.onChatButtonError(e, a)
+    })), this.renderUnread());
+  }
+
+  onProfileError(ev) {
+    var $el = ev.target;
+    $el.src = defaultAvatar;
+    this.onProfileReady();
+  }
+
+  onChatButtonError(ev) {
+    if (this._onChatButtonErrorExecuted) return;
+    this._onChatButtonErrorExecuted = true;
+    var $el = ev.target;
+    $el.src = defaultBubble;
+  }
+
+  renderMessagePreview(ev, defmsg) {
+    defmsg = defmsg || 'Sent you a message';
+    let message = util/* default.get */.Z.get(ev, 'data.message.text');
+    var format = util/* default.get */.Z.get(ev, 'data.message.format');
+    if (format && format !== 'plaintext') message = defmsg;
+    if (!message && util/* default.size */.Z.size(util/* default.get */.Z.get(ev, 'data.message.attachments')) > 0) message = defmsg;
+    if (!message) return null;
+    let byType = util/* default.get */.Z.get(ev, 'by.type');
+    var tags = util/* default.extractText */.Z.extractText(message).map(tag => {
+      if (tag.type === 'emoji') return (0,preact_module.h)(Emoji, {
+        emojiCode: tag.text,
+        byType: byType
+      });
+      return tag.text;
+    });
+    return tags;
+  }
+
+  closePreview(e) {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    this.setState({
+      displayPreview: false
+    });
+    this.props.store.closePreview();
+    this.forceUpdate();
+  }
+
+}
+
+function randomAgent(agentM) {
+  var agents = util/* default.filter */.Z.filter(agentM, ag => ag.type === 'agent');
+  return agents[Math.floor(Math.random() * util/* default.size */.Z.size(agents))] || {};
+}
+
+const Ms30Mins = 30 * 60 * 1000;
+const DEF_BG_URL = 'https://file-subiz.com/bubble_11.svg';
+const DEF_BG = 'linear-gradient(280.16deg, #0053d3 22.03%, #0265ff 78.2%)';
+;// CONCATENATED MODULE: ./src/chatbox/PoweredBy.js
+var logo = __webpack_require__(8430);
+
+
+
+class PoweredBy extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (this.props.store.isMobile()) return null;
+    let user = this.props.store.matchUser();
+    var link = `https://subiz.com.vn/?utm_source=id-${user.account_id}&utm_medium=widget&utm_campaign=widget_referral`;
+    return (0,preact_module.h)("div", {
+      class: "poweredby"
+    }, (0,preact_module.h)("a", {
+      href: link,
+      class: "poweredby--text",
+      target: "_blank",
+      rel: "noreferrer"
+    }, (0,preact_module.h)("img", {
+      width: "14",
+      height: "10",
+      class: "poweredby--subiz-logo",
+      src: logo,
+      alt: "power by"
+    }), " Subiz"));
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/AgentsAvatar.js
+
+
+
+class AgentsAvatar extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let accountSetting = this.props.plugin.chatbox;
+    let agentM = this.props.store.matchAgent('*');
+    var agents = util/* default.map */.Z.map(this.props.agent_ids, id => agentM[id]);
+
+    if (this.props.agent_ids === undefined || util/* default.size */.Z.size(this.props.agent_ids) === 0) {
+      var agids = util/* default.get */.Z.get(accountSetting, 'header.agent_ids', []);
+      agids = util/* default.filter */.Z.filter(agids, id => !!agentM[id]);
+
+      if (agids.length !== 0) {
+        agents = util/* default.map */.Z.map(agids, id => agentM[id]);
+      } else {
+        agents = util/* default.filter */.Z.filter(agentM, agent => agent.type === 'agent');
+      }
+    }
+
+    agents = util/* default.filter */.Z.filter(agents, ag => !!ag);
+    let acc = this.props.store.matchAccount();
+    var tooltippos = this.props.tooltipPos || 'bottom';
+    var mode = this.props.mode || 'primary';
+
+    if (agents.length === 0) {
+      return (0,preact_module.h)("div", {
+        class: `group-avatar group-avatar--${mode}`
+      }, (0,preact_module.h)("div", {
+        class: "d-inline-block pos-relative",
+        "data-tooltip": acc.name,
+        "data-tooltip-position": tooltippos
+      }, (0,preact_module.h)("img", {
+        width: 35,
+        height: 35,
+        alt: "agent avatar left",
+        class: "avatar group-avatar--agent-left",
+        src: this.props.store.replaceFileUrl(acc.logo_url) || __webpack_require__(9895)
+      })));
+    }
+
+    if (agents.length === 1) {
+      var agent = agents[0];
+      var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left';
+      return (0,preact_module.h)("div", {
+        class: `group-avatar group-avatar--${mode}`
+      }, (0,preact_module.h)("div", {
+        class: "d-inline-block pos-relative",
+        "data-tooltip": agent.fullname || acc.name,
+        "data-tooltip-position": tooltippos
+      }, (0,preact_module.h)("img", {
+        width: 35,
+        height: 35,
+        class: `avatar ${groupClass}`,
+        alt: "agent avatar",
+        src: this.props.store.replaceFileUrl(agent.avatar_url) || __webpack_require__(4761)
+      })));
+    }
+
+    if (agents.length === 2) {
+      let leftAgent = agents[0];
+      let rightAgent = agents[1];
+      return (0,preact_module.h)("div", {
+        class: `group-avatar group-avatar--${mode}`
+      }, (0,preact_module.h)("div", {
+        class: "d-inline-block pos-relative",
+        "data-tooltip": leftAgent.fullname || acc.name,
+        "data-tooltip-position": tooltippos
+      }, (0,preact_module.h)("img", {
+        width: 35,
+        height: 35,
+        alt: "agent avatar left",
+        class: "avatar group-avatar--agent-left",
+        src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || __webpack_require__(4761)
+      })), (0,preact_module.h)("div", {
+        class: "d-inline-block pos-relative",
+        "data-tooltip": rightAgent.fullname || acc.name,
+        "data-tooltip-position": tooltippos
+      }, (0,preact_module.h)("img", {
+        alt: "agent avatar right",
+        width: 35,
+        height: 35,
+        class: "avatar group-avatar--agent-right",
+        src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || __webpack_require__(4761)
+      })));
+    }
+
+    let leftAgent = agents[0];
+    let middleAgent = agents[1];
+    let rightAgent = agents[2];
+    return (0,preact_module.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0,preact_module.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": leftAgent.fullname || acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0,preact_module.h)("img", {
+      width: 35,
+      height: 35,
+      alt: "agent avatar left",
+      class: "avatar group-avatar--agent-left",
+      src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || __webpack_require__(4761)
+    })), (0,preact_module.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": middleAgent.fullname || acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0,preact_module.h)("img", {
+      alt: "agent avatar middle",
+      width: 35,
+      height: 35,
+      class: "avatar group-avatar--agent-middle",
+      src: this.props.store.replaceFileUrl(middleAgent.avatar_url) || __webpack_require__(4761)
+    })), (0,preact_module.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": rightAgent.fullname || acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0,preact_module.h)("img", {
+      width: 35,
+      height: 35,
+      alt: "agent avatar right",
+      class: "avatar group-avatar--agent-right",
+      src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || __webpack_require__(4761)
+    })));
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Header.js
+
+
+
+
+
+class Header extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let headerMode = 'collapsed';
+    let cls = 'widget-header';
+    let renderSocial = false;
+    let renderTeam = false;
+    let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed';
+    let accSetting = this.props.plugin.chatbox || {};
+    let layout = util/* default.get */.Z.get(accSetting, 'header.layout');
+
+    if (renderCollapsed) {
+      cls += ' widget-header--collapsed';
+    } else {
+      cls += ' widget-header--convo-expanded';
+      renderSocial = layout === 'social';
+      renderTeam = !renderSocial;
+    }
+
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, this.renderCollapsedHeader(renderCollapsed), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
+  }
+
+  renderCollapsedHeader(show) {
+    let accSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount();
+    let state = acc.is_online ? this.props.t('agent_online') : this.props.t('agent_offline');
+    let tagline = util/* default.get */.Z.get(accSetting, `tagline`, {});
+    let desc = this.props.t.i18n(tagline) || accSetting.introduction || state;
+    let agentIdsJoined = util/* default.map */.Z.map(this.getAgentJoined(this.props.cid), agent => agent.id);
+    let cls = 'widget-header--inner widget-header--inner--collapsed';
+    if (!show) cls += ' widget-header--inner--hidden';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, this.renderBackButton(), (0,preact_module.h)(AgentsAvatar, {
+      plugin: this.props.plugin,
+      store: this.props.store,
+      mode: "secondary",
+      agent_ids: agentIdsJoined
+    }), (0,preact_module.h)("div", {
+      class: "widget-header--title-container"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--title"
+    }, this.getTitle()), (0,preact_module.h)("div", {
+      class: "widget-header--description",
+      title: desc
+    }, desc)), this.renderCloseButton());
+  }
+
+  renderSocial(show) {
+    let accSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount();
+    let links = util/* default.get */.Z.get(accSetting, 'header.links') || [];
+    let $links = util/* default.map */.Z.map(links, link => {
+      if (!link.url || !link.type || link.type === 'subiz') return null;
+
+      if (link.type === 'email') {
+        return (0,preact_module.h)("div", null, (0,preact_module.h)("a", {
+          href: `mailto:${link.url}`,
+          title: link.url
+        }, (0,preact_module.h)("i", {
+          class: `social__links-logo social__links-logo--${link.type}`
+        })));
+      }
+
+      return (0,preact_module.h)("div", null, (0,preact_module.h)("a", {
+        href: link.url,
+        target: "_blank",
+        title: link.url,
+        rel: "noreferrer"
+      }, (0,preact_module.h)("i", {
+        class: `social__links-logo social__links-logo--${link.type}`
+      })));
+    });
+    const DEFTEAMINTO = `Chúng tôi sẵn sàng trợ giúp :wave:.
+Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`;
+    let tagline = util/* default.get */.Z.get(accSetting, `tagline`, {});
+    var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO;
+    var tags = util/* default.extractText */.Z.extractText(teamintro).map(tag => {
+      if (tag.type === 'emoji') return (0,preact_module.h)(Emoji, {
+        emojiCode: tag.text
+      });
+      return tag.text;
+    });
+    let cls = 'widget-header--inner widget-header--inner--expanded';
+    if (!show) cls += ' widget-header--inner--hidden';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)("div", {
+      class: "widget-header-expand-container"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--top-wrapper"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--title"
+    }, this.getTitle()), this.renderCloseButton()), (0,preact_module.h)("div", {
+      class: "widget_header__body widget_header__body__social"
+    }, (0,preact_module.h)("img", {
+      alt: "logo",
+      class: "social__account_logo",
+      src: this.props.store.replaceFileUrl(util/* default.get */.Z.get(acc, 'logo_url'))
+    }), (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+      class: "social__introduction"
+    }, tags), (0,preact_module.h)("div", {
+      class: "social__links"
+    }, $links)))));
+  }
+
+  renderTeam(show) {
+    let accSetting = this.props.plugin.chatbox || {};
+    const DEFTEAMINTO = `Chúng tôi sẵn sàng trợ giúp :wave:.
+Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn`;
+    let tagline = util/* default.get */.Z.get(accSetting, `tagline`, {});
+    var teamintro = this.props.t.i18n(tagline) || accSetting.introduction || this.props.t('team_intro') || DEFTEAMINTO;
+    var tags = util/* default.extractText */.Z.extractText(teamintro).map(tag => {
+      if (tag.type === 'emoji') return (0,preact_module.h)(Emoji, {
+        emojiCode: tag.text
+      });
+      return tag.text;
+    });
+    let cls = 'widget-header--inner widget-header--inner--expanded';
+    if (!show) cls += ' widget-header--inner--hidden';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)("div", {
+      class: "widget-header-expand-container"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--top-wrapper"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--title"
+    }, this.getTitle()), this.renderCloseButton()), (0,preact_module.h)("div", {
+      class: "widget_header__body"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--avatar-wrapper"
+    }, (0,preact_module.h)(AgentsAvatar, {
+      plugin: this.props.plugin,
+      store: this.props.store,
+      mode: "primary"
+    })), (0,preact_module.h)("div", {
+      class: "widget-header--title-container"
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--description"
+    }, tags)))));
+  }
+
+  getTitle() {
+    let accSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount();
+    let agentsJoined = this.getAgentJoined(this.props.cid);
+    let caption = util/* default.get */.Z.get(this.props.plugin, 'chatbox.caption', {});
+    let title = this.props.t.i18n(caption) || accSetting.title;
+    return getJoinedNameMember(agentsJoined) || title || acc.name || this.props.t('widget_title');
+  }
+
+  renderBackButton() {
+    let allconvos = this.props.store.matchConvo('*');
+    if (util/* default.size */.Z.size(allconvos) === 0) return null;
+    var $unreadcount = null;
+    let user = this.props.store.matchUser();
+    let unreadcount = 0;
+    util/* default.map */.Z.map(allconvos, convo => {
+      if (convo.id == this.props.cid) return;
+      if (!util/* default.isConvoSeen */.Z.isConvoSeen(convo, user.id)) unreadcount++;
+    });
+
+    if (unreadcount !== 0) {
+      $unreadcount = (0,preact_module.h)("span", {
+        class: "widget-header--total-unread-convo"
+      }, unreadcount);
+    }
+
+    return (0,preact_module.h)("div", {
+      class: `widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`,
+      onClick: e => this.onBackClick(e)
+    }, (0,preact_module.h)("div", {
+      class: "widget-header--button-back",
+      "data-tooltip": this.props.t('menu_back')
+    }), $unreadcount);
+  }
+
+  renderCloseButton() {
+    let accSetting = this.props.plugin.chatbox || {};
+    if (accSetting.hide_close_button) return null;
+    return (0,preact_module.h)("div", {
+      class: "widget-header--button widget-header--button-close",
+      "data-tooltip": this.props.t('close'),
+      "data-tooltip-position": "bottom",
+      onClick: e => this.onCloseClick(e)
+    }, (0,preact_module.h)("span", {
+      class: "widget-header--button-close-icon"
+    }));
+  }
+
+  onBackClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.props.onGotoList && this.props.onGotoList();
+  }
+
+  onCloseClick(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.props.onClose && this.props.onClose();
+  }
+
+  getAgentJoined(cid) {
+    var convo = this.props.store.matchConvo(cid) || {};
+    let joined = util/* default.filter */.Z.filter(convo.members, mem => mem.type === 'agent' && mem.membership === 'active');
+    return joined;
+  }
+
+}
+
+let getJoinedNameMember = agents => util/* default.map */.Z.map(agents, agent => agent.name).join(', ');
+;// CONCATENATED MODULE: ./src/chatbox/MessageInput.js
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+class MessageInput extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "onEnter", util/* default.throttle */.Z.throttle(function () {
+      this.submitMessage();
+    }, 50));
+
+    this.refFileInput = (0,preact_module/* createRef */.Vf)();
+    this.refMessageInput = (0,preact_module/* createRef */.Vf)();
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+    this.props.store.onConvoEvent(this, ev => {
+      var evcid = util/* default.convoOfEv */.Z.convoOfEv(ev);
+      if (evcid !== this.props.cid) return;
+      this.forceUpdate();
+    });
+    this.focus();
+    this._forceUpdate = util/* default.throttle */.Z.throttle(() => {
+      this.forceUpdate();
+    }, 500);
+    this.resizeInput = util/* default.throttle */.Z.throttle(function () {
+      const input = this.refMessageInput.current;
+      input.style.setProperty('height', '1em', 'important');
+      const height = Math.min(200, input.scrollHeight);
+      input.style.setProperty('height', `${height}px`, 'important');
+    }, 5);
+  }
+
+  render() {
+    var buttons = (0,preact_module.h)("div", {
+      class: "d-flex flex-row align-self-end"
+    }, this.renderEmoji(), (0,preact_module.h)("div", {
+      "data-tooltip-poasition": "top-left",
+      class: "message-input--button message-input--attachment-button",
+      onClick: e => this.selectFile(e)
+    }));
+    var msg = util/* default.trim */.Z.trim(this.refMessageInput.current && this.refMessageInput.current.value);
+
+    if (msg.length > 0) {
+      buttons = (0,preact_module.h)("div", {
+        class: "d-flex flex-row align-self-end"
+      }, this.renderEmoji(), (0,preact_module.h)("div", {
+        "data-tooltip-position": "top-left",
+        class: "message-input--button message-input--send-button",
+        onClick: () => this.submitMessage()
+      }));
+    }
+
+    var containercls = '';
+    var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled;
+    if (disabled) containercls = 'message-input--disabled';
+    return (0,preact_module.h)("div", {
+      class: `message-input ${containercls}`,
+      onClick: e => {
+        this.refMessageInput.current && this.refMessageInput.current.focus();
+      }
+    }, (0,preact_module.h)("input", {
+      class: "d-none",
+      ref: this.refFileInput,
+      type: "file",
+      onChange: e => this.sendFile(e),
+      multiple: true
+    }), (0,preact_module.h)("textarea", {
+      disabled: disabled,
+      class: "message-input--input",
+      maxlength: "1024",
+      placeholder: this.props.t('message_input_help'),
+      ref: this.refMessageInput,
+      rows: "1",
+      onInput: e => this.onChange(e),
+      onPaste: e => this.pasteImage(e),
+      "data-emojiable": "true",
+      onKeydown: e => this.onKeydown(e)
+    }), buttons);
+  }
+
+  hasUnfinishRequiredFormOrLock() {
+    let convo = this.props.store.matchConvo(this.props.cid);
+    if (util/* default.get */.Z.get(convo, 'state') === 'ended') return false;
+    let events = this.props.store.listEvents(this.props.cid);
+    events = util/* default.orderBy */.Z.orderBy(events, 'created', 'desc').filter(ev => ev.type === 'message_sent');
+    let attachments = util/* default.get */.Z.get(events[0], 'data.message.attachments', []);
+    let lock = util/* default.find */.Z.find(attachments, att => util/* default.get */.Z.get(att, 'lock_input'));
+    if (lock) return true;
+    var last_agent_sent;
+
+    for (let ev of events) {
+      if (util/* default.get */.Z.get(ev, 'by.type') === 'user') continue;
+      last_agent_sent = ev;
+      break;
+    }
+
+    attachments = util/* default.get */.Z.get(last_agent_sent, 'data.message.attachments', []);
+    let pendingForms = util/* default.filter */.Z.filter(attachments, att => {
+      if (!att) return false;
+      if (att.type !== 'form' && att.type !== 'ask_info_form') return false;
+      var form = att.form;
+      if (!form) return false;
+      var state = util/* default.parseJSON */.Z.parseJSON(form.state) || {};
+      if (!state.require_finished && att.type !== 'ask_info_form') return false;
+      if (isSummited(att.form)) return false;
+      return true;
+    });
+    return util/* default.size */.Z.size(pendingForms) > 0;
+  }
+
+  renderEmojiPopup() {
+    if (!this.state.openEmoji) return null;
+    return (0,preact_module.h)("div", {
+      class: "emoji-picker",
+      "v-clickaway": e => this.setState({
+        openEmoji: false
+      })
+    }, (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':like:'),
+      "data-tooltip": ":like:",
+      class: "emoji-picker--item emoji--like"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':unlike:'),
+      "data-tooltip": ":unlike:",
+      class: "emoji-picker--item emoji--unlike"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':angry:'),
+      "data-tooltip": ":angry:",
+      class: "emoji-picker--item emoji--angry"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':confused:'),
+      "data-tooltip": ":confused:",
+      class: "emoji-picker--item emoji--confused"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':crying:'),
+      "data-tooltip": ":crying:",
+      class: "emoji-picker--item emoji--crying"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':grinning:'),
+      "data-tooltip": ":grinning:",
+      class: "emoji-picker--item emoji--grinning"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':heart-eyes:'),
+      "data-tooltip": ":heart-eyes:",
+      class: "emoji-picker--item emoji--heart-eyes"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':neutral:'),
+      "data-tooltip": ":neutral:",
+      class: "emoji-picker--item emoji--neutral"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':sad:'),
+      "data-tooltip": ":sad:",
+      class: "emoji-picker--item emoji--sad"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':sleepy:'),
+      "data-tooltip": ":sleepy:",
+      class: "emoji-picker--item emoji--sleepy"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':smiling:'),
+      "data-tooltip": ":smiling:",
+      class: "emoji-picker--item emoji--smiling"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':surprised:'),
+      "data-tooltip": ":surprised:",
+      class: "emoji-picker--item emoji--surprised"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':tired:'),
+      "data-tooltip": ":tired:",
+      class: "emoji-picker--item emoji--tired"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':tongue-out:'),
+      "data-tooltip": ":tongue-out:",
+      class: "emoji-picker--item emoji--tongue-out"
+    })), (0,preact_module.h)("div", {
+      class: "emoji-picker-background-item"
+    }, (0,preact_module.h)("div", {
+      onClick: () => this.emojiPick(':wink:'),
+      "data-tooltip": ":wink:",
+      class: "emoji-picker--item emoji--wink"
+    })));
+  }
+
+  focus() {
+    if (this.props.disabled) return;
+    this.refMessageInput.current && this.refMessageInput.current.focus();
+    setTimeout(() => {
+      this.refMessageInput.current && this.refMessageInput.current.focus();
+    });
+    setTimeout(() => {
+      this.refMessageInput.current && this.refMessageInput.current.focus();
+    }, 100);
+  }
+
+  renderEmoji() {
+    return (0,preact_module.h)("div", null, this.renderEmojiPopup(), (0,preact_module.h)("div", {
+      class: "message-input--button message-input--emoji-button",
+      onClick: e => this.toggleEmoji(e)
+    }));
+  }
+
+  toggleEmoji(e) {
+    e.stopPropagation();
+    this.focus();
+    if (this.props.disabled) return;
+    this.setState({
+      openEmoji: !this.state.openEmoji
+    });
+  }
+
+  emojiPick(code) {
+    const input = this.refMessageInput.current;
+    const position = input.selectionStart;
+    const message = this.refMessageInput.current.value;
+    this.setState({
+      openEmoji: false
+    });
+    this.refMessageInput.current.value = [message.slice(0, position), code, message.slice(position)].join('');
+    this.resizeInput();
+    input.focus();
+  }
+
+  onKeydown(e) {
+    if (e.keyCode === 13 && e.shiftKey === false) {
+      this.onEnter();
+      return e.preventDefault();
+    }
+
+    this._forceUpdate();
+
+    this.sendTyping();
+  }
+
+  onChange() {
+    this.resizeInput();
+  }
+
+  selectFile() {
+    if (this.props.disabled) return;
+    this.refFileInput.current.click();
+  }
+
+  sendFile() {
+    let $input = this.refFileInput.current;
+
+    this._sendFile($input.files);
+
+    $input.value = '';
+  }
+
+  _sendFile(files) {
+    if (util/* default.size */.Z.size(files) === 0) return;
+    if (this.props.disabled) return;
+    let attachments = util/* default.map */.Z.map(files, file => {
+      return {
+        type: 'file',
+        mimetype: file.type,
+        name: file.name,
+        _file: file,
+        size: file.size
+      };
+    });
+    this.props.onSend && this.props.onSend({
+      attachments
+    });
+  }
+
+  async submitMessage(msg) {
+    msg = msg || util/* default.trim */.Z.trim(this.refMessageInput.current.value) || '';
+    if (!msg) return;
+    if (this.props.disabled) return;
+    this.refMessageInput.current.value = '';
+    this.resizeInput();
+    this.setState({
+      openEmoji: false
+    });
+    this.props.onSend && this.props.onSend({
+      text: msg,
+      format: 'plaintext'
+    });
+  }
+
+  sendTyping() {
+    if (!this.props.cid) return;
+    return this.props.store.typing(this.props.cid);
+  }
+
+  pasteImage(event) {
+    if (!window.File || !window.FileReader || !window.FileList || !window.Blob) return;
+    let now = new util/* default.Date */.Z.Date();
+    let year = now.getFullYear();
+    let month = now.getMonth() + 1;
+    let date = now.getDate();
+    let hour = now.getHours();
+    let min = now.getMinutes();
+    let sec = now.getSeconds();
+    const name = `Paste-image-${year}-${month}-${date}-${hour}-${min}-${sec}`;
+    let blob = null;
+    const copiedData = event.clipboardData.items[0];
+
+    if (copiedData.type.indexOf('image') === 0) {
+      blob = copiedData.getAsFile();
+    }
+
+    if (!blob) return;
+    const parts = [blob, new ArrayBuffer()];
+    const file = new File(parts, `${name}.png`, {
+      type: 'image/png'
+    });
+
+    this._sendFile([file]);
+  }
+
+}
+
+function isSummited(form) {
+  let fields = util/* default.get */.Z.get(form, 'fields') || [];
+  return util/* default.find */.Z.find(fields, field => !!field.answered);
+}
+;// CONCATENATED MODULE: ./src/chatbox/ImageAttachments.js
+
+
+
+class ImageAttachment extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    var images = [];
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    util/* default.each */.Z.each(attachments, (att, i) => {
+      if (!att) return;
+      if (!util/* default.includes */.Z.includes(att.mimetype, 'image')) return;
+      if (!att.url) return;
+      var uri = att.url;
+
+      if (!uri.startsWith('https://') && !uri.startsWith('http://') && !uri.startsWith('content://') && !uri.startsWith('data:')) {
+        att.url = this.props.store.FileURL + uri;
+      }
+
+      images.push(att);
+    });
+    if (images.length === 0) return null;
+    var $images = util/* default.map */.Z.map(images, (image, index) => (0,preact_module.h)("div", {
+      class: `image-attachment image-attachment--${byType}`
+    }, (0,preact_module.h)("a", {
+      href: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
+      target: "_blank"
+    }, (0,preact_module.h)("img", {
+      alt: true,
+      class: "image-attachment__img",
+      src: this.props.store.replaceFileUrl(image.thumbnail_url || image.url),
+      onload: e => this.props.onLoad && this.props.onLoad()
+    }))));
+
+    if (byType === 'agent') {
+      return (0,preact_module.h)("div", {
+        class: "message-agent"
+      }, $images);
+    } else {
+      return (0,preact_module.h)("div", {
+        class: "message-user"
+      }, $images);
+    }
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/AudioAttachments.js
+
+
+
+class AudioAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    var audios = [];
+    util/* default.each */.Z.each(attachments, (att, i) => {
+      if (!att) return;
+      if (util/* default.includes */.Z.includes(att.mimetype, 'audio')) audios.push(att);
+    });
+    if (audios.length === 0) return null;
+    var $audios = util/* default.map */.Z.map(audios, (audio, index) => {
+      return (0,preact_module.h)("div", {
+        key: index,
+        class: `audio-attachment audio-attachment--${byType}`
+      }, (0,preact_module.h)("audio", {
+        class: "audio-attachment__audio",
+        controls: true
+      }, (0,preact_module.h)("source", {
+        src: this.props.store.replaceFileUrl(audio.url),
+        type: audio.mimetype
+      })));
+    });
+    return (0,preact_module.h)("div", {
+      class: `message-${byType}`
+    }, $audios);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/FileAttachments.js
+
+
+
+class FileAttachments extends common/* Com */.M {
+  render() {
+    var byType = util/* default.get */.Z.get(this.props.ev, 'by.type', 'agent');
+    var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    var files = [];
+    util/* default.each */.Z.each(attachments, att => {
+      if (!att) return;
+      if (!att.url && !att._file) return;
+
+      if (!util/* default.includes */.Z.includes(att.mimetype, 'video') && !util/* default.includes */.Z.includes(att.mimetype, 'audio') && !util/* default.includes */.Z.includes(att.mimetype, 'image') && att.type !== 'button' && att.type !== 'quick_replies' && att.type !== 'form' && att.type !== 'form_submit') {
+        files.push(att);
+      }
+    });
+    if (files.length === 0) return null;
+    var $files = util/* default.map */.Z.map(files, (file, index) => {
+      return (0,preact_module.h)("div", {
+        key: index,
+        class: `file-attachment file-attachment--${byType}`
+      }, (0,preact_module.h)("a", {
+        class: "file-attachment--link",
+        href: this.props.store.replaceFileUrl(file.url),
+        target: "_blank"
+      }, (0,preact_module.h)("span", {
+        class: "file-attachment--download mr-2"
+      }), (0,preact_module.h)("span", {
+        class: "file-attachment--filename"
+      }, file.name)));
+    });
+    return (0,preact_module.h)("div", {
+      class: `message-${byType}`
+    }, $files);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Buttons.js
+
+
+
+class Buttons extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (util/* default.size */.Z.size(this.props.buttons) === 0) return null;
+    var $buttons = util/* default.map */.Z.map(this.props.buttons, (button, index) => {
+      if (button.type === 'call_button') {
+        return (0,preact_module.h)("a", {
+          class: "url-button-attachment",
+          href: 'tel:' + button.phone_number,
+          key: index,
+          title: button.title
+        }, button.title);
+      }
+
+      if (button.type === 'url_button') {
+        return (0,preact_module.h)("a", {
+          class: "url-button-attachment",
+          href: button.url,
+          target: "_blank",
+          key: index,
+          title: button.title
+        }, button.title || button.url);
+      }
+
+      if (button.type === 'postback_button') {
+        return (0,preact_module.h)("a", {
+          class: "url-button-attachment",
+          href: "javascript:;",
+          onClick: _ => this.props.onSelect(button)
+        }, button.title);
+      }
+
+      if (button.type === 'widget_ask_desktop_notify_button') return null;
+      if (button.type === 'widget_ask_contact_info_button') return null;
+      return null;
+    });
+    return (0,preact_module.h)("div", {
+      class: "button-attachments"
+    }, $buttons);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/ButtonAttachments.js
+
+
+
+
+class ButtonAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    if (byType === 'user') return null;
+    let buttons = [];
+    let attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    util/* default.each */.Z.each(attachments, (att, i) => {
+      if (!att || util/* default.get */.Z.get(att, 'type') !== 'button') return;
+      util/* default.each */.Z.each(util/* default.get */.Z.get(att, 'buttons') || [], btn => buttons.push(btn));
+    });
+    return (0,preact_module.h)(Buttons, {
+      store: this.props.store,
+      buttons: buttons
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/QuickReplies.js
+
+
+
+class QuickReplies extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (util/* default.get */.Z.get(this.props.ev, 'by.type') === 'user') return null;
+    let quickreplies = [];
+    util/* default.map */.Z.map(util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []), att => {
+      if (!att) return;
+
+      if (att.type === 'quick_replies') {
+        quickreplies = util/* default.get */.Z.get(att, 'quick_replies', []);
+      }
+    });
+    quickreplies = util/* default.filter */.Z.filter(quickreplies, r => r.title);
+    if (quickreplies.length === 0) return null;
+    let cid = util/* default.convoOfEv */.Z.convoOfEv(this.props.ev);
+    let convo = this.props.store.matchConvo(cid);
+    if (util/* default.get */.Z.get(convo, 'state') === 'ended') return null;
+    let events = util/* default.map */.Z.map(this.props.store.listEvents(cid));
+    events = util/* default.orderBy */.Z.orderBy(events, 'created', 'asc').filter(ev => ev.type === 'message_sent');
+    let evindex = 0;
+
+    for (var i = 0; i < events.length; i++) {
+      if (events[i].id === this.props.ev.id) {
+        evindex = i;
+        break;
+      }
+    }
+
+    for (var i = evindex + 1; i < events.length; i++) {
+      if (util/* default.get */.Z.get(events[i], 'by.type') === 'user') return null;
+    }
+
+    let $replies = util/* default.map */.Z.map(quickreplies, r => (0,preact_module.h)("div", {
+      class: "message_quick_reply",
+      onClick: e => this.props.onSelect(r)
+    }, r.title));
+    return (0,preact_module.h)("div", {
+      class: "message_quick_replies"
+    }, $replies);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/ListField.js
+
+
+
+class ListField extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.setState({
+      search: '',
+      isShow: false
+    });
+  }
+
+  render() {
+    let fields = util/* default.filter */.Z.filter(this.props.items, item => {
+      let search = this.state.search.toLowerCase();
+      let name = item || '';
+      return name.toLowerCase().indexOf(search) > -1;
+    });
+    let $fields = util/* default.map */.Z.map(fields, field => {
+      return (0,preact_module.h)("li", {
+        class: "custom-select--item-options",
+        onClick: () => this.add(field)
+      }, field);
+    });
+    let $selected = util/* default.map */.Z.map(this.props.selected, (item, i) => {
+      return (0,preact_module.h)("div", {
+        class: "custom-select--selected-item",
+        onClick: e => this.remove(e, i)
+      }, item, (0,preact_module.h)("i", {
+        class: "icn-delete delete-tag"
+      }));
+    });
+    let $dropdown = (0,preact_module.h)("div", {
+      class: "custom-select--wrap-options"
+    }, (0,preact_module.h)("input", {
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.setState({
+          isShow: true
+        });
+      },
+      type: "text",
+      onInput: e => this.setState({
+        search: e.target.value
+      }),
+      value: this.state.search,
+      placeholder: "T\xECm ki\u1EBFm",
+      class: "custom-select--input-search"
+    }), (0,preact_module.h)("ul", {
+      class: "custom-select--items-options"
+    }, $fields));
+
+    if (!this.state.isShow) {
+      $dropdown = null;
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "form-control custom-select"
+    }, (0,preact_module.h)(common/* Clickaway */.u, {
+      onClickaway: e => this.clickaway()
+    }, (0,preact_module.h)("div", {
+      class: "custom-select--wrap-selected",
+      onClick: () => this.setState({
+        isShow: !this.state.isShow
+      })
+    }, (0,preact_module.h)("div", {
+      class: "custom-select--selected-items"
+    }, $selected), $dropdown, (0,preact_module.h)("div", {
+      class: "custom-select--icon-dropdown"
+    }, (0,preact_module.h)("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, (0,preact_module.h)("g", {
+      opacity: "0.6"
+    }, (0,preact_module.h)("path", {
+      d: "M7 9.5L12 14.5L17 9.5H7Z",
+      fill: "black"
+    })))))));
+  }
+
+  clickaway() {
+    this.setState({
+      isShow: false
+    });
+  }
+
+  add(field) {
+    this.props.onAddItem && this.props.onAddItem(field);
+  }
+
+  remove(e, index) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.props.onRemoveItem && this.props.onRemoveItem(index);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/FormAttachment.js
+
+
+
+
+class FormAttachment extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+    let user = this.props.store.matchUser();
+    let fields = util/* default.get */.Z.get(this.props.form, 'fields') || [];
+    let formData = util/* default.map */.Z.map(fields, field => {
+      let is_required = field.is_required || false;
+      var state = util/* default.parseJSON */.Z.parseJSON(field.state) || {};
+      if (!is_required) is_required = state.require || false;
+      var userattr = util/* default.getUserAttr */.Z.getUserAttr(user, field.name, state.type || 'text');
+      return {
+        name: field.name,
+        items: field.items,
+        value: util/* default.parseJSON */.Z.parseJSON(field.answer) || util/* default.parseJSON */.Z.parseJSON(field.default_answer) || userattr,
+        is_required,
+        label: field.title,
+        type: field.input_type
+      };
+    });
+    this.setState({
+      formData
+    });
+  }
+
+  isSummited() {
+    let found = util/* default.find */.Z.find(this.state.formData, field => !!field.answered);
+    if (found) return true;
+    let convo = this.props.store.matchConvo(util/* default.convoOfEv */.Z.convoOfEv(this.props.ev));
+    return convo.state === 'ended';
+  }
+
+  render() {
+    if (util/* default.size */.Z.size(this.state.formData) === 0) return null;
+    let $fields = this.renderFields();
+    let $submitbutton = null;
+
+    if (!this.isSummited()) {
+      $submitbutton = (0,preact_module.h)("div", {
+        class: "mt-2"
+      }, (0,preact_module.h)("button", {
+        onClick: _ => this.submit(),
+        type: "button",
+        class: "form-attachment--submit-btn"
+      }, this.props.t('btn_submit_form_attachment')));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "form-attachment",
+      onClick: e => e.stopPropagation()
+    }, this.props.t(this.props.form.title) || this.props.t('capture_lead_title'), $fields, $submitbutton);
+  }
+
+  focus() {
+    if (this.props.store.isPreview) return;
+    if (util/* default.size */.Z.size(this.state.formData) === 0) return;
+    let $field;
+
+    if (this.isFormFilled()) {
+      var keys = Object.keys(this.state.formData);
+      var lastkey = keys[util/* default.size */.Z.size(keys) - 1];
+      var lastfield = this.state.formData[lastkey];
+      $field = this['field.' + encode(lastfield.name)];
+    } else {
+      var firstunfilledfield = this.firstUnfilledField();
+      if (!firstunfilledfield) return;
+      $field = this['field.' + encode(firstunfilledfield.name)];
+    }
+
+    if ($field) $field.focus();
+  }
+
+  firstUnfilledField() {
+    return util/* default.find */.Z.find(this.state.formData, field => field.value == null || field.value === '');
+  }
+
+  isFormFilled() {
+    return !util/* default.find */.Z.find(this.state.formData, field => field.value == null || field.value === '');
+  }
+
+  onInputChange(index, val) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    formData[index].value = val;
+    this.setState({
+      formData
+    });
+  }
+
+  onListAddItem(index, val) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = formData[index];
+    field.value = field.value || [];
+    field.value.push(val);
+    this.setState({
+      formData
+    });
+  }
+
+  onListRemoveItem(index, vindex) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = formData[index];
+    field.value = field.value || [];
+    field.value.splice(vindex, 1);
+    this.setState({
+      formData
+    });
+  }
+
+  renderFields() {
+    if (util/* default.size */.Z.size(this.state.formData) === 0) return null;
+    let $fields = null;
+    $fields = util/* default.map */.Z.map(this.state.formData, (field, index) => {
+      let $field = null;
+      var errclass = field.error ? 'input--error' : '';
+
+      if (field.type === 'text') {
+        if (this.isSummited()) {
+          $field = (0,preact_module.h)("div", {
+            class: "form-control--container"
+          }, (0,preact_module.h)("input", {
+            disabled: true,
+            ref: ref => {
+              this['field.' + encode(field.name)] = ref;
+            },
+            value: field.value,
+            onInput: e => this.onInputChange(index, e.target.value),
+            class: `form-control ${errclass}`,
+            type: "text"
+          }), (0,preact_module.h)("i", {
+            class: "form-control--check"
+          }));
+        } else {
+          $field = (0,preact_module.h)("input", {
+            ref: ref => {
+              this['field.' + encode(field.name)] = ref;
+            },
+            value: field.value,
+            onInput: e => this.onInputChange(index, e.target.value),
+            class: `form-control ${errclass}`,
+            type: "text"
+          });
+        }
+      } else if (field.type === 'number') {
+        if (this.isSummited()) {
+          $field = (0,preact_module.h)("div", {
+            class: "form-control--container"
+          }, (0,preact_module.h)("input", {
+            disabled: true,
+            ref: ref => {
+              this['field.' + encode(field.name)] = ref;
+            },
+            value: field.value,
+            onInput: e => this.onInputChange(index, e.target.value),
+            class: `form-control ${errclass}`,
+            type: "number"
+          }), (0,preact_module.h)("i", {
+            class: "form-control--check"
+          }));
+        } else {
+          $field = (0,preact_module.h)("input", {
+            ref: ref => {
+              this['field.' + encode(field.name)] = ref;
+            },
+            value: field.value,
+            onInput: e => this.onInputChange(index, e.target.value),
+            class: `form-control ${errclass}`,
+            type: "number"
+          });
+        }
+      } else if (field.type === 'boolean') {
+        $field = (0,preact_module.h)("div", {
+          class: "checkbox"
+        }, (0,preact_module.h)("input", {
+          ref: ref => {
+            this['field.' + encode(field.name)] = ref;
+          },
+          type: "checkbox",
+          id: 'checkbox.' + this.props.ev.id + '.' + field.name,
+          onChange: e => this.onInputChange(index, ev.target.checked),
+          checked: field.value
+        }), (0,preact_module.h)("label", {
+          class: "checkbox--label",
+          for: 'checkbox.' + this.props.ev.id + '.' + field.name
+        }, field.label), (0,preact_module.h)("div", {
+          class: "checkbox--check"
+        }, (0,preact_module.h)("div", null)));
+      } else if (field.type === 'list') {
+        let selected = field.value || [];
+        let items = util/* default.filter */.Z.filter(util/* default.get */.Z.get(field, 'items', []), item => !selected.includes(item));
+        $field = (0,preact_module.h)(ListField, {
+          selected: selected,
+          items: items,
+          onAddItem: e => this.onListAddItem(index, e),
+          onRemoveItem: item => this.onListRemoveItem(index, item)
+        });
+      } else if (field.type === 'datetime') {
+        $field = (0,preact_module.h)("input", {
+          ref: ref => {
+            this['field.' + encode(field.name)] = ref;
+          },
+          value: field.value,
+          onInput: e => this.onInputChange(index, e.target.value),
+          class: `form-control ${errclass}`,
+          type: "date"
+        });
+      }
+
+      let label = field.label;
+
+      if (field.name === 'fullname') {
+        label = this.props.t('fullname');
+      } else if (field.name === 'emails') {
+        label = this.props.t('email');
+      } else if (field.name === 'phones') {
+        label = this.props.t('phones');
+      }
+
+      return (0,preact_module.h)("div", null, (0,preact_module.h)("p", {
+        class: "label mt-3"
+      }, label, field.is_required ? (0,preact_module.h)("span", {
+        class: "ml-1 red"
+      }, "*") : ''), field.error ? (0,preact_module.h)("div", {
+        class: "form-control--valid-input--error"
+      }, field.error) : '', $field);
+    });
+    return (0,preact_module.h)("div", null, $fields);
+  }
+
+  async submit() {
+    var hasError = false;
+    util/* default.map */.Z.map(this.state.formData, field => {
+      if (field.is_required && (field.value === undefined || field.value === '' || util/* default.size */.Z.size(field.value) === 0 && Array.isArray(field.value))) {
+        field.error = this.props.t('error_empty');
+        hasError = true;
+      } else {
+        field.error = '';
+      }
+
+      if (field.name === 'emails' && field.value) {
+        if (!util/* default.isEmail */.Z.isEmail(field.value)) {
+          field.error = this.props.t('error_email_invalid');
+          hasError = true;
+        }
+      }
+    });
+    this.forceUpdate();
+    if (hasError) return;
+    let user = {};
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    util/* default.map */.Z.map(formData, field => {
+      var attr = {
+        key: field.name
+      };
+      field.answered = new util/* default.Date */.Z.Date().getTime();
+
+      if (field.type === 'number') {
+        attr.number = parseInt(field.value);
+        field.answer = util/* default.stringify */.Z.stringify(attr.number);
+      }
+
+      if (field.type === 'datetime') {
+        attr.datetime = new util/* default.Date */.Z.Date(field.value).toISOString();
+        field.answer = util/* default.stringify */.Z.stringify(attr.datetime);
+      }
+
+      if (field.type === 'list') {
+        attr.list = field.value;
+        field.answer = util/* default.stringify */.Z.stringify(attr.list);
+      }
+
+      if (field.type === 'text' || field.type === 'boolean') {
+        attr[field.type] = field.value;
+        field.answer = util/* default.stringify */.Z.stringify(field.value);
+      }
+
+      util/* default.setUserAttr */.Z.setUserAttr(user, attr);
+    });
+    util/* default.map */.Z.map(formData, field => {
+      let ffield = util/* default.find */.Z.find(this.props.form.fields, ffield => ffield.name === field.name);
+      if (!ffield) return;
+      ffield.answered = field.answered;
+    });
+    this.setState({
+      formData
+    });
+    this.props.store.setUser(user);
+    let message = {
+      attachments: [{
+        type: 'form_submit',
+        form_submit: {
+          state: '{"user_id":"' + this.props.store.matchUser().id + '"}',
+          form_message_id: util/* default.get */.Z.get(this.props.ev, 'id'),
+          fields: formData
+        }
+      }]
+    };
+    let cid = util/* default.convoOfEv */.Z.convoOfEv(this.props.ev);
+    this.props.store.sendConvoEvent(cid, 'message_sent', {
+      message
+    });
+    this.props.onSubmit && this.props.onSubmit();
+  }
+
+}
+
+function encode(key) {
+  return btoa(key).split('=').join('');
+}
+;// CONCATENATED MODULE: ./src/chatbox/FormAttachments.js
+
+
+
+
+class FormAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    if (byType === 'user') return;
+    let forms = [];
+    let attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments') || [];
+    util/* default.each */.Z.each(attachments, att => {
+      if (!att) return;
+      if (att.type !== 'form' && att.type !== 'ask_info_form') return;
+      att.form._type = att.type;
+      forms.push(att.form);
+    });
+    let $forms = util/* default.map */.Z.map(forms, (form, formIndex) => {
+      return (0,preact_module.h)(FormAttachment, {
+        store: this.props.store,
+        onSubmit: this.props.onSubmit,
+        ref: ref => {
+          this['form.' + formIndex] = ref;
+        },
+        key: formIndex,
+        form: form,
+        ev: this.props.ev,
+        t: this.props.t
+      });
+    });
+    if ($forms.length === 0) return null;
+    return (0,preact_module.h)("div", {
+      class: "message-agent"
+    }, $forms);
+  }
+
+  focus() {
+    var $form = this['form.0'];
+    if ($form) $form.focus();
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/FormSubmitAttachments.js
+
+
+
+class FormSubmitAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return null;
+    let submits = [];
+    let attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments') || [];
+    util/* default.each */.Z.each(attachments, att => {
+      if (!att) return;
+      if (att.type !== 'form_submit') return;
+      if (!att.form_submit) return;
+      submits.push(att.form_submit);
+    });
+    let $submits = util/* default.map */.Z.map(submits, (submit, index) => (0,preact_module.h)("div", {
+      class: "info-message"
+    }, (0,preact_module.h)("span", null, this.props.tt('prechat_form_thanks'))));
+    return (0,preact_module.h)("div", null, $submits);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/touchscroll.js
+function bind(el) {
+  if (!el) return;
+  el.removeEventListener('touchstart', el.md, 0);
+  window.removeEventListener('touchend', el.mu, 0);
+  window.removeEventListener('touchmove', el.mm, 0);
+  var lastClientX, pushed;
+
+  el.md = function (e) {
+    let touch = getFirstTouch(e);
+
+    if (!el.hasAttribute('nochilddrag') || !document.elementFromPoint(touch.pageX, touch.pageY)) {
+      pushed = 1;
+      lastClientX = touch.clientX;
+      e.preventDefault();
+    }
+  };
+
+  el.mu = () => {
+    pushed = 0;
+  };
+
+  el.mm = function (e) {
+    if (!pushed) return;
+    let touch = getFirstTouch(e);
+    el.scrollLeft -= -lastClientX + touch.clientX;
+    lastClientX = touch.clientX;
+  };
+
+  el.addEventListener('touchstart', el.md, {
+    passive: true
+  });
+  window.addEventListener('touchend', el.mu, {
+    passive: true
+  });
+  window.addEventListener('touchmove', el.mm, {
+    passive: true
+  });
+}
+
+function getFirstTouch(ev) {
+  if (!ev.touches) return {};
+  if (!ev.touches.length) return {};
+  return ev.touches[0];
+}
+;// CONCATENATED MODULE: ./src/chatbox/GenericTemplateAttachments.js
+
+
+
+
+
+class GenericTemplateAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusing: 0
+    };
+    this.galleryRef = (0,preact_module/* createRef */.Vf)();
+  }
+
+  componentDidMount() {
+    this.bindDrag();
+  }
+
+  focus(eleindex) {
+    this.setState({
+      focusing: eleindex
+    });
+    this.galleryRef.current.scrollLeft = 190 * eleindex - 20;
+  }
+
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    if (byType === 'user') return null;
+    let attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    let generics = util/* default.filter */.Z.filter(attachments, att => util/* default.get */.Z.get(att, 'type') === 'generic');
+    if (generics.length === 0) return null;
+    var $generics = util/* default.map */.Z.map(generics, (gen, index) => {
+      var $eles = util/* default.map */.Z.map(gen.elements, ele => {
+        let $title = ele.title ? (0,preact_module.h)("div", {
+          class: "generic-attachment--element-title"
+        }, ele.title) : null;
+        let $subtitle = ele.subtitle ? (0,preact_module.h)("div", {
+          class: "generic-attachment--element-subtitle"
+        }, ele.subtitle) : null;
+        return (0,preact_module.h)("div", {
+          class: "generic-attachment--element swiper-slide"
+        }, (0,preact_module.h)("div", null, (0,preact_module.h)("img", {
+          alt: "generic attachment element",
+          class: "generic-attachment--element-img",
+          src: this.props.store.replaceFileUrl(ele.image_url)
+        })), $title, $subtitle, (0,preact_module.h)(Buttons, {
+          buttons: ele.buttons,
+          onSelect: button => this.props.onSelect(button)
+        }));
+      });
+      let elements = util/* default.get */.Z.get(attachments, '0.elements', []);
+      let leftNavigatorCls = 'generic-attachment-navigator generic-attachment-navigator--left';
+      let rightNavigatorCls = 'generic-attachment-navigator generic-attachment-navigator--right';
+      if (this.state.focusing === 0) leftNavigatorCls += ' generic-attachment-navigator--disabled';
+      if (this.state.focusing === elements.length - 1) rightNavigatorCls += ' generic-attachment-navigator--disabled';
+      return (0,preact_module.h)("div", {
+        class: "generic-attachment-container"
+      }, (0,preact_module.h)("div", {
+        class: "generic-attachment",
+        ref: this.galleryRef
+      }, $eles), !this.props.store.isMobile() && (0,preact_module.h)(preact_module/* Fragment */.HY, null, (0,preact_module.h)("div", {
+        class: leftNavigatorCls,
+        onClick: _ => this.focus(this.state.focusing - 1)
+      }, (0,preact_module.h)("span", {
+        class: "generic-attachment-navigator-icon"
+      }, "\u2039")), (0,preact_module.h)("div", {
+        class: rightNavigatorCls,
+        onClick: _ => this.focus(this.state.focusing + 1)
+      }, (0,preact_module.h)("span", {
+        class: "generic-attachment-navigator-icon"
+      }, "\u203A"))));
+    });
+    return $generics;
+  }
+
+  bindDrag() {
+    if (!this.props.store.isMobile()) return;
+    let eles = document.getElementsByClassName('generic-attachment');
+    util/* default.map */.Z.map(eles, ele => bind(ele, () => {}));
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/ProductAttachments.js
+
+
+
+class ProductAttachments extends common/* Com */.M {
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    if (byType === 'user') return null;
+    let attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    let products = util/* default.filter */.Z.filter(attachments, att => util/* default.get */.Z.get(att, 'type') === 'product' || util/* default.get */.Z.get(att, 'type') === 'product_preview');
+    products = products.filter(product => product.product && product.product.name);
+    if (products.length === 0) return null;
+    let acc = this.props.store.matchAccount();
+    let $products = util/* default.map */.Z.map(products, (att, index) => {
+      let product = att.product;
+      let $detailbtn = null;
+      let url = product.url || product.mobile_url;
+      if (this.props.store.isMobile()) url = product.mobile_url || product.url;
+      if (url) $detailbtn = (0,preact_module.h)("a", {
+        class: "product_attachment__btn",
+        href: url,
+        target: "_blank"
+      }, this.props.t('detail'), (0,preact_module.h)("img", {
+        src: __webpack_require__(8453),
+        class: "product_attachment__btn_external_link"
+      }));
+      let $title = (0,preact_module.h)("a", {
+        href: url,
+        class: "product_attachment__title",
+        target: "_blank"
+      }, product.name);
+      let $subtitle = null;
+      let desc = product.description || product.long_description;
+      if (desc) $subtitle = (0,preact_module.h)("div", {
+        class: "product_attachment__subtitle"
+      }, desc);
+      let $price = null;
+
+      if (product.price) {
+        $price = (0,preact_module.h)("div", {
+          class: "product_attachment__price"
+        }, product.currency || util/* default.get */.Z.get(acc, 'currency', ''), " ", util/* default.formatCurrency */.Z.formatCurrency(product.price));
+      }
+
+      return (0,preact_module.h)("div", {
+        class: 'product_attachment product_attachment__' + byType
+      }, (0,preact_module.h)("div", null, (0,preact_module.h)("a", {
+        href: this.props.store.replaceFileUrl(product.image),
+        target: "_blank"
+      }, (0,preact_module.h)("img", {
+        class: "product_attachment__img",
+        src: this.props.store.replaceFileUrl(product.image)
+      }))), $title, $subtitle, $price, (0,preact_module.h)("div", {
+        class: "product_attachment__btns"
+      }, $detailbtn));
+    });
+    return $products;
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/OrderAttachments.js
+
+
+
+class OrderAttachments_ProductAttachments extends common/* Com */.M {
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    if (byType === 'user') return null;
+    let acc = this.props.store.matchAccount();
+    var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    let orders = util/* default.filter */.Z.filter(attachments, att => att.type === 'order' && att.order).map(att => att.order);
+    if (orders.length === 0) return null;
+    let $orders = util/* default.map */.Z.map(orders, (order, index) => {
+      let $note = null;
+
+      if (order.note) {
+        $note = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+          class: "order_attachment__label"
+        }, this.props.t('note')), (0,preact_module.h)("div", {
+          class: "order_attachment__text_truncate"
+        }, order.note));
+      }
+
+      let $products = null;
+
+      if (util/* default.size */.Z.size(order.items) > 0) {
+        $products = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+          class: "order_attachment__label"
+        }, this.props.t('product')), util/* default.map */.Z.map(order.items, item => {
+          let product = item.product || {};
+          return (0,preact_module.h)("div", {
+            class: "order_attachment__product"
+          }, (0,preact_module.h)("img", {
+            class: "order_attachment__product_img",
+            src: (util/* default.get */.Z.get(product, 'images.0'), __webpack_require__(9270))
+          }), (0,preact_module.h)("div", {
+            style: "overflow: hidden !important;"
+          }, (0,preact_module.h)("div", {
+            class: "order_attachment__product_name"
+          }, product.name), (0,preact_module.h)("div", {
+            class: "order_attachment__product_desc"
+          }, product.description || product.long_description), (0,preact_module.h)("div", {
+            class: "order_attachment__product_desc"
+          }, this.props.t('qty'), " ", item.quantity, "\xA0\xB7\xA0", util/* default.formatCurrency */.Z.formatCurrency(product.price))));
+        }));
+      }
+
+      let $total = (0,preact_module.h)("div", {
+        class: "order_attachment__footer"
+      }, (0,preact_module.h)("div", null, this.props.t('total')), ' ', (0,preact_module.h)("div", null, (0,preact_module.h)("b", null, util/* default.formatCurrency */.Z.formatCurrency(order.total))));
+      let addr = util/* default.get */.Z.get(order, 'shipping.address', {});
+      let fulladdr = [addr.street, addr.ward, addr.district, addr.region, addr.country].filter(a => a).join(', ');
+      let address = fulladdr;
+      let phoneattr = util/* default.find */.Z.find(util/* default.get */.Z.get(order, 'user.attributes', []), attr => attr.key === 'phones') || {
+        key: 'phones',
+        text: ''
+      };
+      let phone = util/* default.get */.Z.get(order, 'shipping.address.phone', '').trim();
+      phone = phone || util/* default.trim */.Z.trim(phoneattr.text);
+      if (phone) phone = this.props.t('phn') + ': ' + phone;
+      let $shipto = null;
+
+      if (address || phone) {
+        $shipto = (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+          class: "order_attachment__label"
+        }, this.props.t('ship_to')), (0,preact_module.h)("div", {
+          class: "order_attachment__text_truncate"
+        }, address), (0,preact_module.h)("div", {
+          class: "order_attachment__text_truncate"
+        }, phone));
+      }
+
+      return (0,preact_module.h)("div", {
+        class: `order_attachment order_attachment__${byType}`
+      }, (0,preact_module.h)("div", {
+        class: "order_attachment__header"
+      }, this.props.t('order'), (0,preact_module.h)("span", {
+        class: "order_attachment__text_muted order_attachment__text_sm"
+      }, "#", order.id)), $products, $shipto, (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+        class: "order_attachment__label"
+      }, this.props.t('payment')), (0,preact_module.h)("div", null, "COD")), $note, $total);
+    });
+    return $orders;
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/VideoAttachments.js
+
+
+
+class VideoAttachments extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    var attachments = util/* default.get */.Z.get(this.props.ev, 'data.message.attachments', []);
+    var videos = [];
+    util/* default.each */.Z.each(attachments, (att, i) => {
+      if (!att) return;
+      if (util/* default.includes */.Z.includes(att.mimetype, 'video')) videos.push(att);
+    });
+    if (videos.length === 0) return null;
+    var $videos = util/* default.map */.Z.map(videos, (video, index) => {
+      return (0,preact_module.h)("div", {
+        class: `video-attachment video-attachment--${byType}`
+      }, (0,preact_module.h)("video", {
+        class: "video-attachment__video",
+        src: this.props.store.replaceFileUrl(video.url),
+        width: "100%",
+        height: "",
+        poster: this.props.store.replaceFileUrl(video.thumbnail_url),
+        controls: "controls",
+        preload: "metadata",
+        onclick: "this.play()"
+      }));
+    });
+    return (0,preact_module.h)("div", {
+      class: `message-${byType}`
+    }, $videos);
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/ShadowDomRoot.js
+
+
+class ShadowDomRoot extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.ref = (0,preact_module/* createRef */.Vf)();
+  }
+
+  componentDidMount() {
+    this.shadowRoot = this.ref.current.attachShadow({
+      mode: 'open'
+    });
+    this.update(this.props.html);
+  }
+
+  update(html) {
+    this.shadowRoot.innerHTML = `<style type="text/css">
+body { font-family: 'Roboto', sans-serif!important; font-size: 14px!important; line-height: 20px; overflow-y: hidden; margin:0 }
+h{ font-size: 14/18px!important; }
+a { text-decoration: none;}
+img { max-width: 100%; display: block; margin: 10px auto; }
+* { white-space: normal }
+ul > li { margin-bottom: 5px }
+ul:last-child { margin-bottom: 0 }
+p:first-child { margin-top: 0;}
+p:last-child { margin-bottom: 0;}
+</style>
+<div>${html}</div>`;
+    let links = this.shadowRoot.querySelectorAll('a');
+
+    for (var i = 0; i < links.length; i++) links[i].target = '_blank';
+  }
+
+  render() {
+    return (0,preact_module.h)("div", {
+      ref: this.ref,
+      style: "white-space: normal !important"
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/TextMessage.js
+
+let mustrerender = [];
+
+let marked = (obj, text) => {
+  mustrerender.push(obj);
+  return '';
+};
+
+const loadMarked = () => __webpack_require__.e(/* import() */ 441).then(__webpack_require__.bind(__webpack_require__, 7441));
+
+(async () => {
+  let markedf = (await loadMarked()).marked;
+
+  marked = (obj, text) => markedf(text);
+
+  util/* default.map */.Z.map(mustrerender, obj => obj.forceUpdate());
+  mustrerender = [];
+})();
+
+
+
+
+
+class TextMessage extends common/* Com */.M {
+  render() {
+    var format = util/* default.get */.Z.get(this.props.ev, 'data.message.format', 'plaintext');
+    if (format === 'markdown') return this.renderMarkdown();
+    var text = util/* default.get */.Z.get(this.props.ev, 'data.message.text');
+    text = util/* default.trim */.Z.trim(text);
+    if (util/* default.size */.Z.size(text) === 0) return null;
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    var tags = util/* default.extractText */.Z.extractText(text).map(tag => {
+      if (tag.type === 'emoji') return (0,preact_module.h)(Emoji, {
+        emojiCode: tag.text,
+        byType: byType
+      });
+
+      if (tag.type === 'link') {
+        return (0,preact_module.h)("a", {
+          href: tag.text,
+          target: "_blank"
+        }, tag.text);
+      }
+
+      if (tag.type === 'phone') return (0,preact_module.h)("a", {
+        href: 'tel:' + tag.text
+      }, tag.text);
+      if (tag.type === 'email') return (0,preact_module.h)("a", {
+        href: 'mailto:' + tag.text
+      }, tag.text);
+      return tag.text;
+    });
+    if (util/* default.size */.Z.size(tags) === 0) return null;
+
+    if (byType === 'agent') {
+      return (0,preact_module.h)("div", {
+        class: "message-agent message-text--agent"
+      }, tags);
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "message-user message-text--user"
+    }, tags);
+  }
+
+  renderMarkdown() {
+    var text = util/* default.get */.Z.get(this.props.ev, 'data.message.text');
+    if (util/* default.size */.Z.size(text) === 0) return null;
+    let byType = util/* default.get */.Z.get(this.props.ev, 'by.type');
+    text = util/* default.trim */.Z.trim(text);
+    if (util/* default.size */.Z.size(text) === 0) return null;
+
+    if (byType === 'agent') {
+      return (0,preact_module.h)("div", {
+        class: "markdown-message message-agent message-text--agent"
+      }, (0,preact_module.h)(ShadowDomRoot, {
+        html: marked(this, text)
+      }));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "d-flex flex-column align-items-end"
+    }, (0,preact_module.h)("div", {
+      class: "markdown-message message-user message-text--user"
+    }, (0,preact_module.h)(ShadowDomRoot, {
+      html: marked(this, text)
+    })));
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/time.js
+
+var g_pub = new util/* default.Pubsub */.Z.Pubsub();
+setInterval(() => g_pub.publish('time'), 20 * 1000);
+
+
+class Time extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.setState({
+      t: '',
+      langCode: 'en_US'
+    });
+  }
+
+  updateTime() {
+    var t = '';
+
+    if (this.props.ago) {
+      if (this.props.short) {
+        if (Math.abs(this.props.time - new util/* default.Date */.Z.Date().getTime()) > 86400000 * 10) {
+          let tim = new util/* default.Date */.Z.Date(this.props.time);
+          let tzyear = tim.getFullYear();
+          let locale = util/* default.get */.Z.get(navigator, 'languages.0', 'en-US');
+          let tzmonthname = tim.toLocaleDateString(locale, {
+            month: 'short'
+          });
+          let tzdate = tim.getDate();
+          t = tzdate + ' ' + tzmonthname + ' ' + tzyear;
+        }
+      }
+
+      if (!t && this.props.time > 0) t = ago(this.props.time, new util/* default.Date */.Z.Date().getTime());
+    } else t = util/* default.shortTime */.Z.shortTime(this.props.time, this.props.tzoffset);
+
+    if (this.props.uppercase) t = t.toUpperCase();
+    if (t === this.state.t) return;
+    this.setState({
+      t
+    });
+  }
+
+  componentDidMount() {
+    g_pub.on2(this, 'time', () => this.updateTime());
+    this.updateTime();
+  }
+
+  render() {
+    return (0,preact_module.h)("span", null, this.state.t);
+  }
+
+}
+
+function ago(timeA, timeB) {
+  const relObj = {
+    s: '%d s',
+    m: '1m',
+    mm: '%dm',
+    h: '1h',
+    hh: '%dh',
+    d: '1d',
+    dd: '%dd',
+    M: '1M',
+    MM: '%M',
+    y: '1y',
+    yy: '%dy'
+  };
+  const loc = relObj;
+  const T = [{
+    l: 's',
+    r: 44,
+    d: 1000
+  }, {
+    l: 'm',
+    r: 89
+  }, {
+    l: 'mm',
+    r: 44,
+    d: 60000
+  }, {
+    l: 'h',
+    r: 89
+  }, {
+    l: 'hh',
+    r: 21,
+    d: 3600000
+  }, {
+    l: 'd',
+    r: 35
+  }, {
+    l: 'dd',
+    r: 25,
+    d: 86400000
+  }, {
+    l: 'M',
+    r: 45
+  }, {
+    l: 'MM',
+    r: 10,
+    d: 30 * 86400000
+  }, {
+    l: 'y',
+    r: 17
+  }, {
+    l: 'yy',
+    d: 365 * 86400000
+  }];
+  const Tl = T.length;
+  let result;
+  let out;
+
+  for (let i = 0; i < Tl; i += 1) {
+    let t = T[i];
+
+    if (t.d) {
+      result = (timeA - timeB) / t.d;
+    }
+
+    let abs = Math.round(Math.abs(result));
+
+    if (abs <= t.r || !t.r) {
+      if (abs <= 1 && i > 0) t = T[i - 1];
+      out = loc[t.l].replace('%d', abs);
+      break;
+    }
+  }
+
+  return out;
+}
+;// CONCATENATED MODULE: ./src/chatbox/InfoMessage.js
+
+
+function getRateLang(rating) {
+  if (!rating) return 'poor';
+  if (rating < 2) return 'poor';
+  if (rating < 4) return 'average';
+  return 'great';
+}
+
+
+
+
+class InfoMessage extends common/* Com */.M {
+  render() {
+    let ev = this.props.ev.ev;
+    var $time = null;
+
+    if (this.props.ev.show_time) {
+      $time = (0,preact_module.h)("div", {
+        class: "convo-event-time"
+      }, (0,preact_module.h)(Time, {
+        time: ev.created
+      }));
+    }
+
+    if (ev.type === 'conversation_rated') {
+      var rating = util/* default.get */.Z.get(ev, 'data.conversation.ratings.0', {
+        no_rating: true,
+        rating: 0
+      });
+      if (rating.no_rating) return null;
+      return (0,preact_module.h)("div", {
+        class: "convo-event"
+      }, $time, (0,preact_module.h)("div", {
+        class: "info-message"
+      }, this.props.t('rated_as') + ' ' + this.props.t(getRateLang(rating.rating)).toLowerCase()));
+    }
+
+    if (ev.type === 'conversation_state_updated' && util/* default.get */.Z.get(ev, 'data.conversation.state') === 'ended') {
+      return (0,preact_module.h)("div", {
+        class: "convo-event"
+      }, $time, (0,preact_module.h)("div", {
+        class: "info-message"
+      }, this.props.t('conversation_ended')));
+    }
+
+    return null;
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Event.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class Event extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.refForm = (0,preact_module/* createRef */.Vf)();
+  }
+
+  render() {
+    var ev = util/* default.get */.Z.get(this.props.event, 'ev', {});
+
+    switch (ev.type) {
+      case 'conversation_joined':
+        break;
+
+      case 'message_sent':
+        return this.renderMessageSent();
+
+      case 'conversation_state_updated':
+      case 'conversation_rating_requested':
+      case 'conversation_rated':
+        if (!util/* default.startsWith */.Z.startsWith(ev.id, 'ev')) return null;
+        return (0,preact_module.h)(InfoMessage, {
+          t: this.props.t,
+          store: this.props.store,
+          ev: this.props.event
+        });
+    }
+
+    return null;
+  }
+
+  focus() {
+    this.refForm.current && this.refForm.current.focus();
+  }
+
+  chooseQuickReply(reply) {
+    let ev = util/* default.get */.Z.get(this.props.event, 'ev', {});
+    let message = {
+      text: reply.title,
+      format: 'plaintext'
+    };
+
+    if (reply.payload) {
+      message.attachments = [{
+        type: 'postback',
+        postback: {
+          event_id: ev.id,
+          payload: reply.payload
+        }
+      }];
+    }
+
+    this.props.onSend(message);
+  }
+
+  choosePostbackBtn(button) {
+    let ev = util/* default.get */.Z.get(this.props.event, 'ev', {});
+    let message = {
+      text: button.title,
+      format: 'plaintext'
+    };
+
+    if (button.payload) {
+      message.attachments = [{
+        type: 'postback',
+        postback: {
+          event_id: ev.id,
+          payload: button.payload
+        }
+      }];
+    }
+
+    this.props.onSend(message);
+  }
+
+  renderAgentAvatar(ev) {
+    let bytype = util/* default.get */.Z.get(ev, 'by.type');
+    let byid = util/* default.get */.Z.get(ev, 'by.display_id', util/* default.get */.Z.get(ev, 'by.id'));
+    if (bytype === 'user') return null;
+    var senderName = this.getSenderName(ev);
+    let acc = this.props.store.matchAccount();
+
+    var uri = acc.logo_url || __webpack_require__(9895);
+
+    let agentM = this.props.store.matchAgent('*');
+
+    if (byid !== 'system' || bytype !== 'dummy') {
+      uri = util/* default.get */.Z.get(agentM[byid], 'avatar_url') || acc.logo_url || __webpack_require__(4761);
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "message-sender"
+    }, (0,preact_module.h)("img", {
+      alt: "sender",
+      class: "message-sender-avatar",
+      src: this.props.store.replaceFileUrl(uri)
+    }), (0,preact_module.h)("p", {
+      class: "message-sender-name"
+    }, senderName));
+  }
+
+  renderMessageSent() {
+    let ev = this.props.event.ev;
+    var $time = null;
+
+    if (this.props.event.show_time) {
+      $time = (0,preact_module.h)("div", {
+        class: "convo-event-time"
+      }, (0,preact_module.h)(Time, {
+        time: ev.created
+      }));
+    }
+
+    let t = new util/* default.Date */.Z.Date(ev.created).toLocaleString();
+
+    if (util/* default.get */.Z.get(ev, 'by.type') !== 'user') {
+      let $sender = null;
+      if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
+      return (0,preact_module.h)("div", {
+        class: "convo-event agent-message",
+        title: t
+      }, $time, $sender, (0,preact_module.h)(TextMessage, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(ImageAttachment, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(AudioAttachments, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(VideoAttachments, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(FileAttachments, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(ButtonAttachments, {
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(FormAttachments, {
+        store: this.props.store,
+        onSubmit: this.props.onFormSubmit,
+        ref: this.refForm,
+        ev: ev,
+        t: this.props.t
+      }), (0,preact_module.h)(FormSubmitAttachments, {
+        store: this.props.store,
+        ev: ev,
+        t: this.props.t
+      }), (0,preact_module.h)(GenericTemplateAttachments, {
+        store: this.props.store,
+        ev: ev,
+        onSelect: e => this.choosePostbackBtn(e)
+      }), (0,preact_module.h)(ProductAttachments, {
+        t: this.props.t,
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(OrderAttachments_ProductAttachments, {
+        t: this.props.t,
+        store: this.props.store,
+        ev: ev
+      }), (0,preact_module.h)(QuickReplies, {
+        store: this.props.store,
+        ev: ev,
+        onSelect: e => this.chooseQuickReply(e)
+      }));
+    }
+
+    if (util/* default.getMsgField */.Z.getMsgField(ev, 'idempotency') === ev.id && this.props.store.now() - ev.created < 900) {
+      setTimeout(() => this.setState({
+        refresh: this.state.refresh
+      }), 1000);
+    }
+
+    let $dot = (0,preact_module.h)("div", {
+      class: "sending_dot"
+    });
+
+    if (this.props.store.now() - ev.created < 900 || util/* default.getMsgField */.Z.getMsgField(ev, 'idempotency') !== ev.id) {
+      $dot = (0,preact_module.h)("div", {
+        class: "sending_dot sending_dot__hide"
+      });
+    }
+
+    let $sender = null;
+    if (this.props.event.mode === 'lead') $sender = (0,preact_module.h)("div", {
+      class: "pt-3"
+    });
+    let $error = null;
+
+    if (ev._error && ev.type === 'message_sent') {
+      $error = (0,preact_module.h)("a", {
+        class: "message_error",
+        src: "javascript:;",
+        onClick: e => this.resendMessage()
+      }, (0,preact_module.h)("div", {
+        class: "message_error__text"
+      }, this.props.t('error_send_message')), (0,preact_module.h)("div", {
+        class: "message_error__icon"
+      }));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "convo-event user-message",
+      title: t
+    }, $time, $sender, (0,preact_module.h)("div", {
+      class: "message-user__container"
+    }, $dot, (0,preact_module.h)(TextMessage, {
+      store: this.props.store,
+      ev: ev,
+      refresh: this.state.refresh
+    }), (0,preact_module.h)(ImageAttachment, {
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(AudioAttachments, {
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(VideoAttachments, {
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(FileAttachments, {
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(ButtonAttachments, {
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(FormAttachments, {
+      store: this.props.store,
+      onSubmit: this.props.onFormSubmit,
+      ref: this.refForm,
+      ev: ev
+    }), (0,preact_module.h)(ProductAttachments, {
+      t: this.props.t,
+      store: this.props.store,
+      ev: ev
+    }), (0,preact_module.h)(FormSubmitAttachments, {
+      store: this.props.store,
+      ev: ev
+    })), $error);
+  }
+
+  renderUpdateConvo(ev) {
+    var state = util/* default.get */.Z.get(ev, 'data.conversation.state');
+    if (state === 'active') return null;
+    if (state === 'pending') return null;
+    return (0,preact_module.h)("div", {
+      class: "message-system"
+    }, this.props.t('conversation_state_updated', {
+      state
+    }));
+  }
+
+  resendMessage() {
+    let cid = util/* default.convoOfEv */.Z.convoOfEv(this.props.event.ev);
+    const message = util/* default.get */.Z.get(this.props.event, 'ev.data.message');
+    this.props.store.sendConvoEvent(cid, 'message_sent', {
+      message
+    });
+  }
+
+  getSenderName(ev) {
+    let bytype = util/* default.get */.Z.get(ev, 'by.type');
+    let byid = util/* default.get */.Z.get(ev, 'by.display_id', util/* default.get */.Z.get(ev, 'by.id'));
+    if (byid === 'system' || bytype === 'dummy') return 'system';
+    let user = this.props.store.matchUser();
+    let acc = this.props.store.matchAccount();
+    if (bytype === 'user') return util/* default.getUserDisplayName */.Z.getUserDisplayName(user);
+    if (bytype === 'agent') return util/* default.getAgentDisplayName */.Z.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+    return '';
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/spinner.js
+const loadingimg = __webpack_require__(6484);
+
+
+
+class Spinner extends common/* Com */.M {
+  render() {
+    let mode = (this.props.mode + '').toLowerCase();
+    let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : '#ffffffdd';
+    let borderColor = mode === 'dark' ? '#00000055' : mode === 'blue' ? 'rgba(52, 152, 220, .15)' : '#ffffff55';
+    let size = this.props.size || 14;
+    let borderWidth = Math.ceil(size / 14);
+    let style = `width: ${size}px !important;height: ${size}px!important;color: ${borderColor} !important;border-width: ${borderWidth}px !important;
+    border-left-color: ${borderColor} !important;border-top-color: ${borderColor} !important;
+    border-bottom-color: ${borderColor} !important;border-right-color: ${mainColor} !important;`;
+
+    if (this.props.static) {
+      let style = `width: ${size}px;height: ${size}px;`;
+      if (size < 40) return (0,preact_module.h)(LoaderIcon, {
+        size: size + '',
+        style: `stroke:${mainColor}`
+      });
+
+      if (this.props.center) {
+        return (0,preact_module.h)("div", {
+          class: "loading"
+        }, (0,preact_module.h)("img", {
+          alt: "loading",
+          style: style,
+          src: loadingimg
+        }));
+      }
+
+      return (0,preact_module.h)("img", {
+        alt: "loading",
+        style: style,
+        src: loadingimg
+      });
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "spinner1",
+      style: style
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Events.js
+
+
+
+const convoemptyimg = __webpack_require__(6188);
+
+
+
+
+
+class Events extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+    this.props.store.onConvoEvent(this, ev => this.onEvent(ev));
+    this.loadConvo();
+    this.refBody = null;
+    this.checkAndSeen = util/* default.throttle */.Z.throttle(() => {
+      if (this.props.isShow && this.isBottom() && this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
+        this.props.store.seenConvo(this.props.cid);
+      }
+    }, 500);
+    this.checkAndSeen();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.cid !== this.props.cid) this.loadConvo();
+  }
+
+  render() {
+    if (this.state.error) return this.renderError();
+    let events = util/* default.map */.Z.map(this.props.store.listEvents(this.props.cid));
+
+    if (!this.state.loading && util/* default.size */.Z.size(events) === 0) {
+      return (0,preact_module.h)("div", {
+        ref: ref => this.refBody = ref,
+        class: "widget-body--events-container"
+      }, (0,preact_module.h)("div", {
+        class: "widget-body--empty"
+      }, (0,preact_module.h)("div", {
+        class: "widget-body--empty-icon"
+      }), (0,preact_module.h)("div", {
+        class: "widget-body--empty-text"
+      }, this.props.t('empty_convo_text'))), (0,preact_module.h)(PoweredBy, {
+        store: this.props.store
+      }));
+    }
+
+    events = util/* default.orderBy */.Z.orderBy(events, 'created', 'asc');
+    let convo = this.props.store.matchConvo(this.props.cid);
+    events = util/* default.map */.Z.map(events, ev => ({
+      ev: ev
+    }));
+    processEvents(convo, events);
+    let $events = util/* default.map */.Z.map(events, ev => (0,preact_module.h)(Event, {
+      store: this.props.store,
+      onFormSubmit: this.props.onFormSubmit,
+      onSend: this.props.onSend,
+      onPostback: this.props.onPostback,
+      event: ev,
+      t: this.props.t,
+      key: ev.ev.id
+    }));
+    let $loading = null;
+    let style = 'opacity: 1 !important';
+
+    if (this.state.loading || this.props.creating) {
+      $loading = (0,preact_module.h)(Spinner, {
+        static: true,
+        mode: "blue",
+        size: "120",
+        center: true
+      });
+      style = 'opacity: 0 !important';
+    }
+
+    return (0,preact_module.h)(preact_module/* Fragment */.HY, null, $loading, (0,preact_module.h)("div", {
+      style: style,
+      ref: ref => this.refBody = ref,
+      class: "widget-body--events-container",
+      onMouseOver: this.checkAndSeen
+    }, (0,preact_module.h)("div", {
+      class: "widget-body--events"
+    }, $events), (0,preact_module.h)(PoweredBy, {
+      store: this.props.store
+    })));
+  }
+
+  renderError() {
+    let $tryAgainBtn = (0,preact_module.h)("a", {
+      href: "#",
+      onclick: _ => this.loadConvo()
+    }, this.props.t('try_again'));
+    if (this.state.loading) $tryAgainBtn = (0,preact_module.h)(Spinner, {
+      size: "16",
+      mode: "blue"
+    });
+    return (0,preact_module.h)("div", {
+      class: "widget-body--events-container widget-body--events-container__error"
+    }, (0,preact_module.h)("img", {
+      alt: "empty",
+      src: convoemptyimg
+    }), (0,preact_module.h)("div", {
+      class: "widget_body__events__error_msg"
+    }, this.props.t('load_convo_error')), (0,preact_module.h)("div", {
+      class: "widget_body__events__error_retry"
+    }, $tryAgainBtn));
+  }
+
+  focus() {
+    let events = this.props.store.listEvents(this.props.cid);
+    events = util/* default.orderBy */.Z.orderBy(util/* default.map */.Z.map(events), 'created', 'desc');
+    var last_agent_sent;
+
+    for (let ev of events) {
+      if (util/* default.get */.Z.get(ev, 'type') !== 'message_sent') continue;
+      if (util/* default.get */.Z.get(ev, 'by.type') === 'user') continue;
+      last_agent_sent = ev;
+      break;
+    }
+
+    if (util/* default.get */.Z.get(last_agent_sent, 'by.type') === 'user') last_agent_sent = null;
+    let attachments = util/* default.get */.Z.get(last_agent_sent, 'data.message.attachments', []);
+    let convo = this.props.store.matchConvo(this.props.cid);
+    let pendingForms = util/* default.filter */.Z.filter(attachments, att => {
+      if (!att) return false;
+      if (att.type !== 'form' && att.type !== 'ask_info_form') return false;
+      var form = att.form;
+      if (!form) return false;
+      var state = util/* default.parseJSON */.Z.parseJSON(form.state) || {};
+      if (!state.require_finished && att.type !== 'ask_info_form') return false;
+      if (Events_isSummited(att.form)) return false;
+      if (convo.state === 'ended') return false;
+      return true;
+    });
+  }
+
+  onEvent(newev) {
+    if (util/* default.convoOfEv */.Z.convoOfEv(newev) !== this.props.cid) return;
+    let isBottom = this.isBottom();
+    var byme = false;
+    if (util/* default.get */.Z.get(newev, 'type') === 'message_sent' && newev.id === util/* default.getMsgField */.Z.getMsgField(newev, 'idempotency')) byme = true;
+    if (byme || isBottom) this.scrollToBottom();
+  }
+
+  async loadConvo() {
+    if (!this.props.cid) return;
+    this.lastContentOffsetY = 0;
+    this.setState({
+      loading: true
+    });
+    let events = this.props.store.listEvents(this.props.cid);
+
+    if (util/* default.size */.Z.size(events) === 0) {
+      let cid = this.props.cid;
+      let {
+        error
+      } = await this.props.store.fetchMoreEvents(cid);
+      this.setState({
+        loading: false
+      });
+      if (cid !== this.props.cid) return;
+
+      if (error) {
+        this.setState({
+          error: true
+        });
+        return;
+      }
+    }
+
+    this.setState({
+      loading: true
+    });
+    this.props.store.fetchMoreEvents(this.props.cid);
+    this.setState({
+      error: false
+    });
+    this.scrollToBottom();
+    setTimeout(() => this.setState({
+      loading: false
+    }), 50);
+  }
+
+  isBottom() {
+    let $container = this.refBody;
+    if (!$container) return false;
+    return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50;
+  }
+
+  scrollToBottom() {
+    setTimeout(() => {
+      const $div = this.refBody;
+      if ($div) $div.scrollTop = $div.scrollHeight;
+    });
+    setTimeout(() => {
+      const $div = this.refBody;
+      if ($div) $div.scrollTop = $div.scrollHeight;
+    }, 200);
+
+    if (this.props.isShow) {
+      if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
+        this.props.store.seenConvo(this.props.cid);
+      }
+    }
+  }
+
+}
+
+function processEvents(convo, events) {
+  events = events.filter(event => visibleEvent(event.ev));
+  if (events.length < 1) return;
+
+  for (var i = 1; i < events.length; i++) {
+    let curEvent = events[i];
+    let lastEvent = events[i - 1];
+
+    if (visibleEvent(curEvent.ev)) {
+      let elapsedSec = util/* default.unixSec */.Z.unixSec(curEvent.ev.created) - util/* default.unixSec */.Z.unixSec(lastEvent.ev.created);
+      if (elapsedSec > 120) curEvent.show_time = true;
+    }
+  }
+
+  for (var i = 0; i < events.length; i++) {
+    let curEvent = events[i];
+
+    if (util/* default.get */.Z.get(curEvent, 'ev.type') === 'message_sent') {
+      curEvent.show_time = true;
+      break;
+    }
+  }
+
+  for (var i = 0; i < events.length; i++) {
+    let curEvent = events[i];
+    let prevEvent = events[i - 1];
+
+    if (curEvent.ev.type === 'message_sent') {
+      curEvent.mode = 'lead';
+
+      if (util/* default.get */.Z.get(prevEvent, 'ev.type') === 'message_sent' && util/* default.get */.Z.get(prevEvent, 'ev.by.id') === util/* default.get */.Z.get(curEvent, 'ev.by.id')) {
+        curEvent.mode = 'follow';
+      }
+
+      continue;
+    }
+  }
+}
+
+function visibleEvent(ev) {
+  let type = util/* default.get */.Z.get(ev, 'type');
+  return type === 'message_sent' || type === 'conversation_state_updated';
+}
+
+function Events_isSummited(form) {
+  let fields = util/* default.get */.Z.get(form, 'fields') || [];
+  return util/* default.find */.Z.find(fields, field => !!field.answered);
+}
+;// CONCATENATED MODULE: ./src/chatbox/Typing.js
+
+
+
+class Typing extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.setState({
+      isShow: false,
+      ev: {}
+    });
+    this.props.store.onConvoEvent(this, ev => {
+      if (util/* default.convoOfEv */.Z.convoOfEv(ev) !== this.props.cid) return;
+      let user = this.props.store.matchUser();
+      if (util/* default.get */.Z.get(ev, 'by.id') === user.id) return;
+      let oldby = util/* default.get */.Z.get(this.state.ev, 'by.id');
+      if (oldby && util/* default.get */.Z.get(ev, 'by.id') !== oldby) return;
+
+      if (util/* default.get */.Z.get(ev, 'type') === 'message_sent') {
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = null;
+        this.setState({
+          isShow: false
+        });
+        return;
+      }
+
+      if (util/* default.get */.Z.get(ev, 'type') !== 'conversation_typing') return;
+      this.setState({
+        ev: ev,
+        isShow: true
+      });
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        if (util/* default.convoOfEv */.Z.convoOfEv(ev) !== this.props.cid) return;
+        this.timer = null;
+        this.setState({
+          isShow: false
+        });
+      }, 10000);
+    });
+  }
+
+  render() {
+    let account = this.props.store.matchAccount();
+    var cls = this.state.isShow ? '' : 'typing--hidden';
+    let byid = util/* default.get */.Z.get(this.state.ev, 'by.display_id', util/* default.get */.Z.get(this.state.ev, 'by.id'));
+    let agentName = util/* default.getAgentDisplayName */.Z.getAgentDisplayName(account, this.props.store.matchAgent(byid));
+    return (0,preact_module.h)("div", {
+      class: `typing ${cls}`
+    }, agentName, " ", this.props.t('typing'));
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/releaseAnimation.js
+
+/* harmony default export */ const releaseAnimation = (class {
+  constructor(config) {
+    this.duration = config.duration || 100;
+    this.breakingV = config.breakingV || 7.0;
+    this.maxY = config.maxY || 500;
+    this.minY = config.minY || 0;
+  }
+
+  play(v, y0, cb) {
+    this.stop();
+    var t0;
+
+    var run = t => {
+      if (!t) t = new util/* default.Date */.Z.Date().getTime();
+      var deltaT = t - t0;
+      var [newy, done] = this.calcY(v, y0, deltaT);
+      cb(newy);
+      if (done) return this.stop();
+      this.animationframe = window.requestAnimationFrame(run);
+    };
+
+    this.animationframe = window.requestAnimationFrame(t => {
+      t0 = t || new util/* default.Date */.Z.Date().getTime();
+      run(t0);
+    });
+  }
+
+  calcY(v, y0, t) {
+    var towardY;
+    if (y0 > this.maxY) towardY = this.maxY;else if (y0 < this.minY) towardY = this.minY;else if (Math.abs(v) < this.breakingV) {
+      if (Math.abs(this.maxY - y0) < Math.abs(this.minY - y0)) {
+        towardY = this.maxY;
+      } else {
+        towardY = this.minY;
+      }
+    } else {
+      if (v < 0) towardY = this.maxY;else towardY = this.minY;
+    }
+    var y = linearTransform(y0, towardY, t, this.duration);
+    return [y, eqFloat(y, towardY)];
+  }
+
+  stop() {
+    window.cancelAnimationFrame(this.animationframe);
+  }
+
+});
+
+function linearTransform(from, to, t, duration) {
+  if (eqFloat(from, to)) return from;
+  var s = to - from;
+  var v = s / duration;
+  var x = from + v * t;
+  if (from < to && x > to) x = to;else if (to < from && x < to) x = to;
+  return x;
+}
+
+function eqFloat(a, b) {
+  return Math.abs(a - b) <= 0.001;
+}
+;// CONCATENATED MODULE: ./src/chatbox/Rating.js
+function Rating_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+const POPUP_MAX_HEIGHT = 400;
+const POPUP_HARD_MAX_HEIGHT = 500;
+const POPUP_MIN_HEIGHT = 0;
+
+
+class Rating extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+
+    Rating_defineProperty(this, "state", {
+      hide: true,
+      ratingHeight: 0,
+      overlayOpacity: 0.3,
+      comment: ''
+    });
+
+    this.refComment = (0,preact_module/* createRef */.Vf)();
+    this.refRating = (0,preact_module/* createRef */.Vf)();
+    this.refHandle = (0,preact_module/* createRef */.Vf)();
+  }
+
+  componentDidMount() {
+    this.props.store.onUpdate(this, () => {
+      if (this.shoudDisplay()) this.open();
+    });
+    this.props.store.onConvoEvent(this, ev => {
+      var cid = util/* default.convoOfEv */.Z.convoOfEv(ev);
+      if (cid !== this.props.cid) return;
+      if (this.shoudDisplay()) this.open();
+    });
+
+    this.mouseUp = e => this.onMouseUp(e);
+
+    this.mouseMove = e => this.onMouseMove(e);
+
+    this.mouseDown = e => this.onMouseDown(e);
+
+    var $ratingHandle = this.refHandle.current;
+    $ratingHandle.addEventListener('mousedown', this.mouseDown, {
+      passive: true
+    });
+    $ratingHandle.addEventListener('touchstart', this.mouseDown, {
+      passive: true
+    });
+    window.addEventListener('mouseup', this.mouseUp, {
+      passive: true
+    });
+    window.addEventListener('touchend', this.mouseUp, {
+      passive: true
+    });
+    window.addEventListener('mousemove', this.mouseMove, {
+      passive: true
+    });
+    window.addEventListener('touchmove', this.mouseMove, {
+      passive: true
+    });
+    this.animation = new releaseAnimation({
+      maxY: POPUP_MAX_HEIGHT,
+      minY: POPUP_MIN_HEIGHT,
+      duration: 150
+    });
+    this.close();
+    if (this.shoudDisplay() || this.props.forceView === 'rating') this.open();
+  }
+
+  componentWillUnmount() {
+    var $ratingHandle = this.refHandle.current;
+    $ratingHandle.removeEventListener('mousedown', this.mouseDown, 0);
+    $ratingHandle.removeEventListener('touchstart', this.mouseDown, 0);
+    window.removeEventListener('mouseup', this.mouseUp, 0);
+    window.removeEventListener('touchend', this.mouseUp, 0);
+    window.removeEventListener('mousemove', this.mouseMove, 0);
+    window.removeEventListener('touchmove', this.mouseMove, 0);
+  }
+
+  render() {
+    let cls = this.state.hide ? 'd-none' : '';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)("div", {
+      class: "rating--overlay",
+      style: `opacity: ${this.state.overlayOpacity * 0.5} !important;`
+    }), (0,preact_module.h)("div", {
+      class: "rating",
+      ref: this.refRating,
+      style: `color:red; height: ${this.state.ratingHeight}px !important;`
+    }, (0,preact_module.h)("div", {
+      class: "rating--handle",
+      ref: this.refHandle
+    }, (0,preact_module.h)("div", {
+      class: "rating--thumb"
+    })), (0,preact_module.h)("div", {
+      class: "rating--content"
+    }, (0,preact_module.h)("div", {
+      class: "rating--heading"
+    }, this.props.t('rating_title'), (0,preact_module.h)("div", {
+      class: "rating--close-btn",
+      onClick: e => this.onCloseRating(e)
+    })), (0,preact_module.h)("div", {
+      class: "rating--description"
+    }, this.props.t('rating_description')), (0,preact_module.h)("textarea", {
+      ref: this.refComment,
+      type: "text",
+      class: "rating--comment"
+    }), (0,preact_module.h)("div", {
+      class: "rating-faces-container"
+    }, (0,preact_module.h)("div", {
+      class: "rating-face-container",
+      onClick: e => this.onRatingPoor(e)
+    }, (0,preact_module.h)("img", {
+      alt: "poor",
+      src: __webpack_require__(8367)
+    }), (0,preact_module.h)("p", {
+      class: "rating-face--text"
+    }, this.props.t('poor'))), (0,preact_module.h)("div", {
+      class: "rating-face-container",
+      onClick: e => this.onRatingAverage(e)
+    }, (0,preact_module.h)("img", {
+      alt: "average",
+      src: __webpack_require__(6535)
+    }), (0,preact_module.h)("p", {
+      class: "rating-face--text"
+    }, this.props.t('average'))), (0,preact_module.h)("div", {
+      class: "rating-face-container",
+      onClick: e => this.onRatingGreat(e)
+    }, (0,preact_module.h)("img", {
+      alt: "great",
+      src: __webpack_require__(3824)
+    }), (0,preact_module.h)("p", {
+      class: "rating-face--text"
+    }, this.props.t('great')))), (0,preact_module.h)("div", {
+      class: "rating-no-thanks",
+      onClick: e => this.onCloseRating(e)
+    }, this.props.t('no_thanks')))));
+  }
+
+  shoudDisplay() {
+    if (!this.props.cid) return false;
+    var requested;
+    var rated;
+    var ended;
+    let user = this.props.store.matchUser();
+    util/* default.map */.Z.map(this.props.store.listEvents(this.props.cid), ev => {
+      if (util/* default.get */.Z.get(ev, 'type') === 'conversation_state_updated' && util/* default.get */.Z.get(ev, 'data.conversation.state') === 'ended') {
+        ended = ev;
+      }
+
+      if (util/* default.get */.Z.get(ev, 'type') === 'conversation_rating_requested') requested = ev;
+      if (util/* default.get */.Z.get(ev, 'type') === 'conversation_rated' && util/* default.get */.Z.get(ev, 'by.id') === user.id) rated = ev;
+    });
+    if (rated) return false;
+    let accountSetting = this.props.plugin.chatbox;
+    var auto = accountSetting.auto_request_rating && ended;
+    return requested || auto;
+  }
+
+  onCloseRating() {
+    this.props.onRate && this.props.onRate({
+      no_rating: true,
+      comment: this.refComment.current.value
+    });
+    this.close();
+  }
+
+  onRatingPoor() {
+    this.props.onRate && this.props.onRate({
+      rating: 1,
+      comment: this.refComment.current.value
+    });
+    this.close();
+  }
+
+  onRatingAverage() {
+    this.props.onRate && this.props.onRate({
+      rating: 3,
+      comment: this.refComment.current.value
+    });
+    this.close();
+  }
+
+  onRatingGreat() {
+    this.props.onRate && this.props.onRate({
+      rating: 5,
+      comment: this.refComment.current.value
+    });
+    this.close();
+  }
+
+  open() {
+    if (!this.state.hide) return;
+    this.setState({
+      hide: false
+    });
+    if (!this.refRating.current) return;
+    setTimeout(() => {
+      if (this.refComment.current) this.refComment.current.focus();
+    }, 400);
+    this.refComment.current.value = '';
+    var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+    var h0 = parseFloat(popupStyle.height);
+    this.animation.play(-20, h0, h => {
+      this.setState({
+        ratingHeight: h,
+        overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+      });
+    });
+  }
+
+  close() {
+    if (this.state.hide) return;
+    if (!this.refRating.current) return;
+    var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+    var h0 = parseFloat(popupStyle.height);
+    this.animation.play(20, h0, h => {
+      this.setState({
+        ratingHeight: h,
+        overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+      });
+
+      if (h < POPUP_MIN_HEIGHT + 10) {
+        if (!this.state.hide) {
+          this.setState({
+            hide: true
+          });
+        }
+      }
+    });
+  }
+
+  onMouseDown(e) {
+    this.mousePushed = true;
+    this.animation.stop();
+    e.preventDefault();
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    this.mousePushedDy = e.pageY - window.pageYOffset - this.refRating.current.getBoundingClientRect().y;
+  }
+
+  onMouseUp(e) {
+    if (!this.mousePushed) return;
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    this.mousePushed = false;
+    var popupStyle = this.refRating.current.currentStyle || window.getComputedStyle(this.refRating.current);
+    var h0 = parseFloat(popupStyle.height);
+    this.animation.play(this.mouseVelocity, h0, h => {
+      this.setState({
+        ratingHeight: h,
+        overlayOpacity: Math.min(1, (h - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+      });
+
+      if (h < POPUP_MIN_HEIGHT + 10) {
+        if (!this.state.hide) {
+          this.setState({
+            hide: true
+          });
+          this.props.onRate && this.props.onRate({
+            no_rating: true
+          });
+        }
+      }
+    });
+  }
+
+  onMouseMove(e) {
+    if (!this.mousePushed) return;
+    if (e.touches && e.touches[0]) e = e.touches[0];
+    var my = e.pageY;
+    this.mouseVelocity = my - this.lastMouseY;
+    this.lastMouseY = my;
+    my = my - this.mousePushedDy;
+    var K = 10000;
+    var height = this.refRating.current.getBoundingClientRect().bottom - my;
+
+    if (height > POPUP_MAX_HEIGHT) {
+      var beta = K / (POPUP_HARD_MAX_HEIGHT - POPUP_MAX_HEIGHT) - POPUP_MAX_HEIGHT;
+      height = POPUP_HARD_MAX_HEIGHT - K / (height + beta);
+    }
+
+    this.setState({
+      ratingHeight: height,
+      overlayOpacity: Math.min(1, (height - POPUP_MIN_HEIGHT) / (POPUP_HARD_MAX_HEIGHT - POPUP_MIN_HEIGHT))
+    });
+  }
+
+}
+;// CONCATENATED MODULE: ./src/chatbox/Widget.js
+
+
+
+
+
+
+var send = __webpack_require__(9737);
+
+var checkedimg = __webpack_require__(8909);
+
+var empty = __webpack_require__(29);
+
+
+
+
+
+
+const Widget_defaultAvatar = 'https://file-subiz.com/fiqoahedjbgwclpouoml-avatar_default_baa8a1d7.png';
+
+
+
+
+class Widget extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.userSent = {};
+    this.setState({
+      creating: false,
+      clickedJoin: false,
+      formData: {}
+    });
+    this.props.store.onUpdate(this, _ => this.forceUpdate());
+  }
+
+  componentDidMount() {
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  componentDidUpdate(prevProp) {
+    if (prevProp.isShow !== this.props.isShow) {
+      if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
+      if (this.props.isShow && this.props.store.isMobile()) this.blur();
+    }
+
+    if (prevProp.cid !== this.props.cid) {
+      this.setState({
+        clickedJoin: false
+      });
+      setTimeout(() => {
+        this.events && this.events.focus();
+        if (!this.props.store.isMobile()) this.focusInput();
+      }, 100);
+    }
+
+    this.updateFormDataFields();
+  }
+
+  shouldShowForm() {
+    let formRequired = this.isFormRequired();
+    return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
+  }
+
+  render() {
+    let formRequired = this.isFormRequired();
+    let showform = this.shouldShowForm();
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    let submitLabel = this.props.t('prechat_form_btn');
+    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) {
+      form = accountSetting.offline_form;
+      submitLabel = this.props.t('offline_form_btn');
+    }
+
+    if (this.props.view === 'offline_form') {
+      showform = true;
+      form = accountSetting.offline_form;
+      submitLabel = this.props.t('offline_form_btn');
+    }
+
+    if (this.props.view === 'prechat_form') {
+      showform = true;
+      form = accountSetting.prechat_form;
+      submitLabel = this.props.t('prechat_form_btn');
+    }
+
+    let $body = null;
+    if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel);else $body = this.renderChat();
+    let position = util/* default.get */.Z.get(accountSetting, 'desktop_button.position') || 'right';
+    if (this.props.store.isMobile()) position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position', position);
+    let cls = 'widget-container widget-container--' + position;
+    if (!this.props.isShow) cls += ' widget-container--hide';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)(Header, {
+      t: this.props.t,
+      plugin: this.props.plugin,
+      store: this.props.store,
+      cid: this.props.cid,
+      view: this.props.view,
+      onClose: this.props.onClose,
+      onGotoList: () => this.props.onGo({
+        view: 'list'
+      })
+    }), $body);
+  }
+
+  async submitPrechatForm(form) {
+    var hasError = false;
+    util/* default.map */.Z.map(this.state.formData, (field, key) => {
+      if (field.is_required && (field.value === undefined || field.value === '' || util/* default.size */.Z.size(field.value) === 0 && Array.isArray(field.value))) {
+        field.error = this.props.t('error_empty');
+        hasError = true;
+      } else field.error = '';
+
+      if (key.substr(5) === 'emails' && !util/* default.isEmail */.Z.isEmail(field.value) && field.is_required) {
+        field.error = this.props.t('error_email_invalid');
+        hasError = true;
+      }
+
+      if (key.substr(5) === 'phones' && !util/* default.isPhone */.Z.isPhone(field.value) && field.is_required) {
+        field.error = this.props.t('error_phone_invalid');
+        hasError = true;
+      }
+    });
+    if (hasError) return this.forceUpdate();
+    let data = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let user = util/* default.cloneDeep */.Z.cloneDeep(this.props.store.matchUser());
+    util/* default.map */.Z.map(data, (field, key) => {
+      if (!key.startsWith('attr:')) return;
+      var attr = {
+        key: key.substr(5)
+      };
+      if (field.type === 'number') attr.number = parseInt(field.value);
+      if (field.type === 'datetime') attr.datetime = new util/* default.Date */.Z.Date(field.value).toISOString();
+      if (field.type === 'list') attr.list = field.value;
+      if (field.type === 'text' || field.type === 'boolean') attr[field.type] = field.value;
+      util/* default.setUserAttr */.Z.setUserAttr(user, attr);
+    });
+    let firstmsg = util/* default.get */.Z.get(data, 'question.value');
+    let groupid = util/* default.get */.Z.get(data, 'group.value', '');
+
+    if (this.props.cid) {
+      this.props.store.setUser(user);
+      this.setState({
+        clickedJoin: false
+      });
+      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+        message: {
+          text: firstmsg,
+          format: 'plaintext',
+          fields: [{
+            key: 'to_agent_group',
+            value: util/* default.stringify */.Z.stringify(groupid)
+          }]
+        }
+      });
+      if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
+      return;
+    }
+
+    this.setState({
+      creating: true
+    });
+    let message = {
+      text: firstmsg,
+      format: 'plaintext'
+    };
+    let req = {
+      group_id: groupid,
+      message: firstmsg,
+      locale: this.props.t.locale(),
+      initial_by: user.id
+    };
+    this.setState({
+      creatingError: null
+    });
+    const {
+      error,
+      convo
+    } = await this.props.store.startConvo(req);
+    this.props.store.setUser(user);
+
+    if (error) {
+      this.setState({
+        creating: false,
+        creatingError: error
+      });
+      return;
+    }
+
+    let newconvoid = convo.id;
+    this.userSent[newconvoid] = true;
+    this.props.onGo({
+      view: 'chat',
+      cid: newconvoid
+    });
+    this.props.store.sendConvoEvent(newconvoid, 'message_sent', {
+      message
+    });
+    this.setState({
+      creating: false,
+      clickedJoin: false
+    });
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  formMounted(form) {
+    let formData = this.fillForm(form);
+    formData['question'] = {
+      key: 'question',
+      is_required: true,
+      label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_question_label`, {})) || form.question_label,
+      type: 'text'
+    };
+    this.setState({
+      formData
+    });
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  onBooleanChange(key, e) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
+    if (!field) return;
+    field.value = e.target.checked;
+    this.setState({
+      formData
+    });
+  }
+
+  onInputChange(key, val) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
+    if (!field) return;
+    field.value = val;
+    this.setState({
+      formData
+    });
+  }
+
+  onListAddItem(key, val) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
+    if (!field) return;
+    field.value = field.value || [];
+    field.value.push(val);
+    this.setState({
+      formData
+    });
+  }
+
+  onListRemoveItem(key, index) {
+    let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
+    let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
+    if (!field) return;
+    field.value = field.value || [];
+    field.value.splice(index, 1);
+    this.setState({
+      formData
+    });
+  }
+
+  renderFields() {
+    if (util/* default.size */.Z.size(this.state.formData) === 0) return null;
+    let $fields = util/* default.map */.Z.map(this.state.formData, (field, key) => {
+      let $field = null;
+      var errclass = field.error ? 'input--error' : '';
+
+      if (field.type === 'text') {
+        if (key === 'question') {
+          $field = (0,preact_module.h)("textarea", {
+            class: "form-control",
+            ref: ref => {
+              this['form_' + Widget_encode(key)] = ref;
+            },
+            value: field.value || '',
+            onInput: e => this.onInputChange(key, e.target.value),
+            row: "4",
+            class: "form-control"
+          });
+        } else {
+          $field = (0,preact_module.h)("input", {
+            value: field.value || '',
+            onInput: e => this.onInputChange(key, e.target.value),
+            ref: ref => {
+              this['form_' + Widget_encode(key)] = ref;
+            },
+            class: `form-control ${errclass}`,
+            type: "text"
+          });
+        }
+      } else if (field.type === 'number') {
+        $field = (0,preact_module.h)("input", {
+          value: field.value,
+          onInput: e => this.onInputChange(key, e.target.value),
+          ref: ref => {
+            this['form_' + Widget_encode(key)] = ref;
+          },
+          class: `form-control ${errclass}`,
+          type: "number"
+        });
+      } else if (field.type === 'boolean') {
+        $field = (0,preact_module.h)("div", {
+          class: "checkbox"
+        }, (0,preact_module.h)("input", {
+          type: "checkbox",
+          id: 'form-checkbox' + Widget_encode(key),
+          onInput: e => this.onBooleanChange(key, e),
+          checked: field.value
+        }), (0,preact_module.h)("label", {
+          class: "checkbox--label",
+          for: 'form-checkbox' + Widget_encode(key)
+        }, field.label), (0,preact_module.h)("div", {
+          class: "checkbox--check"
+        }, (0,preact_module.h)("div", null)));
+      } else if (field.type === 'group') {
+        $field = util/* default.map */.Z.map(field.list, item => (0,preact_module.h)("div", {
+          class: "radio"
+        }, (0,preact_module.h)("input", {
+          type: "radio",
+          id: 'form-radio' + Widget_encode(key) + Widget_encode(item.value),
+          checked: field.value === item.value,
+          onInput: e => this.onInputChange(key, item.value)
+        }), (0,preact_module.h)("label", {
+          class: "radio--label",
+          for: 'form-radio' + Widget_encode(key) + Widget_encode(item.value)
+        }, item.label), (0,preact_module.h)("div", {
+          class: "radio--check"
+        }, (0,preact_module.h)("div", {
+          class: "inside"
+        }))));
+      } else if (field.type === 'list') {
+        let selected = this.state.formData[key].value || [];
+        let items = util/* default.filter */.Z.filter(util/* default.get */.Z.get(field, 'list', []), item => {
+          return !util/* default.includes */.Z.includes(selected, item);
+        });
+        $field = (0,preact_module.h)(ListField, {
+          selected: selected,
+          items: items,
+          onAddItem: item => this.onListAddItem(key, item),
+          onRemoveItem: item => this.onListRemoveItem(key, item)
+        });
+      } else if (field.type === 'datetime') {
+        $field = (0,preact_module.h)("input", {
+          value: field.value,
+          onInput: e => this.onInputChange(key, e.target.value),
+          class: `form-control ${errclass}`,
+          type: "date"
+        });
+      }
+
+      let label = '';
+
+      if (field.key === 'fullname') {
+        label = this.props.t('fullname');
+      } else if (field.key === 'emails') {
+        label = this.props.t('email');
+      } else if (field.key === 'phones') {
+        label = this.props.t('phones');
+      } else if (field.key === 'question') {
+        label = field.label || this.props.t('your_question');
+      }
+
+      if (field.label) label = field.label;
+      return (0,preact_module.h)("div", null, (0,preact_module.h)("div", {
+        class: "label"
+      }, label, field.is_required ? (0,preact_module.h)("span", {
+        class: "ml-1 red"
+      }, "*") : ''), field.error ? (0,preact_module.h)("div", {
+        class: "form-control--valid-input--error"
+      }, field.error) : '', $field);
+    });
+    return (0,preact_module.h)("div", {
+      class: "pt-2"
+    }, $fields);
+  }
+
+  renderForm(form, submitLabel) {
+    let $loading = null;
+    if (this.state.creating) $loading = (0,preact_module.h)("span", {
+      class: "ml-2"
+    }, (0,preact_module.h)(Spinner, {
+      size: "16",
+      mode: "white"
+    }));
+    let title = this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_title`, {}));
+    if (!title) title = util/* default.get */.Z.get(form, 'title', this.props.t('capture_lead_title'));
+    title = title.replace('↵', '');
+    return (0,preact_module.h)("div", {
+      class: "widget-body"
+    }, (0,preact_module.h)(FormMounter, {
+      form: form,
+      onMount: f => this.formMounted(f)
+    }), (0,preact_module.h)("div", {
+      class: "widget-body--content flex-grow-1 pl-3 pr-3 d-flex flex-column"
+    }, (0,preact_module.h)("div", {
+      class: "flex-grow-1"
+    }, (0,preact_module.h)("div", {
+      class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
+    }, (0,preact_module.h)("div", null, title), this.renderFields())), (0,preact_module.h)(PoweredBy, {
+      store: this.props.store,
+      t: this.props.t
+    })), (0,preact_module.h)("div", {
+      class: "message-input message-input--preform"
+    }, (0,preact_module.h)("button", {
+      class: "btn--start-convo",
+      onClick: _ => this.submitPrechatForm(form)
+    }, submitLabel, " ", $loading)));
+  }
+
+  goToConvo(cid) {
+    this.props.onGo({
+      view: 'chat',
+      cid
+    });
+  }
+
+  renderConvoList() {
+    let convoM = this.props.store.matchConvo('*');
+    var convos = util/* default.map */.Z.map(convoM, convo => this.props.store.matchConvo(convo.id));
+    convos = util/* default.filter */.Z.filter(convos, convo => !!convo);
+    convos = util/* default.orderBy */.Z.orderBy(convos, 'created', 'desc');
+    var $convos = util/* default.map */.Z.map(convos, convo => {
+      let ags = util/* default.filter */.Z.filter(convo.members, m => {
+        return (m.type === 'agent' || m.type === 'bot') && m.membership === 'active';
+      });
+      let agentids = util/* default.map */.Z.map(ags, m => m.id);
+      agentids = agentids || util/* default.agentsOfConvo */.Z.agentsOfConvo(convo)[0];
+      return (0,preact_module.h)("div", {
+        class: "convo-list--item",
+        onClick: () => this.goToConvo(convo.id),
+        key: convo.id
+      }, (0,preact_module.h)(AgentsAvatar, {
+        plugin: this.props.plugin,
+        store: this.props.store,
+        mode: "member",
+        class: "d-flex flex-row",
+        tooltipPos: "right",
+        agent_ids: agentids
+      }), this.renderConvoSummary(convo));
+    });
+    let $body = (0,preact_module.h)("div", {
+      class: "convo-list--list"
+    }, $convos);
+
+    if (util/* default.size */.Z.size(convos) === 0) {
+      $body = (0,preact_module.h)("div", {
+        class: "convo-list--list"
+      }, (0,preact_module.h)("div", {
+        class: "empty-container"
+      }, (0,preact_module.h)("img", {
+        alt: "empty",
+        src: empty
+      }), (0,preact_module.h)("div", {
+        class: "empty-desc"
+      }, this.props.t('empty_convo'))));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "convo-list"
+    }, (0,preact_module.h)("div", {
+      class: "convo-list--container"
+    }, (0,preact_module.h)("div", {
+      class: "convo-list--title"
+    }, this.props.t('conversations')), $body), (0,preact_module.h)("div", {
+      class: "convo-list--footer"
+    }, (0,preact_module.h)("button", {
+      class: "btn--start-convo",
+      onClick: _ => this.goToConvo('')
+    }, (0,preact_module.h)("span", null, this.props.t('start_conversation')), (0,preact_module.h)("img", {
+      src: send,
+      alt: "send button",
+      width: "26",
+      height: "26"
+    })), (0,preact_module.h)(PoweredBy, {
+      store: this.props.store
+    })));
+  }
+
+  blur() {
+    if (this.props.store.isPreview) return;
+    var $input = this.msgInput;
+    if (!$input) return;
+    setTimeout(() => $input && $input.blur());
+    setTimeout(() => $input && $input.blur(), 300);
+  }
+
+  focusInput() {
+    if (this.props.store.isPreview) return;
+
+    if (this.shouldShowForm()) {
+      let firstemptykey = '';
+      util/* default.map */.Z.map(this.state.formData, (field, key) => {
+        if (field.type !== 'text') return;
+        if (firstemptykey) return;
+        if (!field.value) firstemptykey = key;
+      });
+      setTimeout(() => {
+        var $input = this['form_' + Widget_encode(firstemptykey)];
+        if (!$input) return;
+        $input.focus();
+      }, 300);
+      return;
+    }
+
+    var $input = this.msgInput;
+    if (!$input) return;
+    setTimeout(() => $input.focus());
+    setTimeout(() => $input.focus(), 300);
+  }
+
+  onRate(rating) {
+    if (!this.props.cid) return;
+    this.props.store.sendConvoEvent(this.props.cid, 'conversation_rated', {
+      conversation: {
+        ratings: [rating]
+      }
+    });
+    this.focusInput();
+  }
+
+  async sendMessage(message) {
+    let text = message.text;
+
+    if (!this.props.cid) {
+      this.creating = true;
+      const {
+        convo,
+        error
+      } = await this.props.store.startConvo({
+        locale: this.props.t.locale(),
+        message: text,
+        initial_by: this.props.store.matchUser().id
+      });
+
+      if (error) {}
+
+      this.creating = false;
+      this.props.store.sendConvoEvent(convo.id, 'message_sent', {
+        message
+      });
+      this.props.onGo({
+        view: 'chat',
+        cid: convo.id
+      });
+      return;
+    }
+
+    this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+      message
+    });
+  }
+
+  createPostback(postback) {
+    this.props.store.createPostback(this.props.cid, postback);
+  }
+
+  renderChat() {
+    let $input = (0,preact_module.h)(MessageInput, {
+      store: this.props.store,
+      ref: ref => this.msgInput = ref,
+      cid: this.props.cid,
+      onSend: e => this.sendMessage(e),
+      t: this.props.t
+    });
+    let convo = this.props.store.matchConvo(this.props.cid) || {};
+
+    if (this.isFormRequired() || convo.state === 'ended') {
+      $input = (0,preact_module.h)("div", {
+        class: "message-input message-input--preform"
+      }, (0,preact_module.h)("button", {
+        class: "btn--start-convo",
+        onClick: e => this.onStartConvoClick(e)
+      }, this.props.t('offline_preform_btn')));
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "widget-body"
+    }, (0,preact_module.h)("div", {
+      class: "widget-body--content",
+      onClick: e => this.onContainerClick(e)
+    }, (0,preact_module.h)(Events, {
+      isShow: this.props.isShow,
+      store: this.props.store,
+      onFormSubmit: e => this.onEventFormSubmit(e),
+      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_module.h)(Typing, {
+      store: this.props.store,
+      cid: this.props.cid,
+      t: this.props.t
+    })), (0,preact_module.h)(Rating, {
+      forceView: this.props.view,
+      plugin: this.props.plugin,
+      store: this.props.store,
+      onRate: e => this.onRate(e),
+      cid: this.props.cid,
+      t: this.props.t
+    }), $input);
+  }
+
+  async onStartConvoClick() {
+    var convo = this.props.store.matchConvo(this.props.cid) || {};
+    if (convo.state === 'ended') return this.props.onGo({
+      view: 'chat',
+      cid: ''
+    });
+    this.setState({
+      clickedJoin: true
+    });
+  }
+
+  onEventFormSubmit() {
+    this.focusInput();
+  }
+
+  onContainerClick() {
+    var selection = window.getSelection();
+    if (selection.toString().length > 0) return;
+    if (!this.props.store.isMobile()) this.focusInput();
+  }
+
+  isFormRequired() {
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
+    if (!form) return false;
+    let formData = this.fillForm(form);
+    let convo = this.props.store.matchConvo(this.props.cid) || {};
+    if (convo.state === 'ended') return true;
+    if (this.userHasSent(this.props.cid)) return false;
+    if (convo.state && convo.state !== 'pending') delete formData.group;
+    return !!util/* default.find */.Z.find(formData, field => field.value == null || field.value === '');
+  }
+
+  renderConvoSummary(convo) {
+    let agentM = this.props.store.matchAgent('*');
+    let ags = util/* default.filter */.Z.filter(convo.members, m => {
+      return (m.type === 'agent' || m.type === 'bot') && m.membership === 'active';
+    });
+    let agentids = util/* default.map */.Z.map(ags, m => m.id);
+    agentids = agentids || util/* default.agentsOfConvo */.Z.agentsOfConvo(convo)[0];
+    let agents = util/* default.map */.Z.map(agentids, id => agentM[id] || {
+      avatar_url: Widget_defaultAvatar,
+      fullname: 'Offline Agent'
+    });
+    var name = util/* default.each */.Z.each(agents, ag => ag.fullname).join(', ');
+    if (!name) name = this.props.store.matchAccount().name;
+    if (!name) name = this.props.t('agent');
+    var $you = null;
+
+    if (convo.lastSenderType === 'user') {
+      $you = (0,preact_module.h)("span", {
+        class: "yourmessage"
+      }, this.props.t('you'), ":");
+    }
+
+    let seen = util/* default.isConvoSeen */.Z.isConvoSeen(convo, this.props.store.matchUser().id);
+    var lastmsg = this.renderMessagePreview(convo.last_message_sent || {
+      data: {
+        message: util/* default.get */.Z.get(convo, 'last_message')
+      }
+    });
+    var time = util/* default.getMs */.Z.getMs(util/* default.get */.Z.get(convo, 'last_message_sent.created')) || util/* default.getMs */.Z.getMs(util/* default.get */.Z.get(convo, 'last_sent.created')) || util/* default.getMs */.Z.getMs(convo.created);
+    var $tim = (0,preact_module.h)(Time, {
+      ago: true,
+      time: time,
+      key: time,
+      short: true
+    });
+    let $unread = seen ? null : (0,preact_module.h)("div", {
+      class: "convo-list--item-unread"
+    });
+
+    if (convo.state === 'ended') {
+      $unread = (0,preact_module.h)("img", {
+        alt: "conversation ended",
+        class: "convo-list--convo-completed",
+        src: checkedimg,
+        title: this.props.t('conversation_ended')
+      });
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "convo-list--convo-last-info"
+    }, (0,preact_module.h)("div", {
+      class: "d-flex flex-row"
+    }, (0,preact_module.h)("div", {
+      class: "convo-list--convo-name"
+    }, name), (0,preact_module.h)("div", {
+      class: "convo-list--convo-time"
+    }, $tim)), (0,preact_module.h)("div", {
+      class: "d-flex flex-row"
+    }, (0,preact_module.h)("div", {
+      class: "convo-list--convo-last-message"
+    }, $you, lastmsg), $unread));
+  }
+
+  agentsOfConvo(convo) {
+    let agentM = this.props.store.matchAgent('*');
+    var agentids = util/* default.agentsOfConvo */.Z.agentsOfConvo(convo, true);
+    return util/* default.map */.Z.map(agentids, id => agentM[id] || {
+      avatar_url: Widget_defaultAvatar,
+      fullname: 'Offline Agent'
+    });
+  }
+
+  renderMessagePreview(ev) {
+    let defmsg = this.props.t('sent_you_a_message');
+    let message = util/* default.get */.Z.get(ev, 'data.message.text');
+    var format = util/* default.get */.Z.get(ev, 'data.message.format');
+    if (format !== 'plaintext') message = defmsg;
+    if (!message && util/* default.size */.Z.size(util/* default.get */.Z.get(ev, 'data.message.attachments')) > 0) message = defmsg;
+    if (!message) return null;
+    let byType = util/* default.get */.Z.get(ev, 'by.type');
+    return (0,preact_module.h)("div", {
+      class: "convo-list--convo-last-mes"
+    }, util/* default.map */.Z.map(util/* default.extractText */.Z.extractText(message), tag => {
+      if (tag.type === 'emoji') return (0,preact_module.h)(Emoji, {
+        emojiCode: tag.text,
+        byType: byType
+      });
+      return tag.text;
+    }));
+  }
+
+  userHasSent(cid) {
+    var convo = this.props.store.matchConvo(cid) || {};
+    let user = this.props.store.matchUser();
+    if (this.userSent[cid]) return true;
+    let joined = util/* default.find */.Z.find(convo.members, mem => mem.id === user.id && (mem.membership === 'active' || mem.last_sent > 0));
+    return joined;
+  }
+
+  isOffline(acc, accSetting) {
+    let enableWhen = util/* default.get */.Z.get(accSetting, 'offline_form.enable_when');
+    let isonline = true;
+    if (enableWhen === 'all_agents_offline') isonline = acc.is_online;
+    if (enableWhen === 'out_of_bussiness_hour') isonline = acc.is_in_business_hour;
+    return !isonline;
+  }
+
+  updateFormDataFields() {
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    if (util/* default.get */.Z.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+    let offlineEnabled = util/* default.get */.Z.get(accountSetting, 'offline_form.enabled');
+
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) {
+      form = accountSetting.offline_form;
+    }
+
+    if (this.props.view === 'offline_form') {
+      form = accountSetting.offline_form;
+    }
+
+    if (this.props.view === 'prechat_form') {
+      form = accountSetting.prechat_form;
+    }
+
+    if (util/* default.size */.Z.size(form) === 0) return [];
+    var data = {};
+    util/* default.each */.Z.each(form.fields, f => {
+      var newf = Object.assign({}, f);
+
+      if (f.type === 'list') {
+        newf.list = f.list;
+      }
+
+      newf.label = this.props.t.i18n(util/* default.get */.Z.get(f, `i18n_label`, {})) || f.label;
+      data['attr:' + f.key] = newf;
+    });
+
+    if (form.group_required && util/* default.size */.Z.size(form.groups) > 0) {
+      data['group'] = {
+        key: 'group',
+        is_required: !!form.group_required,
+        label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_group_label`, {})) || form.group_label,
+        type: 'group',
+        list: util/* default.map */.Z.map(form.groups, group => ({
+          value: group.id,
+          label: group.name
+        }))
+      };
+    }
+
+    data['question'] = {
+      key: 'question',
+      is_required: true,
+      label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_question_label`, {})) || form.question_label,
+      type: 'text'
+    };
+
+    if (this.isFormChanged(this.state.formData, data)) {
+      this.setState({
+        formData: data
+      });
+    }
+  }
+
+  isFormChanged(oldForm, newForm) {
+    let oldKeys = Object.keys(oldForm);
+    let newKeys = Object.keys(newForm);
+    if (oldKeys.length !== newKeys.length) return true;
+
+    for (let i = 0; i < oldKeys.length; i++) {
+      if (util/* default.get */.Z.get(oldForm, `${oldKeys[i]}.label`) !== util/* default.get */.Z.get(newForm, `${newKeys[i]}.label`)) return true;
+      if (util/* default.get */.Z.get(oldForm, `${oldKeys[i]}.is_required`) !== util/* default.get */.Z.get(newForm, `${newKeys[i]}.is_required`)) return true;
+
+      if (util/* default.stringify */.Z.stringify(util/* default.get */.Z.get(oldForm, `${oldKeys[i]}.list`)) !== util/* default.stringify */.Z.stringify(util/* default.get */.Z.get(newForm, `${newKeys[i]}.list`))) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  fillForm(form) {
+    if (util/* default.size */.Z.size(form) === 0) return [];
+    var data = {};
+    let user = this.props.store.matchUser();
+    util/* default.each */.Z.each(form.fields, f => {
+      var newf = Object.assign({}, f);
+      newf.value = util/* default.getUserAttr */.Z.getUserAttr(user, f.key, f.type);
+      if (f.type === 'boolean' && !newf.value) newf.value = false;
+
+      if (f.type === 'datetime' && newf.value) {
+        newf.value = new util/* default.Date */.Z.Date(data.value).toLocaleDateString('en-CA');
+      }
+
+      if (f.type === 'list') {
+        newf.list = f.list;
+      }
+
+      newf.label = this.props.t.i18n(util/* default.get */.Z.get(f, `i18n_label`, {})) || f.label;
+      data['attr:' + f.key] = newf;
+    });
+
+    if (form.group_required && util/* default.size */.Z.size(form.groups) > 0) {
+      data['group'] = {
+        key: 'group',
+        is_required: !!form.group_required,
+        label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_group_label`, {})) || form.group_label,
+        type: 'group',
+        list: util/* default.map */.Z.map(form.groups, group => ({
+          value: group.id,
+          label: group.name
+        }))
+      };
+    }
+
+    return data;
+  }
+
+}
+
+class FormMounter extends common/* Com */.M {
+  componentDidMount() {
+    this.props.onMount(this.props.form);
+  }
+
+}
+
+function Widget_encode(key) {
+  return btoa(key).split('=').join('');
+}
+;// CONCATENATED MODULE: ./src/chatbox/main.js
+
+
+
+
+
+
+let promiseMainCSS = (() => __webpack_require__.e(/* import() */ 178).then(__webpack_require__.bind(__webpack_require__, 178)))();
+
+class Main extends common/* Com */.M {
+  constructor(props) {
+    super(props);
+    this.refButton = (0,preact_module/* createRef */.Vf)();
+  }
+
+  async refreshCSS() {
+    let plugins = this.props.store.matchPlugin();
+    let found = util/* default.find */.Z.find(plugins, plugin => plugin.id === this.props.plugin.id);
+    if (!found) return;
+    let css = (await promiseMainCSS).default.default.toString();
+    var outcss = util/* default.replaceCssVariable */.Z.replaceCssVariable(css, this.props.plugin.chatbox);
+    util/* default.setCss */.Z.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss);
+  }
+
+  componentWillUnmount() {
+    util/* default.setCss */.Z.setCss(this.props.plugin.id, this.$cssStyleDiv, '');
+  }
+
+  async componentDidMount() {
+    this.$cssStyleDiv = document.getElementById('subiz-style-for-' + this.props.plugin.id);
+
+    if (!this.$cssStyleDiv) {
+      this.$cssStyleDiv = document.createElement('style');
+      document.head.appendChild(this.$cssStyleDiv);
+      this.$cssStyleDiv.type = 'text/css';
+      this.$cssStyleDiv.id = 'subiz-style-for-' + this.props.plugin.id;
+    }
+
+    this.setState({
+      cssready: false,
+      isShowWidget: false,
+      widgetView: '',
+      widgetConvoId: ''
+    });
+    this.checkExpand();
+    this.props.store.onResetCSS(this, () => this.refreshCSS());
+    this.props.store.onConvoEvent(this, _ => this.checkExpand());
+    this.props.store.onUpdate(this, _ => this.checkExpand());
+    await this.refreshCSS();
+    this.setState({
+      cssready: true
+    });
+
+    if (this.props.store.matchIsOpen() && this.props.store.matchLastview().view) {
+      if (this.props.store.isMobile()) return;
+      this.showWidget(Object.assign({}, this.props.store.matchLastview().opts, {
+        view: this.props.store.matchLastview().view
+      }));
+    } else {
+      this.hideWidget();
+    }
+  }
+
+  render() {
+    if (!this.state.cssready) return null;
+    if (util/* default.isUserBanned */.Z.isUserBanned(this.props.store.matchUser())) return null;
+    if (!this.props.t) return null;
+    var cls = this.props.store.isMobile() ? 'mobile' : 'desktop';
+    return (0,preact_module.h)("div", {
+      class: cls
+    }, (0,preact_module.h)(ChatButton, {
+      plugin: this.props.plugin,
+      store: this.props.store,
+      key: "chat_button",
+      ref: this.refButton,
+      isShow: !this.state.isShowWidget,
+      onClick: e => this.showWidget(e),
+      t: this.props.t
+    }), (0,preact_module.h)(Widget, {
+      plugin: this.props.plugin,
+      store: this.props.store,
+      view: this.state.widgetView,
+      cid: this.state.widgetConvoId,
+      isShow: this.state.isShowWidget,
+      onClose: a => this.onWidgetClose(a),
+      onGo: a => this.showWidget(a),
+      t: this.props.t
+    }));
+  }
+
+  checkExpand() {
+    if (this.props.store.isMobile()) return;
+    if (this.props.plugin._no_auto_expand) return;
+    if (this.props.store.matchHasManuallyClosed()) return;
+    let convoM = this.props.store.matchConvo('*');
+    let redconvo = util/* default.find */.Z.find(convoM, convo => !util/* default.isConvoSeen */.Z.isConvoSeen(convo, this.props.store.matchUser().id));
+    if (!redconvo || !redconvo.id) return;
+    if (!this.state.isShowWidget) this.showWidget({
+      view: 'chat',
+      cid: redconvo.id
+    });
+  }
+
+  getCurrentView() {
+    return {
+      is_show_widget: this.state.isShowWidget,
+      conversation_id: this.state.widgetConvoId,
+      view: this.state.widgetView
+    };
+  }
+
+  async showWidget(p) {
+    this.refButton.current && this.refButton.current.ClearPreview();
+
+    if (!p.view) {
+      let lastview = this.props.store.matchLastview() || {};
+      p.view = util/* default.get */.Z.get(lastview, 'view');
+      p.cid = util/* default.get */.Z.get(lastview, 'opts.cid');
+    }
+
+    p = p || {};
+    if (this.props.store.isMobile()) modifyViewport();
+    this.setState({
+      widgetConvoId: p.cid,
+      widgetView: p.view
+    });
+    this.props.store.setIsOpen(true);
+    this.forceUpdate();
+    this.setState({
+      isShowWidget: true
+    });
+    this.props.store.setLastview(p.view, {
+      cid: p.cid
+    });
+  }
+
+  showGreeting() {
+    this.refButton.current && this.refButton.current.ShowGreeting();
+  }
+
+  hideGreeting() {
+    this.refButton.current && this.refButton.current.HideGreeting();
+  }
+
+  hideWidget() {
+    restoreViewport();
+    this.props.store.setIsOpen(false);
+    this.setState({
+      isShowWidget: false
+    });
+  }
+
+  onWidgetClose() {
+    this.refButton.current && this.refButton.current.ClearPreview();
+    this.props.store.setHasManuallyClosed();
+    this.hideWidget();
+  }
+
+}
+
+function restoreViewport() {
+  let metatag = document.getElementById('subiz-meta-viewport');
+  if (metatag) metatag.remove();
+}
+
+function modifyViewport() {
+  let metatag = document.createElement('meta');
+  metatag.httpEquiv = 'X-UA-Compatible';
+  metatag.name = 'viewport';
+  metatag.id = 'subiz-meta-viewport';
+  metatag.content = 'maximum-scale=1.0, user-scalable=no, width=device-width, initial-scale=1.0';
+  document.getElementsByTagName('head')[0].appendChild(metatag);
+}
+
+/***/ }),
+
+/***/ 2493:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "M": () => (/* binding */ Com),
+/* harmony export */   "u": () => (/* binding */ Clickaway)
+/* harmony export */ });
+/* harmony import */ var preact__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6400);
+/* harmony import */ var _util_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(819);
+
+
+class Com extends preact__WEBPACK_IMPORTED_MODULE_0__/* .Component */ .wA {
+  constructor(props) {
+    super(props);
+    this._isMounted = true;
+    setTimeout(() => {
+      if (this.componentWillUnmount) {
+        let old = this.componentWillUnmount.bind(this);
+
+        this.componentWillUnmount = () => {
+          old();
+          this._isMounted = false;
+        };
+      }
+    }, 10);
+  }
+
+}
+class Clickaway extends Com {
+  constructor(props) {
+    super(props);
+    this.setWrapperRef = this.setWrapperRef.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.onClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.onClick);
+  }
+
+  setWrapperRef(node) {
+    this.wrapperRef = node;
+  }
+
+  onClick(event) {
+    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+      this.props.onClickaway && this.props.onClickaway();
+    }
+  }
+
+  render() {
+    return (0,preact__WEBPACK_IMPORTED_MODULE_0__.h)("div", {
+      ref: this.setWrapperRef
+    }, this.props.children);
+  }
+
+}
+
+/***/ }),
+
+/***/ 6755:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/bubble_default.7d5e4ab.svg";
+
+/***/ }),
+
+/***/ 6188:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/convos_empty.2353007.svg";
+
+/***/ }),
+
+/***/ 9270:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/default.06e6ee0.jpg";
+
+/***/ }),
+
+/***/ 4761:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/default_avatar.5b74dc1.png";
+
+/***/ }),
+
+/***/ 8909:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/done_gray.d7e8203.svg";
+
+/***/ }),
+
+/***/ 29:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/empty.29bed2d.svg";
+
+/***/ }),
+
+/***/ 8453:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/external-link.90577cc.svg";
+
+/***/ }),
+
+/***/ 9895:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/image_default.be0698b.png";
+
+/***/ }),
+
+/***/ 6484:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/loading_static.8f403ae.svg";
+
+/***/ }),
+
+/***/ 6535:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/rating--average.1ea492c.svg";
+
+/***/ }),
+
+/***/ 3824:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/rating--great.e3d712e.svg";
+
+/***/ }),
+
+/***/ 8367:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/rating--poor.2938a25.svg";
+
+/***/ }),
+
+/***/ 9737:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/send.6db52a9.svg";
+
+/***/ }),
+
+/***/ 8430:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+module.exports = __webpack_require__.p + "assets/img/subiz-mono.877e9f5.svg";
+
+/***/ })
+
+}]);