@subiz/widget-v4 4.1.26 → 4.1.27

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/package.json

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

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>