@subiz/widget-v4 4.1.178 → 4.1.179

package/assets/less/base.less

@@ -16,6 +16,8 @@
 @red: #dc3545;
 @yellow: #ffc107;
 @green: #28a745;
+@green-light-bg: #28a74526;
+@border: @gray-300;
 
 @link: #0d6efd;
 @link-hover: #024dbc;
@@ -65,3 +67,29 @@
 	-moz-mask-image: url(@url);
 	mask-image: url(@url);
 }
+
+.badge {
+	padding: 2px 8px;
+	font-size: 12px;
+	font-weight: 600;
+	border-radius: 6px;
+	display: inline-flex;
+	align-items: center;
+
+	&.badge--success {
+		.color(@green);
+		background: @green-light-bg;
+	}
+}
+
+.dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 4px;
+	flex-shrink: 0;
+	background: @black;
+
+	&.dot--success {
+		background: @green;
+	}
+}

package/assets/less/chatbox.less

@@ -92,6 +92,7 @@ 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
@@ -209,6 +210,9 @@ body div#sbz92 {
 	.ml-2 {
 		margin-left: @spacer2;
 	}
+	.mr-1 {
+		margin-right: @spacer1;
+	}
 	.mr-2 {
 		margin-right: @spacer2;
 	}

package/assets/less/message.less

@@ -507,7 +507,6 @@ a.message_error {
 	}
 
 	.url-button-attachment {
-		text-decoration: none;
 		padding: 10px;
 		display: block;
 		padding-top: 9px;
@@ -542,13 +541,6 @@ a.message_error {
 
 .generic-attachment--element.clickable {
 	cursor: pointer;
-	.generic-attachment--element-title {
-		.color(@link);
-	}
-
-	&:hover .generic-attachment--element-title {
-		.color(@link-hover);
-	}
 }
 
 .widget_body__events__error_msg {

package/assets/less/widget.less

@@ -574,3 +574,164 @@
 		color: #fff;
 	}
 }
+
+.widget-preview-text-message--header {
+	display: flex;
+	overflow: hidden;
+	align-items: center;
+	width: 100%;
+
+	.widget-preview--avatar {
+		width: 24px;
+		height: 24px;
+		flex-shrink: 0;
+    margin-right: 10px;
+	}
+}
+
+.widget-preview-text-message--author {
+	flex: 1;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+}
+
+.widget-preview-text-message--author-text {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	margin-right: 10px;
+	line-height: 1.5;
+	.color(@secondary-color);
+}
+
+.widget-preview-text-message--content {
+	margin-top: 10px;
+  white-space: pre-wrap;
+}
+
+.widget-preview-quick-reply-wrapper {
+	z-index: @z-index-3;
+	width: 100%;
+	margin-bottom: 15px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	&.right {
+		align-items: flex-end;
+	}
+}
+
+.widget-preview-quick-reply-item {
+	border-radius: 20px;
+	padding: 8px 20px;
+	background: @white;
+	border: 1.5px solid;
+	border-color: @primary-color;
+	.color(@primary-color);
+	margin-bottom: 15px;
+	cursor: pointer;
+	transition: 0.3s ease;
+	position: relative;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	&:hover {
+		.color(@white);
+		background-color: @primary-color;
+	}
+}
+
+.widget-preview-image-wrapper {
+	z-index: @z-index-3;
+	width: 100%;
+	margin-bottom: 15px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+
+	&.right {
+		align-items: flex-end;
+	}
+}
+
+.widget-preview-image-item {
+	max-width: 300px;
+	border-radius: 15px;
+	box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
+	border: 1px solid @border;
+	overflow: hidden;
+	cursor: pointer;
+
+	img {
+		width: 100%;
+		max-height: 300px;
+		object-fit: cover;
+	}
+}
+
+.widget-preview-text-message {
+	z-index: @z-index-3;
+	background: @white;
+	box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
+	border: 1px solid @border;
+	border-radius: 15px;
+	max-width: 100%;
+	margin-bottom: 15px;
+	padding: 15px 20px;
+	positive: relative;
+	cursor: pointer;
+
+	&.right {
+		border-bottom-right-radius: 8px;
+	}
+	&.left {
+		border-bottom-left-radius: 8px;
+	}
+}
+
+.widget-preview-new-wrapper {
+	max-width: 340px;
+	position: relative;
+
+	&.hidden {
+		display: none;
+	}
+
+	&:hover {
+		.widget-preview-x-wrapper {
+			display: flex;
+		}
+	}
+
+	.widget-preview--btn-close {
+		width: 32px;
+		height: 32px;
+		background-color: #00000040;
+		background-size: 16px 16px;
+		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXIteCI+PGxpbmUgeDE9IjE4IiB5MT0iNiIgeDI9IjYiIHkyPSIxOCI+PC9saW5lPjxsaW5lIHgxPSI2IiB5MT0iNiIgeDI9IjE4IiB5Mj0iMTgiPjwvbGluZT48L3N2Zz4K');
+
+		&:hover {
+			background-color: #00000066;
+		}
+	}
+}
+
+.widget-preview-x-wrapper {
+	display: none;
+	justify-content: flex-start;
+	width: calc(100% + 40px);
+	position: absolute;
+	padding: 15px 20px;
+	left: -20px;
+	bottom: 100%;
+
+	&.right {
+		justify-content: flex-end;
+		left: unset;
+		right: -20px;
+	}
+}

package/compiled_src/chatbox/ChatButton.js

@@ -16,9 +16,7 @@ class ChatButton extends _common.Com {
   constructor(props) {
     super(props);
     this.setState({
-      opacity: 0,
-      previewEvent: {},
-      displayPreview: false
+      opacity: 0
     });
     this.loadGreeting();
     this.props.store.onUpdate(this, _ => this.forceUpdate());
@@ -41,10 +39,22 @@ class ChatButton extends _common.Com {
         let message = _index.default.get(ev, 'data.message.text') || '';
         if (!message && isquickreplies) return;
       }
-      this.setState({
-        displayPreview: true,
+      let screen = _index.default.get(this.props.store.matchLastview(), 'screen');
+      let minimized = _index.default.get(this.props.store.matchLastview(), 'minimized');
+      if (screen === 'widget') return;
+      if (minimized && Date.now() - minimized < Ms30Mins) return;
+      if (this.props.store.isMobile()) {
+        this.props.store.updateLastview({
+          previewEvent: ev
+        });
+        this.forceUpdate();
+        return;
+      }
+      this.props.store.updateLastview({
+        screen: 'preview',
         previewEvent: ev
       });
+      this.forceUpdate();
     });
   }
   fixMissingSetting(chatbox) {
@@ -84,16 +94,6 @@ class ChatButton extends _common.Com {
       style: 'opacity: ' + opacity + ' !important'
     }, this.renderPreview(), this.renderButton());
   }
-  ClearPreview() {
-    this.setState({
-      previewEvent: {}
-    });
-  }
-  ClosePreview() {
-    this.setState({
-      displayPreview: false
-    });
-  }
   pickBestGreeting() {
     let convoM = this.props.store.matchConvo('*');
     let unseenConvo = _index.default.filter(convoM, convo => {
@@ -126,31 +126,47 @@ class ChatButton extends _common.Com {
     return unseenConvo[0].last_message_sent;
   }
   ShowGreeting() {
-    this.setState({
-      previewEvent: this.pickBestGreeting(),
-      displayPreview: true
+    this.props.store.updateLastview({
+      screen: 'preview',
+      previewEvent: this.pickBestGreeting()
     });
+    this.forceUpdate();
   }
   HideGreeting() {
-    this.setState({
+    this.props.store.updateLastview({
+      screen: 'button',
+      minimized: Date.now(),
       previewEvent: {}
     });
+    this.forceUpdate();
   }
   loadGreeting() {
+    let minimized = _index.default.get(this.props.store.matchLastview(), 'minimized');
+    let screen = _index.default.get(this.props.store.matchLastview(), 'screen');
+    console.log('loadGreeting matchLastview', this.props.store.matchLastview());
+    if (screen === 'widget') return;
+    if (minimized && Date.now() - minimized < Ms30Mins) return;
     let accountSetting = this.props.plugin.chatbox;
-    if (new _index.default.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return;
     let greeting = _index.default.get(accountSetting, 'greeting', {});
     let text = this.props.t.i18n(_index.default.get(greeting, 'greeting', {})) || greeting.message;
     let enabled = greeting.enabled;
     if (this.props.store.isMobile()) {
       enabled = enabled && !_index.default.get(greeting, 'mobile_disabled');
+      this.props.store.updateLastview({
+        screen: 'button',
+        previewEvent: {}
+      });
+      return;
     }
     if (!text || !enabled) {
-      this.setState({
+      this.props.store.updateLastview({
+        screen: 'button',
         previewEvent: {}
       });
+      this.forceUpdate();
       return;
     }
+    console.log('loadGreeting pickBestGreeting', this.pickBestGreeting());
     this.ShowGreeting();
   }
   onClick() {
@@ -168,14 +184,14 @@ class ChatButton extends _common.Com {
     return this.onPreviewClick();
   }
   onPreviewClick(e) {
-    let cid = _index.default.convoOfEv(this.state.previewEvent);
+    let previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
+    let cid = _index.default.convoOfEv(previewEvent);
     if (!cid) {
       let convos = _index.default.map(this.props.store.matchConvo('*'));
       let convo = _index.default.find(convos, convo => !_index.default.isConvoSeen(convo, this.props.store.matchUser().id));
       if (!convo) convo = convos[0] || {};
       cid = convo.id;
     }
-    this.closePreview(e);
     this.props.onClick && this.props.onClick({
       view: 'chat',
       cid
@@ -192,7 +208,8 @@ class ChatButton extends _common.Com {
     let account = this.props.store.matchAccount();
     if (!account) return null;
     let accountSetting = this.props.plugin.chatbox;
-    let byid = _index.default.get(this.state.previewEvent, 'by.display_id', _index.default.get(this.state.previewEvent, 'by.id'));
+    let previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
+    let byid = _index.default.get(previewEvent, 'by.display_id', _index.default.get(previewEvent, 'by.id'));
     let agent = this.props.store.matchAgent(byid);
     if (!agent) agent = this.props.store.matchAgent('*')[byid] || {};
     agent = _index.default.cloneDeep(agent);
@@ -208,14 +225,28 @@ class ChatButton extends _common.Com {
         fullname: account.name || this.props.t('agent')
       });
     }
-    let cls = 'widget-preview widget-preview--' + position;
-    if (!this.state.displayPreview) cls += ' widget-preview--hidden';
-    var tags = this.renderMessagePreview(this.state.previewEvent);
-    if (_index.default.size(tags) === 0) cls += ' widget-preview--hidden';
+    let tags = this.renderMessagePreview(previewEvent);
+    let attachments = _index.default.get(previewEvent, 'data.message.attachments') || [];
+    let quickReplies = _index.default.find(attachments, att => att.type === 'quick_replies');
+    quickReplies = _index.default.get(quickReplies, 'quick_replies') || [];
+    let imgAtt = _index.default.find(attachments, att => _index.default.includes(att.mimetype, 'image') && att.url);
+    let uri = _index.default.get(imgAtt, 'url') || '';
+    if (uri && !uri.startsWith('https://') && !uri.startsWith('http://') && !uri.startsWith('content://') && !uri.startsWith('data:')) {
+      uri = this.props.store.FileURL + uri;
+    }
+    let isShowPreview = _index.default.get(this.props.store.matchLastview(), 'screen') === 'preview';
     return (0, _preact.h)("div", {
-      class: cls
+      class: `widget-preview-new-wrapper ${isShowPreview ? '' : 'hidden'}`
     }, (0, _preact.h)("div", {
-      class: "widget-preview--body"
+      class: `widget-preview-x-wrapper ${position}`
+    }, (0, _preact.h)("div", {
+      class: "widget-preview--btn-close",
+      onClick: e => this.closePreview(e)
+    })), (0, _preact.h)("div", {
+      class: `widget-preview-text-message ${position}`,
+      onClick: e => this.onPreviewClick(e)
+    }, (0, _preact.h)("div", {
+      class: "widget-preview-text-message--header"
     }, (0, _preact.h)("img", {
       alt: "widget avatar",
       class: "widget-preview--avatar",
@@ -223,21 +254,43 @@ class ChatButton extends _common.Com {
       onError: ev => this.onProfileError(ev),
       onload: _ => this.onProfileReady()
     }), (0, _preact.h)("div", {
-      class: "widget-preview--content",
-      onClick: e => this.onPreviewClick(e)
+      class: "widget-preview-text-message--author"
     }, (0, _preact.h)("div", {
-      class: "widget-preview--title"
-    }, agent.fullname), (0, _preact.h)("p", {
-      class: "widget-preview--message"
-    }, tags)), (0, _preact.h)("div", {
-      class: "widget-preview--btn-close",
-      onClick: e => this.closePreview(e)
-    })), (0, _preact.h)("div", {
-      class: "widget-preview--action",
-      onClick: e => this.onPreviewClick(e)
+      class: "widget-preview-text-message--author-text"
+    }, agent.fullname), (0, _preact.h)("div", {
+      class: "badge badge--success"
     }, (0, _preact.h)("div", {
-      class: "widget-preview--action-text"
-    }, this.props.t('chat_now'))));
+      class: "dot dot--success mr-1"
+    }), 'ONLINE'))), (0, _preact.h)("div", {
+      class: "widget-preview-text-message--content"
+    }, tags)), uri && (0, _preact.h)("div", {
+      class: `widget-preview-image-wrapper ${position}`
+    }, (0, _preact.h)("div", {
+      class: "widget-preview-image-item",
+      onClick: () => this.onPreviewClick()
+    }, (0, _preact.h)("img", {
+      src: uri
+    }))), _index.default.size(quickReplies) > 0 && (0, _preact.h)("div", {
+      class: `widget-preview-quick-reply-wrapper ${position}`
+    }, _index.default.map(quickReplies, reply => {
+      return (0, _preact.h)("div", {
+        class: "widget-preview-quick-reply-item",
+        onClick: () => {
+          this.props.onSelectQuickReply({
+            text: reply.title,
+            format: 'plaintext',
+            conversation_id: _index.default.convoOfEv(previewEvent),
+            attachments: [{
+              type: 'postback',
+              postback: {
+                event_id: previewEvent.id,
+                payload: reply.payload
+              }
+            }]
+          });
+        }
+      }, reply.title);
+    })));
   }
   onProfileReady() {
     if (this._buttonLoaded) this.setState({
@@ -402,11 +455,7 @@ class ChatButton extends _common.Com {
       e.preventDefault();
       e.stopPropagation();
     }
-    this.setState({
-      displayPreview: false
-    });
-    this.props.store.closePreview();
-    this.forceUpdate();
+    this.HideGreeting();
   }
 }
 exports.default = ChatButton;

package/compiled_src/chatbox/main.js

@@ -40,10 +40,7 @@ class Main extends _common.Com {
       this.$cssStyleDiv.id = 'subiz-style-for-' + this.props.plugin.id;
     }
     this.setState({
-      cssReady: false,
-      isShowWidget: false,
-      widgetView: '',
-      widgetConvoId: ''
+      cssReady: false
     });
     this.checkExpand();
     this.props.store.onResetCSS(this, () => this.refreshCSS());
@@ -59,15 +56,6 @@ class Main extends _common.Com {
     this.setState({
       cssReady: true
     });
-    if (this.props.store.matchIsOpen() && this.props.store.matchLastview().view) {
-      if (this.props.store.isMobile()) return;
-      this.showWidget(Object.assign({}, this.props.store.matchLastview().opts, {
-        view: this.props.store.matchLastview().view
-      }));
-    } else {
-      restoreViewport();
-      if (!this.state.isShowWidget) this.hideWidget();
-    }
   }
   render() {
     if (!this.state.cssReady) {
@@ -83,6 +71,10 @@ class Main extends _common.Com {
       return null;
     }
     if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_main = _index.default.Date.now();
+    let lastview = this.props.store.matchLastview() || {};
+    let isShowWidget = lastview.screen === 'widget';
+    let widgetView = lastview.view;
+    let widgetConvoId = _index.default.get(lastview, 'opts.cid');
     return (0, _preact.h)("div", {
       class: this.props.store.isMobile() ? 'mobile' : 'desktop'
     }, (0, _preact.h)(_ChatButton.default, {
@@ -90,15 +82,16 @@ class Main extends _common.Com {
       store: this.props.store,
       key: "chat_button",
       ref: this.refButton,
-      isShow: !this.state.isShowWidget,
+      isShow: !isShowWidget,
       onClick: e => this.showWidget(e),
+      onSelectQuickReply: msg => this.onSelectQuickReply(msg),
       t: this.props.t
     }), (0, _preact.h)(_Widget.default, {
       plugin: this.props.plugin,
       store: this.props.store,
-      view: this.state.widgetView,
-      cid: this.state.widgetConvoId,
-      isShow: this.state.isShowWidget,
+      view: widgetView,
+      cid: widgetConvoId,
+      isShow: isShowWidget,
       onClose: a => this.onWidgetClose(a),
       onGo: a => this.showWidget(a),
       t: this.props.t,
@@ -114,7 +107,8 @@ class Main extends _common.Com {
     if (!$widget) return;
     if ($widget.wasFormInputed) return;
     if (ev.type !== 'message_sent') return;
-    if (!this.state.isShowWidget) return;
+    let isShowWidget = _index.default.get(this.props.store.matchLastview(), 'screen') === 'widget';
+    if (!isShowWidget) return;
     let byType = _index.default.get(ev, 'by.type');
     let byid = _index.default.get(ev, 'by.id') || '';
     if (!byid.startsWith('bb') || byType !== 'agent') return;
@@ -128,49 +122,44 @@ class Main extends _common.Com {
   checkExpand() {
     if (this.props.store.isMobile()) return;
     if (this.props.plugin._no_auto_expand) return;
-    if (this.props.store.matchHasManuallyClosed()) return;
+    return;
     let convoM = this.props.store.matchConvo('*');
     let redconvo = _index.default.find(convoM, convo => !_index.default.isConvoSeen(convo, this.props.store.matchUser().id));
     if (!redconvo || !redconvo.id) return;
-    if (!this.state.isShowWidget) this.showWidget({
+    let isShowWidget = _index.default.get(this.props.store.matchLastview(), 'screen') === 'widget';
+    if (!isShowWidget) this.showWidget({
       view: 'chat',
       cid: redconvo.id
     });
   }
-  getCurrentView() {
-    return {
-      is_show_widget: this.state.isShowWidget,
-      conversation_id: this.state.widgetConvoId,
-      view: this.state.widgetView
-    };
+  onSelectQuickReply(message) {
+    this.showWidget({
+      view: 'chat',
+      cid: message.conversation_id
+    });
+    this.forceUpdate(() => {
+      this.refWidget.current && this.refWidget.current.sendMessage(message);
+    });
   }
   async showWidget(p) {
-    this.refButton.current && this.refButton.current.ClearPreview();
-    if (!p.view) {
-      let lastview = this.props.store.matchLastview() || {};
-      p.view = _index.default.get(lastview, 'view');
-      p.cid = _index.default.get(lastview, 'opts.cid');
-    }
-    p = p || {};
+    let cid = p.cid;
+    let newView = {
+      screen: 'widget',
+      minimized: 0,
+      view: p.view
+    };
     if (!p.view && !p.cid) {
       let convoM = this.props.store.matchConvo('*');
       let redconvo = _index.default.find(convoM, convo => !_index.default.isConvoSeen(convo, this.props.store.matchUser().id));
-      p.cid = _index.default.get(redconvo, 'id', _index.default.get(convoM, '0.id'));
-      p.view = 'chat';
+      cid = _index.default.get(redconvo, 'id', _index.default.get(convoM, '0.id'));
+      newView.view = 'chat';
     }
+    if (cid) newView.opts = {
+      cid
+    };
     if (this.props.store.isMobile()) modifyViewport();
-    this.setState({
-      widgetConvoId: p.cid,
-      widgetView: p.view
-    });
-    this.props.store.setIsOpen(true);
+    this.props.store.updateLastview(newView);
     this.forceUpdate();
-    this.setState({
-      isShowWidget: true
-    });
-    this.props.store.setLastview(p.view, {
-      cid: p.cid
-    });
   }
   applyMessage(text) {
     this.refWidget.current && this.refWidget.current.applyMessage(text);
@@ -186,15 +175,13 @@ class Main extends _common.Com {
   }
   hideWidget() {
     restoreViewport();
-    this.props.store.setIsOpen(false);
-    this.setState({
-      isShowWidget: false
+    this.props.store.updateLastview({
+      screen: 'button',
+      previewEvent: {}
     });
+    this.forceUpdate();
   }
   onWidgetClose() {
-    this.refButton.current && this.refButton.current.ClearPreview();
-    this.refButton.current && this.refButton.current.ClosePreview();
-    this.props.store.setHasManuallyClosed();
     this.hideWidget();
     this.props.store.emitCloseWidgetEvent();
   }

package/compiled_src/store/store.js

@@ -139,10 +139,12 @@ class Store {
       let user = this.cache.match('user') || {};
       if (!user.id) return {};
       if (lastView.user_id != user.id) return {};
+      if (lastView.view && !lastView.screen) {
+        lastView.screen = 'widget';
+      }
       return lastView;
     });
     _defineProperty(this, "matchIsOpen", () => !!this.kv.match('isopen'));
-    _defineProperty(this, "matchHasManuallyClosed", () => !!this.kv.match('hasManuallyClosed'));
     _defineProperty(this, "matchClosePreviewAt", () => this.kv.match('close_preview_at') || 0);
     _defineProperty(this, "checkFormToken", (accid, token) => this.api.checkFormToken(accid, token));
     _defineProperty(this, "submitForm2", (accid, token, data) => this.api.submitForm2(accid, token, data));
@@ -176,23 +178,17 @@ class Store {
     _defineProperty(this, "onConnection", (o, cb) => this.pubsub.on2(o, 'connection', cb));
     _defineProperty(this, "onResetCSS", (o, cb) => this.pubsub.on2(o, 'resetCSS', cb));
     _defineProperty(this, "onHighlight", (o, cb) => this.pubsub.on2(o, 'highlight', cb));
-    _defineProperty(this, "setHasManuallyClosed", () => this.kv.put('hasManuallyClosed', true));
-    _defineProperty(this, "setIsOpen", isopen => {
-      let lastisopen = this.kv.match('isopen');
-      this.kv.put('isopen', isopen);
-      if (!lastisopen && isopen) {
-        sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows');
-      }
-    });
     _defineProperty(this, "closePreview", () => this.kv.put('close_preview_at', new _index.default.Date().getTime()));
-    _defineProperty(this, "setLastview", (view, opts) => {
+    _defineProperty(this, "updateLastview", obj => {
       let user = this.cache.match('user') || {};
       if (!user.id) return;
-      this.kv.put('lastview', {
-        user_id: user.id,
-        view,
-        opts
-      });
+      let lastview = this.matchLastview() || {};
+      lastview = {
+        ...lastview,
+        ...obj,
+        user_id: user.id
+      };
+      this.kv.put('lastview', lastview);
     });
     _defineProperty(this, "timeDiff", 0);
     this.connectionStatus = 'active';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.178",
+	"version": "4.1.179",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -13,10 +13,10 @@
 		"@subiz/flow": "^1.1.0",
 		"@subiz/wsclient": "^4.0.34",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.45.1",
+		"core-js": "^3.46.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
-		"less": "^4.4.1",
+		"less": "^4.4.2",
 		"less-loader": "^12.3.0",
 		"preact": "10.19.3"
 	},
@@ -29,8 +29,8 @@
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.4",
-		"puppeteer": "^24.22.2",
-		"webpack": "^5.101.3",
+		"puppeteer": "^24.24.0",
+		"webpack": "^5.102.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.2"

package/src/chatbox/ChatButton.js

@@ -11,8 +11,6 @@ export default class ChatButton extends Com {
 		super(props)
 		this.setState({
 			opacity: 0, // wait for image to load first before setting opacity to 1
-			previewEvent: {},
-			displayPreview: false,
 		})
 		this.loadGreeting()
 
@@ -39,8 +37,21 @@ export default class ChatButton extends Com {
 				let message = sb.get(ev, 'data.message.text') || ''
 				if (!message && isquickreplies) return
 			}
+			let screen = sb.get(this.props.store.matchLastview(), 'screen')
+			let minimized = sb.get(this.props.store.matchLastview(), 'minimized')
+			if (screen === 'widget') return
+			if (minimized && Date.now() - minimized < Ms30Mins) return
 
-			this.setState({displayPreview: true, previewEvent: ev})
+			if (this.props.store.isMobile()) {
+				// dont show greeting fro mobile anymore
+				// need setState previewEvent for display 1 unread in mobile
+				this.props.store.updateLastview({previewEvent: ev})
+				this.forceUpdate()
+				return
+			}
+
+			this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
+			this.forceUpdate()
 		})
 	}
 
@@ -97,15 +108,6 @@ export default class ChatButton extends Com {
 		)
 	}
 
-	// this method could be call from the parent
-	ClearPreview() {
-		this.setState({previewEvent: {}})
-	}
-
-	ClosePreview() {
-		this.setState({displayPreview: false})
-	}
-
 	pickBestGreeting() {
 		let convoM = this.props.store.matchConvo('*')
 		let unseenConvo = sb
@@ -136,20 +138,27 @@ export default class ChatButton extends Com {
 
 	// this method could be call from the parent
 	ShowGreeting() {
-		this.setState({
-			previewEvent: this.pickBestGreeting(),
-			displayPreview: true,
-		})
+		this.props.store.updateLastview({screen: 'preview', previewEvent: this.pickBestGreeting()})
+		this.forceUpdate()
+		//this.setState({
+		//previewEvent: this.pickBestGreeting(),
+		//})
 	}
 
 	HideGreeting() {
-		this.setState({previewEvent: {}})
+		this.props.store.updateLastview({screen: 'button', minimized: Date.now(), previewEvent: {}})
+		this.forceUpdate()
+		//this.setState({previewEvent: {}})
 	}
 
 	loadGreeting() {
+		let minimized = sb.get(this.props.store.matchLastview(), 'minimized')
+		let screen = sb.get(this.props.store.matchLastview(), 'screen')
+		console.log('loadGreeting matchLastview', this.props.store.matchLastview())
+		if (screen !== 'preview') return
+		if (minimized && Date.now() - minimized < Ms30Mins) return
 		let accountSetting = this.props.plugin.chatbox
 		// dont show preview if the user has previously closed it
-		if (new sb.Date().getTime() - this.props.store.matchClosePreviewAt() < Ms30Mins) return
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
@@ -157,11 +166,16 @@ export default class ChatButton extends Com {
 		let enabled = greeting.enabled
 		if (this.props.store.isMobile()) {
 			enabled = enabled && !sb.get(greeting, 'mobile_disabled')
+			// dont show greeting fro mobile anymore
+			this.props.store.updateLastview({screen: 'button', previewEvent: {}})
+			return
 		}
 		if (!text || !enabled) {
-			this.setState({previewEvent: {}})
+			this.props.store.updateLastview({screen: 'button', previewEvent: {}})
+			this.forceUpdate()
 			return
 		}
+		console.log('loadGreeting pickBestGreeting', this.pickBestGreeting())
 		this.ShowGreeting()
 	}
 
@@ -184,14 +198,15 @@ export default class ChatButton extends Com {
 	}
 
 	onPreviewClick(e) {
-		let cid = sb.convoOfEv(this.state.previewEvent)
+		let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+		let cid = sb.convoOfEv(previewEvent)
 		if (!cid) {
 			let convos = sb.map(this.props.store.matchConvo('*'))
 			let convo = sb.find(convos, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 			if (!convo) convo = convos[0] || {}
 			cid = convo.id
 		}
-		this.closePreview(e)
+		//this.HideGreeting()
 		this.props.onClick && this.props.onClick({view: 'chat', cid})
 	}
 
@@ -205,7 +220,8 @@ export default class ChatButton extends Com {
 		let account = this.props.store.matchAccount()
 		if (!account) return null
 		let accountSetting = this.props.plugin.chatbox
-		let byid = sb.get(this.state.previewEvent, 'by.display_id', sb.get(this.state.previewEvent, 'by.id'))
+		let previewEvent = sb.get(this.props.store.matchLastview(), 'previewEvent') || {}
+		let byid = sb.get(previewEvent, 'by.display_id', sb.get(previewEvent, 'by.id'))
 		// let agent = sb.cloneDeep(this.props.store.matchAgent(byid)) || {}
 		// somehow store.matchAgent(id) return undefined so we try to backup with store.matchAgent('*')[id]
 		let agent = this.props.store.matchAgent(byid)
@@ -225,32 +241,85 @@ export default class ChatButton extends Com {
 			})
 		}
 
-		let cls = 'widget-preview widget-preview--' + position
-		if (!this.state.displayPreview) cls += ' widget-preview--hidden'
+		let tags = this.renderMessagePreview(previewEvent)
+		let attachments = sb.get(previewEvent, 'data.message.attachments') || []
+		let quickReplies = sb.find(attachments, (att) => att.type === 'quick_replies')
+		quickReplies = sb.get(quickReplies, 'quick_replies') || []
+		let imgAtt = sb.find(attachments, (att) => sb.includes(att.mimetype, 'image') && att.url)
+		let uri = sb.get(imgAtt, 'url') || ''
+		if (
+			uri &&
+			!uri.startsWith('https://') &&
+			!uri.startsWith('http://') &&
+			!uri.startsWith('content://') &&
+			!uri.startsWith('data:')
+		) {
+			uri = this.props.store.FileURL + uri
+		}
 
-		var tags = this.renderMessagePreview(this.state.previewEvent)
-		if (sb.size(tags) === 0) cls += ' widget-preview--hidden'
+		let isShowPreview = sb.get(this.props.store.matchLastview(), 'screen') === 'preview'
 
 		return (
-			<div class={cls}>
-				<div class='widget-preview--body'>
-					<img
-						alt='widget avatar'
-						class='widget-preview--avatar'
-						src={this.props.store.replaceFileUrl(agent.avatar_url)}
-						onError={(ev) => this.onProfileError(ev)}
-						onload={(_) => this.onProfileReady()}
-					/>
-					<div class='widget-preview--content' onClick={(e) => this.onPreviewClick(e)}>
-						<div class='widget-preview--title'>{agent.fullname}</div>
-						<p class='widget-preview--message'>{tags}</p>
-					</div>
+			<div class={`widget-preview-new-wrapper ${isShowPreview ? '' : 'hidden'}`}>
+				<div class={`widget-preview-x-wrapper ${position}`}>
 					<div class='widget-preview--btn-close' onClick={(e) => this.closePreview(e)} />
 				</div>
-
-				<div class='widget-preview--action' onClick={(e) => this.onPreviewClick(e)}>
-					<div class='widget-preview--action-text'>{this.props.t('chat_now')}</div>
+				<div class={`widget-preview-text-message ${position}`} onClick={(e) => this.onPreviewClick(e)}>
+					<div class='widget-preview-text-message--header'>
+						<img
+							alt='widget avatar'
+							class='widget-preview--avatar'
+							src={this.props.store.replaceFileUrl(agent.avatar_url)}
+							onError={(ev) => this.onProfileError(ev)}
+							onload={(_) => this.onProfileReady()}
+						/>
+						<div class='widget-preview-text-message--author'>
+							<div class='widget-preview-text-message--author-text'>{agent.fullname}</div>
+							<div class='badge badge--success'>
+								<div class='dot dot--success mr-1' />
+								{'ONLINE'}
+							</div>
+						</div>
+					</div>
+					<div class='widget-preview-text-message--content'>{tags}</div>
 				</div>
+				{uri && (
+					<div class={`widget-preview-image-wrapper ${position}`}>
+						<div class='widget-preview-image-item' onClick={() => this.onPreviewClick()}>
+							<img src={uri} />
+						</div>
+					</div>
+				)}
+				{sb.size(quickReplies) > 0 && (
+					<div class={`widget-preview-quick-reply-wrapper ${position}`}>
+						{sb.map(quickReplies, (reply) => {
+							return (
+								<div
+									class='widget-preview-quick-reply-item'
+									onClick={() => {
+										// copy chooseQuickReply function from Event.js
+										this.props.onSelectQuickReply({
+											text: reply.title,
+											format: 'plaintext',
+											conversation_id: sb.convoOfEv(previewEvent),
+											attachments: [
+												{
+													type: 'postback',
+													postback: {
+														event_id: previewEvent.id,
+														payload: reply.payload,
+													},
+												},
+											],
+										})
+									}}
+								>
+									{reply.title}
+								</div>
+							)
+						})}
+					</div>
+				)}
 			</div>
 		)
 	}
@@ -440,9 +509,7 @@ export default class ChatButton extends Com {
 			e.preventDefault()
 			e.stopPropagation()
 		}
-		this.setState({displayPreview: false})
-		this.props.store.closePreview()
-		this.forceUpdate()
+		this.HideGreeting()
 	}
 }
 

package/src/chatbox/Widget.js

@@ -63,7 +63,6 @@ export default class Widget extends Com {
 		if (prevProp.cid !== this.props.cid) {
 			this.closeOrder()
 			this.setState({clickedJoin: false, quickReplyMessage: {}})
-			// this.props.store.setLastview('chat', { cid: this.props.cid })
 			sb.setTimeout(() => {
 				// focus Events then focus MessageInput
 				// if there is any pending form, MessageInput will be disabled

package/src/chatbox/main.js

@@ -45,9 +45,6 @@ export default class Main extends Com {
 
 		this.setState({
 			cssReady: false,
-			isShowWidget: false,
-			widgetView: '',
-			widgetConvoId: '',
 		})
 
 		this.checkExpand()
@@ -62,16 +59,6 @@ export default class Main extends Com {
 		})
 		this.refreshCSS()
 		this.setState({cssReady: true})
-
-		if (this.props.store.matchIsOpen() && this.props.store.matchLastview().view) {
-			if (this.props.store.isMobile()) return // dont auto expand widget on mobile
-			this.showWidget(
-				Object.assign({}, this.props.store.matchLastview().opts, {view: this.props.store.matchLastview().view}),
-			)
-		} else {
-			restoreViewport()
-			if (!this.state.isShowWidget) this.hideWidget()
-		}
 	}
 
 	render() {
@@ -88,6 +75,11 @@ export default class Main extends Com {
 			return null
 		}
 		if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_main = sb.Date.now()
+		let lastview = this.props.store.matchLastview() || {}
+		let isShowWidget = lastview.screen === 'widget'
+		let widgetView = lastview.view
+		let widgetConvoId = sb.get(lastview, 'opts.cid')
+
 		return (
 			<div class={this.props.store.isMobile() ? 'mobile' : 'desktop'}>
 				<ChatButton
@@ -95,16 +87,17 @@ export default class Main extends Com {
 					store={this.props.store}
 					key='chat_button'
 					ref={this.refButton}
-					isShow={!this.state.isShowWidget}
+					isShow={!isShowWidget}
 					onClick={(e) => this.showWidget(e)}
+					onSelectQuickReply={(msg) => this.onSelectQuickReply(msg)}
 					t={this.props.t}
 				/>
 				<Widget
 					plugin={this.props.plugin}
 					store={this.props.store}
-					view={this.state.widgetView}
-					cid={this.state.widgetConvoId}
-					isShow={this.state.isShowWidget}
+					view={widgetView}
+					cid={widgetConvoId}
+					isShow={isShowWidget}
 					onClose={(a) => this.onWidgetClose(a)}
 					onGo={(a) => this.showWidget(a)}
 					t={this.props.t}
@@ -124,7 +117,8 @@ export default class Main extends Com {
 		if (!$widget) return
 		if ($widget.wasFormInputed) return
 		if (ev.type !== 'message_sent') return
-		if (!this.state.isShowWidget) return
+		let isShowWidget = sb.get(this.props.store.matchLastview(), 'screen') === 'widget'
+		if (!isShowWidget) return
 
 		let byType = sb.get(ev, 'by.type')
 		let byid = sb.get(ev, 'by.id') || ''
@@ -140,50 +134,39 @@ export default class Main extends Com {
 		if (this.props.store.isMobile()) return
 
 		if (this.props.plugin._no_auto_expand) return
-		// dont try to expand widget if user has already closed it
-		if (this.props.store.matchHasManuallyClosed()) return
+		return
 
 		let convoM = this.props.store.matchConvo('*')
 		let redconvo = sb.find(convoM, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 		if (!redconvo || !redconvo.id) return
-		if (!this.state.isShowWidget) this.showWidget({view: 'chat', cid: redconvo.id})
+		let isShowWidget = sb.get(this.props.store.matchLastview(), 'screen') === 'widget'
+		if (!isShowWidget) this.showWidget({view: 'chat', cid: redconvo.id})
 	}
 
-	getCurrentView() {
-		return {
-			is_show_widget: this.state.isShowWidget,
-			conversation_id: this.state.widgetConvoId,
-			view: this.state.widgetView,
-		}
+	onSelectQuickReply(message) {
+		this.showWidget({view: 'chat', cid: message.conversation_id})
+		this.forceUpdate(() => {
+			this.refWidget.current && this.refWidget.current.sendMessage(message)
+		})
 	}
 
 	async showWidget(p) {
-		this.refButton.current && this.refButton.current.ClearPreview()
-		if (!p.view) {
-			let lastview = this.props.store.matchLastview() || {}
-			p.view = sb.get(lastview, 'view')
-			p.cid = sb.get(lastview, 'opts.cid')
-		}
-		p = p || {}
+		//this.refButton.current && this.refButton.current.ClearPreview()
 
+    let cid = p.cid
+    let newView = {screen: 'widget', minimized: 0, view: p.view}
 		if (!p.view && !p.cid) {
 			let convoM = this.props.store.matchConvo('*')
 			let redconvo = sb.find(convoM, (convo) => !sb.isConvoSeen(convo, this.props.store.matchUser().id))
 			// try to show first convo
-			p.cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
-			p.view = 'chat'
+			cid = sb.get(redconvo, 'id', sb.get(convoM, '0.id'))
+      newView.view = 'chat'
 		}
+    if (cid) newView.opts = {cid}
 
 		if (this.props.store.isMobile()) modifyViewport()
-		this.setState({widgetConvoId: p.cid, widgetView: p.view})
-		this.props.store.setIsOpen(true)
-
-		// lazy load widget
-		// if (!Widget) Widget = (await loadWidget()).default
-
+		this.props.store.updateLastview(newView)
 		this.forceUpdate()
-		this.setState({isShowWidget: true})
-		this.props.store.setLastview(p.view, {cid: p.cid})
 	}
 
 	applyMessage(text) {
@@ -204,17 +187,12 @@ export default class Main extends Com {
 
 	hideWidget() {
 		restoreViewport()
-		this.props.store.setIsOpen(false)
-		this.setState({isShowWidget: false})
+		this.props.store.updateLastview({screen: 'button', previewEvent: {}})
+		this.forceUpdate()
 	}
 
 	onWidgetClose() {
-		this.refButton.current && this.refButton.current.ClearPreview()
-		// need call closePreview if not this will display default agent avatar and account name
-		this.refButton.current && this.refButton.current.ClosePreview()
-		this.props.store.setHasManuallyClosed()
 		this.hideWidget()
-
 		// emit event close widget
 		this.props.store.emitCloseWidgetEvent()
 	}

package/src/store/store.js

@@ -466,13 +466,21 @@ export default class Store {
 
 		// make sure last view of correct user
 		let user = this.cache.match('user') || {}
-		if (!user.id) return {}
-		if (lastView.user_id != user.id) return {}
+		if (!user.id) return { screen: 'preview' }
+		if (lastView.user_id != user.id) return { screen: 'preview' }
+
+		if (!lastView.screen) {
+			lastView.screen = 'preview' // mode preview allow load default greeting
+
+			// backward compatible for user currently view chat
+			if (lastView.view === 'list' || lastView.view === 'chat') {
+				lastView.screen = 'widget'
+			}
+		}
 		return lastView
 	}
 
 	matchIsOpen = () => !!this.kv.match('isopen') // is widget currently open
-	matchHasManuallyClosed = () => !!this.kv.match('hasManuallyClosed') // true if user has ever closed the widget
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
 	checkFormToken = (accid, token) => this.api.checkFormToken(accid, token)
@@ -1212,19 +1220,18 @@ export default class Store {
 	onResetCSS = (o, cb) => this.pubsub.on2(o, 'resetCSS', cb)
 	onHighlight = (o, cb) => this.pubsub.on2(o, 'highlight', cb)
 
-	setHasManuallyClosed = () => this.kv.put('hasManuallyClosed', true)
-	setIsOpen = (isopen) => {
-		let lastisopen = this.kv.match('isopen')
-		this.kv.put('isopen', isopen)
-		if (!lastisopen && isopen) {
-			sendEventToThirdParty('SUBIZ Chat', 'Opened', 'Subiz Windows')
-		}
-	}
 	closePreview = () => this.kv.put('close_preview_at', new sb.Date().getTime())
-	setLastview = (view, opts) => {
+	updateLastview = (obj) => {
 		let user = this.cache.match('user') || {}
 		if (!user.id) return // store not init
-		this.kv.put('lastview', {user_id: user.id, view, opts})
+		let lastview = this.matchLastview() || {}
+		lastview = {
+			...lastview,
+			...obj,
+			user_id: user.id,
+		}
+
+		this.kv.put('lastview', lastview)
 	}
 
 	matchLastPluginRun(pluginid) {