@subiz/widget-v4 4.1.209 → 4.1.211

package/compiled_src/chatbox/Events.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _eventLayout = require("./event-layout.js");
+var _conversationHistory = require("./conversation-history.js");
+var _greeting = require("./greeting.js");
 var _Event = _interopRequireDefault(require("./Event.js"));
 var _PoweredBy = _interopRequireDefault(require("./PoweredBy.js"));
 var _index = _interopRequireDefault(require("../util/index.js"));
@@ -37,6 +40,11 @@ class Events extends _common.Com {
     this.checkAndSeen();
   }
   componentDidMount() {
+    this.syncTimer = _index.default.setInterval(() => this.syncMessages(), 120_000);
+    this.resumeSync = () => this.syncMessages();
+    window.addEventListener('focus', this.resumeSync);
+    document.addEventListener('visibilitychange', this.resumeSync);
+    this.syncMessages();
     this.setState({
       isShowTyping: false,
       typing_event: {}
@@ -71,13 +79,123 @@ class Events extends _common.Com {
       }, 5000);
     });
     this.props.store.onMessageUpdated(this, async ev => {
-      if (_index.default.convoOfEv(ev) !== this.props.cid) return;
-      await this.props.store.reloadConvoEvents(this.props.cid);
+      const cid = _index.default.convoOfEv(ev);
+      if (!this.visibleCounts || !this.visibleCounts[cid]) return;
+      await this.props.store.reloadConvoEvents(cid);
       this.forceUpdate();
     });
+    this.restoreInitialBottom();
+    this.observeHistoryStart();
   }
   componentDidUpdate(prevProps) {
-    if (prevProps.cid !== this.props.cid) this.loadConvo();
+    if (prevProps.cid !== this.props.cid && !this.isDraftPromotion(prevProps, this.props)) this.loadConvo();
+    if (prevProps.cid !== this.props.cid || !prevProps.isShow && this.props.isShow) this.syncMessages();
+    this.restoreInitialBottom();
+    this.observeHistoryStart();
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.cid === this.props.cid) return;
+    if (this.isDraftPromotion(this.props, nextProps)) {
+      this.visibleCounts[nextProps.cid] = this.visibleCounts[this.props.cid] || 30;
+      delete this.visibleCounts[this.props.cid];
+      return;
+    }
+    this.loadVersion = (this.loadVersion || 0) + 1;
+    this.visibleCounts = this.initialVisibleCounts(nextProps);
+    this.evRefs = {};
+    this.historyBusy = true;
+    this.setState({
+      error: false,
+      historyError: false,
+      historyLoading: false,
+      isShowTyping: false,
+      loading: nextProps.cid ? _index.default.Date.now() : false
+    });
+  }
+  isDraftPromotion(previous, next) {
+    return !!previous.cid && _index.default.get(next.store.widgetConvoOrigins, next.cid) === previous.cid;
+  }
+  initialVisibleCounts(props) {
+    const counts = props.cid ? {
+      [props.cid]: 30
+    } : {};
+    if (!props.store.matchConvo || _index.default.get(props.store.matchConvo(props.cid), 'light_type') !== 'widget') return counts;
+    const history = (0, _conversationHistory.conversationHistory)(props.store, props.cid).slice(0, -1).reverse();
+    let remaining = 30;
+    for (const convo of history) {
+      const cached = _index.default.size(props.store.listEvents(convo.id));
+      if (!cached || !remaining) break;
+      counts[convo.id] = Math.min(cached, remaining);
+      remaining -= counts[convo.id];
+      if (!_index.default.get(props.store.outofmsgM, convo.id)) break;
+    }
+    return counts;
+  }
+  syncMessages() {
+    if (!this._isMounted || !this.props.isShow || document.visibilityState === 'hidden') return;
+    const ids = Object.keys(this.visibleCounts || {}).filter(cid => this.visibleCounts[cid]);
+    return Promise.all(ids.map(cid => this.props.store.syncConvoEvents(cid)));
+  }
+  componentWillUnmount() {
+    _index.default.clearInterval(this.syncTimer);
+    window.removeEventListener('focus', this.resumeSync);
+    document.removeEventListener('visibilitychange', this.resumeSync);
+    this.loadVersion = (this.loadVersion || 0) + 1;
+    if (this.timer) _index.default.clearTimeout(this.timer);
+    if (this.historyCheckTimer) _index.default.clearTimeout(this.historyCheckTimer);
+    if (this.historyObserver) this.historyObserver.disconnect();
+    if (this.scrollTimer) _index.default.clearTimeout(this.scrollTimer);
+    if (this.initialSizeObserver) this.initialSizeObserver.disconnect();
+  }
+  stopInitialBottom() {
+    this.initialBottom = false;
+  }
+  restoreInitialBottom() {
+    if (!this.initialBottom || this.props.isShow === false || !this.refBody) return;
+    if (window.ResizeObserver && (this.initialObservedBody !== this.refBody || this.initialObservedContent !== this.refContent)) {
+      if (this.initialSizeObserver) this.initialSizeObserver.disconnect();
+      this.initialObservedBody = this.refBody;
+      this.initialObservedContent = this.refContent;
+      this.initialSizeObserver = new window.ResizeObserver(() => {
+        if (this._isMounted) this.restoreInitialBottom();
+      });
+      this.initialSizeObserver.observe(this.refBody);
+      if (this.refContent) this.initialSizeObserver.observe(this.refContent);
+    }
+    this.refBody.scrollTop = this.refBody.scrollHeight;
+    if (this.checkAndSeen) this.checkAndSeen();
+  }
+  observeHistoryStart() {
+    if (this.observedHistoryStart !== this.historyStart || this.observedHistoryRoot !== this.refBody) {
+      if (this.historyObserver) this.historyObserver.disconnect();
+      this.observedHistoryStart = this.historyStart;
+      this.observedHistoryRoot = this.refBody;
+      if (this.historyStart && this.refBody && window.IntersectionObserver) {
+        this.historyObserver = new window.IntersectionObserver(entries => {
+          if (entries.some(entry => entry.isIntersecting)) this.queueHistoryCheck();
+        }, {
+          root: this.refBody
+        });
+        this.historyObserver.observe(this.historyStart);
+      }
+    }
+    this.queueHistoryCheck();
+  }
+  queueHistoryCheck() {
+    if (this.historyCheckTimer || !this._isMounted) return;
+    this.historyCheckTimer = _index.default.setTimeout(() => {
+      this.historyCheckTimer = null;
+      this.loadVisibleHistory();
+    }, 0);
+  }
+  loadVisibleHistory() {
+    if (!this._isMounted || this.props.isShow === false || this.historyBusy || this.state.historyError || !this.hasMore()) return;
+    if (!this.refBody || !this.historyStart) return;
+    const root = this.refBody.getBoundingClientRect();
+    const marker = this.historyStart.getBoundingClientRect();
+    if (root.width <= 0 || root.height <= 0 || marker.height <= 0) return;
+    if (marker.right <= Math.max(root.left, 0) || marker.left >= Math.min(root.right, window.innerWidth)) return;
+    if (marker.bottom > Math.max(root.top, 0) && marker.top < Math.min(root.bottom, window.innerHeight)) return this.loadMore();
   }
   setEventChildRef(ele, id) {
     this.evRefs[id] = ele;
@@ -104,26 +222,28 @@ class Events extends _common.Com {
   }
   render() {
     if (this.state.error) return this.renderError();
-    let events = _index.default.map(this.props.store.listEvents(this.props.cid));
-    if (!this.state.loading && _index.default.size(events) === 0 && !this.props.cid) {
-      return (0, _preact.h)("div", {
-        ref: ref => this.refBody = ref,
-        class: "widget-body--events-container"
-      }, (0, _preact.h)("div", {
-        class: "widget-body--empty"
-      }, (0, _preact.h)("div", {
-        class: "widget-body--empty-icon"
-      }), (0, _preact.h)("div", {
-        class: "widget-body--empty-text"
-      }, this.props.t('empty_convo_text'))), (0, _preact.h)(_PoweredBy.default, {
-        store: this.props.store
+    const conversations = (0, _conversationHistory.conversationHistory)(this.props.store, this.props.cid).filter(convo => this.visibleCounts && this.visibleCounts[convo.id]);
+    let events = conversations.flatMap(convo => {
+      const entries = (0, _conversationHistory.conversationEvents)(this.props.store, convo).slice(-this.visibleCounts[convo.id]).filter(entry => convo.id === this.props.cid || entry.ev.type !== 'conversation_state_updated');
+      (0, _eventLayout.processEvents)(convo, entries);
+      return entries.map(entry => ({
+        ...entry,
+        convo
       }));
+    });
+    if (!this.state.loading && !this.props.creating && events.length === 0 && !this.props.cid) {
+      if (!this.greetingCreated) this.greetingCreated = _index.default.Date.now();
+      events.push({
+        mode: 'lead',
+        is_last_message_send: true,
+        ev: {
+          ...(0, _greeting.widgetGreeting)(this.props.chatbox, this.props.t, this.greetingCreated),
+          id: 'widget-virtual-greeting'
+        }
+      });
     }
-    events = _index.default.orderBy(events, 'created', 'asc');
+    this.renderedIds = new Set(events.map(entry => entry.ev.id));
     let convo = this.props.store.matchConvo(this.props.cid);
-    events = _index.default.map(events, ev => ({
-      ev: ev
-    }));
     let ev = this.state.typing_event || {
       id: 'evzz' + _index.default.Date.now(),
       created: _index.default.Date.now(),
@@ -148,11 +268,21 @@ class Events extends _common.Com {
         }
       }
     };
-    processEvents(convo, events);
+    const hasMessages = events.some(entry => entry.ev.type === 'message_sent');
     events.push(fakeev);
     let $events = _index.default.map(events, ev => {
-      let isLast = ev.is_last_message_send && _index.default.get(convo, 'state') !== 'ended';
-      return (0, _preact.h)(_Event.default, {
+      const sourceConvo = ev.convo || convo;
+      const isHistory = sourceConvo && sourceConvo.id !== this.props.cid;
+      let isLast = !isHistory && ev.is_last_message_send && _index.default.get(sourceConvo, 'state') !== 'ended';
+      const sourceId = sourceConvo ? sourceConvo.id : '';
+      const key = (_index.default.get(this.props.store.widgetConvoOrigins, sourceId) || sourceId) + ':' + (0, _conversationHistory.conversationEventKey)(ev.ev);
+      return (0, _preact.h)("fieldset", {
+        class: isHistory ? 'conversation-event conversation-event--history' : 'conversation-event',
+        disabled: isHistory,
+        "data-conversation-id": sourceConvo && sourceConvo.id,
+        key: key
+      }, (0, _preact.h)(_Event.default, {
+        isHistory: isHistory,
         isLast: isLast,
         chatbox: this.props.chatbox,
         onLink: this.props.onLink,
@@ -162,45 +292,78 @@ class Events extends _common.Com {
         onPostback: this.props.onPostback,
         onFocusSourceEventFromQuote: this.onFocusSourceEventFromQuote,
         ref: ele => this.setEventChildRef(ele, ev.ev.id),
-        isConvoEnded: _index.default.get(convo, 'state') === 'ended',
+        isConvoEnded: _index.default.get(sourceConvo, 'state') === 'ended',
         event: ev,
         t: this.props.t,
-        key: ev.ev.id
-      });
+        key: key
+      }));
     });
     let $loading = null;
-    let style = 'opacity: 1 !important';
-    if (this.props.creating) {
+    if (!hasMessages && (this.props.creating || this.state.loading)) {
       $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';
-    }
-    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,
       class: "widget-body--events-container",
-      onMouseOver: this.checkAndSeen
-    }, (0, _preact.h)("div", {
-      class: "widget-body--events"
+      onMouseOver: this.checkAndSeen,
+      onScroll: () => this.queueHistoryCheck(),
+      onWheel: () => this.stopInitialBottom(),
+      onTouchStart: () => this.stopInitialBottom(),
+      onPointerDown: () => this.stopInitialBottom(),
+      onKeyDown: () => this.stopInitialBottom()
+    }, this.hasMore() && (0, _preact.h)("div", {
+      ref: ref => {
+        this.historyStart = ref;
+      },
+      class: "conversation-history-start",
+      "aria-hidden": "true"
+    }), this.state.historyLoading && !this.state.historyError && (0, _preact.h)(_spinner.default, {
+      size: "16",
+      mode: "blue"
+    }), this.state.historyError && this.renderHistoryError(), (0, _preact.h)("div", {
+      class: "widget-body--events",
+      ref: ref => {
+        this.refContent = ref;
+      }
     }, $events), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store
     })));
   }
+  renderHistoryError() {
+    const t = this.props.t;
+    const translated = t('load_history_error');
+    const locale = t.locale ? t.locale().toLowerCase() : 'en';
+    const fallback = locale.startsWith('vi') ? 'Chưa tải được tin nhắn cũ' : 'Couldn’t load earlier messages';
+    const text = translated && translated !== 'load_history_error' ? translated : fallback;
+    return (0, _preact.h)("div", {
+      class: "conversation-history-error",
+      role: "status"
+    }, (0, _preact.h)("span", {
+      class: "conversation-history-error__text"
+    }, text), (0, _preact.h)("button", {
+      class: "conversation-history-error__retry",
+      type: "button",
+      disabled: this.state.historyLoading,
+      "aria-label": t('try_again'),
+      "aria-busy": !!this.state.historyLoading,
+      onClick: () => this.loadMore()
+    }, (0, _preact.h)("span", {
+      class: "conversation-history-error__retry-label",
+      style: {
+        visibility: this.state.historyLoading ? 'hidden' : 'visible'
+      }
+    }, t('try_again')), this.state.historyLoading && (0, _preact.h)("span", {
+      class: "conversation-history-error__spinner",
+      "aria-hidden": "true"
+    }, (0, _preact.h)(_spinner.default, {
+      size: "14"
+    }))));
+  }
   renderError() {
     let $tryAgainBtn = (0, _preact.h)("a", {
       href: "#",
@@ -248,61 +411,168 @@ class Events extends _common.Com {
     });
   }
   onEvent(newev) {
-    if (_index.default.convoOfEv(newev) !== this.props.cid) return;
+    const cid = _index.default.convoOfEv(newev);
+    if (!this.visibleCounts || !this.visibleCounts[cid]) return;
+    if (newev.type === 'message_sent') {
+      const sourceEventId = _index.default.get(newev, 'source_event_id');
+      const key = cid + ':' + (sourceEventId || newev.id);
+      this.receivedMessageKeys = this.receivedMessageKeys || new Set();
+      const known = this.receivedMessageKeys.has(key) || this.renderedIds && (this.renderedIds.has(newev.id) || this.renderedIds.has(sourceEventId));
+      this.receivedMessageKeys.add(key);
+      if (known) return;
+      if (this.renderedIds) this.visibleCounts[cid]++;
+    }
+    if (cid !== this.props.cid) {
+      const container = this.refBody;
+      const height = container ? container.scrollHeight : 0;
+      const top = container ? container.scrollTop : 0;
+      this.forceUpdate();
+      _index.default.setTimeout(() => {
+        if (container && container === this.refBody) container.scrollTop = top + container.scrollHeight - height;
+      });
+      return;
+    }
     let isBottom = this.isBottom();
+    if (newev.type === 'message_sent') this.stopInitialBottom();
     var byme = false;
-    if (_index.default.get(newev, 'type') === 'message_sent' && newev.id === _index.default.get(newev, 'data.message.idempotency_key')) byme = true;
-    if (byme || isBottom) this.scrollToBottom();
+    if (_index.default.get(newev, 'type') === 'message_sent' && newev.id === _index.default.get(newev, 'source_event_id')) byme = true;
+    if (byme || isBottom) this.scrollToBottom('smooth');
+  }
+  historyTarget() {
+    const conversations = (0, _conversationHistory.conversationHistory)(this.props.store, this.props.cid);
+    const first = conversations.findIndex(convo => this.visibleCounts && this.visibleCounts[convo.id]);
+    if (first < 0) return;
+    const convo = conversations[first];
+    const count = _index.default.size(this.props.store.listEvents(convo.id));
+    if (this.visibleCounts[convo.id] < count || !convo.id.startsWith('cslight') && !_index.default.get(this.props.store.outofmsgM, convo.id)) return convo;
+    return conversations[first - 1];
+  }
+  hasMore() {
+    return !!this.historyTarget();
+  }
+  async fetchPage(cid) {
+    if (cid.startsWith('cslight') || _index.default.get(this.props.store.outofmsgM, cid)) return {};
+    this.eventRequests = this.eventRequests || new Map();
+    let request = this.eventRequests.get(cid);
+    if (!request) {
+      request = this.props.store.fetchMoreEvents(cid, 30);
+      this.eventRequests.set(cid, request);
+    }
+    try {
+      return await request;
+    } finally {
+      if (this.eventRequests.get(cid) === request) this.eventRequests.delete(cid);
+    }
   }
   async loadConvo() {
-    if (!this.props.cid) return;
-    this.lastContentOffsetY = 0;
+    const cid = this.props.cid;
+    this.receivedMessageKeys = new Set();
+    this.initialBottom = true;
+    const version = this.loadVersion = (this.loadVersion || 0) + 1;
+    this.visibleCounts = this.initialVisibleCounts(this.props);
+    this.historyBusy = true;
+    this.evRefs = {};
     this.setState({
-      loading: false
+      error: false,
+      historyError: false,
+      historyLoading: false,
+      isShowTyping: false,
+      loading: cid && !_index.default.size(this.props.store.listEvents(cid)) ? _index.default.Date.now() : 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
-      } = await this.props.store.fetchMoreEvents(cid);
-      this.setState({
-        loading: false
+    try {
+      if (cid && !_index.default.size(this.props.store.listEvents(cid))) {
+        const result = await this.fetchPage(cid);
+        if (version !== this.loadVersion || !this._isMounted) return;
+        if (result && result.error) this.setState({
+          error: !_index.default.size(this.props.store.listEvents(cid)),
+          historyError: true
+        });
+      }
+    } catch (_) {
+      if (version === this.loadVersion) this.setState({
+        error: !_index.default.size(this.props.store.listEvents(cid)),
+        historyError: true
       });
-      if (cid !== this.props.cid) return;
-      if (error) {
+    } finally {
+      if (version === this.loadVersion && this._isMounted) {
+        this.historyBusy = false;
         this.setState({
-          error: true
+          loading: false
         });
-        return;
+        if (!this.initialBottom && this.receivedMessageKeys.size && this.isBottom()) this.scrollToBottom('smooth');
+        this.queueHistoryCheck();
+        if (cid && cid.startsWith('cslightwidget_') && Object.keys(this.visibleCounts).length === 1 && this.hasMore()) this.loadMore();
       }
     }
-    this.props.store.fetchMoreEvents(this.props.cid);
+  }
+  async loadMore() {
+    if (this.historyBusy || !this._isMounted) return;
+    const target = this.historyTarget();
+    if (!target) return;
+    const version = this.loadVersion;
+    this.historyBusy = true;
+    const container = this.refBody;
+    const visible = this.visibleCounts[target.id] || 0;
     this.setState({
-      error: false
+      historyLoading: true
     });
-    this.scrollToBottom();
+    try {
+      if (visible >= _index.default.size(this.props.store.listEvents(target.id))) {
+        const result = await this.fetchPage(target.id);
+        if (result && result.error) throw result.error;
+      }
+      if (version !== this.loadVersion || !this._isMounted) return;
+      this.visibleCounts[target.id] = visible + 30;
+      this.setState({
+        historyError: false
+      });
+    } catch (_) {
+      if (version === this.loadVersion) this.setState({
+        historyError: true
+      });
+    } finally {
+      if (version === this.loadVersion && this._isMounted) {
+        const height = container ? container.scrollHeight : 0;
+        const top = container ? container.scrollTop : 0;
+        this.setState({
+          historyLoading: false
+        });
+        this.forceUpdate();
+        await new Promise(resolve => _index.default.setTimeout(resolve, 0));
+        if (version === this.loadVersion && this._isMounted) {
+          if (this.initialBottom) this.restoreInitialBottom();else if (container && container === this.refBody) {
+            container.scrollTop = top + container.scrollHeight - height;
+            this.lastScrollTop = container.scrollTop;
+          }
+          this.historyBusy = false;
+          this.queueHistoryCheck();
+        }
+      }
+    }
   }
   isBottom() {
     let $container = this.refBody;
     if (!$container) return false;
     return $container.scrollHeight < $container.scrollTop + $container.offsetHeight + 50;
   }
-  scrollToBottom() {
-    _index.default.setTimeout(() => {
+  scrollToBottom(behavior = 'auto') {
+    if (this.scrollTimer) _index.default.clearTimeout(this.scrollTimer);
+    const cid = this.props.cid;
+    this.scrollTimer = _index.default.setTimeout(() => {
+      this.scrollTimer = null;
+      if (!this._isMounted || this.props.cid !== cid) return;
       const $div = this.refBody;
-      if ($div) $div.scrollTop = $div.scrollHeight;
+      if (!$div) return;
+      const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (behavior === 'smooth' && !reducedMotion && $div.scrollTo) {
+        $div.scrollTo({
+          top: $div.scrollHeight,
+          behavior: 'smooth'
+        });
+      } else {
+        $div.scrollTop = $div.scrollHeight;
+      }
     });
-    _index.default.setTimeout(() => {
-      const $div = this.refBody;
-      if ($div) $div.scrollTop = $div.scrollHeight;
-    }, 100);
     if (this.props.isShow) {
       if (this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
         this.props.store.seenConvo(this.props.cid);
@@ -311,57 +581,6 @@ class Events extends _common.Com {
   }
 }
 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 > 300) 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') {
-      curEvent.show_time = true;
-      break;
-    }
-  }
-  let lastMsgSentIdx = -1;
-  for (var i = 0; i < events.length; i++) {
-    let curEvent = events[i];
-    let prevEvent = events[i - 1];
-    let nextEvent = events[i + 1];
-    if (curEvent.ev.type === 'message_sent') {
-      lastMsgSentIdx = i;
-      curEvent.mode = 'lead';
-      if (_index.default.get(prevEvent, 'ev.type') === 'message_sent' && _index.default.get(prevEvent, 'ev.by.id') === _index.default.get(curEvent, 'ev.by.id')) {
-        curEvent.mode = 'follow';
-      }
-      if (_index.default.get(nextEvent, 'ev.type') !== 'message_sent' || _index.default.get(nextEvent, 'ev.by.id') !== _index.default.get(curEvent, 'ev.by.id')) {
-        curEvent.is_end = true;
-      }
-      continue;
-    }
-  }
-  if (lastMsgSentIdx > -1) {
-    events[lastMsgSentIdx].is_last_message_send = true;
-  }
-}
-function visibleEvent(ev) {
-  let type = _index.default.get(ev, 'type');
-  if (type === 'message_sent') return true;
-  if (type === 'conversation_state_updated') {
-    return _index.default.get(ev, 'data.conversation.state') == 'ended';
-  }
-}
 function isSummited(form) {
   let fields = _index.default.get(form, 'fields') || [];
   return _index.default.find(fields, field => !!field.answered);

package/compiled_src/chatbox/FormAttachment.js

@@ -173,7 +173,7 @@ class FormAttachment extends _common.Com {
           },
           type: "checkbox",
           id: 'checkbox.' + this.props.ev.id + '.' + field.name,
-          onChange: e => this.onInputChange(index, ev.target.checked),
+          onChange: e => this.onInputChange(index, e.target.checked),
           checked: field.value
         }), (0, _preact.h)("label", {
           class: "checkbox--label",

package/compiled_src/chatbox/Header.js

@@ -203,7 +203,9 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
         class: "widget-header--total-unread-convo"
       }, unreadcount);
     }
-    return (0, _preact.h)("div", {
+    return (0, _preact.h)("button", {
+      type: "button",
+      "aria-label": this.props.t('menu_back'),
       class: `widget-header--wrap-button-back ${unreadcount ? 'widget-header--has-convo-unred' : ''}`,
       onClick: e => this.onBackClick(e)
     }, (0, _preact.h)("div", {
@@ -215,7 +217,9 @@ 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;
     if (this.props.store.isEmbededChatMode()) return;
-    return (0, _preact.h)("div", {
+    return (0, _preact.h)("button", {
+      type: "button",
+      "aria-label": this.props.t('close'),
       class: "widget-header--button-close",
       "data-tooltip": this.props.t('close'),
       "data-tooltip-position": "bottom",

package/compiled_src/chatbox/InfoMessage.js

@@ -33,7 +33,7 @@ class InfoMessage extends _common.Com {
       return (0, _preact.h)("div", {
         class: "convo-event"
       }, (0, _preact.h)("div", {
-        class: "info-message"
+        class: "info-message info-message--ended"
       }, this.props.t('conversation_ended')));
     }
     return null;