@subiz/widget-v4 4.0.91 → 4.0.92

package/dist/132.js

@@ -161,8 +161,9 @@ class ChatButton extends common/* Com */.up {
     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', {});
+    let text = this.props.t.i18n(util/* default.get */.Z.get(greeting, 'greeting', {})) || greeting.message;
 
-    if (!greeting.message || !greeting.enabled) {
+    if (!text || !greeting.enabled) {
       this.setState({
         previewEvent: {}
       });
@@ -224,6 +225,13 @@ class ChatButton extends common/* Com */.up {
       position = util/* default.get */.Z.get(accountSetting, 'mobile_button.position') || position;
     }
 
+    if (accountSetting && accountSetting.hide_agent_profile) {
+      agent = Object.assign({}, account, {
+        avatar_url: account.logo_url || __webpack_require__(9895),
+        fullname: account.name || this.props.t('agent')
+      });
+    }
+
     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'));
@@ -257,21 +265,17 @@ class ChatButton extends common/* Com */.up {
   }
 
   onProfileReady() {
-    if (this.state.buttonLoaded) this.setState({
+    if (this._buttonLoaded) this.setState({
       opacity: 1
     });
-    this.setState({
-      profileLoaded: true
-    });
+    this._profileLoaded = true;
   }
 
   onButtonReady() {
-    if (this.state.profileLoaded) this.setState({
+    if (this._profileLoaded) this.setState({
       opacity: 1
     });
-    this.setState({
-      buttonLoaded: true
-    });
+    this._buttonLoaded = true;
   }
 
   renderButton() {
@@ -461,6 +465,26 @@ class AgentsAvatar extends common/* Com */.up {
 
   render() {
     let accountSetting = this.props.plugin.chatbox;
+    let acc = this.props.store.matchAccount();
+    var tooltippos = this.props.tooltipPos || 'bottom';
+    var mode = this.props.mode || 'primary';
+
+    if (accountSetting && accountSetting.hide_agent_profile) {
+      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)
+      })));
+    }
+
     let agentM = this.props.store.matchAgent('*');
     var agents = util/* default.map */.Z.map(this.props.agent_ids, id => agentM[id]);
 
@@ -476,9 +500,6 @@ class AgentsAvatar extends common/* Com */.up {
     }
 
     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", {
@@ -839,6 +860,12 @@ class MessageInput extends common/* Com */.up {
     }, 5);
   }
 
+  blur() {
+    const $input = this.refMessageInput.current;
+    if (!$input) return;
+    $input.blur();
+  }
+
   render() {
     var buttons = (0,preact_module.h)("div", {
       class: "d-flex flex-row align-self-end"
@@ -1295,7 +1322,7 @@ class Buttons extends common/* Com */.up {
           href: 'tel:' + button.phone_number,
           key: index,
           title: button.title
-        }, button.title);
+        }, this.props.t.i18n(button.i18n_title) || button.title);
       }
 
       if (button.type === 'url_button') {
@@ -1305,7 +1332,7 @@ class Buttons extends common/* Com */.up {
           target: "_blank",
           key: index,
           title: button.title
-        }, button.title || button.url);
+        }, this.props.t.i18n(button.i18n_title) || button.title || button.url);
       }
 
       if (button.type === 'postback_button') {
@@ -1313,7 +1340,7 @@ class Buttons extends common/* Com */.up {
           class: "url-button-attachment",
           href: "javascript:;",
           onClick: _ => this.props.onSelect(button)
-        }, button.title);
+        }, this.props.t.i18n(button.i18n_title) || button.title);
       }
 
       if (button.type === 'widget_ask_desktop_notify_button') return null;
@@ -1347,7 +1374,8 @@ class ButtonAttachments extends common/* Com */.up {
     });
     return (0,preact_module.h)(Buttons, {
       store: this.props.store,
-      buttons: buttons
+      buttons: buttons,
+      t: this.props.t
     });
   }
 
@@ -1956,7 +1984,10 @@ class GenericTemplateAttachments extends common/* Com */.up {
     this.setState({
       focusing: eleindex
     });
-    this.galleryRef.current.scrollLeft = 190 * eleindex - 20;
+    this.galleryRef.current.scrollTo({
+      left: 220 * eleindex,
+      behavior: 'smooth'
+    });
   }
 
   render() {
@@ -1967,21 +1998,26 @@ class GenericTemplateAttachments extends common/* Com */.up {
     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", {
+        let title = this.props.t.i18n(ele.i18n_title) || ele.title;
+        let subtitle = this.props.t.i18n(ele.i18n_subtitle) || ele.subtitle;
+        let $title = title ? (0,preact_module.h)("div", {
           class: "generic-attachment--element-title"
-        }, ele.title) : null;
-        let $subtitle = ele.subtitle ? (0,preact_module.h)("div", {
+        }, title) : null;
+        let $subtitle = subtitle ? (0,preact_module.h)("div", {
           class: "generic-attachment--element-subtitle"
-        }, ele.subtitle) : null;
+        }, 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, {
+        })), (0,preact_module.h)("div", {
+          class: "generic-attachment--element-content"
+        }, $title, $subtitle), (0,preact_module.h)(Buttons, {
           buttons: ele.buttons,
-          onSelect: button => this.props.onSelect(button)
+          onSelect: button => this.props.onSelect(button),
+          t: this.props.t
         }));
       });
       let elements = util/* default.get */.Z.get(attachments, '0.elements', []);
@@ -2031,17 +2067,53 @@ class ProductAttachments extends common/* Com */.up {
     let acc = this.props.store.matchAccount();
     let $products = util/* default.map */.Z.map(products, (att, index) => {
       let product = att.product;
-      let $detailbtn = null;
+      let $detailbtns = [];
       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", {
+      if (url && util/* default.size */.Z.size(product.buttons) == 0) $detailbtns.push((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"
-      }));
+      })));
+      console.log('P', product);
+
+      if (util/* default.size */.Z.size(product.buttons) > 0) {
+        $detailbtns = $detailbtns.concat(util/* default.map */.Z.map(product.buttons, (button, index) => {
+          if (button.type === 'call_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: 'tel:' + button.phone_number,
+              key: index,
+              title: button.title
+            }, this.props.t.i18n(button.i18n_title) || button.title);
+          }
+
+          if (button.type === 'url_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: button.url,
+              target: "_blank",
+              key: index,
+              title: button.title
+            }, this.props.t.i18n(button.i18n_title) || button.title || this.props.t('detail'), ' ', (0,preact_module.h)("img", {
+              src: __webpack_require__(8453),
+              class: "product_attachment__btn_external_link"
+            }));
+          }
+
+          if (button.type === 'postback_button') {
+            return (0,preact_module.h)("a", {
+              class: "product_attachment__btn",
+              href: "javascript:;",
+              onClick: _ => this.props.onPostback(button)
+            }, this.props.t.i18n(button.i18n_title) || button.title);
+          }
+        }));
+      }
+
       let $title = (0,preact_module.h)("a", {
         href: url,
         class: "product_attachment__title",
@@ -2070,7 +2142,7 @@ class ProductAttachments extends common/* Com */.up {
         src: this.props.store.replaceFileUrl(product.image)
       }))), $title, $subtitle, $price, (0,preact_module.h)("div", {
         class: "product_attachment__btns"
-      }, $detailbtn));
+      }, $detailbtns));
     });
     return $products;
   }
@@ -2226,8 +2298,7 @@ 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;}
+p { margin-bottom: 0; margin-top: 0;}
 </style>
 <div>${html}</div>`;
     let links = this.shadowRoot.querySelectorAll('a');
@@ -2271,6 +2342,11 @@ class TextMessage extends common/* Com */.up {
   render() {
     var format = util/* default.get */.Z.get(this.props.ev, 'data.message.format', 'plaintext');
     if (format === 'markdown') return this.renderMarkdown();
+    if (format === 'delta') return this.renderDelta();
+    return this.renderPlainText();
+  }
+
+  renderPlainText() {
     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;
@@ -2316,8 +2392,86 @@ class TextMessage extends common/* Com */.up {
     }, tags);
   }
 
-  renderMarkdown() {
-    var text = util/* default.get */.Z.get(this.props.ev, 'data.message.text');
+  renderDelta() {
+    let deltas = util/* default.get */.Z.get(this.props.ev, 'data.message.quill_delta') || util/* default.get */.Z.get(this.props.ev, 'data.message.text');
+    let quilldeltas = util/* default.parseJSON */.Z.parseJSON(deltas) || {};
+    quilldeltas = trimQuillDelta(quilldeltas);
+    if (!quilldeltas || util/* default.size */.Z.size(quilldeltas.ops) === 0) return null;
+    let $deltas = util/* default.map */.Z.map(quilldeltas.ops, delta => {
+      let html = '';
+      let insert = delta.insert;
+      let attributes = delta.attributes;
+
+      if (insert.dynamicField) {
+        return util/* default.get */.Z.get(insert, 'dynamicField.text', '');
+      }
+
+      if (insert.mention) {
+        if (insert.mention.id == '*' || insert.mention.id == 'all') {
+          return (0,preact_module.h)("span", {
+            class: "mention"
+          }, "@", this.$t('all'));
+        }
+
+        let ag = store.matchAgent(insert.mention.id);
+        let name = util/* default.getAgentDisplayName */.Z.getAgentDisplayName(ag, insert.mention.fullname);
+        return (0,preact_module.h)("span", {
+          class: "mention",
+          "data-agent-id": ag.id,
+          "data-agent-fullname": name
+        }, "@", name);
+      }
+
+      if (insert.emoji) return (0,preact_module.h)(Emoji, {
+        emojiCode: `:${insert.emoji}:`
+      });
+
+      if (typeof insert === 'string') {
+        let $tags = util/* default.extractText */.Z.extractText(insert).map((tag, i) => {
+          if (tag.type === 'link') {
+            return (0,preact_module.h)("a", {
+              href: absLink(tag.text),
+              target: "_blank"
+            }, tag.text);
+          }
+
+          return tag.text;
+        });
+
+        if (attributes) {
+          if (attributes.italic && attributes.bold) return (0,preact_module.h)("span", {
+            style: "font-weight: bold !important; font-style: italic !important"
+          }, $tags);
+          if (attributes.italic) return (0,preact_module.h)("span", {
+            style: "font-style: italic !important"
+          }, $tags);
+          if (attributes.bold) return (0,preact_module.h)("span", {
+            style: "font-weight: bold !important"
+          }, $tags);
+        }
+
+        return (0,preact_module.h)("span", null, $tags);
+      }
+
+      return null;
+    });
+    let byType = util/* default.get */.Z.get(this.ev, 'by.type');
+    if (byType !== 'user') byType = 'agent';
+    if (util/* default.size */.Z.size($deltas) === 0) return null;
+
+    if (byType === 'agent') {
+      return (0,preact_module.h)("div", {
+        class: "message-agent message-text--agent"
+      }, $deltas);
+    }
+
+    return (0,preact_module.h)("div", {
+      class: "message-user message-text--user"
+    }, $deltas);
+  }
+
+  renderMarkdown(text) {
+    if (!text) 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);
@@ -2341,6 +2495,81 @@ class TextMessage extends common/* Com */.up {
   }
 
 }
+
+function deltaToMarkdown(deltas) {
+  let output = '';
+  sb.each(deltas, (delta, idx) => {
+    let text = '';
+    let insert = delta.insert;
+    let attributes = delta.attributes;
+    if (insert.emoji) text = emojiCodes[insert.emoji] || '';
+
+    if (attributes) {
+      if (attributes.italic && attributes.bold) text = `*__${insert}__*`;else if (attributes.italic) text = `*${insert}*`;else if (attributes.bold) text = `**${insert}**`;else text = insert;
+    }
+
+    if (insert.dynamicField) text = `${sb.get(insert, 'dynamicField.text', '')}`;
+
+    if (!insert.emoji && !attributes && !insert.dynamicField) {
+      text = insert || '';
+      text = text.replace(/\n/g, '<br/>');
+    }
+
+    output += text;
+  });
+  return output;
+}
+
+const emojiCodes = {
+  like: '👍',
+  unlike: '👎',
+  angry: '😠',
+  confused: '😕',
+  crying: '😢',
+  grinning: '😀',
+  'heart-eyes': '😍',
+  neutral: '😐',
+  sleepy: '😪',
+  sad: '😞',
+  smiling: '😄',
+  'tongue-out': '😛',
+  tired: '😩',
+  surprised: '😮',
+  wink: '😉'
+};
+
+function trimQuillDelta(delta) {
+  if (!delta) return delta;
+  if (!delta.ops || !delta.ops.length) return delta;
+  let last = delta.ops[delta.ops.length - 1];
+  if (typeof last.insert != 'string') return delta;
+  let insert = last.insert.trim();
+
+  if (insert) {
+    if (last.insert != insert) {
+      let newops = delta.ops.slice();
+      let last = newops.pop();
+      last.insert = insert;
+      newops.push(last);
+      return {
+        ops: newops
+      };
+    }
+
+    return delta;
+  }
+
+  let newops = delta.ops.slice();
+  newops.pop();
+  return trimQuillDelta({
+    ops: newops
+  });
+}
+
+function absLink(url) {
+  if (!url.startsWith('http://') && !url.startsWith('https://') && !url.startsWith('//')) return 'http://' + url;
+  return url;
+}
 ;// CONCATENATED MODULE: ./src/chatbox/time.js
 
 var g_pub = new util/* default.Pubsub */.Z.Pubsub();
@@ -2624,9 +2853,21 @@ class Event extends common/* Com */.up {
 
     var uri = acc.logo_url || __webpack_require__(9895);
 
+    if (util/* default.get */.Z.get(this.props, 'chatbox.hide_agent_profile')) {
+      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"
+      }, acc.name));
+    }
+
     let agentM = this.props.store.matchAgent('*');
 
-    if (byid !== 'system' || bytype !== 'dummy') {
+    if (byid !== 'system' && bytype !== 'dummy' && bytype !== 'workflow') {
       uri = util/* default.get */.Z.get(agentM[byid], 'avatar_url') || acc.logo_url || __webpack_require__(4761);
     }
 
@@ -2679,7 +2920,8 @@ class Event extends common/* Com */.up {
         ev: ev
       }), (0,preact_module.h)(ButtonAttachments, {
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        t: this.props.t
       }), (0,preact_module.h)(FormAttachments, {
         store: this.props.store,
         onSubmit: this.props.onFormSubmit,
@@ -2693,9 +2935,11 @@ class Event extends common/* Com */.up {
       }), (0,preact_module.h)(GenericTemplateAttachments, {
         store: this.props.store,
         ev: ev,
-        onSelect: e => this.choosePostbackBtn(e)
+        onSelect: e => this.choosePostbackBtn(e),
+        t: this.props.t
       }), (0,preact_module.h)(ProductAttachments, {
         t: this.props.t,
+        onPostback: e => this.choosePostbackBtn(e),
         store: this.props.store,
         ev: ev
       }), (0,preact_module.h)(OrderAttachments_ProductAttachments, {
@@ -2767,7 +3011,8 @@ class Event extends common/* Com */.up {
       ev: ev
     }), (0,preact_module.h)(ButtonAttachments, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      t: this.props.t
     }), (0,preact_module.h)(FormAttachments, {
       store: this.props.store,
       onSubmit: this.props.onFormSubmit,
@@ -2805,11 +3050,10 @@ class Event extends common/* Com */.up {
   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();
+    if (bytype === 'user') return util/* default.getUserDisplayName */.Z.getUserDisplayName(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));
+    if (byid === 'system' || bytype === 'dummy' || bytype === 'workflow') return acc.name || 'system';
     return '';
   }
 
@@ -2916,6 +3160,7 @@ class Events extends common/* Com */.up {
     }));
     processEvents(convo, events);
     let $events = util/* default.map */.Z.map(events, ev => (0,preact_module.h)(Event, {
+      chatbox: this.props.chatbox,
       onLink: this.props.onLink,
       store: this.props.store,
       onFormSubmit: this.props.onFormSubmit,
@@ -3149,6 +3394,8 @@ class Typing extends common/* Com */.up {
         return;
       }
 
+      let ag = this.props.store.matchAgent(ev.by.id) || {};
+      if (ag.type == 'agent') return;
       if (util/* default.get */.Z.get(ev, 'type') !== 'conversation_typing') return;
       this.setState({
         ev: ev,
@@ -3161,7 +3408,7 @@ class Typing extends common/* Com */.up {
         this.setState({
           isShow: false
         });
-      }, 10000);
+      }, 5000);
     });
   }
 
@@ -4061,6 +4308,7 @@ class order_Order extends common/* Com */.up {
       loading: true,
       order: {},
       err: {},
+      shipping_address: 'new',
       selectedProvince: null,
       selectedDistrict: null,
       selectedWard: null,
@@ -4353,16 +4601,17 @@ class order_Order extends common/* Com */.up {
 
     order_defineProperty(this, "onCancel", () => {
       if (this.props.onResponse) this.props.onResponse('rejected');
-      this.close();
-    });
 
-    order_defineProperty(this, "close", () => {
       if (this.props.cid && !this.state.order.user_confirmation) {
         let order = util/* default.cloneDeep */.Z.cloneDeep(this.state.order);
         order.user_confirmation = 'rejected';
         this.props.store.updateOrder(order);
       }
 
+      this.close();
+    });
+
+    order_defineProperty(this, "close", () => {
       if (this.props.onClose) this.props.onClose();
     });
 
@@ -4432,7 +4681,7 @@ class order_Order extends common/* Com */.up {
     return null;
     let editmode = false;
 
-    if (!order.status || order.status == 'new') {
+    if (!order.status || order.status == 'open') {
       editmode = !order.user_confirmation;
     }
 
@@ -4523,7 +4772,7 @@ class order_Order extends common/* Com */.up {
   renderDesktopShipping(order) {
     let editmode = false;
 
-    if (!order.status || order.status == 'new') {
+    if (!order.status || order.status == 'open') {
       editmode = !order.user_confirmation;
     }
 
@@ -4824,7 +5073,7 @@ class order_Order extends common/* Com */.up {
     }, (0,preact_module.h)("div", null, "Ph\xED v\u1EADn chuy\u1EC3n"), (0,preact_module.h)("div", null, util/* default.get */.Z.get(order, 'shipping.fee', 0), " d"));
     let editmode = false;
 
-    if (!order.status || order.status == 'new') {
+    if (!order.status || order.status == 'open') {
       editmode = !order.user_confirmation;
     }
 
@@ -4860,7 +5109,7 @@ class order_Order extends common/* Com */.up {
   }
 
   renderStatusBadge(order) {
-    let status = order.status || 'new';
+    let status = order.status || 'open';
     return (0,preact_module.h)("div", {
       style: "float: right !important;",
       class: 'order_status order_status__' + status
@@ -4868,7 +5117,7 @@ class order_Order extends common/* Com */.up {
   }
 
   renderShippingInfo(order) {
-    if (order.status != 'new' || order.user_confirmation) {}
+    if (order.status != 'open' || order.user_confirmation) {}
 
     let shipping_provider = util/* default.get */.Z.get(order, 'shipping.shipping_provider');
     if (!shipping_provider) return null;
@@ -4968,7 +5217,7 @@ class order_Order extends common/* Com */.up {
     let $products = null;
     let editmode = false;
 
-    if (!order.status || order.status == 'new') {
+    if (!order.status || order.status == 'open') {
       editmode = !order.user_confirmation;
     }
 
@@ -5072,7 +5321,7 @@ class order_Order extends common/* Com */.up {
       onClick: this.onCancel
     }, this.props.t('cancel_order'));
 
-    if (order.user_confirmation || order.status != 'new') {
+    if (order.user_confirmation || order.status != 'open') {
       $status = null;
       if (this.props.cid) $close = (0,preact_module.h)("div", {
         class: "order_btn order__btn__light mt-3",
@@ -5104,7 +5353,7 @@ class order_Order extends common/* Com */.up {
     let $actions = null;
     let editmode = false;
 
-    if (!order.status || order.status == 'new') {
+    if (!order.status || order.status == 'open') {
       editmode = !order.user_confirmation;
     }
 
@@ -5512,6 +5761,48 @@ class Widget extends common/* Com */.up {
   constructor(props) {
     super(props);
 
+    Widget_defineProperty(this, "msgInput", (0,preact_module/* createRef */.Vf)());
+
+    Widget_defineProperty(this, "sendMessage", async message => {
+      let hasPostback = util/* default.find */.Z.find(message.attachments, att => att.type === 'postback');
+
+      if (this.isFormRequired() && hasPostback) {
+        this.onStartConvoClick();
+        this.fillQuickReplyToQuestion(message);
+        return;
+      }
+
+      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
+      });
+    });
+
     Widget_defineProperty(this, "onLink", (e, url) => {
       if (!url) return e.preventDefault();
       let noschemeurl = url.replace(/(^\w+:|^)\/\//, '');
@@ -5542,7 +5833,8 @@ class Widget extends common/* Com */.up {
       clickedJoin: false,
       formData: {},
       showOrder: false,
-      order_id: ''
+      order_id: '',
+      quickReplyMessage: {}
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -5560,7 +5852,8 @@ class Widget extends common/* Com */.up {
     if (prevProp.cid !== this.props.cid) {
       this.closeOrder();
       this.setState({
-        clickedJoin: false
+        clickedJoin: false,
+        quickReplyMessage: {}
       });
       setTimeout(() => {
         this.events && this.events.focus();
@@ -5572,6 +5865,13 @@ class Widget extends common/* Com */.up {
   }
 
   shouldShowForm() {
+    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.hasSentMessage(this.props.cid) && form && (util/* default.size */.Z.size(form.groups) || form.group_required)) return true;
     let formRequired = this.isFormRequired();
     return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
   }
@@ -5644,17 +5944,23 @@ class Widget extends common/* Com */.up {
     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());
+    let is_lead = false;
     util/* default.map */.Z.map(data, (field, key) => {
       if (!key.startsWith('attr:')) return;
       var attr = {
         key: key.substr(5)
       };
+      is_lead = is_lead || key == 'emails' || key == 'phones';
       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);
     });
+    if (is_lead) util/* default.setUserAttr */.Z.setUserAttr(user, {
+      key: 'lead_source',
+      text: 'widget'
+    });
     let firstmsg = util/* default.get */.Z.get(data, 'question.value');
     let groupid = util/* default.get */.Z.get(data, 'group.value', '');
 
@@ -5670,9 +5976,13 @@ class Widget extends common/* Com */.up {
           fields: [{
             key: 'to_agent_group',
             value: util/* default.stringify */.Z.stringify(groupid)
-          }]
+          }],
+          attachments: this.state.quickReplyMessage.attachments
         }
       });
+      this.setState({
+        quickReplyMessage: {}
+      });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
       return;
     }
@@ -5693,11 +6003,11 @@ class Widget extends common/* Com */.up {
     this.setState({
       creatingError: null
     });
+    await this.props.store.setUser(user);
     const {
       error,
       convo
     } = await this.props.store.startConvo(req);
-    this.props.store.setUser(user);
 
     if (error) {
       this.setState({
@@ -5718,7 +6028,8 @@ class Widget extends common/* Com */.up {
     });
     this.setState({
       creating: false,
-      clickedJoin: false
+      clickedJoin: false,
+      quickReplyMessage: {}
     });
     if (!this.props.store.isMobile()) this.focusInput();
   }
@@ -5729,7 +6040,8 @@ class Widget extends common/* Com */.up {
       key: 'question',
       is_required: true,
       label: this.props.t.i18n(util/* default.get */.Z.get(form, `i18n_question_label`, {})) || form.question_label,
-      type: 'text'
+      type: 'text',
+      value: this.state.quickReplyMessage.text
     };
     this.setState({
       formData
@@ -5782,6 +6094,7 @@ class Widget extends common/* Com */.up {
   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) => {
+      if (this.state.quickReplyMessage.text && key === 'question') return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
 
@@ -5998,7 +6311,7 @@ class Widget extends common/* Com */.up {
 
   blur() {
     if (this.props.store.isPreview) return;
-    var $input = this.msgInput;
+    var $input = this.msgInput.current;
     if (!$input) return;
     setTimeout(() => $input && $input.blur());
     setTimeout(() => $input && $input.blur(), 300);
@@ -6022,7 +6335,7 @@ class Widget extends common/* Com */.up {
       return;
     }
 
-    var $input = this.msgInput;
+    var $input = this.msgInput.current;
     if (!$input) return;
     setTimeout(() => $input.focus());
     setTimeout(() => $input.focus(), 300);
@@ -6038,35 +6351,16 @@ class Widget extends common/* Com */.up {
     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) {}
+  fillQuickReplyToQuestion(message) {
+    let formData = this.state.formData;
 
-      this.creating = false;
-      this.props.store.sendConvoEvent(convo.id, 'message_sent', {
-        message
-      });
-      this.props.onGo({
-        view: 'chat',
-        cid: convo.id
-      });
-      return;
+    if (formData) {
+      util/* default.set */.Z.set(formData, 'question.value', message.text);
     }
 
-    this.props.store.sendConvoEvent(this.props.cid, 'message_sent', {
-      message
+    this.setState({
+      formData,
+      quickReplyMessage: message
     });
   }
 
@@ -6077,9 +6371,9 @@ class Widget extends common/* Com */.up {
   renderChat() {
     let $input = (0,preact_module.h)(MessageInput, {
       store: this.props.store,
-      ref: ref => this.msgInput = ref,
+      ref: this.msgInput,
       cid: this.props.cid,
-      onSend: e => this.sendMessage(e),
+      onSend: this.sendMessage,
       t: this.props.t
     });
     let convo = this.props.store.matchConvo(this.props.cid) || {};
@@ -6102,6 +6396,7 @@ class Widget extends common/* Com */.up {
       isShow: this.props.isShow,
       onLink: this.onLink,
       store: this.props.store,
+      chatbox: this.props.plugin.chatbox || {},
       onFormSubmit: e => this.onEventFormSubmit(e),
       ref: ref => this.events = ref,
       cid: this.props.cid,
@@ -6139,7 +6434,8 @@ class Widget extends common/* Com */.up {
       cid: ''
     });
     this.setState({
-      clickedJoin: true
+      clickedJoin: true,
+      quickReplyMessage: {}
     });
   }
 
@@ -6164,12 +6460,12 @@ class Widget extends common/* Com */.up {
     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 === '');
+    return !!util/* default.find */.Z.find(formData, field => field.is_required && (field.value == null || field.value === ''));
   }
 
   renderConvoSummary(convo) {
+    let accountSetting = this.props.plugin.chatbox || {};
     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';
@@ -6181,7 +6477,7 @@ class Widget extends common/* Com */.up {
       fullname: 'Offline Agent'
     });
     var name = util/* default.each */.Z.each(agents, ag => ag.fullname).join(', ');
-    if (!name) name = this.props.store.matchAccount().name;
+    if (accountSetting.hide_agent_profile || !name) name = this.props.store.matchAccount().name;
     if (!name) name = this.props.t('agent');
     var $you = null;
 
@@ -6268,6 +6564,15 @@ class Widget extends common/* Com */.up {
     return joined;
   }
 
+  hasSentMessage(cid) {
+    let convo = this.props.store.matchConvo(cid) || {};
+    let joined = util/* default.find */.Z.find(convo.members, mem => {
+      if (mem.type === 'bot') return true;
+      return mem.last_sent;
+    });
+    return joined;
+  }
+
   isOffline(acc, accSetting) {
     let enableWhen = util/* default.get */.Z.get(accSetting, 'offline_form.enable_when');
     let isonline = true;
@@ -6523,6 +6828,14 @@ class Main extends common/* Com */.up {
     }
 
     p = p || {};
+
+    if (!p.view && !p.cid) {
+      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));
+      p.cid = util/* default.get */.Z.get(redconvo, 'id', util/* default.get */.Z.get(convoM, '0.id'));
+      p.view = 'chat';
+    }
+
     if (this.props.store.isMobile()) modifyViewport();
     this.setState({
       widgetConvoId: p.cid,
@@ -6563,11 +6876,13 @@ class Main extends common/* Com */.up {
 }
 
 function restoreViewport() {
+  if (document.body && document.body.classList) document.body.classList.remove('sbz_no_scroll');
   let metatag = document.getElementById('subiz-meta-viewport');
   if (metatag) metatag.remove();
 }
 
 function modifyViewport() {
+  if (document.body && document.body.classList) document.body.classList.add('sbz_no_scroll');
   let metatag = document.createElement('meta');
   metatag.httpEquiv = 'X-UA-Compatible';
   metatag.name = 'viewport';