@subiz/widget-v4 4.1.117 → 4.1.120

package/compiled_src/chatbox/Event.js

@@ -37,9 +37,12 @@ class Event extends _common.Com {
   render() {
     var ev = _index.default.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':
@@ -151,19 +154,88 @@ class Event extends _common.Com {
       OrderAttachments = (await LoadOrderAttachments()).default;
     });
   }
+  renderTyping() {
+    if (!this.props.event.is_show) {
+      return (0, _preact.h)("div", {
+        key: 'container',
+        class: "convo-event agent-message",
+        style: "opacity: 0 !important"
+      }, (0, _preact.h)("div", {
+        class: "agent-convo-event-wrapper"
+      }, (0, _preact.h)("div", {
+        class: "agent-convo-event-inner"
+      }, (0, _preact.h)("div", {
+        class: "message-agent message-text--agent",
+        style: "opacity: 0.6 !important"
+      }, (0, _preact.h)("div", {
+        style: "height: 20px !important; width: 35px !important"
+      })))));
+    }
+    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.h)("div", {
+      key: 'container',
+      class: "convo-event agent-message",
+      style: "opacity: 0.6 !important"
+    }, (0, _preact.h)("div", {
+      class: "agent-convo-event-wrapper"
+    }, (0, _preact.h)("div", {
+      class: "agent-convo-event-inner"
+    }, (0, _preact.h)("div", {
+      class: "message-agent message-text--agent"
+    }, (0, _preact.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.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;
     let t = new _index.default.Date(ev.created).toLocaleString();
     if (_index.default.get(ev, 'by.type') !== 'user') {
       let $sender = null;
@@ -172,11 +244,13 @@ class Event extends _common.Com {
       if (this.props.isLast) innercls += ' last';
       return (0, _preact.h)("div", {
         class: "convo-event agent-message"
-      }, $time, $sender, (0, _preact.h)("div", {
+      }, $sender, (0, _preact.h)("div", {
         class: "agent-convo-event-wrapper"
       }, (0, _preact.h)("div", {
         class: innercls
       }, (0, _preact.h)(_TextMessage.default, {
+        showTime: this.props.event.show_time,
+        isLast: this.props.isLast,
         store: this.props.store,
         ev: ev,
         onLink: this.props.onLink
@@ -241,7 +315,7 @@ class Event extends _common.Com {
     }
     let $sender = null;
     if (this.props.event.mode === 'lead') $sender = (0, _preact.h)("div", {
-      class: "pt-3"
+      class: "pt-2"
     });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {
@@ -259,7 +333,7 @@ class Event extends _common.Com {
     }
     return (0, _preact.h)("div", {
       class: "convo-event user-message"
-    }, $time, $sender, (0, _preact.h)("div", {
+    }, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {
       store: this.props.store,

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,34 @@ 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;
+    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,
+      is_show: this.state.isShowTyping,
+      id: ev.id,
+      ev: {
+        id: ev.id,
+        created: ev.created,
+        by: ev.by,
+        type: 'message_sent',
+        data: {
+          message: {
+            text: '...',
+            conversation_id: this.props.cid
+          }
+        }
+      }
+    };
+    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 +149,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 +158,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 +236,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 +261,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 +280,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 +292,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);
@@ -298,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();
@@ -151,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;
@@ -647,7 +652,9 @@ class Widget extends _common.Com {
       class: "flex-grow-1"
     }, (0, _preact.h)("div", {
       class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
-    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)(_PoweredBy.default, {
+    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)("div", {
+      class: "mt-2"
+    }), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store,
       t: this.props.t
     })), (0, _preact.h)("div", {
@@ -719,7 +726,9 @@ class Widget extends _common.Com {
       alt: "send button",
       width: "26",
       height: "26"
-    })), (0, _preact.h)(_PoweredBy.default, {
+    })), (0, _preact.h)("div", {
+      class: "mt-2"
+    }), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store
     })));
   }
@@ -783,6 +792,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
     });
@@ -806,18 +816,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/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);