@subiz/widget-v4 4.1.185 → 4.1.186

package/assets/less/chatbox.less

@@ -19,6 +19,7 @@
 @desktop-chat-button-margin-x: '@desktop_button.margin_x'; //20px;
 @desktop-chat-button-margin-y: '@desktop_button.margin_y'; // 20px;
 @desktop-widget-max-height: '@desktop_widget_max_height'; // calc(100% - desktop_buttom.margin_y)
+@preview-max-width: '@preview_max_width';
 
 @form-page-background-color: '@form_background_color';
 @form-page-header-font-size: '@form_header_font_size';

package/assets/less/widget.less

@@ -645,6 +645,34 @@
 	&.right {
 		align-items: flex-end;
 	}
+
+	&.horizontal {
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 10px;
+
+		&.right {
+			justify-content: flex-end;
+		}
+
+		&.left {
+			justify-content: flex-start;
+		}
+	}
+}
+
+.widget-preview-quick-reply-wrapper.horizontal .widget-preview-quick-reply-item {
+	margin: 0;
+	max-width: 200px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 6px 15px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
 }
 
 .widget-preview-quick-reply-item {
@@ -719,7 +747,7 @@
 }
 
 .widget-preview-new-wrapper {
-	max-width: 340px;
+	max-width: @preview-max-width;
 	position: relative;
 	opacity: 1;
 	transition:
@@ -740,18 +768,6 @@
 			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 {
@@ -763,9 +779,25 @@
 	left: -20px;
 	bottom: 100%;
 
+  &.mobile {
+    display: flex;
+  }
+
 	&.right {
 		justify-content: flex-end;
 		left: unset;
 		right: -20px;
 	}
+
+	.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;
+		}
+	}
 }

package/compiled_src/chatbox/ChatButton.js

@@ -48,11 +48,14 @@ class ChatButton extends _common.Com {
       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;
+        let mobileDisabled = _index.default.get(this.props.plugin, 'chatbox.greeting.mobile_disabled');
+        if (mobileDisabled) {
+          this.props.store.updateLastview({
+            previewEvent: ev
+          });
+          this.forceUpdate();
+          return;
+        }
       }
       this.props.store.updateLastview({
         screen: 'preview',
@@ -210,7 +213,8 @@ class ChatButton extends _common.Com {
     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 (!text || !enabled) {
+    let mobileDisabled = this.props.store.isMobile() && greeting.mobile_disabled;
+    if (!text || !enabled || mobileDisabled) {
       return;
     }
     this.ShowGreeting();
@@ -269,7 +273,6 @@ class ChatButton extends _common.Com {
     return agent;
   }
   renderPreview() {
-    if (this.props.store.isMobile()) return;
     if (!this.state.hasPreviewDom) return;
     let previewEvent = this.state.previewEvent;
     let agent = this.getAgentOfPreviewEvent(previewEvent);
@@ -283,6 +286,7 @@ class ChatButton extends _common.Com {
     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') || [];
+    quickReplies = _index.default.take(quickReplies, 10);
     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:')) {
@@ -291,7 +295,7 @@ class ChatButton extends _common.Com {
     return (0, _preact.h)("div", {
       class: `widget-preview-new-wrapper ${this.state.previewExtraCls}`
     }, (0, _preact.h)("div", {
-      class: `widget-preview-x-wrapper ${position}`
+      class: `widget-preview-x-wrapper ${position} ${this.props.store.isMobile() ? 'mobile' : ''}`
     }, (0, _preact.h)("div", {
       class: "widget-preview--btn-close",
       onClick: e => this.closePreview(e)
@@ -322,10 +326,11 @@ class ChatButton extends _common.Com {
     }, (0, _preact.h)("img", {
       src: uri
     }))), _index.default.size(quickReplies) > 0 && (0, _preact.h)("div", {
-      class: `widget-preview-quick-reply-wrapper ${position}`
+      class: `widget-preview-quick-reply-wrapper ${position} ${_index.default.size(quickReplies) > 4 ? 'horizontal' : ''}`
     }, _index.default.map(quickReplies, reply => {
       if (!(reply.title || '').trim()) return;
       return (0, _preact.h)("div", {
+        title: reply.title,
         class: "widget-preview-quick-reply-item",
         onClick: () => {
           this.props.onSelectQuickReply({

package/compiled_src/chatbox/main.js

@@ -25,6 +25,8 @@ class Main extends _common.Com {
     let chatbox = found.chatbox;
     let margin_y = _index.default.get(chatbox, 'desktop_button.margin_y');
     chatbox.desktop_widget_max_height = margin_y ? `calc(100% - ${margin_y + 10}px)` : 'calc(100% - 40px)';
+    const PREVIEW_MAX_WIDTH = 340;
+    chatbox.preview_max_width = Math.min(PREVIEW_MAX_WIDTH, chatbox.width) + 'px';
     var outcss = _index.default.replaceCssVariable(css, chatbox);
     _index.default.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss);
   }

package/compiled_src/store/store.js

@@ -521,7 +521,7 @@ class Store {
         lastView.screen = 'widget';
       }
     }
-    if (this.isMobile()) lastView.screen = 'button';
+    if (this.isMobile()) lastView.screen = 'preview';
     this.kv.put('lastview', lastView);
   }
   async _initResource(accid, auth, realtimep) {

package/compiled_src/util/common.js

@@ -628,6 +628,7 @@ function replaceCssVariable(css, setting) {
   tokens = tokenize(tokens, "'@desktop_button.margin_x'");
   tokens = tokenize(tokens, "'@desktop_button.margin_y'");
   tokens = tokenize(tokens, "'@desktop_widget_max_height'");
+  tokens = tokenize(tokens, "'@preview_max_width'");
   tokens = tokenize(tokens, "'@mobile_button.width'");
   tokens = tokenize(tokens, "'@mobile_button.height'");
   tokens = tokenize(tokens, "'@mobile_button.background'");

package/compiled_src/util/index.js

@@ -14,6 +14,7 @@ sb.Mutex = require('./mutex.js').default;
 var op = require('./op.js');
 sb.get = op.get;
 sb.set = op.set;
+sb.take = op.take;
 sb.Pubsub = require('./pubsub.js').default;
 sb = Object.assign(sb, campaign);
 var _default = exports.default = sb;

package/compiled_src/util/op.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.get = get;
 exports.set = set;
+exports.take = take;
 var toStr = Object.prototype.toString;
 var isArray = Array.isArray || function (obj) {
   return toStr.call(obj) === '[object Array]';
@@ -52,4 +53,12 @@ function set(obj, path, value) {
     obj[currentPath] = typeof path[1] === 'number' ? [] : {};
   }
   return set(obj[currentPath], path.slice(1), value);
+}
+function take(arr, n = 1) {
+  if (!Array.isArray(arr)) return [];
+  let len = arr.length;
+  if (typeof len !== 'number' || len <= 0) return [];
+  if (n <= 0) return [];
+  let end = Math.min(n, len);
+  return arr.slice(0, end);
 }

package/package.json

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

package/src/chatbox/ChatButton.js

@@ -49,10 +49,13 @@ export default class ChatButton extends Com {
 
 			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
+				let mobileDisabled = sb.get(this.props.plugin, 'chatbox.greeting.mobile_disabled')
+				if (mobileDisabled) {
+					// 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})
@@ -212,7 +215,8 @@ export default class ChatButton extends Com {
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
 
 		let enabled = greeting.enabled
-		if (!text || !enabled) {
+		let mobileDisabled = this.props.store.isMobile() && greeting.mobile_disabled
+		if (!text || !enabled || mobileDisabled) {
 			return
 		}
 		this.ShowGreeting()
@@ -278,7 +282,7 @@ export default class ChatButton extends Com {
 	}
 
 	renderPreview() {
-		if (this.props.store.isMobile()) return
+		//if (this.props.store.isMobile()) return
 		if (!this.state.hasPreviewDom) return
 		let previewEvent = this.state.previewEvent
 		let agent = this.getAgentOfPreviewEvent(previewEvent)
@@ -294,6 +298,7 @@ export default class ChatButton extends Com {
 		let attachments = sb.get(previewEvent, 'data.message.attachments') || []
 		let quickReplies = sb.find(attachments, (att) => att.type === 'quick_replies')
 		quickReplies = sb.get(quickReplies, 'quick_replies') || []
+		quickReplies = sb.take(quickReplies, 10)
 		let imgAtt = sb.find(attachments, (att) => sb.includes(att.mimetype, 'image') && att.url)
 		let uri = sb.get(imgAtt, 'url') || ''
 		if (
@@ -308,7 +313,7 @@ export default class ChatButton extends Com {
 
 		return (
 			<div class={`widget-preview-new-wrapper ${this.state.previewExtraCls}`}>
-				<div class={`widget-preview-x-wrapper ${position}`}>
+				<div class={`widget-preview-x-wrapper ${position} ${this.props.store.isMobile() ? 'mobile' : ''}`}>
 					<div class='widget-preview--btn-close' onClick={(e) => this.closePreview(e)} />
 				</div>
 				<div class={`widget-preview-text-message ${position}`} onClick={(e) => this.onPreviewClick(e)}>
@@ -338,11 +343,14 @@ export default class ChatButton extends Com {
 					</div>
 				)}
 				{sb.size(quickReplies) > 0 && (
-					<div class={`widget-preview-quick-reply-wrapper ${position}`}>
+					<div
+						class={`widget-preview-quick-reply-wrapper ${position} ${sb.size(quickReplies) > 4 ? 'horizontal' : ''}`}
+					>
 						{sb.map(quickReplies, (reply) => {
 							if (!(reply.title || '').trim()) return
 							return (
 								<div
+									title={reply.title}
 									class='widget-preview-quick-reply-item'
 									onClick={() => {
 										// copy chooseQuickReply function from Event.js

package/src/chatbox/main.js

@@ -26,6 +26,8 @@ export default class Main extends Com {
 		let chatbox = found.chatbox
 		let margin_y = sb.get(chatbox, 'desktop_button.margin_y')
 		chatbox.desktop_widget_max_height = margin_y ? `calc(100% - ${margin_y + 10}px)` : 'calc(100% - 40px)'
+		const PREVIEW_MAX_WIDTH = 340
+		chatbox.preview_max_width = Math.min(PREVIEW_MAX_WIDTH, chatbox.width) + 'px'
 		var outcss = sb.replaceCssVariable(css, chatbox)
 		sb.setCss(this.props.plugin.id, this.$cssStyleDiv, outcss)
 	}

package/src/store/store.js

@@ -595,7 +595,7 @@ export default class Store {
 		}
 
 		// mobile always has screen button initially
-		if (this.isMobile()) lastView.screen = 'button'
+		if (this.isMobile()) lastView.screen = 'preview'
 		this.kv.put('lastview', lastView)
 	}
 

package/src/util/common.js

@@ -668,6 +668,7 @@ export function replaceCssVariable(css, setting) {
 	tokens = tokenize(tokens, "'@desktop_button.margin_x'")
 	tokens = tokenize(tokens, "'@desktop_button.margin_y'")
 	tokens = tokenize(tokens, "'@desktop_widget_max_height'")
+	tokens = tokenize(tokens, "'@preview_max_width'")
 	tokens = tokenize(tokens, "'@mobile_button.width'")
 	tokens = tokenize(tokens, "'@mobile_button.height'")
 	tokens = tokenize(tokens, "'@mobile_button.background'")

package/src/util/index.js

@@ -23,6 +23,7 @@ sb.Mutex = require('./mutex.js').default
 var op = require('./op.js')
 sb.get = op.get
 sb.set = op.set
+sb.take = op.take
 
 sb.Pubsub = require('./pubsub.js').default
 

package/src/util/op.js

@@ -9,26 +9,26 @@ var isArray =
 		return toStr.call(obj) === '[object Array]'
 	}
 
-function hasOwnProperty (obj, prop) {
+function hasOwnProperty(obj, prop) {
 	if (obj == null) return false
 	//to handle objects with null prototypes (too edge case?)
 	return Object.prototype.hasOwnProperty.call(obj, prop)
 }
 
-function getKey (key) {
+function getKey(key) {
 	var intKey = parseInt(key)
 	return intKey.toString() === key ? intKey : key
 }
 
-function hasShallowProperty (obj, prop) {
+function hasShallowProperty(obj, prop) {
 	return (typeof prop === 'number' && isArray(obj)) || hasOwnProperty(obj, prop)
 }
 
-function getShallowProperty (obj, prop) {
+function getShallowProperty(obj, prop) {
 	if (hasShallowProperty(obj, prop)) return obj[prop]
 }
 
-export function get (obj, path, defaultValue) {
+export function get(obj, path, defaultValue) {
 	if (typeof path === 'number') path = [path]
 	if (!path || path.length === 0) return obj
 	if (obj == null) return defaultValue
@@ -44,7 +44,7 @@ export function get (obj, path, defaultValue) {
 	return get(obj[currentPath], path.slice(1), defaultValue)
 }
 
-export function set (obj, path, value) {
+export function set(obj, path, value) {
 	if (typeof path === 'number') path = [path]
 	if (!path || path.length === 0) return obj
 	if (typeof path === 'string') {
@@ -65,3 +65,15 @@ export function set (obj, path, value) {
 
 	return set(obj[currentPath], path.slice(1), value)
 }
+
+export function take(arr, n = 1) {
+	if (!Array.isArray(arr)) return []
+
+	let len = arr.length
+	if (typeof len !== 'number' || len <= 0) return []
+
+	if (n <= 0) return []
+	let end = Math.min(n, len)
+
+	return arr.slice(0, end)
+}