@subiz/widget-v4 4.1.25 → 4.1.27

package/compiled_src/chatbox/Event.js

@@ -201,13 +201,15 @@ class Event extends _common.Com {
     });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {
+      let msg = this.props.t('error_send_message');
+      if (ev._error_message) msg = this.props.t(ev._error_message);
       $error = (0, _preact.h)("a", {
         class: "message_error",
         src: "javascript:;",
         onClick: e => this.resendMessage()
       }, (0, _preact.h)("div", {
         class: "message_error__text"
-      }, this.props.t('error_send_message')), (0, _preact.h)("div", {
+      }, msg), (0, _preact.h)("div", {
         class: "message_error__icon"
       }));
     }

package/compiled_src/chatbox/Header.js

@@ -19,21 +19,22 @@ class Header extends _common.Com {
     let cls = 'widget-header';
     let renderSocial = false;
     let renderTeam = false;
-    let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed';
     let accSetting = this.props.plugin.chatbox || {};
     let layout = _index.default.get(accSetting, 'header.layout');
-    if (renderCollapsed) {
+    let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed';
+    let renderClassic = !renderCollapsed && layout === 'classic';
+    if (renderCollapsed || layout == 'classic') {
       cls += ' widget-header--collapsed';
     } else {
       cls += ' widget-header--convo-expanded';
       renderSocial = layout === 'social';
-      renderTeam = !renderSocial;
+      renderTeam = !(renderSocial || renderClassic);
     }
     return (0, _preact.h)("div", {
       class: cls
-    }, this.renderCollapsedHeader(renderCollapsed), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
+    }, this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic), this.renderSocial(renderSocial), this.renderTeam(renderTeam));
   }
-  renderCollapsedHeader(show) {
+  renderCollapsedHeader(show, classic) {
     let accSetting = this.props.plugin.chatbox || {};
     let acc = this.props.store.matchAccount() || {};
     let state = acc.is_online ? this.props.t('agent_online') : this.props.t('agent_offline');
@@ -42,9 +43,13 @@ class Header extends _common.Com {
     let agentIdsJoined = _index.default.map(this.getAgentJoined(this.props.cid), agent => agent.id);
     let cls = 'widget-header--inner widget-header--inner--collapsed';
     if (!show) cls += ' widget-header--inner--hidden';
+    let $back = null;
+    let style = '';
+    if (!classic) $back = this.renderBackButton();else style = 'padding-bottom: 75px !important;';
     return (0, _preact.h)("div", {
-      class: cls
-    }, this.renderBackButton(), (0, _preact.h)(_AgentsAvatar.default, {
+      class: cls,
+      style: style
+    }, $back, (0, _preact.h)(_AgentsAvatar.default, {
       plugin: this.props.plugin,
       store: this.props.store,
       mode: "secondary",

package/compiled_src/chatbox/Widget.js

@@ -585,7 +585,7 @@ class Widget extends _common.Com {
     let convoM = this.props.store.matchConvo('*');
     var convos = _index.default.map(convoM, convo => this.props.store.matchConvo(convo.id));
     convos = _index.default.filter(convos, convo => !!convo);
-    convos = _index.default.orderBy(convos, 'actived', 'desc');
+    convos = _index.default.orderByF(convos, convo => _index.default.get(convo, 'last_message_sent.created', convo.actived), 'desc');
     var $convos = _index.default.map(convos, convo => {
       let ags = _index.default.filter(convo.members, m => {
         return (m.type === 'agent' || m.type === 'bot') && m.membership === 'active';

package/compiled_src/store/api.js

@@ -71,6 +71,7 @@ class _default {
         type: file.type
       });
       if (error) return {
+        body: signed,
         error
       };
       let contentType = file.type || 'application/octet-stream';
@@ -88,6 +89,7 @@ class _default {
         account_id: this.accid
       }));
       if (error) return {
+        body,
         error
       };
       return {

package/compiled_src/store/store.js

@@ -748,9 +748,13 @@ class Store {
     await this.convoGate.entry();
     await flow.map(files, 1, async att => {
       const {
+        body,
         url,
         error
       } = await this.api.uploadToS3(att._file);
+      if (_index.default.get(body, 'code') == 'invalid_field_size') {
+        event._error_message = 'cannot_send_too_big_file';
+      }
       event._error = error;
       att.url = url;
     });

package/compiled_src/util/common.js

@@ -38,6 +38,7 @@ exports.noop = noop;
 exports.norm = norm;
 exports.offsetToMin = offsetToMin;
 exports.orderBy = orderBy;
+exports.orderByF = orderByF;
 exports.parseJSON = parseJSON;
 exports.preloadImg = preloadImg;
 exports.preloadWebfonts = preloadWebfonts;
@@ -342,6 +343,18 @@ function orderBy(a, k, d) {
   });
   return clone;
 }
+function orderByF(a, f, d) {
+  var clone = [];
+  each(a, v => clone.push(v));
+  clone.sort((i, j) => {
+    let ik = f(i);
+    let jk = f(j);
+    if (ik === jk) return 0;
+    var r = ik < jk ? -1 : 1;
+    return d === 'desc' ? -r : r;
+  });
+  return clone;
+}
 function isPhone(phone) {
   var re = /^[\+]?[(]?[0-9]{2,3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4,6}$/im;
   return re.test(String(phone));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.25",
+	"version": "4.1.27",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -32,8 +32,8 @@
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
 		"prettier": "^2.8.4",
-		"puppeteer": "^19.7.2",
-		"webpack": "^5.75.0",
+		"puppeteer": "^19.7.3",
+		"webpack": "^5.76.0",
 		"webpack-bundle-analyzer": "^4.8.0",
 		"webpack-cli": "^5.0.1",
 		"webpack-dev-server": "^4.11.1"

package/src/chatbox/Event.js

@@ -182,9 +182,11 @@ export default class Event extends Com {
 
 		let $error = null
 		if (ev._error && ev.type === 'message_sent') {
+			let msg = this.props.t('error_send_message')
+			if (ev._error_message) msg = this.props.t(ev._error_message)
 			$error = (
 				<a class='message_error' src='javascript:;' onClick={(e) => this.resendMessage()}>
-					<div class='message_error__text'>{this.props.t('error_send_message')}</div>
+					<div class='message_error__text'>{msg}</div>
 					<div class='message_error__icon' />
 				</a>
 			)

package/src/chatbox/Header.js

@@ -15,30 +15,29 @@ export default class Header extends Com {
 		let cls = 'widget-header'
 		let renderSocial = false
 		let renderTeam = false
-		let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed'
-
 		// expaned header
 		let accSetting = this.props.plugin.chatbox || {}
 		let layout = sb.get(accSetting, 'header.layout')
+		let renderCollapsed = this.props.view !== 'list' && headerMode === 'collapsed'
+		let renderClassic = !renderCollapsed && layout === 'classic'
 
-		if (renderCollapsed) {
+		if (renderCollapsed || layout == 'classic') {
 			cls += ' widget-header--collapsed'
 		} else {
 			cls += ' widget-header--convo-expanded'
 			renderSocial = layout === 'social'
-			renderTeam = !renderSocial
+			renderTeam = !(renderSocial || renderClassic)
 		}
-
 		return (
 			<div class={cls}>
-				{this.renderCollapsedHeader(renderCollapsed)}
+				{this.renderCollapsedHeader(renderCollapsed || renderClassic, renderClassic)}
 				{this.renderSocial(renderSocial)}
 				{this.renderTeam(renderTeam)}
 			</div>
 		)
 	}
 
-	renderCollapsedHeader(show) {
+	renderCollapsedHeader(show, classic) {
 		let accSetting = this.props.plugin.chatbox || {}
 		let acc = this.props.store.matchAccount() || {}
 		let state = acc.is_online ? this.props.t('agent_online') : this.props.t('agent_offline')
@@ -48,9 +47,13 @@ export default class Header extends Com {
 		let cls = 'widget-header--inner widget-header--inner--collapsed'
 		if (!show) cls += ' widget-header--inner--hidden'
 
+		let $back = null
+		let style = ''
+		if (!classic) $back = this.renderBackButton()
+		else style = 'padding-bottom: 75px !important;'
 		return (
-			<div class={cls}>
-				{this.renderBackButton()}
+			<div class={cls} style={style}>
+				{$back}
 				<AgentsAvatar plugin={this.props.plugin} store={this.props.store} mode='secondary' agent_ids={agentIdsJoined} />
 				<div class='widget-header--title-container'>
 					<div class='widget-header--title'>{this.getTitle()}</div>

package/src/chatbox/Widget.js

@@ -586,7 +586,7 @@ export default class Widget extends Com {
 		let convoM = this.props.store.matchConvo('*')
 		var convos = sb.map(convoM, (convo) => this.props.store.matchConvo(convo.id))
 		convos = sb.filter(convos, (convo) => !!convo)
-		convos = sb.orderBy(convos, 'actived', 'desc')
+		convos = sb.orderByF(convos, (convo) => sb.get(convo, 'last_message_sent.created', convo.actived), 'desc')
 
 		var $convos = sb.map(convos, (convo) => {
 			let ags = sb.filter(convo.members, (m) => {

package/src/store/api.js

@@ -252,7 +252,7 @@ export default class {
 			size: file.size,
 			type: file.type,
 		})
-		if (error) return {error}
+		if (error) return {body: signed, error}
 
 		let contentType = file.type || 'application/octet-stream'
 		;({error} = await ajax.setContentType(contentType).put(signed.signed_url, file))
@@ -261,7 +261,7 @@ export default class {
 		// finish uploading
 		let body
 		;({body, error} = await this.apireq.post(`/accounts/${this.accid}/files/${signed.id}`, {account_id: this.accid}))
-		if (error) return {error}
+		if (error) return {body, error}
 
 		return {url: this.FileURL + body.url}
 	}

package/src/store/store.js

@@ -903,7 +903,10 @@ export default class Store {
 		// upload file first
 
 		await flow.map(files, 1, async (att) => {
-			const {url, error} = await this.api.uploadToS3(att._file)
+			const {body, url, error} = await this.api.uploadToS3(att._file)
+			if (sb.get(body, 'code') == 'invalid_field_size') {
+				event._error_message = 'cannot_send_too_big_file'
+			}
 			event._error = error
 			att.url = url
 		})

package/src/util/common.js

@@ -313,6 +313,19 @@ export function orderBy(a, k, d) {
 	return clone
 }
 
+export function orderByF(a, f, d) {
+	var clone = []
+	each(a, (v) => clone.push(v))
+	clone.sort((i, j) => {
+		let ik = f(i)
+		let jk = f(j)
+		if (ik === jk) return 0
+		var r = ik < jk ? -1 : 1
+		return d === 'desc' ? -r : r
+	})
+	return clone
+}
+
 export function isPhone(phone) {
 	var re = /^[\+]?[(]?[0-9]{2,3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4,6}$/im
 	return re.test(String(phone))