@subiz/widget-v4 4.1.179 → 4.1.184

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 {
@@ -585,7 +606,7 @@
 		width: 24px;
 		height: 24px;
 		flex-shrink: 0;
-    margin-right: 10px;
+		margin-right: 10px;
 	}
 }
 
@@ -594,20 +615,23 @@
 	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;
-	margin-right: 10px;
 	line-height: 1.5;
 	.color(@secondary-color);
 }
 
 .widget-preview-text-message--content {
 	margin-top: 10px;
-  white-space: pre-wrap;
+	white-space: pre-wrap;
 }
 
 .widget-preview-quick-reply-wrapper {
@@ -680,6 +704,7 @@
 	border: 1px solid @border;
 	border-radius: 15px;
 	max-width: 100%;
+	min-width: 210px;
 	margin-bottom: 15px;
 	padding: 15px 20px;
 	positive: relative;
@@ -696,9 +721,18 @@
 .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 {
-		display: none;
+		transform: translateY(20px);
+		transition:
+			opacity 0.15s ease-out,
+			transform 0.15s ease-out;
+		opacity: 0;
 	}
 
 	&:hover {

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,10 +15,14 @@ let defaultAvatar = require('../../assets/img/default_avatar.png');
 class ChatButton extends _common.Com {
   constructor(props) {
     super(props);
-    this.setState({
-      opacity: 0
-    });
-    this.loadGreeting();
+    this.state = {
+      hasPreviewDom: false,
+      previewExtraCls: 'hidden',
+      previewEvent: {},
+      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;
@@ -56,6 +60,17 @@ class ChatButton extends _common.Com {
       });
       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);
@@ -84,14 +99,11 @@ 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());
   }
   pickBestGreeting() {
@@ -125,12 +137,57 @@ class ChatButton extends _common.Com {
     }
     return unseenConvo[0].last_message_sent;
   }
-  ShowGreeting() {
+  showPreview(ev) {
     this.props.store.updateLastview({
       screen: 'preview',
-      previewEvent: this.pickBestGreeting()
+      previewEvent: ev
     });
-    this.forceUpdate();
+  }
+  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({
+      hasPreviewDom: true,
+      previewExtraCls: 'hidden',
+      previewEvent: {}
+    });
+    if (this._animateTimeout) clearTimeout(this._animateTimeout);
+    this._animateTimeout = setTimeout(() => {
+      this.setState({
+        previewExtraCls: '',
+        previewEvent: ev
+      });
+    }, 200);
+  }
+  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({
@@ -138,35 +195,24 @@ class ChatButton extends _common.Com {
       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 (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;
     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.props.store.updateLastview({
-        screen: 'button',
-        previewEvent: {}
-      });
-      this.forceUpdate();
       return;
     }
-    console.log('loadGreeting pickBestGreeting', this.pickBestGreeting());
     this.ShowGreeting();
   }
   onClick() {
@@ -204,27 +250,35 @@ 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 previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
+    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')
       });
     }
+    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');
@@ -234,9 +288,8 @@ class ChatButton extends _common.Com {
     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: `widget-preview-new-wrapper ${isShowPreview ? '' : 'hidden'}`
+      class: `widget-preview-new-wrapper ${this.state.previewExtraCls}`
     }, (0, _preact.h)("div", {
       class: `widget-preview-x-wrapper ${position}`
     }, (0, _preact.h)("div", {
@@ -250,14 +303,12 @@ class ChatButton extends _common.Com {
     }, (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()
+      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), (0, _preact.h)("div", {
+    }, agent.fullname), accountSetting.is_online && (0, _preact.h)("div", {
       class: "badge badge--success"
     }, (0, _preact.h)("div", {
       class: "dot dot--success mr-1"
@@ -273,6 +324,7 @@ class ChatButton extends _common.Com {
     }))), _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: () => {
@@ -292,17 +344,19 @@ class ChatButton extends _common.Com {
       }, reply.title);
     })));
   }
-  onProfileReady() {
-    if (this._buttonLoaded) this.setState({
-      opacity: 1
-    });
-    this._profileLoaded = true;
-  }
-  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();
@@ -406,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) {

package/compiled_src/chatbox/Widget.js

@@ -250,8 +250,9 @@ class Widget extends _common.Com {
     let $body = null;
     if (this.props.view === 'list') $body = this.renderConvoList();else if (showform) $body = this.renderForm(form, submitLabel, formName);else $body = this.renderChat();
     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 (this.props.store.isMobile() || this.props.store.isEmbededChatMode()) position = _index.default.get(accountSetting, 'mobile_button.position', position);
     let cls = 'widget-container widget-container--' + position;
+    if (this.props.store.isEmbededChatMode()) cls += ' embed-chat';
     if (!this.props.store.isMobile() && _index.default.get(accountSetting, 'window_mode') === 'full') cls += ' widget-container--full';
     if (!this.props.isShow) cls += ' widget-container--hide';
     let hideheader = _index.default.get(accountSetting, 'header.hidden', false);

package/compiled_src/chatbox/main.js

@@ -76,7 +76,7 @@ class Main extends _common.Com {
     let widgetView = lastview.view;
     let widgetConvoId = _index.default.get(lastview, 'opts.cid');
     return (0, _preact.h)("div", {
-      class: this.props.store.isMobile() ? 'mobile' : 'desktop'
+      class: this.props.store.isMobile() || this.props.store.isEmbededChatMode() ? 'mobile' : 'desktop'
     }, (0, _preact.h)(_ChatButton.default, {
       plugin: this.props.plugin,
       store: this.props.store,
@@ -146,17 +146,21 @@ class Main extends _common.Com {
     let newView = {
       screen: 'widget',
       minimized: 0,
-      view: p.view
+      view: p.view,
+      previewEvent: {},
+      opts: {
+        cid
+      }
     };
     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));
       cid = _index.default.get(redconvo, 'id', _index.default.get(convoM, '0.id'));
       newView.view = 'chat';
+      newView.opts = {
+        cid
+      };
     }
-    if (cid) newView.opts = {
-      cid
-    };
     if (this.props.store.isMobile()) modifyViewport();
     this.props.store.updateLastview(newView);
     this.forceUpdate();

package/compiled_src/store/store.js

@@ -50,6 +50,24 @@ class Store {
       return unreadcount;
     });
     _defineProperty(this, "matchPlugin", () => {
+      if (this.is_embed_chat_mode) {
+        let pluginM = this.cache.match('plugin');
+        if (_index.default.size(this.forcePlugins) > 0) pluginM = this.forcePlugins;
+        let chatboxs = _index.default.filter(pluginM, (plugin, id) => plugin && plugin.type === 'chatbox');
+        if (_index.default.size(chatboxs) === 0) {
+          console.error('no chatbox found.');
+          return;
+        }
+        let chatbox = _index.default.find(chatboxs, chatbox => !!chatbox);
+        if (!chatbox) {
+          chatbox = chatboxs[0];
+        }
+        chatbox = _index.default.cloneDeep(chatbox);
+        chatbox.triggers = undefined;
+        return {
+          [chatbox.id]: chatbox
+        };
+      }
       if (_index.default.size(this.forcePlugins) > 0) return _index.default.cloneDeep(this.forcePlugins);
       return _index.default.cloneDeep(this.cache.match('plugin')) || {};
     });
@@ -137,10 +155,17 @@ class Store {
     _defineProperty(this, "matchLastview", () => {
       let lastView = this.kv.match('lastview') || {};
       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';
+      if (!user.id) return {
+        screen: 'preview'
+      };
+      if (lastView.user_id != user.id) return {
+        screen: 'preview'
+      };
+      if (!lastView.screen) {
+        lastView.screen = 'preview';
+        if (lastView.view === 'list' || lastView.view === 'chat') {
+          lastView.screen = 'widget';
+        }
       }
       return lastView;
     });
@@ -183,13 +208,15 @@ class Store {
       let user = this.cache.match('user') || {};
       if (!user.id) return;
       let lastview = this.matchLastview() || {};
-      lastview = {
+      let newview = {
         ...lastview,
         ...obj,
         user_id: user.id
       };
-      this.kv.put('lastview', lastview);
+      this.kv.put('lastview', newview);
+      this.pubsub.publish('lastview', newview, lastview);
     });
+    _defineProperty(this, "onLastview", (o, cb) => this.pubsub.on2(o, 'lastview', cb));
     _defineProperty(this, "timeDiff", 0);
     this.connectionStatus = 'active';
     this.CONNECTION_CHECK_INTERVAL = 3000;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.179",
+	"version": "4.1.184",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",