@subiz/widget-v4 4.1.70 → 4.1.71

package/compiled_src/chatbox/AgentsAvatar.js

@@ -3,142 +3,136 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = AgentsAvatar;
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class AgentsAvatar extends _common.Com {
-  constructor(props) {
-    super(props);
+function AgentsAvatar(props) {
+  let accountSetting = props.plugin.chatbox;
+  let acc = props.store.matchAccount() || {};
+  var tooltippos = props.tooltipPos || 'bottom';
+  var mode = props.mode || 'primary';
+  if (accountSetting && accountSetting.hide_agent_profile) {
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0, _preact.h)("img", {
+      width: 35,
+      height: 35,
+      alt: "agent avatar left",
+      class: "avatar group-avatar--agent-left",
+      src: props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
+    })));
   }
-  render() {
-    let accountSetting = this.props.plugin.chatbox;
-    let acc = this.props.store.matchAccount() || {};
-    var tooltippos = this.props.tooltipPos || 'bottom';
-    var mode = this.props.mode || 'primary';
-    if (accountSetting && accountSetting.hide_agent_profile) {
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
-      })));
-    }
-    let agentM = this.props.store.matchAgent('*');
-    var agents = _index.default.map(this.props.agent_ids, id => agentM[id]);
-    if (this.props.agent_ids === undefined || _index.default.size(this.props.agent_ids) === 0) {
-      var agids = _index.default.get(accountSetting, 'header.agent_ids', []);
-      agids = _index.default.filter(agids, id => !!agentM[id]);
-      if (agids.length !== 0) {
-        agents = _index.default.map(agids, id => agentM[id]);
-      } else {
-        agents = _index.default.filter(agentM, agent => agent.type === 'agent');
-      }
-    }
-    agents = _index.default.filter(agents, ag => !!ag);
-    if (agents.length === 0) {
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
-      })));
-    }
-    if (agents.length === 1) {
-      var agent = agents[0];
-      var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left';
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": agent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        class: `avatar ${groupClass}`,
-        alt: "agent avatar",
-        src: this.props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })));
-    }
-    if (agents.length === 2) {
-      let leftAgent = agents[0];
-      let rightAgent = agents[1];
-      return (0, _preact.h)("div", {
-        class: `group-avatar group-avatar--${mode}`
-      }, (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": leftAgent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        width: 35,
-        height: 35,
-        alt: "agent avatar left",
-        class: "avatar group-avatar--agent-left",
-        src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })), (0, _preact.h)("div", {
-        class: "d-inline-block pos-relative",
-        "data-tooltip": rightAgent.fullname || acc.name,
-        "data-tooltip-position": tooltippos
-      }, (0, _preact.h)("img", {
-        alt: "agent avatar right",
-        width: 35,
-        height: 35,
-        class: "avatar group-avatar--agent-right",
-        src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-      })));
+  let agentM = props.store.matchAgent('*');
+  var agents = _index.default.map(props.agent_ids, id => agentM[id]);
+  if (props.agent_ids === undefined || _index.default.size(props.agent_ids) === 0) {
+    var agids = _index.default.get(accountSetting, 'header.agent_ids', []);
+    agids = _index.default.filter(agids, id => !!agentM[id]);
+    if (agids.length !== 0) {
+      agents = _index.default.map(agids, id => agentM[id]);
+    } else {
+      agents = _index.default.filter(agentM, agent => agent.type === 'agent');
     }
-    let leftAgent = agents[0];
-    let middleAgent = agents[1];
-    let rightAgent = agents[2];
+  }
+  agents = _index.default.filter(agents, ag => !!ag);
+  if (agents.length === 0) {
     return (0, _preact.h)("div", {
       class: `group-avatar group-avatar--${mode}`
     }, (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
-      "data-tooltip": leftAgent.fullname || acc.name,
+      "data-tooltip": acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
       width: 35,
       height: 35,
       alt: "agent avatar left",
       class: "avatar group-avatar--agent-left",
-      src: this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-    })), (0, _preact.h)("div", {
+      src: props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')
+    })));
+  }
+  if (agents.length === 1) {
+    var agent = agents[0];
+    var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left';
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
+      class: "d-inline-block pos-relative",
+      "data-tooltip": agent.fullname || acc.name,
+      "data-tooltip-position": tooltippos
+    }, (0, _preact.h)("img", {
+      width: 35,
+      height: 35,
+      class: `avatar ${groupClass}`,
+      alt: "agent avatar",
+      src: props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')
+    })));
+  }
+  if (agents.length === 2) {
+    let leftAgent = agents[0];
+    let rightAgent = agents[1];
+    return (0, _preact.h)("div", {
+      class: `group-avatar group-avatar--${mode}`
+    }, (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
-      "data-tooltip": middleAgent.fullname || acc.name,
+      "data-tooltip": leftAgent.fullname || acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
-      alt: "agent avatar middle",
       width: 35,
       height: 35,
-      class: "avatar group-avatar--agent-middle",
-      src: this.props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+      alt: "agent avatar left",
+      class: "avatar group-avatar--agent-left",
+      src: props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
     })), (0, _preact.h)("div", {
       class: "d-inline-block pos-relative",
       "data-tooltip": rightAgent.fullname || acc.name,
       "data-tooltip-position": tooltippos
     }, (0, _preact.h)("img", {
+      alt: "agent avatar right",
       width: 35,
       height: 35,
-      alt: "agent avatar right",
       class: "avatar group-avatar--agent-right",
-      src: this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+      src: props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
     })));
   }
-}
-exports.default = AgentsAvatar;
+  let leftAgent = agents[0];
+  let middleAgent = agents[1];
+  let rightAgent = agents[2];
+  return (0, _preact.h)("div", {
+    class: `group-avatar group-avatar--${mode}`
+  }, (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": leftAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    width: 35,
+    height: 35,
+    alt: "agent avatar left",
+    class: "avatar group-avatar--agent-left",
+    src: props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })), (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": middleAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    alt: "agent avatar middle",
+    width: 35,
+    height: 35,
+    class: "avatar group-avatar--agent-middle",
+    src: props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })), (0, _preact.h)("div", {
+    class: "d-inline-block pos-relative",
+    "data-tooltip": rightAgent.fullname || acc.name,
+    "data-tooltip-position": tooltippos
+  }, (0, _preact.h)("img", {
+    width: 35,
+    height: 35,
+    alt: "agent avatar right",
+    class: "avatar group-avatar--agent-right",
+    src: props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
+  })));
+}

package/compiled_src/chatbox/ButtonAttachments.js

@@ -3,30 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = ButtonAttachments;
 var _Buttons = _interopRequireDefault(require("./Buttons.js"));
 var _index = _interopRequireDefault(require("../util/index.js"));
-var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class ButtonAttachments extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    let byType = _index.default.get(this.props.ev, 'by.type');
-    if (byType === 'user') return null;
-    let buttons = [];
-    let attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
-    _index.default.each(attachments, (att, i) => {
-      if (!att || _index.default.get(att, 'type') !== 'button') return;
-      _index.default.each(_index.default.get(att, 'buttons') || [], btn => buttons.push(btn));
-    });
-    return (0, _preact.h)(_Buttons.default, {
-      store: this.props.store,
-      buttons: buttons,
-      t: this.props.t
-    });
-  }
-}
-exports.default = ButtonAttachments;
+function ButtonAttachments(props) {
+  let byType = _index.default.get(props.ev, 'by.type');
+  if (byType === 'user') return null;
+  let buttons = [];
+  let attachments = _index.default.get(props.ev, 'data.message.attachments', []);
+  _index.default.each(attachments, (att, i) => {
+    if (!att || _index.default.get(att, 'type') !== 'button') return;
+    _index.default.each(_index.default.get(att, 'buttons') || [], btn => buttons.push(btn));
+  });
+  return (0, _preact.h)(_Buttons.default, {
+    store: props.store,
+    buttons: buttons,
+    t: props.t
+  });
+}

package/compiled_src/chatbox/Buttons.js

@@ -3,49 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = Buttons;
 var _index = _interopRequireDefault(require("../util/index.js"));
-var _common = require("../common.js");
 var _preact = require("preact");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-class Buttons extends _common.Com {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    if (_index.default.size(this.props.buttons) === 0) return null;
-    var $buttons = _index.default.map(this.props.buttons, (button, index) => {
-      if (button.type === 'call_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: 'tel:' + button.phone_number,
-          key: index,
-          title: button.title
-        }, this.props.t.i18n(button.i18n_title) || button.title);
-      }
-      if (button.type === 'url_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: button.url,
-          target: "_blank",
-          key: index,
-          title: button.title
-        }, this.props.t.i18n(button.i18n_title) || button.title || button.url);
-      }
-      if (button.type === 'postback_button') {
-        return (0, _preact.h)("a", {
-          class: "url-button-attachment",
-          href: "javascript:;",
-          onClick: _ => this.props.onSelect(button)
-        }, this.props.t.i18n(button.i18n_title) || button.title);
-      }
-      if (button.type === 'widget_ask_desktop_notify_button') return null;
-      if (button.type === 'widget_ask_contact_info_button') return null;
-      return null;
-    });
-    return (0, _preact.h)("div", {
-      class: "button-attachments"
-    }, $buttons);
-  }
-}
-exports.default = Buttons;
+function Buttons(props) {
+  if (_index.default.size(props.buttons) === 0) return null;
+  var $buttons = _index.default.map(props.buttons, (button, index) => {
+    if (button.type === 'call_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: 'tel:' + button.phone_number,
+        key: index,
+        title: button.title
+      }, props.t.i18n(button.i18n_title) || button.title);
+    }
+    if (button.type === 'url_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: button.url,
+        target: "_blank",
+        key: index,
+        title: button.title
+      }, props.t.i18n(button.i18n_title) || button.title || button.url);
+    }
+    if (button.type === 'postback_button') {
+      return (0, _preact.h)("a", {
+        class: "url-button-attachment",
+        href: "javascript:;",
+        onClick: _ => props.onSelect(button)
+      }, props.t.i18n(button.i18n_title) || button.title);
+    }
+    if (button.type === 'widget_ask_desktop_notify_button') return null;
+    if (button.type === 'widget_ask_contact_info_button') return null;
+    return null;
+  });
+  return (0, _preact.h)("div", {
+    class: "button-attachments"
+  }, $buttons);
+}

package/compiled_src/chatbox/ChatButton.js

@@ -117,7 +117,11 @@ class ChatButton extends _common.Com {
     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;
-    if (!text || !greeting.enabled) {
+    let enabled = greeting.enabled;
+    if (this.props.store.isMobile()) {
+      enabled = enabled && !_index.default.get(greeting, 'mobile_disabled');
+    }
+    if (!text || !enabled) {
       this.setState({
         previewEvent: {}
       });

package/compiled_src/chatbox/Rating.js

@@ -145,7 +145,7 @@ class Rating extends _common.Com {
     let foundUser = false;
     _index.default.map(this.props.store.listEvents(this.props.cid), ev => {
       if (!ev || !ev.by) return;
-      if (ev.by.type == 'user') foundUser = true;
+      if (ev.by.type == 'user' && ev.type == 'message_sent') foundUser = true;
       if (ev.type === 'conversation_state_updated' && _index.default.get(ev, 'data.conversation.state') === 'ended') {
         ended = ev;
       }

package/package.json

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

package/src/chatbox/AgentsAvatar.js

@@ -3,161 +3,98 @@ import {Com} from '../common.js'
 import {h} from 'preact'
 
 //  ['mode', 'tooltipPos', 'agent_ids', 'border'],
-export default class AgentsAvatar extends Com {
-	constructor(props) {
-		super(props)
-	}
-
-	render() {
-		let accountSetting = this.props.plugin.chatbox
-		let acc = this.props.store.matchAccount() || {}
-		var tooltippos = this.props.tooltipPos || 'bottom'
-		var mode = this.props.mode || 'primary'
-
-		if (accountSetting && accountSetting.hide_agent_profile) {
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
-				</div>
-			)
-		}
-
-		let agentM = this.props.store.matchAgent('*')
-		var agents = sb.map(this.props.agent_ids, (id) => agentM[id])
-		if (this.props.agent_ids === undefined || sb.size(this.props.agent_ids) === 0) {
-			var agids = sb.get(accountSetting, 'header.agent_ids', [])
-			agids = sb.filter(agids, (id) => !!agentM[id])
-			if (agids.length !== 0) {
-				agents = sb.map(agids, (id) => agentM[id])
-			} else {
-				agents = sb.filter(agentM, (agent) => agent.type === 'agent')
-			}
-		}
+export default function AgentsAvatar(props) {
+	let accountSetting = props.plugin.chatbox
+	let acc = props.store.matchAccount() || {}
+	var tooltippos = props.tooltipPos || 'bottom'
+	var mode = props.mode || 'primary'
 
-		agents = sb.filter(agents, (ag) => !!ag)
-		if (agents.length === 0) {
-			// use account avatar
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={this.props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
-						/>
-					</div>
+	if (accountSetting && accountSetting.hide_agent_profile) {
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
+			</div>
+		)
+	}
 
-		// 1 agent
-		if (agents.length === 1) {
-			var agent = agents[0]
-			var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={agent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							class={`avatar ${groupClass}`}
-							alt='agent avatar'
-							src={this.props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
-						/>
-					</div>
-				</div>
-			)
+	let agentM = props.store.matchAgent('*')
+	var agents = sb.map(props.agent_ids, (id) => agentM[id])
+	if (props.agent_ids === undefined || sb.size(props.agent_ids) === 0) {
+		var agids = sb.get(accountSetting, 'header.agent_ids', [])
+		agids = sb.filter(agids, (id) => !!agentM[id])
+		if (agids.length !== 0) {
+			agents = sb.map(agids, (id) => agentM[id])
+		} else {
+			agents = sb.filter(agentM, (agent) => agent.type === 'agent')
 		}
+	}
 
-		// 2 agent
-		if (agents.length === 2) {
-			let leftAgent = agents[0]
-			let rightAgent = agents[1]
-			return (
-				<div class={`group-avatar group-avatar--${mode}`}>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={leftAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							width={35}
-							height={35}
-							alt='agent avatar left'
-							class='avatar group-avatar--agent-left'
-							src={
-								this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
-					<div
-						class='d-inline-block pos-relative'
-						data-tooltip={rightAgent.fullname || acc.name}
-						data-tooltip-position={tooltippos}
-					>
-						<img
-							alt='agent avatar right'
-							width={35}
-							height={35}
-							class='avatar group-avatar--agent-right'
-							src={
-								this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-							}
-						/>
-					</div>
+	agents = sb.filter(agents, (ag) => !!ag)
+	if (agents.length === 0) {
+		// use account avatar
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
+				<div class='d-inline-block pos-relative' data-tooltip={acc.name} data-tooltip-position={tooltippos}>
+					<img
+						width={35}
+						height={35}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(acc.logo_url) || require('../../assets/img/image_default.png')}
+					/>
 				</div>
-			)
-		}
-
-		// >=3 agent
+			</div>
+		)
+	}
 
-		let leftAgent = agents[0]
-		let middleAgent = agents[1]
-		let rightAgent = agents[2]
+	// 1 agent
+	if (agents.length === 1) {
+		var agent = agents[0]
+		var groupClass = mode === 'primary' ? 'group-avatar--agent-middle' : 'group-avatar--agent-left'
 		return (
 			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={leftAgent.fullname || acc.name}
+					data-tooltip={agent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
 						width={35}
 						height={35}
-						alt='agent avatar left'
-						class='avatar group-avatar--agent-left'
-						src={
-							this.props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						class={`avatar ${groupClass}`}
+						alt='agent avatar'
+						src={props.store.replaceFileUrl(agent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
+			</div>
+		)
+	}
+
+	// 2 agent
+	if (agents.length === 2) {
+		let leftAgent = agents[0]
+		let rightAgent = agents[1]
+		return (
+			<div class={`group-avatar group-avatar--${mode}`}>
 				<div
 					class='d-inline-block pos-relative'
-					data-tooltip={middleAgent.fullname || acc.name}
+					data-tooltip={leftAgent.fullname || acc.name}
 					data-tooltip-position={tooltippos}
 				>
 					<img
-						alt='agent avatar middle'
 						width={35}
 						height={35}
-						class='avatar group-avatar--agent-middle'
-						src={
-							this.props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						alt='agent avatar left'
+						class='avatar group-avatar--agent-left'
+						src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 				<div
@@ -166,16 +103,63 @@ export default class AgentsAvatar extends Com {
 					data-tooltip-position={tooltippos}
 				>
 					<img
+						alt='agent avatar right'
 						width={35}
 						height={35}
-						alt='agent avatar right'
 						class='avatar group-avatar--agent-right'
-						src={
-							this.props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')
-						}
+						src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
 					/>
 				</div>
 			</div>
 		)
 	}
+
+	// >=3 agent
+
+	let leftAgent = agents[0]
+	let middleAgent = agents[1]
+	let rightAgent = agents[2]
+	return (
+		<div class={`group-avatar group-avatar--${mode}`}>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={leftAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar left'
+					class='avatar group-avatar--agent-left'
+					src={props.store.replaceFileUrl(leftAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={middleAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					alt='agent avatar middle'
+					width={35}
+					height={35}
+					class='avatar group-avatar--agent-middle'
+					src={props.store.replaceFileUrl(middleAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+			<div
+				class='d-inline-block pos-relative'
+				data-tooltip={rightAgent.fullname || acc.name}
+				data-tooltip-position={tooltippos}
+			>
+				<img
+					width={35}
+					height={35}
+					alt='agent avatar right'
+					class='avatar group-avatar--agent-right'
+					src={props.store.replaceFileUrl(rightAgent.avatar_url) || require('../../assets/img/default_avatar.png')}
+				/>
+			</div>
+		</div>
+	)
 }

package/src/chatbox/ButtonAttachments.js

@@ -1,26 +1,19 @@
 import Buttons from './Buttons.js'
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {h} from 'preact'
 
-export default class ButtonAttachments extends Com {
-	constructor (props) {
-		super(props)
-	}
+export default function ButtonAttachments(props) {
+	// dont support user sent button yet
+	let byType = sb.get(props.ev, 'by.type')
+	if (byType === 'user') return null
 
-	render () {
-		// dont support user sent button yet
-		let byType = sb.get(this.props.ev, 'by.type')
-		if (byType === 'user') return null
+	// filter out all button
+	let buttons = []
+	let attachments = sb.get(props.ev, 'data.message.attachments', [])
+	sb.each(attachments, (att, i) => {
+		if (!att || sb.get(att, 'type') !== 'button') return
+		sb.each(sb.get(att, 'buttons') || [], (btn) => buttons.push(btn))
+	})
 
-		// filter out all button
-		let buttons = []
-		let attachments = sb.get(this.props.ev, 'data.message.attachments', [])
-		sb.each(attachments, (att, i) => {
-			if (!att || sb.get(att, 'type') !== 'button') return
-			sb.each(sb.get(att, 'buttons') || [], btn => buttons.push(btn))
-		})
-
-		return <Buttons store={this.props.store} buttons={buttons} t={this.props.t}/>
-	}
+	return <Buttons store={props.store} buttons={buttons} t={props.t} />
 }

package/src/chatbox/Buttons.js

@@ -1,44 +1,36 @@
 import sb from '../util/index.js'
-import {Com} from '../common.js'
 import {h} from 'preact'
 
-export default class Buttons extends Com {
-	constructor(props) {
-		super(props)
-	}
+export default function Buttons(props) {
+	if (sb.size(props.buttons) === 0) return null
+	var $buttons = sb.map(props.buttons, (button, index) => {
+		if (button.type === 'call_button') {
+			return (
+				<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-	render() {
-		if (sb.size(this.props.buttons) === 0) return null
-		var $buttons = sb.map(this.props.buttons, (button, index) => {
-			if (button.type === 'call_button') {
-				return (
-					<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
+		if (button.type === 'url_button') {
+			return (
+				<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
+					{props.t.i18n(button.i18n_title) || button.title || button.url}
+				</a>
+			)
+		}
 
-			if (button.type === 'url_button') {
-				return (
-					<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
-						{this.props.t.i18n(button.i18n_title) || button.title || button.url} 
-					</a>
-				)
-			}
+		if (button.type === 'postback_button') {
+			return (
+				<a class='url-button-attachment' href='javascript:;' onClick={(_) => props.onSelect(button)}>
+					{props.t.i18n(button.i18n_title) || button.title}
+				</a>
+			)
+		}
 
-			if (button.type === 'postback_button') {
-				return (
-					<a class='url-button-attachment' href='javascript:;' onClick={(_) => this.props.onSelect(button)}>
-						{this.props.t.i18n(button.i18n_title) || button.title}
-					</a>
-				)
-			}
-
-			if (button.type === 'widget_ask_desktop_notify_button') return null
-			if (button.type === 'widget_ask_contact_info_button') return null
-			return null
-		})
-
-		return <div class='button-attachments'>{$buttons}</div>
-	}
+		if (button.type === 'widget_ask_desktop_notify_button') return null
+		if (button.type === 'widget_ask_contact_info_button') return null
+		return null
+	})
+	return <div class='button-attachments'>{$buttons}</div>
 }

package/src/chatbox/ChatButton.js

@@ -128,7 +128,12 @@ export default class ChatButton extends Com {
 
 		let greeting = sb.get(accountSetting, 'greeting', {})
 		let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
-		if (!text || !greeting.enabled) {
+
+		let enabled = greeting.enabled
+		if (this.props.store.isMobile()) {
+			enabled = enabled && !sb.get(greeting, 'mobile_disabled')
+		}
+		if (!text || !enabled) {
 			this.setState({previewEvent: {}})
 			return
 		}

package/src/chatbox/Rating.js

@@ -121,7 +121,7 @@ export default class Rating extends Com {
 		let foundUser = false
 		sb.map(this.props.store.listEvents(this.props.cid), (ev) => {
 			if (!ev || !ev.by) return
-			if (ev.by.type == 'user') foundUser = true
+			if (ev.by.type == 'user' && ev.type == 'message_sent') foundUser = true
 			if (ev.type === 'conversation_state_updated' && sb.get(ev, 'data.conversation.state') === 'ended') {
 				ended = ev
 			}