@subiz/widget-v4 4.1.26 → 4.1.28

package/compiled_src/chatbox/Header.js

@@ -19,21 +19,22 @@ class Header extends _common.Com {
     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 = _index.default.get(accSetting, 'header.layout');
-    if (renderCollapsed) {
+    let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed';
+    let renderClassic = !renderCollapsed && layout === 'classic';
+    if (renderCollapsed || layout == 'classic') {
       cls += ' widget-header--collapsed';
     } else {
       cls += ' widget-header--convo-expanded';
       renderSocial = layout === 'social';
-      renderTeam = !renderSocial;
+      renderTeam = !(renderSocial || renderClassic);
     }
     return (0, _preact.h)("div", {
       class: cls
-    }, this.renderCollapsedHeader(renderCollapsed), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
+    }, this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
   }
-  renderCollapsedHeader(show) {
+  renderCollapsedHeader(show, classic) {
     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');
@@ -42,9 +43,13 @@ class Header extends _common.Com {
     let agentIdsJoined = _index.default.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';
+    let $back = null;
+    let style = '';
+    if (!classic) $back = this.renderBackButton();else style = 'padding-bottom: 75px !important;';
     return (0, _preact.h)("div", {
-      class: cls
-    }, this.renderBackButton(), (0, _preact.h)(_AgentsAvatar.default, {
+      class: cls,
+      style: style
+    }, $back, (0, _preact.h)(_AgentsAvatar.default, {
       plugin: this.props.plugin,
       store: this.props.store,
       mode: "secondary",

package/compiled_src/chatbox/Widget.js

@@ -86,6 +86,7 @@ class Widget extends _common.Com {
       this.focusInput();
     });
     this.userSent = {};
+    this.wasFormInputed = false;
     this.setState({
       creating: false,
       clickedJoin: false,
@@ -289,6 +290,7 @@ class Widget extends _common.Com {
     if (!this.props.store.isMobile()) this.focusInput();
   }
   onBooleanChange(key, e) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -298,6 +300,7 @@ class Widget extends _common.Com {
     });
   }
   onInputChange(key, val) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -307,6 +310,7 @@ class Widget extends _common.Com {
     });
   }
   onListAddItem(key, val) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -317,6 +321,7 @@ class Widget extends _common.Com {
     });
   }
   onListRemoveItem(key, index) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -348,6 +353,7 @@ class Widget extends _common.Com {
     }));
   }
   toggleCheckboxField(key, v) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -385,6 +391,7 @@ class Widget extends _common.Com {
     }));
   }
   toggleRadioField(key, v) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -394,6 +401,7 @@ class Widget extends _common.Com {
     });
   }
   selectDropdownField(key, v) {
+    this.wasFormInputed = true;
     let formData = _index.default.cloneDeep(this.state.formData);
     let field = _index.default.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -690,11 +698,15 @@ class Widget extends _common.Com {
   createPostback(postback) {
     this.props.store.createPostback(this.props.cid, postback);
   }
+  onChangeMessageInput() {
+    this.wasFormInputed = true;
+  }
   renderChat() {
     let $input = (0, _preact.h)(_MessageInput.default, {
       store: this.props.store,
       ref: this.msgInput,
       cid: this.props.cid,
+      onChange: this.onChangeMessageInput,
       onSend: this.sendMessage,
       t: this.props.t
     });

package/compiled_src/chatbox/main.js

@@ -17,6 +17,7 @@ class Main extends _common.Com {
   constructor(props) {
     super(props);
     this.refButton = (0, _preact.createRef)();
+    this.refWidget = (0, _preact.createRef)();
   }
   async refreshCSS() {
     let plugins = this.props.store.matchPlugin();
@@ -45,7 +46,7 @@ class Main extends _common.Com {
     });
     this.checkExpand();
     this.props.store.onResetCSS(this, () => this.refreshCSS());
-    this.props.store.onConvoEvent(this, _ => this.checkExpand());
+    this.props.store.onConvoEvent(this, ev => this.onConvoEvent(ev));
     this.props.store.onUpdate(this, _ => this.checkExpand());
     await this.refreshCSS();
     this.setState({
@@ -83,9 +84,30 @@ class Main extends _common.Com {
       isShow: this.state.isShowWidget,
       onClose: a => this.onWidgetClose(a),
       onGo: a => this.showWidget(a),
-      t: this.props.t
+      t: this.props.t,
+      ref: this.refWidget
     }));
   }
+  onConvoEvent(ev) {
+    this.checkExpand();
+    this.checkShowBotConvo(ev);
+  }
+  checkShowBotConvo(ev) {
+    let $widget = this.refWidget.current;
+    if (!$widget) return;
+    if ($widget.wasFormInputed) return;
+    if (ev.type !== 'message_sent') return;
+    if (!this.state.isShowWidget) return;
+    let byType = _index.default.get(ev, 'by.type');
+    let byid = _index.default.get(ev, 'by.id') || '';
+    if (!byid.startsWith('bb') || byType !== 'agent') return;
+    let cid = _index.default.get(ev, 'data.message.conversation_id');
+    if (!cid) return;
+    this.showWidget({
+      cid,
+      view: 'chat'
+    });
+  }
   checkExpand() {
     if (this.props.store.isMobile()) return;
     if (this.props.plugin._no_auto_expand) return;

package/compiled_src/util/campaign.js

@@ -34,14 +34,7 @@ function trackAreaClicked(selector, cb) {
   common.map(selector.split('\n'), selector => {
     selector = common.trim(selector);
     if (!selector) return;
-    let doms = [];
-    try {
-      doms = document.querySelectorAll(selector);
-    } catch (e) {}
-    common.map(doms, dom => {
-      if (!dom) return;
-      dom.addEventListener('click', cb, false);
-    });
+    on('click', selector, cb);
   });
 }
 function trackInactivity(seconds = 0, cb) {
@@ -78,4 +71,20 @@ function trackTimeOnPage(seconds = 0, cb) {
     if (cb) cb(timeOnPage);
     common.clearInterval(timer);
   }, 1000);
+}
+function on(eventName, selector, fn) {
+  document.addEventListener(eventName, function (event) {
+    let possibleTargets = document.querySelectorAll(selector);
+    let target = event.target;
+    for (let i = 0, l = possibleTargets.length; i < l; i++) {
+      let el = target;
+      let p = possibleTargets[i];
+      while (el && el !== document) {
+        if (el === p) {
+          return fn.call(p, event);
+        }
+        el = el.parentNode;
+      }
+    }
+  });
 }

package/dist/132.js

@@ -576,21 +576,22 @@ class Header extends common/* Com */.up {
     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) {
+    let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed';
+    let renderClassic = !renderCollapsed && layout === 'classic';
+    if (renderCollapsed || layout == 'classic') {
       cls += ' widget-header--collapsed';
     } else {
       cls += ' widget-header--convo-expanded';
       renderSocial = layout === 'social';
-      renderTeam = !renderSocial;
+      renderTeam = !(renderSocial || renderClassic);
     }
     return (0,preact_module.h)("div", {
       class: cls
-    }, this.renderCollapsedHeader(renderCollapsed), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
+    }, this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
   }
-  renderCollapsedHeader(show) {
+  renderCollapsedHeader(show, classic) {
     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');
@@ -599,9 +600,13 @@ class Header extends common/* Com */.up {
     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';
+    let $back = null;
+    let style = '';
+    if (!classic) $back = this.renderBackButton();else style = 'padding-bottom: 75px !important;';
     return (0,preact_module.h)("div", {
-      class: cls
-    }, this.renderBackButton(), (0,preact_module.h)(AgentsAvatar, {
+      class: cls,
+      style: style
+    }, $back, (0,preact_module.h)(AgentsAvatar, {
       plugin: this.props.plugin,
       store: this.props.store,
       mode: "secondary",
@@ -2793,13 +2798,15 @@ class Event extends common/* Com */.up {
     });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {
+      let msg = this.props.t('error_send_message');
+      if (ev._error_message) msg = this.props.t(ev._error_message);
       $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", {
+      }, msg), (0,preact_module.h)("div", {
         class: "message_error__icon"
       }));
     }
@@ -5336,6 +5343,7 @@ class Widget extends common/* Com */.up {
       this.focusInput();
     });
     this.userSent = {};
+    this.wasFormInputed = false;
     this.setState({
       creating: false,
       clickedJoin: false,
@@ -5539,6 +5547,7 @@ class Widget extends common/* Com */.up {
     if (!this.props.store.isMobile()) this.focusInput();
   }
   onBooleanChange(key, e) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -5548,6 +5557,7 @@ class Widget extends common/* Com */.up {
     });
   }
   onInputChange(key, val) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -5557,6 +5567,7 @@ class Widget extends common/* Com */.up {
     });
   }
   onListAddItem(key, val) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -5567,6 +5578,7 @@ class Widget extends common/* Com */.up {
     });
   }
   onListRemoveItem(key, index) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (_, fkkey) => fkkey === key);
     if (!field) return;
@@ -5598,6 +5610,7 @@ class Widget extends common/* Com */.up {
     }));
   }
   toggleCheckboxField(key, v) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -5635,6 +5648,7 @@ class Widget extends common/* Com */.up {
     }));
   }
   toggleRadioField(key, v) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -5644,6 +5658,7 @@ class Widget extends common/* Com */.up {
     });
   }
   selectDropdownField(key, v) {
+    this.wasFormInputed = true;
     let formData = util/* default.cloneDeep */.Z.cloneDeep(this.state.formData);
     let field = util/* default.find */.Z.find(formData, (f, fkkey) => f.key === key);
     if (!field) return;
@@ -5835,7 +5850,7 @@ class Widget extends common/* Com */.up {
     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, 'actived', 'desc');
+    convos = util/* default.orderByF */.Z.orderByF(convos, convo => util/* default.get */.Z.get(convo, 'last_message_sent.created', convo.actived), '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';
@@ -5940,11 +5955,15 @@ class Widget extends common/* Com */.up {
   createPostback(postback) {
     this.props.store.createPostback(this.props.cid, postback);
   }
+  onChangeMessageInput() {
+    this.wasFormInputed = true;
+  }
   renderChat() {
     let $input = (0,preact_module.h)(MessageInput, {
       store: this.props.store,
       ref: this.msgInput,
       cid: this.props.cid,
+      onChange: this.onChangeMessageInput,
       onSend: this.sendMessage,
       t: this.props.t
     });
@@ -6247,6 +6266,7 @@ class Main extends common/* Com */.up {
   constructor(props) {
     super(props);
     this.refButton = (0,preact_module/* createRef */.Vf)();
+    this.refWidget = (0,preact_module/* createRef */.Vf)();
   }
   async refreshCSS() {
     let plugins = this.props.store.matchPlugin();
@@ -6275,7 +6295,7 @@ class Main extends common/* Com */.up {
     });
     this.checkExpand();
     this.props.store.onResetCSS(this, () => this.refreshCSS());
-    this.props.store.onConvoEvent(this, _ => this.checkExpand());
+    this.props.store.onConvoEvent(this, ev => this.onConvoEvent(ev));
     this.props.store.onUpdate(this, _ => this.checkExpand());
     await this.refreshCSS();
     this.setState({
@@ -6313,9 +6333,30 @@ class Main extends common/* Com */.up {
       isShow: this.state.isShowWidget,
       onClose: a => this.onWidgetClose(a),
       onGo: a => this.showWidget(a),
-      t: this.props.t
+      t: this.props.t,
+      ref: this.refWidget
     }));
   }
+  onConvoEvent(ev) {
+    this.checkExpand();
+    this.checkShowBotConvo(ev);
+  }
+  checkShowBotConvo(ev) {
+    let $widget = this.refWidget.current;
+    if (!$widget) return;
+    if ($widget.wasFormInputed) return;
+    if (ev.type !== 'message_sent') return;
+    if (!this.state.isShowWidget) return;
+    let byType = util/* default.get */.Z.get(ev, 'by.type');
+    let byid = util/* default.get */.Z.get(ev, 'by.id') || '';
+    if (!byid.startsWith('bb') || byType !== 'agent') return;
+    let cid = util/* default.get */.Z.get(ev, 'data.message.conversation_id');
+    if (!cid) return;
+    this.showWidget({
+      cid,
+      view: 'chat'
+    });
+  }
   checkExpand() {
     if (this.props.store.isMobile()) return;
     if (this.props.plugin._no_auto_expand) return;