@subiz/widget-v4 4.1.117 → 4.1.119

package/dist/screenshoot.js

@@ -722,6 +722,7 @@ class Time extends _common_js__WEBPACK_IMPORTED_MODULE_1__/* .Com */ .Mw {
     }
     let title = new Date(this.props.time).toLocaleString(locale);
     return (0,preact__WEBPACK_IMPORTED_MODULE_2__.h)("span", {
+      class: this.props.class,
       style: this.props.style,
       title: title
     }, this.state.t);
@@ -2521,6 +2522,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   getMs: () => (/* binding */ getMs),
 /* harmony export */   getUrlParameter: () => (/* binding */ getUrlParameter),
 /* harmony export */   getUserAttr: () => (/* binding */ getUserAttr),
+/* harmony export */   hslToRgb: () => (/* binding */ hslToRgb),
 /* harmony export */   includes: () => (/* binding */ includes),
 /* harmony export */   isConvoSeen: () => (/* binding */ isConvoSeen),
 /* harmony export */   isEmail: () => (/* binding */ isEmail),
@@ -2546,6 +2548,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   replaceCssVariable: () => (/* binding */ replaceCssVariable),
 /* harmony export */   replaceCssVariablePlugin: () => (/* binding */ replaceCssVariablePlugin),
 /* harmony export */   requestAnimationFrame: () => (/* binding */ requestAnimationFrame),
+/* harmony export */   rgbToHsl: () => (/* binding */ rgbToHsl),
 /* harmony export */   sameDay: () => (/* binding */ sameDay),
 /* harmony export */   scrollIntoViewIfNeeded: () => (/* binding */ scrollIntoViewIfNeeded),
 /* harmony export */   setCss: () => (/* binding */ setCss),
@@ -2566,6 +2569,55 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   usersOfConvo: () => (/* binding */ usersOfConvo)
 /* harmony export */ });
 var op = __webpack_require__(3259);
+function rgbToHsl(r, g, b) {
+  ;
+  r /= 255, g /= 255, b /= 255;
+  var max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  var h,
+    s,
+    l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    var d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l];
+}
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  if (s == 0) {
+    r = g = b = l;
+  } else {
+    function hue2rgb(p, q, t) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    }
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  return [r * 255, g * 255, b * 255];
+}
 function extractEmojis(text) {
   var out = [];
   for (var i = 0; i < text.length; i++) {
@@ -2695,6 +2747,8 @@ function parseJSON(str) {
 var f = document.createElement('iframe');
 f.style.display = 'none';
 document.documentElement.appendChild(f);
+const tempElement = f.contentDocument.createElement('div');
+f.contentDocument.body.appendChild(tempElement);
 var stringify = f.contentWindow.JSON.stringify;
 var parse = f.contentWindow.JSON.parse;
 var Date = f.contentWindow.Date;
@@ -3002,6 +3056,16 @@ function replaceCssVariablePlugin(css, setting) {
   tokens = tokenize(tokens, "'@spacer0'");
   tokens = tokenize(tokens, "'@spacer2'");
   tokens = tokenize(tokens, "'@spacer3'");
+  var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
+  let parseColor = parseCssColor(primary_color);
+  if (!parseColor) parseColor = {
+    red: 238,
+    blue: 238,
+    green: 238
+  };
+  let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
+  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
     var item = tokens[i];
@@ -3018,6 +3082,7 @@ function replaceCssVariablePlugin(css, setting) {
 function replaceCssVariable(css, setting) {
   var tokens = [css];
   tokens = tokenize(tokens, "'@primary_color'");
+  tokens = tokenize(tokens, "'@primary_color_faded'");
   tokens = tokenize(tokens, '@esc-primary-color-esc');
   tokens = tokenize(tokens, "'@secondary_color'");
   tokens = tokenize(tokens, "'@background'");
@@ -3042,6 +3107,16 @@ function replaceCssVariable(css, setting) {
   tokens = tokenize(tokens, "'@z_index_3'");
   tokens = tokenize(tokens, "'@z_index_4'");
   tokens = tokenize(tokens, "'@z_index_5'");
+  var primary_color = op.get(setting, 'primary_color') || op.get(DEFVAL, 'primary_color');
+  let parseColor = parseCssColor(primary_color);
+  if (!parseColor) parseColor = {
+    red: 238,
+    blue: 238,
+    green: 238
+  };
+  let hue = rgbToHsl(parseColor.red, parseColor.green, parseColor.blue)[0];
+  let [r, g, b] = hslToRgb(hue, 0.5, 0.95);
+  DEFVAL.primary_color_faded = `rgb(${r},${g},${b})`;
   var ret = [];
   for (var i = 0; i < tokens.length; i++) {
     var item = tokens[i];
@@ -3668,6 +3743,21 @@ function _blockToText(block) {
   });
   return out;
 }
+function parseCssColor(color) {
+  if (!color || !color.split) return '';
+  tempElement.style.color = color;
+  const computedColor = f.contentWindow.getComputedStyle(tempElement).color;
+  const match = computedColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (match) {
+    return {
+      red: parseInt(match[1]),
+      green: parseInt(match[2]),
+      blue: parseInt(match[3])
+    };
+  } else {
+    return null;
+  }
+}
 let emojis = ['like', 'unlike', 'wink', 'tongue-out', 'tired', 'surprised', 'smiling', 'sleepy', 'sad', 'neutral', 'heart-eyes', 'grinning', 'crying', 'confused', 'angry', 'cry', 'heart_eyes', 'neutral_face', 'emoji--disappointed', 'smile', 'open_mouth', 'tired_face', 'stuck_out_tongue', 'moyai', 'thumbsdown', 'dislike', 'thumbsup', 'ok_hand', 'octopus', 'pig2', 'wave', 'mouse', 'mouse2', 'rat'];
 emojis = map(emojis, e => ':' + e + ':');
 function absLink(url) {
@@ -4918,6 +5008,15 @@ class Store {
   highlight(pluginid, ref) {
     this.pubsub.publish('highlight', pluginid, ref);
   }
+  emitConvoEvent(ev) {
+    this.pubsub.publish('events', ev);
+  }
+  setAIDevMode(mode) {
+    this.ai_dev_mode = mode;
+  }
+  isAIDevMode() {
+    return this.ai_dev_mode;
+  }
   overrideDeviceType(type) {
     this.forceDevice = type;
     this.pubsub.publish('account');
@@ -5306,7 +5405,17 @@ class Store {
       var oldev = this.chain.match(cid, msgid);
       if (!util/* default */.A.get(oldev, 'data.message')) return;
       var pongs = util/* default */.A.get(oldev, 'data.message.pongs', []);
-      pongs = pongs.concat(util/* default */.A.get(ev, 'data.message.pongs', []));
+      let newpongs = util/* default */.A.get(ev, 'data.message.pongs', []) || [];
+      pongs = pongs.concat(newpongs);
+      if (newpongs.length === 1) {
+        let pongtype = newpongs[0].type;
+        if (pongtype === 'like' || pongtype === 'remove_dislike') {
+          pongs = pongs.filter(pong => pong.type !== 'dislike');
+        }
+        if (pongtype === 'dislike' || pongtype === 'remove_like') {
+          pongs = pongs.filter(pong => pong.type !== 'like');
+        }
+      }
       oldev.data.message.pongs = pongs;
       util/* default */.A.map(pongs, pong => {
         if (pong.member_id == user.id && pong.type === 'seen') {
@@ -5315,6 +5424,7 @@ class Store {
         }
       });
       this.chain.put(cid, oldev.id, util/* default */.A.getMs(oldev.created), oldev);
+      this.pubsub.publish('events', oldev);
     }
     if (ev.type === 'message_sent') {
       let idemkey = util/* default */.A.get(ev, 'data.message.idempotency_key');
@@ -5341,6 +5451,7 @@ class Store {
     this._typing(cid);
   }
   async startConvo(req) {
+    if (!req) req = {};
     await this.readyGate.entry();
     this.convoGate.close();
     if (!req.source) req.source = document.location.href;
@@ -5366,6 +5477,9 @@ class Store {
   createPostback(cid, postback) {
     return this.api.createPostback(cid, postback);
   }
+  sendReaction(cid, ev) {
+    return this.api.sendConvoEvent(cid, ev);
+  }
   async sendConvoEvent(cid, type, data) {
     await this.readyGate.entry();
     var idempotency = util/* default */.A.randomString(36);
@@ -6176,6 +6290,7 @@ var logo = __webpack_require__(9529);
 
 function PoweredBy(props) {
   if (props.store.isMobile()) return null;
+  if (props.store.isAIDevMode()) return null;
   let user = props.store.matchUser() || {};
   var link = `https://subiz.com.vn/?utm_source=${window.location.host || `id-${user.account_id}`}&utm_medium=widget&utm_campaign=widget_referral`;
   return (0,preact_module.h)("div", {
@@ -6229,7 +6344,7 @@ function AgentsAvatar(props) {
     }
   }
   agents = util/* default */.A.filter(agents, ag => !!ag);
-  if (agents.length === 0) {
+  if (agents.length === 0 || props.agent_ids === undefined || util/* default */.A.size(props.agent_ids) === 0) {
     return (0,preact_module.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0,preact_module.h)("div", {
@@ -6370,11 +6485,12 @@ class Header extends common/* Com */.Mw {
     return (0,preact_module.h)("div", {
       class: cls,
       style: style
-    }, $back, (0,preact_module.h)(AgentsAvatar, {
+    }, $back, (0,preact_module.h)("div", {
+      class: "mr-2"
+    }), (0,preact_module.h)(AgentsAvatar, {
       plugin: this.props.plugin,
       store: this.props.store,
-      mode: "secondary",
-      agent_ids: agentIdsJoined
+      mode: "secondary"
     }), (0,preact_module.h)("div", {
       class: "widget-header--title-container"
     }, (0,preact_module.h)("div", {
@@ -6509,7 +6625,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
     let accSetting = this.props.plugin.chatbox || {};
     if (accSetting.hide_close_button) return null;
     return (0,preact_module.h)("div", {
-      class: "widget-header--button widget-header--button-close",
+      class: "widget-header--button-close",
       "data-tooltip": this.props.t('close'),
       "data-tooltip-position": "bottom",
       onClick: e => this.onCloseClick(e)
@@ -6538,6 +6654,8 @@ let getJoinedNameMember = agents => {
   if (!agents.length) return null;
   return util/* default */.A.map(agents, agent => agent.fullname).join(', ');
 };
+// EXTERNAL MODULE: ./src/chatbox/spinner.js
+var spinner = __webpack_require__(4188);
 ;// ./src/chatbox/MessageInput.js
 function MessageInput_defineProperty(e, r, t) { return (r = MessageInput_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function MessageInput_toPropertyKey(t) { var i = MessageInput_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -6546,6 +6664,7 @@ function MessageInput_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
+
 class MessageInput extends common/* Com */.Mw {
   constructor(props) {
     super(props);
@@ -6577,7 +6696,7 @@ class MessageInput extends common/* Com */.Mw {
     $input.blur();
   }
   render() {
-    var buttons = (0,preact_module.h)("div", {
+    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",
@@ -6586,7 +6705,7 @@ class MessageInput extends common/* Com */.Mw {
     }));
     var msg = util/* default */.A.trim(this.state.msgValue);
     if (msg.length > 0) {
-      buttons = (0,preact_module.h)("div", {
+      $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",
@@ -6594,9 +6713,16 @@ class MessageInput extends common/* Com */.Mw {
         onClick: () => this.submitMessage()
       }));
     }
+    if (this.props.is_loading) {
+      $buttons = (0,preact_module.h)("div", {
+        class: "d-flex flex-row align-self-end"
+      }, (0,preact_module.h)(spinner/* default */.A, {
+        size: "32"
+      }));
+    }
     var containercls = '';
     var disabled = this.hasUnfinishRequiredFormOrLock() || this.props.disabled;
-    if (disabled) containercls = 'message-input--disabled';
+    if (disabled || this.props.is_loading) containercls = 'message-input--disabled';
     return (0,preact_module.h)("div", {
       class: `message-input ${containercls}`,
       onClick: e => {
@@ -6612,7 +6738,7 @@ class MessageInput extends common/* Com */.Mw {
       disabled: disabled,
       class: "message-input--input",
       maxlength: "1024",
-      placeholder: this.props.t('message_input_help'),
+      placeholder: this.props.t('message_input_help').substr(0, 25),
       ref: this.refMessageInput,
       rows: "1",
       value: this.state.msgValue,
@@ -6620,7 +6746,7 @@ class MessageInput extends common/* Com */.Mw {
       onPaste: e => this.pasteImage(e),
       "data-emojiable": "true",
       onKeydown: e => this.onKeydown(e)
-    }), buttons);
+    }), $buttons);
   }
   hasUnfinishRequiredFormOrLock() {
     let convo = this.props.store.matchConvo(this.props.cid);
@@ -6748,6 +6874,12 @@ class MessageInput extends common/* Com */.Mw {
       class: "emoji-picker--item emoji--wink"
     })));
   }
+  applyMessage(text) {
+    this.setState({
+      msgValue: text
+    });
+    this.resizeInput();
+  }
   focus() {
     if (this.props.disabled) return;
     this.refMessageInput.current && this.refMessageInput.current.focus();
@@ -6826,15 +6958,17 @@ class MessageInput extends common/* Com */.Mw {
     msg = msg || util/* default */.A.trim(this.state.msgValue) || '';
     if (!msg) return;
     if (this.props.disabled) return;
+    if (this.props.onSend) {
+      await this.props.onSend({
+        text: msg,
+        format: 'plaintext'
+      });
+    }
     this.setState({
       openEmoji: false,
       msgValue: ''
     });
     this.resizeInput();
-    this.props.onSend && this.props.onSend({
-      text: msg,
-      format: 'plaintext'
-    });
   }
   sendTyping() {
     if (!this.props.cid) return;
@@ -6890,7 +7024,7 @@ class ImageAttachment extends common/* Com */.Mw {
     const MAX_HEIGHT = 240;
     const DEFAULT_MAX_WIDTH = 267;
     let $container = this.containerRef.current;
-    this.frameWidth = $container ? $container.offsetWidth : DEFAULT_MAX_WIDTH;
+    this.frameWidth = $container ? $container.parentNode.parentNode.offsetWidth : DEFAULT_MAX_WIDTH;
     this.frameHeight = MAX_HEIGHT;
     this.setState({
       ready: true
@@ -7604,17 +7738,17 @@ class FormSubmitAttachments extends common/* Com */.Mw {
   render() {
     return null;
     let submits = [];
-    let attachments = util/* default */.A.get(this.props.ev, 'data.message.attachments') || [];
-    util/* default */.A.each(attachments, att => {
+    let attachments = sb.get(this.props.ev, 'data.message.attachments') || [];
+    sb.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 */.A.map(submits, (submit, index) => (0,preact_module.h)("div", {
+    let $submits = sb.map(submits, (submit, index) => 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);
+    }, h("span", null, this.props.tt('prechat_form_thanks'))));
+    return h("div", null, $submits);
   }
 }
 ;// ./src/chatbox/touchscroll.js
@@ -7876,13 +8010,24 @@ class VideoAttachments extends common/* Com */.Mw {
     }, $videos);
   }
 }
+// EXTERNAL MODULE: ./src/chatbox/time.js
+var chatbox_time = __webpack_require__(1620);
 ;// ./src/chatbox/TextMessage.js
 
 
 
 
 
+
 class TextMessage extends common/* Com */.Mw {
+  renderTime() {
+    if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
+    return (0,preact_module.h)("div", null, (0,preact_module.h)(chatbox_time/* default */.A, {
+      class: "inline-time",
+      time: util/* default */.A.get(this.props.ev, 'created', util/* default */.A.Date.now()),
+      t: this.props.t
+    }));
+  }
   render() {
     var format = util/* default */.A.get(this.props.ev, 'data.message.format', 'plaintext');
     let block = util/* default */.A.get(this.props.ev, 'data.message.block');
@@ -7893,6 +8038,7 @@ class TextMessage extends common/* Com */.Mw {
     var text = util/* default */.A.get(this.props.ev, 'data.message.text');
     text = util/* default */.A.trim(text);
     if (util/* default */.A.size(text) === 0) return null;
+    let t = new util/* default */.A.Date(util/* default */.A.get(this.props.ev, 'created')).toLocaleString();
     let byType = util/* default */.A.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     var tags = util/* default */.A.extractText(text).map(tag => {
@@ -7921,26 +8067,31 @@ class TextMessage extends common/* Com */.Mw {
     });
     if (util/* default */.A.size(tags) === 0) return null;
     if (byType === 'agent') return (0,preact_module.h)("div", {
-      class: "message-agent message-text--agent"
-    }, tags);
+      class: "message-agent message-text--agent",
+      title: t
+    }, tags, this.renderTime());
     return (0,preact_module.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, tags);
   }
   renderBlock(block) {
     if (isEmptyBlock(block)) return null;
+    let t = new util/* default */.A.Date(util/* default */.A.get(this.props.ev, 'created')).toLocaleString();
     let byType = util/* default */.A.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     if (byType === 'agent') {
       return (0,preact_module.h)("div", {
-        class: "message-agent message-text--agent"
+        class: "message-agent message-text--agent",
+        title: t
       }, (0,preact_module.h)(chatbox_block/* default */.A, {
         block: block,
         onLink: this.props.onLink
-      }));
+      }), this.renderTime());
     }
     return (0,preact_module.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, (0,preact_module.h)(chatbox_block/* default */.A, {
       block: block,
       onLink: this.props.onLink
@@ -7952,8 +8103,6 @@ function isEmptyBlock(block) {
   let hasContent = util/* default */.A.size(util/* default */.A.filter(util/* default */.A.map(block.content, block => isEmptyBlock(block)), isEmpty => !isEmpty)) > 0;
   return !util/* default */.A.trim(block.text) && !hasContent;
 }
-// EXTERNAL MODULE: ./src/chatbox/time.js
-var chatbox_time = __webpack_require__(1620);
 ;// ./src/chatbox/InfoMessage.js
 
 function getRateLang(rating) {
@@ -7964,19 +8113,9 @@ function getRateLang(rating) {
 }
 
 
-
 class InfoMessage extends common/* Com */.Mw {
   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)(chatbox_time/* default */.A, {
-        time: ev.created,
-        t: this.props.t
-      }));
-    }
     if (ev.type === 'conversation_rated') {
       var rating = util/* default */.A.get(ev, 'data.conversation.ratings.0', {
         no_rating: true,
@@ -7985,14 +8124,14 @@ class InfoMessage extends common/* Com */.Mw {
       if (rating.no_rating) return null;
       return (0,preact_module.h)("div", {
         class: "convo-event"
-      }, $time, (0,preact_module.h)("div", {
+      }, (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 */.A.get(ev, 'data.conversation.state') === 'ended') {
       return (0,preact_module.h)("div", {
         class: "convo-event"
-      }, $time, (0,preact_module.h)("div", {
+      }, (0,preact_module.h)("div", {
         class: "info-message"
       }, this.props.t('conversation_ended')));
     }
@@ -8021,14 +8160,21 @@ const LoadOrderAttachments = () => __webpack_require__.e(/* import() */ 127).the
 class Event extends common/* Com */.Mw {
   constructor(props) {
     super(props);
+    this.props.store.onConvoEvent(this, ev => this.onEvent(ev));
     this.refForm = (0,preact_module/* createRef */._3)();
+    this.state = {
+      pongs: util/* default */.A.get(this.props.event, 'ev.data.message.pongs') || []
+    };
   }
   render() {
     var ev = util/* default */.A.get(this.props.event, 'ev', {});
     switch (ev.type) {
+      case 'conversation_typing':
+        return this.renderTyping();
       case 'conversation_joined':
         break;
       case 'message_sent':
+        if (this.props.event.is_typing) return this.renderTyping();
         return this.renderMessageSent();
       case 'conversation_state_updated':
       case 'conversation_rating_requested':
@@ -8045,6 +8191,24 @@ class Event extends common/* Com */.Mw {
   focus() {
     this.refForm.current && this.refForm.current.focus();
   }
+  onEvent(ev) {
+    if (ev.id !== util/* default */.A.get(this.props.event, 'ev.id')) return;
+    this.setState({
+      pongs: util/* default */.A.get(ev, 'data.message.pongs') || []
+    });
+  }
+  hasLike() {
+    let {
+      pongs
+    } = this.state;
+    return !!util/* default */.A.find(pongs, pong => pong.type === 'like');
+  }
+  hasDislike() {
+    let {
+      pongs
+    } = this.state;
+    return !!util/* default */.A.find(pongs, pong => pong.type === 'dislike');
+  }
   chooseQuickReply(reply) {
     let ev = util/* default */.A.get(this.props.event, 'ev', {});
     let message = {
@@ -8122,26 +8286,87 @@ class Event extends common/* Com */.Mw {
       OrderAttachments = (await LoadOrderAttachments()).default;
     });
   }
+  renderTyping() {
+    let innercls = 'agent-convo-event-inner';
+    var html = `
+<html>
+  <head>
+    <style>
+      .typing-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        justify-content: center;
+      }
+      .typing-dot {
+        display: inline-block;
+        vertical-align: middle;
+        width: 8px;
+        height: 8px;
+        background: black;
+        border-radius: 50%;
+        animation: typing 0.5s infinite alternate;
+      }
+      .typing-dot:nth-of-type(2) {
+        animation-delay: 0.2s;
+      }
+      .typing-dot:nth-of-type(3) {
+        animation-delay: 0.6s;
+      }
+      @keyframes typing {
+        0% {
+          opacity: 0.9;
+        }
+        100% {
+          opacity: 0.4;
+        }
+      }
+    </style>
+  </head>
+  <body style="padding: 0; margin: 0">
+    <div class="typing-container">
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+      <span class="typing-dot"></span>
+    </div>
+  </body>
+</html>
+`;
+    let src = 'data:text/html,' + encodeURIComponent(html);
+    return (0,preact_module.h)("div", {
+      class: "convo-event agent-message"
+    }, (0,preact_module.h)("div", {
+      class: "agent-convo-event-wrapper"
+    }, (0,preact_module.h)("div", {
+      class: innercls
+    }, (0,preact_module.h)("div", {
+      class: "message-agent message-text--agent",
+      style: "opacity: 0.6 !important"
+    }, (0,preact_module.h)("iframe", {
+      src: src,
+      style: "width: 35px !important; height: 20px !important; display: block !important; overflow: hidden !important; padding: 0 !important "
+    })))));
+  }
   renderMessageSent() {
     let ev = this.props.event.ev;
     this.tryLoadOrder(ev);
-    var $time = null;
-    if (this.props.event.show_time) {
-      $time = (0,preact_module.h)("div", {
-        class: "convo-event-time"
-      }, (0,preact_module.h)(chatbox_time/* default */.A, {
-        time: ev.created,
-        t: this.props.t
-      }));
-    }
     let t = new util/* default */.A.Date(ev.created).toLocaleString();
     if (util/* default */.A.get(ev, 'by.type') !== 'user') {
       let $sender = null;
       if (this.props.event.mode === 'lead') $sender = this.renderAgentAvatar(ev);
+      let innercls = 'agent-convo-event-inner';
+      if (this.props.isLast) innercls += ' last';
       return (0,preact_module.h)("div", {
-        class: "convo-event agent-message",
-        title: t
-      }, $time, $sender, (0,preact_module.h)(TextMessage, {
+        class: "convo-event agent-message"
+      }, $sender, (0,preact_module.h)("div", {
+        class: "agent-convo-event-wrapper"
+      }, (0,preact_module.h)("div", {
+        class: innercls
+      }, (0,preact_module.h)(TextMessage, {
+        showTime: this.props.event.show_time,
+        isLast: this.props.isLast,
         store: this.props.store,
         ev: ev,
         onLink: this.props.onLink
@@ -8189,7 +8414,7 @@ class Event extends common/* Com */.Mw {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.chooseQuickReply(e)
-      }));
+      }), this.renderReactions(), this.renderAIDevNote())));
     }
     if (util/* default */.A.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
       util/* default */.A.setTimeout(() => this.setState({
@@ -8205,9 +8430,6 @@ class Event extends common/* Com */.Mw {
       });
     }
     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') {
       let msg = this.props.t('error_send_message');
@@ -8223,9 +8445,8 @@ class Event extends common/* Com */.Mw {
       }));
     }
     return (0,preact_module.h)("div", {
-      class: "convo-event user-message",
-      title: t
-    }, $time, $sender, (0,preact_module.h)("div", {
+      class: "convo-event user-message"
+    }, $sender, (0,preact_module.h)("div", {
       class: "message-user__container"
     }, $dot, (0,preact_module.h)(TextMessage, {
       store: this.props.store,
@@ -8262,6 +8483,106 @@ class Event extends common/* Com */.Mw {
       ev: ev
     })), $error);
   }
+  async onSendReaction(action) {
+    if (this._reacting) return;
+    let ev = this.props.event.ev;
+    let cid = util/* default */.A.get(ev, 'data.message.conversation_id');
+    ev = {
+      type: 'message_pong',
+      data: {
+        message: {
+          id: ev.id,
+          pongs: [{
+            type: action
+          }],
+          conversion_id: cid
+        }
+      }
+    };
+    if (action == 'dislike' && this.props.store.isAIDevMode()) {
+      this.props.store.emitConvoEvent({
+        type: 'bad_feedbacked',
+        data: {
+          event: ev,
+          id: ev.id,
+          conversion_id: cid
+        }
+      });
+    }
+    let {
+      pongs
+    } = this.state;
+    if (action === 'like') {
+      pongs = pongs.filter(pong => pong.type !== 'dislike');
+      pongs.push({
+        type: 'like'
+      });
+    } else if (action === 'dislike') {
+      pongs = pongs.filter(pong => pong.type !== 'like');
+      pongs.push({
+        type: 'dislike'
+      });
+    } else if (action === 'remove_like') {
+      pongs = pongs.filter(pong => pong.type !== 'like');
+    } else if (action === 'remove_dislike') {
+      pongs = pongs.filter(pong => pong.type !== 'dislike');
+    }
+    this.setState({
+      pongs
+    });
+    this._reacting = true;
+    let res = await this.props.store.sendReaction(cid, ev);
+    this._reacting = false;
+  }
+  renderReactions() {
+    if (this.props.store.isAIDevMode()) return null;
+    let ev = util/* default */.A.get(this.props.event, 'ev') || {};
+    let pongs = util/* default */.A.get(ev, 'data.message.pongs') || [];
+    let hasLike = this.hasLike();
+    let hasDislike = this.hasDislike();
+    let likecls = 'message-event-action-btn';
+    if (hasLike) likecls += ' active';
+    let dislikecls = 'message-event-action-btn';
+    if (hasDislike) dislikecls += ' active';
+    return (0,preact_module.h)("div", {
+      class: "message-event-actions"
+    }, (0,preact_module.h)("div", {
+      class: likecls,
+      onClick: () => this.onSendReaction(hasLike ? 'remove_like' : 'like')
+    }, (0,preact_module.h)("div", {
+      class: "message-event-action-btn-svg like"
+    })), (0,preact_module.h)("div", {
+      class: dislikecls,
+      onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
+    }, (0,preact_module.h)("div", {
+      class: "message-event-action-btn-svg dislike"
+    })));
+  }
+  renderAIDevNote() {
+    if (!this.props.isLast) return null;
+    if (!this.props.store.isAIDevMode()) return null;
+    let ev = util/* default */.A.get(this.props.event, 'ev') || {};
+    let pongs = util/* default */.A.get(ev, 'data.message.pongs') || [];
+    let hasLike = this.hasLike();
+    let hasDislike = this.hasDislike();
+    let likecls = 'message-event-action-btn message-event-action-btn__dev message-event-action-btn_like';
+    if (hasLike) likecls += ' active';
+    let dislikecls = 'message-event-action-btn message-event-action-btn__dev message-event-action-btn_dislike';
+    if (hasDislike) dislikecls += ' active';
+    return (0,preact_module.h)("div", {
+      class: "message-event-actions"
+    }, (0,preact_module.h)("div", {
+      class: likecls,
+      onClick: () => this.onSendReaction(hasLike ? 'remove_like' : 'like')
+    }, (0,preact_module.h)("div", {
+      class: "message-event-action-btn-svg like"
+    }), " Good"), (0,preact_module.h)("div", {
+      class: dislikecls,
+      onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
+    }, (0,preact_module.h)("div", {
+      class: "message-event-action-btn-svg dislike"
+    }), " Bad"));
+  }
   renderUpdateConvo(ev) {
     var state = util/* default */.A.get(ev, 'data.conversation.state');
     if (state === 'active') return null;
@@ -8294,8 +8615,6 @@ class Event extends common/* Com */.Mw {
     return acc.name;
   }
 }
-// EXTERNAL MODULE: ./src/chatbox/spinner.js
-var spinner = __webpack_require__(4188);
 ;// ./src/chatbox/Events.js
 
 
@@ -8318,9 +8637,64 @@ class Events extends common/* Com */.Mw {
     }, 500);
     this.checkAndSeen();
   }
+  componentDidMount() {
+    this.setState({
+      isShowTyping: false,
+      typing_event: {}
+    });
+    this.props.store.onConvoEvent(this, ev => {
+      if (util/* default */.A.convoOfEv(ev) !== this.props.cid) return;
+      if (util/* default */.A.get(ev, 'by.type') === 'user') return;
+      let oldby = util/* default */.A.get(this.state.typing_event, 'by.id');
+      if (oldby && util/* default */.A.get(ev, 'by.id') !== oldby) return;
+      if (util/* default */.A.get(ev, 'type') === 'message_sent') {
+        if (this.timer) util/* default */.A.clearTimeout(this.timer);
+        this.timer = null;
+        this.setState({
+          isShowTyping: false
+        });
+        return;
+      }
+      if (util/* default */.A.get(ev, 'type') !== 'conversation_typing') return;
+      let ag = this.props.store.matchAgent(util/* default */.A.get(ev, 'by.id')) || {};
+      if (ag.type == 'agent' && !util/* default */.A.get(this.props.plugin, 'chatbox.show_agent_typing')) return;
+      this.setState({
+        typing_event: ev,
+        isShowTyping: true
+      });
+      if (this.timer) util/* default */.A.clearTimeout(this.timer);
+      this.timer = util/* default */.A.setTimeout(() => {
+        if (util/* default */.A.convoOfEv(ev) !== this.props.cid) return;
+        this.timer = null;
+        this.setState({
+          isShowTyping: false
+        });
+      }, 5000);
+    });
+  }
   componentDidUpdate(prevProps) {
     if (prevProps.cid !== this.props.cid) this.loadConvo();
   }
+  ShowTyping() {
+    this.setState({
+      isShowTyping: true,
+      typing_event: {
+        id: 'evzz' + util/* default */.A.Date.now(),
+        created: util/* default */.A.Date.now(),
+        by: {
+          type: 'agent'
+        },
+        type: 'conversation_typing'
+      }
+    });
+    if (this.timer) util/* default */.A.clearTimeout(this.timer);
+    this.timer = util/* default */.A.setTimeout(() => {
+      this.timer = null;
+      this.setState({
+        isShowTyping: false
+      });
+    }, 5000);
+  }
   render() {
     if (this.state.error) return this.renderError();
     let events = util/* default */.A.map(this.props.store.listEvents(this.props.cid));
@@ -8343,21 +8717,52 @@ class Events extends common/* Com */.Mw {
     events = util/* default */.A.map(events, ev => ({
       ev: ev
     }));
+    if (this.state.isShowTyping) {
+      let ev = this.state.typing_event || {
+        id: 'evzz' + util/* default */.A.Date.now(),
+        created: util/* default */.A.Date.now(),
+        by: {
+          type: 'agent'
+        }
+      };
+      let fakeev = {
+        is_typing: true,
+        id: ev.id,
+        ev: {
+          id: ev.id,
+          created: ev.created,
+          by: ev.by,
+          type: 'message_sent',
+          data: {
+            message: {
+              text: '...',
+              conversation_id: this.props.cid
+            }
+          }
+        }
+      };
+      console.log('FA', fakeev);
+      events.push(fakeev);
+    }
     processEvents(convo, events);
-    let $events = util/* default */.A.map(events, ev => (0,preact_module.h)(Event, {
-      chatbox: this.props.chatbox,
-      onLink: this.props.onLink,
-      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 $events = util/* default */.A.map(events, ev => {
+      let isLast = ev.ev.id === util/* default */.A.get(convo, 'last_message_sent.id');
+      return (0,preact_module.h)(Event, {
+        isLast: isLast,
+        chatbox: this.props.chatbox,
+        onLink: this.props.onLink,
+        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) {
+    if (this.props.creating) {
       $loading = (0,preact_module.h)(spinner/* default */.A, {
         static: true,
         mode: util/* default */.A.get(this.props.chatbox, 'primary_color', 'dark'),
@@ -8366,6 +8771,17 @@ class Events extends common/* Com */.Mw {
       });
       style = 'opacity: 0 !important';
     }
+    if (this.state.loading) {
+      if (util/* default */.A.Date.now() - this.state.loading > 500) {
+        $loading = (0,preact_module.h)(spinner/* default */.A, {
+          static: true,
+          mode: util/* default */.A.get(this.props.chatbox, 'primary_color', 'dark'),
+          size: "120",
+          center: true
+        });
+        style = 'opacity: 0 !important';
+      }
+    }
     return (0,preact_module.h)(preact_module/* Fragment */.FK, null, $loading, (0,preact_module.h)("div", {
       style: style,
       ref: ref => this.refBody = ref,
@@ -8433,10 +8849,16 @@ class Events extends common/* Com */.Mw {
     if (!this.props.cid) return;
     this.lastContentOffsetY = 0;
     this.setState({
-      loading: true
+      loading: false
     });
     let events = this.props.store.listEvents(this.props.cid);
     if (util/* default */.A.size(events) === 0) {
+      this.setState({
+        loading: util/* default */.A.Date.now()
+      });
+      util/* default */.A.setTimeout(() => {
+        this.forceUpdate();
+      }, 800);
       let cid = this.props.cid;
       let {
         error
@@ -8452,17 +8874,11 @@ class Events extends common/* Com */.Mw {
         return;
       }
     }
-    this.setState({
-      loading: true
-    });
     this.props.store.fetchMoreEvents(this.props.cid);
     this.setState({
       error: false
     });
     this.scrollToBottom();
-    util/* default */.A.setTimeout(() => this.setState({
-      loading: false
-    }), 50);
   }
   isBottom() {
     let $container = this.refBody;
@@ -8477,7 +8893,7 @@ class Events extends common/* Com */.Mw {
     util/* default */.A.setTimeout(() => {
       const $div = this.refBody;
       if ($div) $div.scrollTop = $div.scrollHeight;
-    }, 200);
+    }, 100);
     if (this.props.isShow) {
       if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
         this.props.store.seenConvo(this.props.cid);
@@ -8488,14 +8904,19 @@ class Events extends common/* Com */.Mw {
 function processEvents(convo, events) {
   events = events.filter(event => visibleEvent(event.ev));
   if (events.length < 1) return;
+  var lastAgentEvent;
   for (var i = 1; i < events.length; i++) {
     let curEvent = events[i];
     let lastEvent = events[i - 1];
+    if (util/* default */.A.get(curEvent, 'ev.by.type') != 'user' && !curEvent.is_typing) {
+      lastAgentEvent = curEvent;
+    }
     if (visibleEvent(curEvent.ev)) {
       let elapsedSec = util/* default */.A.unixSec(curEvent.ev.created) - util/* default */.A.unixSec(lastEvent.ev.created);
       if (elapsedSec > 120) curEvent.show_time = true;
     }
   }
+  if (lastAgentEvent) lastAgentEvent.show_time = true;
   for (var i = 0; i < events.length; i++) {
     let curEvent = events[i];
     if (util/* default */.A.get(curEvent, 'ev.type') === 'message_sent') {
@@ -8523,76 +8944,6 @@ function Events_isSummited(form) {
   let fields = util/* default */.A.get(form, 'fields') || [];
   return util/* default */.A.find(fields, field => !!field.answered);
 }
-;// ./src/chatbox/Typing.js
-
-
-
-class Typing extends common/* Com */.Mw {
-  constructor(props) {
-    super(props);
-  }
-  componentDidMount() {
-    this.setState({
-      isShow: false,
-      ev: {}
-    });
-    this.props.store.onConvoEvent(this, ev => {
-      if (util/* default */.A.convoOfEv(ev) !== this.props.cid) return;
-      let user = this.props.store.matchUser();
-      if (util/* default */.A.get(ev, 'by.id') === user.id) return;
-      if (util/* default */.A.get(ev, 'by.type') === 'user') return;
-      let oldby = util/* default */.A.get(this.state.ev, 'by.id');
-      if (oldby && util/* default */.A.get(ev, 'by.id') !== oldby) return;
-      if (util/* default */.A.get(ev, 'type') === 'message_sent') {
-        if (this.timer) util/* default */.A.clearTimeout(this.timer);
-        this.timer = null;
-        this.setState({
-          isShow: false
-        });
-        return;
-      }
-      if (util/* default */.A.get(ev, 'type') !== 'conversation_typing') return;
-      let ag = this.props.store.matchAgent(util/* default */.A.get(ev, 'by.id')) || {};
-      if (ag.type == 'agent' && !util/* default */.A.get(this.props.plugin, 'chatbox.show_agent_typing')) return;
-      this.setState({
-        ev: ev,
-        isShow: true
-      });
-      if (this.timer) util/* default */.A.clearTimeout(this.timer);
-      this.timer = util/* default */.A.setTimeout(() => {
-        if (util/* default */.A.convoOfEv(ev) !== this.props.cid) return;
-        this.timer = null;
-        this.setState({
-          isShow: false
-        });
-      }, 5000);
-    });
-  }
-  ShowTyping() {
-    this.setState({
-      isShow: true
-    });
-    if (this.timer) util/* default */.A.clearTimeout(this.timer);
-    this.timer = util/* default */.A.setTimeout(() => {
-      this.timer = null;
-      this.setState({
-        isShow: false
-      });
-    }, 5000);
-  }
-  render() {
-    let account = this.props.store.matchAccount();
-    var cls = this.state.isShow ? '' : 'typing--hidden';
-    let byid = util/* default */.A.get(this.state.ev, 'by.display_id', util/* default */.A.get(this.state.ev, 'by.id'));
-    let agentName = util/* default */.A.getAgentDisplayName(account, this.props.store.matchAgent(byid));
-    if (util/* default */.A.get(this.props.plugin, 'chatbox.hide_agent_profile')) {
-      agentName = util/* default */.A.get(account, 'name');
-    }
-    return (0,preact_module.h)("div", {
-      class: `typing ${cls}`
-    }, agentName, " ", this.props.t('typing'));
-  }
-}
 // EXTERNAL MODULE: ./src/chatbox/releaseAnimation.js
 var releaseAnimation = __webpack_require__(2988);
 ;// ./src/chatbox/Rating.js
@@ -8891,7 +9242,6 @@ var empty = __webpack_require__(9419);
 
 
 
-
 let Order = false;
 const LoadOrder = () => __webpack_require__.e(/* import() */ 185).then(__webpack_require__.bind(__webpack_require__, 4185));
 
@@ -8899,7 +9249,6 @@ const Widget_defaultAvatar = 'https://vcdn.subiz-cdn.com/file/fiqoahedjbgwclpouo
 
 
 
-
 class Widget extends common/* Com */.Mw {
   constructor(props) {
     super(props);
@@ -8943,26 +9292,33 @@ class Widget extends common/* Com */.Mw {
           initial_by: this.props.store.matchUser().id
         });
         if (_creating != this._creating) return;
-        if (error) {}
+        if (error) {
+          this.setState({
+            creating: false
+          });
+          return;
+        }
         await this.props.store.sendConvoEvent(convo.id, 'message_sent', {
           message
         });
         if (_creating != this._creating) return;
-        this.setState({
-          creating: false
-        });
         this.props.onGo({
           view: 'chat',
           cid: convo.id
         });
+        this.setState({
+          creating: false
+        });
         return;
       }
-      await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
-        message
-      });
-      this.setState({
-        creating: false
-      });
+      util/* default */.A.setTimeout(async () => {
+        await this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
+          message
+        });
+        this.setState({
+          creating: false
+        });
+      }, 1);
     });
     Widget_defineProperty(this, "onLink", (e, url) => {
       if (!url) return e.preventDefault();
@@ -9005,6 +9361,9 @@ class Widget extends common/* Com */.Mw {
     if (!this.props.store.isMobile()) this.focusInput();
     this.updateFormDataFields();
   }
+  applyMessage(text) {
+    this.focusInput(text);
+  }
   componentDidUpdate(prevProp) {
     if (prevProp.isShow !== this.props.isShow) {
       if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
@@ -9018,14 +9377,14 @@ class Widget extends common/* Com */.Mw {
         quickReplyMessage: {}
       });
       util/* default */.A.setTimeout(() => {
-        this.events && this.events.focus();
+        this.$events && this.$events.focus();
         if (!this.props.store.isMobile()) this.focusInput();
       }, 100);
       this.updateFormDataFields();
     }
   }
   ShowTyping() {
-    this.refTyping.current && this.refTyping.current.ShowTyping();
+    this.$events && this.$events.ShowTyping();
   }
   shouldShowForm() {
     let form;
@@ -9071,19 +9430,24 @@ class Widget extends common/* Com */.Mw {
     let cls = 'widget-container widget-container--' + position;
     if (!this.props.store.isMobile() && util/* default */.A.get(accountSetting, 'window_mode') === 'full') cls += ' widget-container--full';
     if (!this.props.isShow) cls += ' widget-container--hide';
+    let hideheader = util/* default */.A.get(accountSetting, 'header.hidden', false);
+    var $header;
+    if (!hideheader) {
+      $header = (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'
+        })
+      });
+    }
     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);
+    }, $header, $body);
   }
   async submitPrechatForm(form, formName) {
     if (this.state.submiting) return;
@@ -9592,7 +9956,7 @@ class Widget extends common/* Com */.Mw {
     util/* default */.A.setTimeout(() => $input && $input.blur());
     util/* default */.A.setTimeout(() => $input && $input.blur(), 300);
   }
-  focusInput() {
+  focusInput(text) {
     if (this.props.store.isPreview) return;
     if (this.shouldShowForm()) {
       let firstemptykey = '';
@@ -9610,6 +9974,9 @@ class Widget extends common/* Com */.Mw {
     }
     var $input = this.msgInput.current;
     if (!$input) return;
+    if (text != undefined && typeof text === 'string') {
+      $input.applyMessage(text);
+    }
     util/* default */.A.setTimeout(() => $input.focus());
     util/* default */.A.setTimeout(() => $input.focus(), 300);
   }
@@ -9642,6 +10009,7 @@ class Widget extends common/* Com */.Mw {
       ref: this.msgInput,
       cid: this.props.cid,
       onChange: this.onChangeMessageInput,
+      is_loading: this.state.creating,
       onSend: this.sendMessage,
       t: this.props.t
     });
@@ -9665,18 +10033,13 @@ class Widget extends common/* Com */.Mw {
       store: this.props.store,
       chatbox: this.props.plugin.chatbox || {},
       onFormSubmit: e => this.onEventFormSubmit(e),
-      ref: ref => this.events = ref,
+      ref: ref => this.$events = ref,
       cid: this.props.cid,
       creating: this.creating,
       onSend: e => this.sendMessage(e),
       onPostback: e => this.createPostback(e),
-      t: this.props.t
-    }), (0,preact_module.h)(Typing, {
-      store: this.props.store,
-      cid: this.props.cid,
       t: this.props.t,
-      plugin: this.props.plugin,
-      ref: this.refTyping
+      plugin: this.props.plugin
     })), (0,preact_module.h)(Rating, {
       forceView: this.props.view,
       plugin: this.props.plugin,
@@ -10094,6 +10457,9 @@ class Main extends common/* Com */.Mw {
       cid: p.cid
     });
   }
+  applyMessage(text) {
+    this.refWidget.current && this.refWidget.current.applyMessage(text);
+  }
   showGreeting() {
     this.refButton.current && this.refButton.current.ShowGreeting();
   }
@@ -10392,6 +10758,10 @@ class PluginMgr {
     let chatbox = this.findChatbox();
     if (chatbox) return chatbox.call('showGreeting');
   }
+  applyTextToCurrentChatbox(text) {
+    let chatbox = this.findChatbox();
+    if (chatbox) return chatbox.call('applyMessage', text);
+  }
   hideCurrentGreeting() {
     let chatbox = this.findChatbox();
     if (chatbox) return chatbox.call('hideGreeting');
@@ -10466,6 +10836,9 @@ class lib_Widget {
     await this.store.readyGate.entry();
     cb();
   }
+  setAIDevMode(mode) {
+    this.store.setAIDevMode(mode);
+  }
   setTrackPageView(val) {
     this.store.setTrackPageview(val);
   }
@@ -10677,6 +11050,10 @@ class lib_Widget {
     if (this.pluginMgr) this.pluginMgr.destroy();
     this.store.destroy();
   }
+  async applyMessage(msg) {
+    await this.domGate.entry();
+    this.pluginMgr.applyTextToCurrentChatbox(msg);
+  }
   _overridePlugin(plugins) {
     this.store.overridePlugin(plugins);
   }