@subiz/widget-v4 4.1.178 → 4.1.184

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

@@ -291,7 +291,7 @@
 	position: relative;
 }
 
-.widget-body.embed-chat {
+.embed-chat {
 	.widget-body--events {
 		width: 600px;
 		margin: 0 auto;
@@ -302,6 +302,23 @@
 		max-width: 600px;
 		margin: 20px auto;
 	}
+
+	.widget-header--inner {
+		max-width: 100%;
+		width: 600px;
+	}
+
+	.widget-body--content {
+		width: 600px;
+		margin: 0 auto;
+		max-width: 100%;
+	}
+
+	.convo-list {
+		width: 600px;
+		margin: 0 auto;
+		max-width: 100%;
+	}
 }
 
 .widget-body--content {
@@ -402,9 +419,13 @@
 	scale: 1;
 	transition:
 		filter 250ms ease,
-		opacity 0.4s ease,
+		opacity 0.15s ease-in,
 		scale 0.125s ease-in-out,
 		transform 0.2s ease-in-out;
+
+	&.hidden {
+		opacity: 0;
+	}
 }
 
 .chat-button:hover {
@@ -574,3 +595,177 @@
 		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;
+
+	.badge {
+		margin-left: 10px;
+	}
+}
+
+.widget-preview-text-message--author-text {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	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%;
+	min-width: 210px;
+	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;
+	opacity: 1;
+	transition:
+		opacity 0.15s ease-in,
+		transform 0.15s ease-in;
+	transform: translateY(0);
+
+	&.hidden {
+		transform: translateY(20px);
+		transition:
+			opacity 0.15s ease-out,
+			transform 0.15s ease-out;
+		opacity: 0;
+	}
+
+	&: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/assets/less/widget_header.less

@@ -103,7 +103,8 @@
 .widget-header--inner {
 	position: absolute;
 	top: 0;
-	left: 0;
+	left: 50%;
+	transform: translateX(-50%);
 	width: 100%;
 	opacity: 1;
 

package/chat.js

@@ -44,7 +44,6 @@ async function run() {
 			},
 		})
 	}
-	subiz._overrideDeviceType('mobile')
 	if (window.innerWidth > 760) {
 		// table or wider screen
 		subiz.setEmbebedChatMode()

package/compiled_src/chatbox/ChatButton.js

@@ -15,12 +15,14 @@ let defaultAvatar = require('../../assets/img/default_avatar.png');
 class ChatButton extends _common.Com {
   constructor(props) {
     super(props);
-    this.setState({
-      opacity: 0,
+    this.state = {
+      hasPreviewDom: false,
+      previewExtraCls: 'hidden',
       previewEvent: {},
-      displayPreview: false
-    });
-    this.loadGreeting();
+      ready: false
+    };
+    this.readyGate = new _index.default.Gate();
+    this.prepareButtonImage();
     this.props.store.onUpdate(this, _ => this.forceUpdate());
     this.props.store.onConvoEvent(this, ev => {
       if (_index.default.get(ev, 'type') !== 'message_sent') return;
@@ -41,11 +43,34 @@ 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();
     });
+    this.props.store.onLastview(this, () => {
+      let screen = _index.default.get(this.props.store.matchLastview(), 'screen');
+      let previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
+      let isOpen = screen === 'preview' && _index.default.size(previewEvent) > 0;
+      if (isOpen) {
+        this.makeAnimateShowPreview(previewEvent);
+      } else {
+        this.makeAnimateHidePreview();
+      }
+    });
+    this.loadGreeting();
   }
   fixMissingSetting(chatbox) {
     chatbox = _index.default.cloneDeep(chatbox);
@@ -74,26 +99,13 @@ class ChatButton extends _common.Com {
     let hiddenButtonDesktop = _index.default.get(accountSetting, 'desktop_button.hidden');
     if (hiddenButtonDesktop) return null;
     let cls = 'widget-layout widget-layout--' + position;
-    let opacity = this.state.opacity;
-    if (!this.props.isShow) {
+    if (!this.props.isShow || !this.state.ready) {
       cls += ' widget-layout--hidden';
-      opacity = 0;
     }
     return (0, _preact.h)("div", {
-      class: cls,
-      style: 'opacity: ' + opacity + ' !important'
+      class: cls
     }, 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 => {
@@ -125,30 +137,80 @@ class ChatButton extends _common.Com {
     }
     return unseenConvo[0].last_message_sent;
   }
-  ShowGreeting() {
+  showPreview(ev) {
+    this.props.store.updateLastview({
+      screen: 'preview',
+      previewEvent: ev
+    });
+  }
+  async makeAnimateShowPreview(ev) {
+    await this.readyGate.entry();
+    let agent = this.getAgentOfPreviewEvent(ev);
+    await _index.default.preloadImg(agent.avatar_url);
+    if (this.state.hasPreviewDom) {
+      this.setState({
+        previewExtraCls: 'hidden'
+      });
+      if (this._animateTimeout) clearTimeout(this._animateTimeout);
+      this._animateTimeout = setTimeout(() => {
+        this.setState({
+          previewExtraCls: '',
+          previewEvent: ev
+        });
+      }, 200);
+      return;
+    }
     this.setState({
-      previewEvent: this.pickBestGreeting(),
-      displayPreview: true
+      hasPreviewDom: true,
+      previewExtraCls: 'hidden',
+      previewEvent: {}
     });
+    if (this._animateTimeout) clearTimeout(this._animateTimeout);
+    this._animateTimeout = setTimeout(() => {
+      this.setState({
+        previewExtraCls: '',
+        previewEvent: ev
+      });
+    }, 200);
   }
-  HideGreeting() {
+  makeAnimateHidePreview() {
+    if (this._animateTimeout) clearTimeout(this._animateTimeout);
     this.setState({
+      previewExtraCls: 'hidden'
+    });
+    this._animateTimeout = setTimeout(() => {
+      this.setState({
+        hasPreviewDom: false,
+        previewEvent: {}
+      });
+    }, 200);
+  }
+  ShowGreeting() {
+    let ev = this.pickBestGreeting();
+    this.showPreview(ev);
+  }
+  HideGreeting() {
+    this.props.store.updateLastview({
+      screen: 'button',
+      minimized: Date.now(),
       previewEvent: {}
     });
   }
   loadGreeting() {
+    let minimized = _index.default.get(this.props.store.matchLastview(), 'minimized');
+    let screen = _index.default.get(this.props.store.matchLastview(), 'screen');
+    if (screen !== 'preview') return;
+    if (minimized && Date.now() - minimized < Ms30Mins) return;
+    let previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
+    if (_index.default.size(previewEvent) > 0) {
+      this.showPreview(previewEvent);
+      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');
-    }
     if (!text || !enabled) {
-      this.setState({
-        previewEvent: {}
-      });
       return;
     }
     this.ShowGreeting();
@@ -168,14 +230,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
@@ -188,68 +250,113 @@ class ChatButton extends _common.Com {
       class: "chat-button--unread"
     }, unreadcount);
   }
-  renderPreview() {
+  getAgentOfPreviewEvent(ev) {
     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 = ev;
+    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);
     agent.fullname = agent.fullname || _index.default.get(account, 'name') || this.props.t('agent');
     agent.avatar_url = agent.avatar_url || account.logo_url || require('../../assets/img/image_default.png');
-    let position = _index.default.get(accountSetting, 'desktop_button.position') || 'right';
-    if (this.props.store.isMobile()) {
-      position = _index.default.get(accountSetting, 'mobile_button.position') || position;
-    }
     if (accountSetting && accountSetting.hide_agent_profile) {
       agent = Object.assign({}, account, {
         avatar_url: account.logo_url || require('../../assets/img/image_default.png'),
         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';
+    return agent;
+  }
+  renderPreview() {
+    if (this.props.store.isMobile()) return;
+    if (!this.state.hasPreviewDom) return;
+    let previewEvent = this.state.previewEvent;
+    let agent = this.getAgentOfPreviewEvent(previewEvent);
+    let account = this.props.store.matchAccount();
+    let accountSetting = this.props.plugin.chatbox;
+    let position = _index.default.get(accountSetting, 'desktop_button.position') || 'right';
+    if (this.props.store.isMobile()) {
+      position = _index.default.get(accountSetting, 'mobile_button.position') || position;
+    }
+    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;
+    }
     return (0, _preact.h)("div", {
-      class: cls
+      class: `widget-preview-new-wrapper ${this.state.previewExtraCls}`
     }, (0, _preact.h)("div", {
-      class: "widget-preview--body"
-    }, (0, _preact.h)("img", {
-      alt: "widget avatar",
-      class: "widget-preview--avatar",
-      src: this.props.store.replaceFileUrl(agent.avatar_url),
-      onError: ev => this.onProfileError(ev),
-      onload: _ => this.onProfileReady()
-    }), (0, _preact.h)("div", {
-      class: "widget-preview--content",
-      onClick: e => this.onPreviewClick(e)
+      class: `widget-preview-x-wrapper ${position}`
     }, (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",
+      class: `widget-preview-text-message ${position}`,
       onClick: e => this.onPreviewClick(e)
     }, (0, _preact.h)("div", {
-      class: "widget-preview--action-text"
-    }, this.props.t('chat_now'))));
-  }
-  onProfileReady() {
-    if (this._buttonLoaded) this.setState({
-      opacity: 1
-    });
-    this._profileLoaded = true;
+      class: "widget-preview-text-message--header"
+    }, (0, _preact.h)("img", {
+      alt: "widget avatar",
+      class: "widget-preview--avatar",
+      src: this.props.store.replaceFileUrl(agent.avatar_url)
+    }), (0, _preact.h)("div", {
+      class: "widget-preview-text-message--author"
+    }, (0, _preact.h)("div", {
+      class: "widget-preview-text-message--author-text"
+    }, agent.fullname), accountSetting.is_online && (0, _preact.h)("div", {
+      class: "badge badge--success"
+    }, (0, _preact.h)("div", {
+      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 => {
+      if (!(reply.title || '').trim()) return;
+      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);
+    })));
   }
-  onButtonReady() {
-    if (this._profileLoaded) this.setState({
-      opacity: 1
+  async prepareButtonImage() {
+    let accountSetting = this.props.plugin.chatbox;
+    accountSetting = this.fixMissingSetting(accountSetting);
+    let imgsrc = _index.default.get(accountSetting, 'desktop_button.background_image_url') || _index.default.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
+    if (this.props.store.isMobile()) {
+      imgsrc = _index.default.get(accountSetting, 'mobile_button.background_image_url') || _index.default.get(accountSetting, 'mobile_button.background_mask_url') || imgsrc;
+    }
+    imgsrc = this.props.store.replaceFileUrl(imgsrc);
+    await _index.default.preloadImg(imgsrc);
+    this.setState({
+      ready: true
     });
-    this._buttonLoaded = true;
+    this.readyGate.open();
   }
   renderButton() {
     if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = _index.default.Date.now();
@@ -353,9 +460,7 @@ class ChatButton extends _common.Com {
       height: "70",
       alt: "chat button",
       class: "chat-button--img",
-      onload: () => this.onButtonReady(),
-      src: imgsrc,
-      onError: (e, a) => this.onChatButtonError(e, a)
+      src: imgsrc
     })), this.renderUnread());
   }
   onProfileError(ev) {
@@ -402,11 +507,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;