@subiz/widget-v4 4.1.116 → 4.1.119

package/compiled_src/chatbox/Events.js

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

package/compiled_src/chatbox/Header.js

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

package/compiled_src/chatbox/InfoMessage.js

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

package/compiled_src/chatbox/MessageInput.js

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

package/compiled_src/chatbox/TextMessage.js

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

package/compiled_src/chatbox/Widget.js

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

package/compiled_src/chatbox/main.js

@@ -155,6 +155,9 @@ class Main extends _common.Com {
       cid: p.cid
     });
   }
+  applyMessage(text) {
+    this.refWidget.current && this.refWidget.current.applyMessage(text);
+  }
   showGreeting() {
     this.refButton.current && this.refButton.current.ShowGreeting();
   }

package/compiled_src/chatbox/time.js

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

package/compiled_src/lib.js

@@ -260,6 +260,10 @@ class 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);
   }

package/compiled_src/plugin.js

@@ -264,6 +264,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');