@subiz/widget-v4 4.1.191 → 4.1.195

package/assets/less/chatbox.less

@@ -93,7 +93,6 @@ body div#sbz92 {
 
 		font-family: @font-family-sans-serif;
 		font-size: @font-size-base;
-		line-height: 1.25;
 
 		-webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
 		-moz-box-sizing: border-box; // Firefox, other Gecko

package/assets/less/message.less

@@ -25,6 +25,10 @@
 	justify-content: center;
 }
 
+.convo-event {
+	position: relative;
+}
+
 .convo-event-time {
 	text-align: center;
 	margin-top: 15px;
@@ -111,10 +115,23 @@
 	//padding: 12px;
 }
 
+.message-text--user.just-focused {
+	box-shadow: 0 0 0 2px #000;
+}
+
+.message-text--agent.just-focused {
+	box-shadow: 0 0 0 2px #000;
+}
+
 .message-text--user.message-user--error {
 	background-color: @red;
 }
 
+.message-text--agent.message-text--deleted {
+	opacity: 0.7;
+	font-style: italic;
+}
+
 .message-text--agent {
 	line-height: 1.5;
 	white-space: pre-wrap;
@@ -125,7 +142,7 @@
 }
 
 .message-agent.message-text--agent {
-	max-width: unset;
+	max-width: 100%;
 	margin-top: 0;
 }
 
@@ -817,8 +834,7 @@ a.product_attachment__title {
 }
 
 .message-event-actions-static {
-	visibility: hidden;
-	display: flex;
+	display: none;
 	margin-top: 2px;
 	border: none;
 	padding: 0;
@@ -831,7 +847,11 @@ a.product_attachment__title {
 	}
 
 	.message-event-actions-static {
-		visibility: visible;
+		display: flex;
+		position: absolute;
+		bottom: -30px;
+		left: 0;
+		z-index: 2;
 	}
 
 	.message-event-action-btn {
@@ -999,3 +1019,50 @@ a.product_attachment__title {
 		background-color: rgba(255, 255, 255, 0.08);
 	}
 }
+
+.message-quote {
+	padding: 6px 10px;
+	border-left: 3px solid @primary-color;
+	background-color: #dfdfdf;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	margin-bottom: 8px;
+	max-width: 100%;
+}
+
+.message-quote-title {
+	font-weight: 600;
+	font-size: 14px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.message-quote-content {
+	opacity: 0.7;
+	.color(@secondary-color);
+	font-size: 14px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.message-quote-inner-img {
+	width: 36px;
+	height: 36px;
+	object-fit: cover;
+}
+
+.message-quote-inner {
+	margin-left: 15px;
+	flex: 1;
+	overflow: hidden;
+}
+
+.image-attachment.just-focused {
+	box-shadow: 0 0 0 2px #000;
+}
+
+.file-attachment.just-focused {
+	box-shadow: 0 0 0 2px #000;
+}

package/compiled_src/chatbox/Event.js

@@ -30,6 +30,20 @@ const LoadOrderAttachments = () => Promise.resolve().then(() => _interopRequireW
 class Event extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "focusSourceEventFromQuote", ev => {
+      let $textMessage = this.textMessageRef.current;
+      if ($textMessage && typeof $textMessage.focusSourceEventFromQuote === 'function') {
+        $textMessage.focusSourceEventFromQuote(ev);
+      }
+      let $fileAttachment = this.fileAttachmentRef.current;
+      if ($fileAttachment && typeof $fileAttachment.focusSourceEventFromQuote === 'function') {
+        $fileAttachment.focusSourceEventFromQuote(ev);
+      }
+      let $imageAttachment = this.imageAttachmentRef.current;
+      if ($imageAttachment && typeof $imageAttachment.focusSourceEventFromQuote === 'function') {
+        $imageAttachment.focusSourceEventFromQuote(ev);
+      }
+    });
     _defineProperty(this, "resendMessage", () => {
       let cid = _index.default.convoOfEv(this.props.event.ev);
       const message = _index.default.get(this.props.event, 'ev.data.message');
@@ -42,6 +56,9 @@ class Event extends _common.Com {
     this.state = {
       pongs: _index.default.get(this.props.event, 'ev.data.message.pongs') || []
     };
+    this.textMessageRef = (0, _preact.createRef)();
+    this.fileAttachmentRef = (0, _preact.createRef)();
+    this.imageAttachmentRef = (0, _preact.createRef)();
   }
   render() {
     var ev = _index.default.get(this.props.event, 'ev', {});
@@ -257,20 +274,26 @@ class Event extends _common.Com {
       let wrappercls = 'agent-convo-event-wrapper';
       if (hasForm) wrappercls += ' full';
       return (0, _preact.h)("div", {
-        class: "convo-event agent-message"
+        class: "convo-event agent-message",
+        "data-ev-id": ev.id
       }, $sender, (0, _preact.h)("div", {
         class: wrappercls
       }, (0, _preact.h)("div", {
         class: innercls
       }, (0, _preact.h)(_TextMessage.default, {
+        ref: this.textMessageRef,
+        onFocusSourceEventFromQuote: this.props.onFocusSourceEventFromQuote,
         showTime: this.props.event.show_time,
         isLast: this.props.isLast,
         store: this.props.store,
+        t: this.props.t,
         ev: ev,
         onLink: this.props.onLink
       }), (0, _preact.h)(_ImageAttachments.default, {
+        ref: this.imageAttachmentRef,
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        focusSourceEventFromQuote: this.props.focusSourceEventFromQuote
       }), (0, _preact.h)(_AudioAttachments.default, {
         store: this.props.store,
         ev: ev
@@ -278,8 +301,10 @@ class Event extends _common.Com {
         store: this.props.store,
         ev: ev
       }), (0, _preact.h)(_FileAttachments.default, {
+        ref: this.fileAttachmentRef,
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        focusSourceEventFromQuote: this.props.focusSourceEventFromQuote
       }), (0, _preact.h)(_ButtonAttachments.default, {
         store: this.props.store,
         ev: ev,
@@ -345,17 +370,20 @@ class Event extends _common.Com {
       }, msg));
     }
     return (0, _preact.h)("div", {
-      class: "convo-event user-message"
+      class: "convo-event user-message",
+      "data-ev-id": ev.id
     }, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {
+      ref: this.textMessageRef,
       store: this.props.store,
       ev: ev,
       refresh: this.state.refresh,
       onLink: this.props.onLink
     }), (0, _preact.h)(_ImageAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      ref: this.imageAttachmentRef
     }), (0, _preact.h)(_AudioAttachments.default, {
       store: this.props.store,
       ev: ev
@@ -364,7 +392,8 @@ class Event extends _common.Com {
       ev: ev
     }), (0, _preact.h)(_FileAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      ref: this.fileAttachmentRef
     }), (0, _preact.h)(_ButtonAttachments.default, {
       store: this.props.store,
       ev: ev,
@@ -438,6 +467,8 @@ class Event extends _common.Com {
     let cid = _index.default.get(this.props.event.ev, 'data.message.conversation_id', '');
     if (cid.startsWith('cslight')) return null;
     let ev = _index.default.get(this.props.event, 'ev') || {};
+    let isDeleted = _index.default.get(ev, 'data.message.deleted');
+    if (isDeleted) return;
     let pongs = _index.default.get(ev, 'data.message.pongs') || [];
     let hasLike = this.hasLike();
     let hasDislike = this.hasDislike();

package/compiled_src/chatbox/Events.js

@@ -11,14 +11,24 @@ var _spinner = _interopRequireDefault(require("./spinner.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const convoemptyimg = require('../../assets/img/convos_empty.svg');
 class Events extends _common.Com {
   constructor(props) {
     super(props);
+    _defineProperty(this, "onFocusSourceEventFromQuote", ev => {
+      let ref = this.evRefs[ev.id];
+      if (ref) {
+        ref.focusSourceEventFromQuote(ev);
+      }
+    });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
     this.props.store.onConvoEvent(this, ev => this.onEvent(ev));
     this.loadConvo();
     this.refBody = null;
+    this.evRefs = {};
     this.checkAndSeen = _index.default.throttle(() => {
       if (this.props.isShow && this.isBottom() && this.props.store.browserVisibility === 'visible' && document.hasFocus()) {
         this.props.store.seenConvo(this.props.cid);
@@ -60,10 +70,18 @@ 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);
+      this.forceUpdate();
+    });
   }
   componentDidUpdate(prevProps) {
     if (prevProps.cid !== this.props.cid) this.loadConvo();
   }
+  setEventChildRef(ele, id) {
+    this.evRefs[id] = ele;
+  }
   ShowTyping() {
     this.setState({
       isShowTyping: true,
@@ -142,6 +160,8 @@ class Events extends _common.Com {
         onFormSubmit: this.props.onFormSubmit,
         onSend: this.props.onSend,
         onPostback: this.props.onPostback,
+        onFocusSourceEventFromQuote: this.onFocusSourceEventFromQuote,
+        ref: ele => this.setEventChildRef(ele, ev.ev.id),
         event: ev,
         t: this.props.t,
         key: ev.ev.id

package/compiled_src/chatbox/FileAttachments.js

@@ -9,23 +9,34 @@ var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class FileAttachments extends _common.Com {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focusedIdx: -1
+    };
+  }
   render() {
     var byType = _index.default.get(this.props.ev, 'by.type', 'agent');
     if (byType !== 'user') byType = 'agent';
     var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
     var files = [];
-    _index.default.each(attachments, att => {
+    _index.default.each(attachments, (att, idx) => {
       if (!att) return;
       if (!att.url && !att._file) return;
       if (!_index.default.includes(att.mimetype, 'video') && !_index.default.includes(att.mimetype, 'audio') && !_index.default.includes(att.mimetype, 'image') && att.type !== 'button' && att.type !== 'quick_replies' && att.type !== 'form' && att.type !== 'form_submit') {
-        files.push(att);
+        files.push({
+          ...att,
+          _true_idx: idx
+        });
       }
     });
     if (files.length === 0) return null;
-    var $files = _index.default.map(files, (file, index) => {
+    let $files = _index.default.map(files, (file, index) => {
+      let cls = `file-attachment file-attachment--${byType}`;
+      if (file._true_idx === this.state.focusedIdx) cls += ` just-focused`;
       return (0, _preact.h)("div", {
         key: index,
-        class: `file-attachment file-attachment--${byType}`
+        class: cls
       }, (0, _preact.h)("a", {
         class: "file-attachment--link",
         href: this.props.store.replaceFileUrl(file.url),
@@ -40,5 +51,26 @@ class FileAttachments extends _common.Com {
       class: `message-${byType}`
     }, $files);
   }
+  focusSourceEventFromQuote(ev) {
+    if (ev.id !== this.props.ev.id) return;
+    let fields = _index.default.get(ev, 'data.message.fields') || [];
+    let attachmentIndexField = _index.default.find(fields, f => f.key === 'attachment_index');
+    let attachmentIndex = _index.default.get(attachmentIndexField, 'value');
+    try {
+      attachmentIndex = JSON.parse(attachmentIndex);
+    } catch (err) {
+      attachmentIndex = undefined;
+    }
+    if (attachmentIndex === undefined) return;
+    this.setState({
+      focusedIdx: attachmentIndex
+    });
+    if (this.focusTimeout) clearTimeout(this.focusTimeout);
+    this.focusTimeout = setTimeout(() => {
+      this.setState({
+        focusedIdx: -1
+      });
+    }, 3000);
+  }
 }
 exports.default = FileAttachments;

package/compiled_src/chatbox/ImageAttachments.js

@@ -17,12 +17,34 @@ class ImageAttachment extends _common.Com {
     _defineProperty(this, "containerRef", (0, _preact.createRef)());
     this.setState({
       ready: false,
-      errorIndecies: []
+      errorIndecies: [],
+      focusedIdx: -1
     });
   }
   componentDidMount() {
     this.setImageFrameDimension();
   }
+  focusSourceEventFromQuote(ev) {
+    if (ev.id !== this.props.ev.id) return;
+    let fields = _index.default.get(ev, 'data.message.fields') || [];
+    let attachmentIndexField = _index.default.find(fields, f => f.key === 'attachment_index');
+    let attachmentIndex = _index.default.get(attachmentIndexField, 'value');
+    try {
+      attachmentIndex = JSON.parse(attachmentIndex);
+    } catch (err) {
+      attachmentIndex = undefined;
+    }
+    if (attachmentIndex === undefined) return;
+    this.setState({
+      focusedIdx: attachmentIndex
+    });
+    if (this.focusTimeout) clearTimeout(this.focusTimeout);
+    this.focusTimeout = setTimeout(() => {
+      this.setState({
+        focusedIdx: -1
+      });
+    }, 3000);
+  }
   setImageFrameDimension() {
     const MAX_HEIGHT = 240;
     const DEFAULT_MAX_WIDTH = 267;
@@ -71,9 +93,11 @@ class ImageAttachment extends _common.Com {
     }
     let byType = _index.default.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
+    let cls = `image-attachment image-attachment--${byType}`;
+    if (image._true_idx === this.state.focusedIdx) cls += ' just-focused';
     if (!image.width || !image.height) {
       return (0, _preact.h)("div", {
-        class: `image-attachment image-attachment--${byType}`
+        class: cls
       }, (0, _preact.h)("a", {
         href: this.props.store.replaceFileUrl(image.url),
         target: "_blank"
@@ -95,7 +119,7 @@ class ImageAttachment extends _common.Com {
       trueUrl = url;
     }
     return (0, _preact.h)("div", {
-      class: `image-attachment image-attachment--${byType}`
+      class: cls
     }, (0, _preact.h)("a", {
       href: trueUrl,
       target: "_blank"
@@ -126,7 +150,10 @@ class ImageAttachment extends _common.Com {
       if (!uri.startsWith('https://') && !uri.startsWith('http://') && !uri.startsWith('content://') && !uri.startsWith('data:')) {
         att.url = this.props.store.FileURL + uri;
       }
-      images.push(att);
+      images.push({
+        ...att,
+        _true_idx: i
+      });
     });
     if (images.length === 0) return null;
     let $images = _index.default.map(images, (image, index) => this.renderImage(image, index));

package/compiled_src/chatbox/QuoteMessage.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _index = _interopRequireDefault(require("../util/index.js"));
+var _block = _interopRequireDefault(require("./block.js"));
+var _common = require("../common.js");
+var _preact = require("preact");
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class QuoteMessage extends _common.Com {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "getSenderName", ev => {
+      let bytype = _index.default.get(ev, 'by.type');
+      let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id')) || '';
+      if (bytype === 'user') return _index.default.getUserDisplayName(this.props.store.matchUser());
+      let acc = this.props.store.matchAccount();
+      if (bytype === 'agent') return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+      if (byid.startsWith('at')) return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+      if (bytype === 'bot') {
+        let bot = this.props.store.matchBot()[byid];
+        if (!bot) return 'Bot';
+        return bot.fullname || 'Bot';
+      }
+      if (byid === 'system' || bytype === 'dummy' || bytype === 'workflow') return acc.name || 'system';
+      return acc.name;
+    });
+  }
+  render() {
+    let sendername = '';
+    let byType = _index.default.get(this.props.ev, 'by.type');
+    let byId = _index.default.get(this.props.ev, 'by.id');
+    if (byType === 'user') {
+      sendername = this.props.t('you');
+    } else {
+      sendername = this.getSenderName(this.props.ev);
+      let acc = this.props.store.matchAccount() || {};
+      if (_index.default.get(this.props, 'chatbox.hide_agent_profile')) sendername = acc.name;
+    }
+    let att = _index.default.get(this.props.ev, 'data.message.attachments.0');
+    if (att) {
+      let isImg = _index.default.includes(att.mimetype, 'image');
+      if (isImg) {
+        let uri = att.url;
+        if (!uri.startsWith('https://') && !uri.startsWith('http://') && !uri.startsWith('content://') && !uri.startsWith('data:')) {
+          uri = this.props.store.FileURL + uri;
+        }
+        return (0, _preact.h)("div", {
+          class: "message-quote d-flex",
+          onClick: () => this.scrollToSourceEvent(this.props.ev)
+        }, (0, _preact.h)("img", {
+          src: uri,
+          class: "message-quote-inner-img"
+        }), (0, _preact.h)("div", {
+          class: "message-quote-inner"
+        }, (0, _preact.h)("div", {
+          class: "message-quote-title"
+        }, sendername), (0, _preact.h)("div", {
+          class: "message-quote-content"
+        }, "[", this.props.t('image'), "]")));
+      } else {
+        return (0, _preact.h)("div", {
+          class: "message-quote",
+          onClick: () => this.scrollToSourceEvent(this.props.ev)
+        }, (0, _preact.h)("div", {
+          class: "message-quote-title"
+        }, sendername), (0, _preact.h)("div", {
+          class: "message-quote-content"
+        }, `[File] `, att.name));
+      }
+    }
+    let format = _index.default.get(this.props.ev, 'data.message.format', 'plaintext');
+    let block = _index.default.get(this.props.ev, 'data.message.block');
+    let text = _index.default.get(this.props.ev, 'data.message.text');
+    if (block) text = _index.default.blockToText(block);
+    return (0, _preact.h)("div", {
+      class: "message-quote",
+      onClick: () => this.scrollToSourceEvent(this.props.ev)
+    }, (0, _preact.h)("div", {
+      class: "message-quote-title"
+    }, sendername), (0, _preact.h)("div", {
+      class: "message-quote-content"
+    }, text));
+  }
+  scrollToSourceEvent(ev) {
+    let $ele = document.querySelector(`.convo-event[data-ev-id=${ev.id}]`);
+    if ($ele && typeof $ele.scrollIntoViewIfNeeded === 'function') {
+      $ele.scrollIntoViewIfNeeded();
+    }
+    this.props.onFocusSourceEventFromQuote(ev);
+  }
+}
+exports.default = QuoteMessage;

package/compiled_src/chatbox/Rating.js

@@ -36,6 +36,10 @@ class Rating extends _common.Com {
     this.props.store.onConvoEvent(this, ev => {
       var cid = _index.default.convoOfEv(ev);
       if (cid !== this.props.cid) return;
+      if (!this.state.hide && ev.type === 'conversation_rated') {
+        this.close();
+        return;
+      }
       if (this.shoudDisplay()) this.open();
     });
     this.mouseUp = e => this.onMouseUp(e);

package/compiled_src/chatbox/TextMessage.js

@@ -10,8 +10,15 @@ var _common = require("../common.js");
 var _preact = require("preact");
 var _Emoji = _interopRequireDefault(require("./Emoji.js"));
 var _time = _interopRequireDefault(require("./time.js"));
+var _QuoteMessage = _interopRequireDefault(require("./QuoteMessage.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 class TextMessage extends _common.Com {
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false
+    };
+  }
   renderTime() {
     return null;
     if (!this.props.showTime && !this.props.isLast && !this.props.isFirst) return null;
@@ -21,6 +28,27 @@ class TextMessage extends _common.Com {
       t: this.props.t
     }));
   }
+  focusSourceEventFromQuote(ev) {
+    if (ev.id !== this.props.ev.id) return;
+    let fields = _index.default.get(ev, 'data.message.fields') || [];
+    let attachmentIndexField = _index.default.find(fields, f => f.key === 'attachment_index');
+    let attachmentIndex = _index.default.get(attachmentIndexField, 'value');
+    try {
+      attachmentIndex = JSON.parse(attachmentIndex);
+    } catch (err) {
+      attachmentIndex = undefined;
+    }
+    if (attachmentIndex !== undefined) return;
+    this.setState({
+      focused: true
+    });
+    if (this.focusTimeout) clearTimeout(this.focusTimeout);
+    this.focusTimeout = setTimeout(() => {
+      this.setState({
+        focused: false
+      });
+    }, 3000);
+  }
   render() {
     var format = _index.default.get(this.props.ev, 'data.message.format', 'plaintext');
     let block = _index.default.get(this.props.ev, 'data.message.block');
@@ -62,12 +90,29 @@ class TextMessage extends _common.Com {
       return tag.text;
     });
     if (_index.default.size(tags) === 0) return null;
-    if (byType === 'agent') return (0, _preact.h)("div", {
-      class: "message-agent message-text--agent",
-      title: t
-    }, tags, this.renderTime());
+    let isDeleted = _index.default.get(this.props.ev, 'data.message.deleted');
+    let attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
+    let quote = _index.default.find(attachments, att => att.type === 'quote');
+    if (byType === 'agent') {
+      let cls = 'message-agent message-text--agent';
+      if (isDeleted) {
+        tags = this.props.t('recalled_message');
+        cls += ' message-text--deleted';
+      }
+      if (this.state.focused) cls += ' just-focused';
+      return (0, _preact.h)("div", {
+        class: cls,
+        title: t
+      }, quote && (0, _preact.h)(_QuoteMessage.default, {
+        ev: _index.default.get(quote, 'quote'),
+        t: this.props.t,
+        store: this.props.store,
+        onFocusSourceEventFromQuote: this.props.onFocusSourceEventFromQuote
+      }), tags, this.renderTime());
+    }
     let msgcls = 'message-user message-text--user';
     if (this.props.ev._error) msgcls += ' message-user--error';
+    if (this.state.focused) msgcls += ' just-focused';
     return (0, _preact.h)("div", {
       class: msgcls,
       title: t

package/compiled_src/chatbox/Widget.js

@@ -32,6 +32,43 @@ class Widget extends _common.Com {
   constructor(props) {
     super(props);
     _defineProperty(this, "msgInput", (0, _preact.createRef)());
+    _defineProperty(this, "findMissingRTMessage", async started => {
+      let messageSentDict = this.props.store.listAgentRealtimeMessageSent();
+      let res1 = await this.props.store.sbzListConversations();
+      let conversions = _index.default.get(res1, 'body.conversations') || [];
+      let cids = _index.default.map(conversions, convo => convo.id);
+      let promises = _index.default.map(cids, cid => this.props.store.sbzListMessages(cid));
+      let msgReses = await Promise.all(promises);
+      _index.default.map(msgReses, msgRes => {
+        let messages = _index.default.get(msgRes, 'body') || [];
+        _index.default.map(messages, ev => {
+          if (ev.created < started) return;
+          if (ev.type !== 'message_sent') return;
+          if (_index.default.get(ev, 'by.type') === 'user') return;
+          console.log('check ev pass condition', ev);
+          if (!messageSentDict[ev.id]) {
+            this.props.store.sendBugReport('[WIDGET ' + accid + '] Missing agent message sent evid ' + ev.id + ', cid ' + _index.default.convoOfEv(ev));
+          }
+        });
+      });
+    });
+    _defineProperty(this, "debugRTAgentMessageSent", async () => {
+      try {
+        let debugAccountIds = this.props.store.matchDebugAccountIds();
+        let accid = _index.default.get(this.props.store.matchAccount(), 'id');
+        if (!debugAccountIds.includes(accid)) return;
+        console.log('START check RT agent message with BE source');
+        let started = Date.now();
+        this.findMissingRTMessage(started);
+        for (let i = 0; i < 100_000; i++) {
+          await _index.default.sleep(120_000);
+          console.log('LOOP check RT agent message with BE source', i);
+          this.findMissingRTMessage(started);
+        }
+      } catch (err) {
+        this.props.store.sendBugReport(`debugRTAgentMessageSent ERROR ${err.stack}`);
+      }
+    });
     _defineProperty(this, "formMounted", form => {
       let formData = this.fillForm(form);
       if (form.question_required || this.state.quickReplyMessage.text) {
@@ -65,6 +102,9 @@ class Widget extends _common.Com {
         });
         let botid = cid.split('_')[0].slice(7);
         let oldconvo = this.props.store.matchConvo(this.props.cid) || {};
+        let greeting_msg = _index.default.find(oldconvo.events, ev => {
+          return ev.type == 'message_sent' && ev.by && ev.by.type == 'bot';
+        });
         const {
           convo,
           error
@@ -78,7 +118,8 @@ class Widget extends _common.Com {
             bot_version: oldconvo.bot_version
           }],
           initial_by: this.props.store.matchUser().id,
-          is_testing: oldconvo.is_testing
+          is_testing: oldconvo.is_testing,
+          greeting_message: greeting_msg
         });
         if (_creating != this._creating) return;
         if (error) {
@@ -184,6 +225,7 @@ class Widget extends _common.Com {
   componentDidMount() {
     if (!this.props.store.isMobile()) this.focusInput();
     this.updateFormDataFields();
+    this.debugRTAgentMessageSent();
   }
   applyMessage(text) {
     this.focusInput(text);