@subiz/widget-v4 4.0.88 → 4.0.90

package/assets/less/chatbox.less

@@ -97,6 +97,8 @@ body div#sbz92 {
 	}
 
 	img {
+		overflow: hidden;
+		flex-shrink: 0;
 		background-repeat: no-repeat;
 		background-position: center;
 		background-size: 100% 100%;

package/compiled_src/chatbox/Event.js

@@ -128,7 +128,7 @@ class Event extends _common.Com {
 
     var uri = acc.logo_url || require('../../assets/img/image_default.png');
 
-    if (true || _index.default.get(this.props, 'chatbox.hide_agent_profile')) {
+    if (_index.default.get(this.props, 'chatbox.hide_agent_profile')) {
       return (0, _preact.h)("div", {
         class: "message-sender"
       }, (0, _preact.h)("img", {
@@ -142,7 +142,7 @@ class Event extends _common.Com {
 
     let agentM = this.props.store.matchAgent('*');
 
-    if (byid !== 'system' || bytype !== 'dummy') {
+    if (byid !== 'system' && bytype !== 'dummy' && bytype !== 'workflow') {
       uri = _index.default.get(agentM[byid], 'avatar_url') || acc.logo_url || require('../../assets/img/default_avatar.png');
     }
 
@@ -330,11 +330,10 @@ class Event extends _common.Com {
 
     let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id'));
 
-    if (byid === 'system' || bytype === 'dummy') return 'system';
-    let user = this.props.store.matchUser();
+    if (bytype === 'user') return _index.default.getUserDisplayName(this.props.store.matchUser());
     let acc = this.props.store.matchAccount();
-    if (bytype === 'user') return _index.default.getUserDisplayName(user);
     if (bytype === 'agent') return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+    if (byid === 'system' || bytype === 'dummy' || bytype === 'workflow') return acc.name || 'system';
     return '';
   }
 

package/compiled_src/chatbox/TextMessage.js

@@ -100,19 +100,86 @@ class TextMessage extends _common.Com {
   }
 
   renderDelta() {
-    let deltas = _index.default.get(this.props.ev, 'data.message.quill_delta');
+    let deltas = _index.default.get(this.props.ev, 'data.message.quill_delta') || _index.default.get(this.props.ev, 'data.message.text');
 
-    deltas = _index.default.parseJSON(deltas) || {};
-    deltas = deltas.ops || [];
+    let quilldeltas = _index.default.parseJSON(deltas) || {};
+    quilldeltas = trimQuillDelta(quilldeltas);
+    if (!quilldeltas || _index.default.size(quilldeltas.ops) === 0) return null;
 
-    let isMarkdown = _index.default.find(deltas, delta => _index.default.get(delta, 'attributes.bold') || _index.default.get(delta, 'attributes.italic') || _index.default.get(delta, 'attributes.underline') || _index.default.get(delta, 'insert.emoji'));
+    let $deltas = _index.default.map(quilldeltas.ops, delta => {
+      let html = '';
+      let insert = delta.insert;
+      let attributes = delta.attributes;
 
-    if (isMarkdown) {
-      var text = deltaToMarkdown(deltas);
-      return this.renderMarkdown(text);
+      if (insert.dynamicField) {
+        return _index.default.get(insert, 'dynamicField.text', '');
+      }
+
+      if (insert.mention) {
+        if (insert.mention.id == '*' || insert.mention.id == 'all') {
+          return (0, _preact.h)("span", {
+            class: "mention"
+          }, "@", this.$t('all'));
+        }
+
+        let ag = store.matchAgent(insert.mention.id);
+
+        let name = _index.default.getAgentDisplayName(ag, insert.mention.fullname);
+
+        return (0, _preact.h)("span", {
+          class: "mention",
+          "data-agent-id": ag.id,
+          "data-agent-fullname": name
+        }, "@", name);
+      }
+
+      if (insert.emoji) return (0, _preact.h)(_Emoji.default, {
+        emojiCode: `:${insert.emoji}:`
+      });
+
+      if (typeof insert === 'string') {
+        let $tags = _index.default.extractText(insert).map((tag, i) => {
+          if (tag.type === 'link') {
+            return (0, _preact.h)("a", {
+              href: absLink(tag.text),
+              target: "_blank"
+            }, tag.text);
+          }
+
+          return tag.text;
+        });
+
+        if (attributes) {
+          if (attributes.italic && attributes.bold) return (0, _preact.h)("span", {
+            style: "font-weight: bold; font-style: italic"
+          }, $tags);
+          if (attributes.italic) return (0, _preact.h)("span", {
+            style: "font-style: italic"
+          }, $tags);
+          if (attributes.bold) return (0, _preact.h)("span", {
+            style: "font-weight: bold"
+          }, $tags);
+        }
+
+        return (0, _preact.h)("span", null, $tags);
+      }
+
+      return null;
+    });
+
+    let byType = _index.default.get(this.ev, 'by.type');
+
+    if (_index.default.size($deltas) === 0) return null;
+
+    if (byType === 'agent') {
+      return (0, _preact.h)("div", {
+        class: "message-agent message-text--agent"
+      }, $deltas);
     }
 
-    return this.renderPlainText();
+    return (0, _preact.h)("div", {
+      class: "message-user message-text--user"
+    }, $deltas);
   }
 
   renderMarkdown(text) {
@@ -187,4 +254,32 @@ const emojiCodes = {
   tired: '😩',
   surprised: '😮',
   wink: '😉'
-};
+};
+
+function trimQuillDelta(delta) {
+  if (!delta) return delta;
+  if (!delta.ops || !delta.ops.length) return delta;
+  let last = delta.ops[delta.ops.length - 1];
+  if (typeof last.insert != 'string') return delta;
+  let insert = last.insert.trim();
+
+  if (insert) {
+    if (last.insert != insert) {
+      let newops = delta.ops.slice();
+      let last = newops.pop();
+      last.insert = insert;
+      newops.push(last);
+      return {
+        ops: newops
+      };
+    }
+
+    return delta;
+  }
+
+  let newops = delta.ops.slice();
+  newops.pop();
+  return trimQuillDelta({
+    ops: newops
+  });
+}

package/compiled_src/chatbox/Widget.js

@@ -54,6 +54,14 @@ class Widget extends _common.Com {
     _defineProperty(this, "msgInput", (0, _preact.createRef)());
 
     _defineProperty(this, "sendMessage", async message => {
+      let hasPostback = _index.default.find(message.attachments, att => att.type === 'postback');
+
+      if (this.isFormRequired() && hasPostback) {
+        this.onStartConvoClick();
+        this.fillQuickReplyToQuestion(message);
+        return;
+      }
+
       let text = message.text;
 
       if (!this.props.cid) {
@@ -115,7 +123,8 @@ class Widget extends _common.Com {
       clickedJoin: false,
       formData: {},
       showOrder: false,
-      order_id: ''
+      order_id: '',
+      quickReplyMessage: {}
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -133,7 +142,8 @@ class Widget extends _common.Com {
     if (prevProp.cid !== this.props.cid) {
       this.closeOrder();
       this.setState({
-        clickedJoin: false
+        clickedJoin: false,
+        quickReplyMessage: {}
       });
       setTimeout(() => {
         this.events && this.events.focus();
@@ -145,6 +155,15 @@ class Widget extends _common.Com {
   }
 
   shouldShowForm() {
+    let form;
+    let accountSetting = this.props.plugin.chatbox || {};
+    let acc = this.props.store.matchAccount() || {};
+    if (_index.default.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form;
+
+    let offlineEnabled = _index.default.get(accountSetting, 'offline_form.enabled');
+
+    if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form;
+    if (!this.hasSentMessage(this.props.cid) && form && (_index.default.size(form.groups) || form.group_required)) return true;
     let formRequired = this.isFormRequired();
     return formRequired && !this.props.cid || formRequired && this.props.cid && this.state.clickedJoin;
   }
@@ -260,9 +279,13 @@ class Widget extends _common.Com {
           fields: [{
             key: 'to_agent_group',
             value: _index.default.stringify(groupid)
-          }]
+          }],
+          attachments: this.state.quickReplyMessage.attachments
         }
       });
+      this.setState({
+        quickReplyMessage: {}
+      });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
       return;
     }
@@ -308,7 +331,8 @@ class Widget extends _common.Com {
     });
     this.setState({
       creating: false,
-      clickedJoin: false
+      clickedJoin: false,
+      quickReplyMessage: {}
     });
     if (!this.props.store.isMobile()) this.focusInput();
   }
@@ -319,7 +343,8 @@ class Widget extends _common.Com {
       key: 'question',
       is_required: true,
       label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
-      type: 'text'
+      type: 'text',
+      value: this.state.quickReplyMessage.text
     };
     this.setState({
       formData
@@ -381,6 +406,7 @@ class Widget extends _common.Com {
     if (_index.default.size(this.state.formData) === 0) return null;
 
     let $fields = _index.default.map(this.state.formData, (field, key) => {
+      if (this.state.quickReplyMessage.text && key === 'question') return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
 
@@ -648,6 +674,19 @@ class Widget extends _common.Com {
     this.focusInput();
   }
 
+  fillQuickReplyToQuestion(message) {
+    let formData = this.state.formData;
+
+    if (formData) {
+      _index.default.set(formData, 'question.value', message.text);
+    }
+
+    this.setState({
+      formData,
+      quickReplyMessage: message
+    });
+  }
+
   createPostback(postback) {
     this.props.store.createPostback(this.props.cid, postback);
   }
@@ -718,7 +757,8 @@ class Widget extends _common.Com {
       cid: ''
     });
     this.setState({
-      clickedJoin: true
+      clickedJoin: true,
+      quickReplyMessage: {}
     });
   }
 
@@ -745,9 +785,8 @@ class Widget extends _common.Com {
     let formData = this.fillForm(form);
     let convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return true;
-    if (this.userHasSent(this.props.cid)) return false;
     if (convo.state && convo.state !== 'pending') delete formData.group;
-    return !!_index.default.find(formData, field => field.value == null || field.value === '');
+    return !!_index.default.find(formData, field => field.is_required && (field.value == null || field.value === ''));
   }
 
   renderConvoSummary(convo) {
@@ -868,6 +907,17 @@ class Widget extends _common.Com {
     return joined;
   }
 
+  hasSentMessage(cid) {
+    let convo = this.props.store.matchConvo(cid) || {};
+
+    let joined = _index.default.find(convo.members, mem => {
+      if (mem.type === 'bot') return true;
+      return mem.last_sent;
+    });
+
+    return joined;
+  }
+
   isOffline(acc, accSetting) {
     let enableWhen = _index.default.get(accSetting, 'offline_form.enable_when');
 

package/compiled_src/util/common.js

@@ -894,7 +894,7 @@ function checkRunConditions(freq, conds, lastrun, store) {
 
       case 'source':
         if (size(cond.sources) > 0) {
-          let source = store.matchTrafficSource();
+          let source = store.matchTrafficSource() || 'direct';
           if (!find(cond.sources, src => norm(src) === norm(source))) return false;
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.88",
+	"version": "4.0.90",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,28 +14,28 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.25.0",
+		"core-js": "^3.25.2",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.0.0",
 		"marked": "^4.1.0",
-		"preact": "^10.10.6"
+		"preact": "^10.11.0"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.18.10",
-		"@babel/core": "^7.18.13",
+		"@babel/core": "^7.19.1",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.18.10",
-		"@babel/preset-env": "^7.18.10",
+		"@babel/plugin-transform-react-jsx": "^7.19.0",
+		"@babel/preset-env": "^7.19.1",
 		"babel-loader": "^8.2.5",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
 		"prettier": "^2.7.1",
-		"puppeteer": "^15.4.0",
+		"puppeteer": "^17.1.3",
 		"webpack": "^5.74.0",
 		"webpack-bundle-analyzer": "^4.6.1",
 		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.10.1"
+		"webpack-dev-server": "^4.11.1"
 	}
 }

package/src/chatbox/Event.js

@@ -101,7 +101,7 @@ export default class Event extends Com {
 
 		let agentM = this.props.store.matchAgent('*')
 		// should replace with subiz logo
-		if (byid !== 'system' || bytype !== 'dummy') {
+		if (byid !== 'system' && bytype !== 'dummy' && bytype !== 'workflow') {
 			uri = sb.get(agentM[byid], 'avatar_url') || acc.logo_url || require('../../assets/img/default_avatar.png')
 		}
 
@@ -227,11 +227,10 @@ export default class Event extends Com {
 	getSenderName(ev) {
 		let bytype = sb.get(ev, 'by.type')
 		let byid = sb.get(ev, 'by.display_id', sb.get(ev, 'by.id'))
-		if (byid === 'system' || bytype === 'dummy') return 'system'
-		let user = this.props.store.matchUser()
+		if (bytype === 'user') return sb.getUserDisplayName(this.props.store.matchUser())
 		let acc = this.props.store.matchAccount()
-		if (bytype === 'user') return sb.getUserDisplayName(user)
 		if (bytype === 'agent') return sb.getAgentDisplayName(acc, this.props.store.matchAgent(byid))
+		if (byid === 'system' || bytype === 'dummy' || bytype === 'workflow') return acc.name || 'system'
 		return ''
 	}
 }

package/src/chatbox/TextMessage.js

@@ -65,22 +65,61 @@ export default class TextMessage extends Com {
 	}
 
 	renderDelta() {
-		let deltas = sb.get(this.props.ev, 'data.message.quill_delta')
-		deltas = sb.parseJSON(deltas) || {}
-		deltas = deltas.ops || []
-		let isMarkdown = sb.find(
-			deltas,
-			(delta) =>
-				sb.get(delta, 'attributes.bold') ||
-				sb.get(delta, 'attributes.italic') ||
-				sb.get(delta, 'attributes.underline') ||
-				sb.get(delta, 'insert.emoji'),
-		)
-		if (isMarkdown) {
-			var text = deltaToMarkdown(deltas)
-			return this.renderMarkdown(text)
+		let deltas = sb.get(this.props.ev, 'data.message.quill_delta') || sb.get(this.props.ev, 'data.message.text')
+		let quilldeltas = sb.parseJSON(deltas) || {}
+		// deltas = deltas.ops || []
+		quilldeltas = trimQuillDelta(quilldeltas)
+		if (!quilldeltas || sb.size(quilldeltas.ops) === 0) return null
+		let $deltas = sb.map(quilldeltas.ops, (delta) => {
+			let html = ''
+			let insert = delta.insert
+			let attributes = delta.attributes
+
+			if (insert.dynamicField) {
+				return sb.get(insert, 'dynamicField.text', '')
+			}
+			if (insert.mention) {
+				if (insert.mention.id == '*' || insert.mention.id == 'all') {
+					return <span class='mention'>@{this.$t('all')}</span>
+				}
+
+				let ag = store.matchAgent(insert.mention.id)
+				let name = sb.getAgentDisplayName(ag, insert.mention.fullname)
+				return (
+					<span class='mention' data-agent-id={ag.id} data-agent-fullname={name}>
+						@{name}
+					</span>
+				)
+			}
+			if (insert.emoji) return <Emoji emojiCode={`:${insert.emoji}:`} />
+			if (typeof insert === 'string') {
+				let $tags = sb.extractText(insert).map((tag, i) => {
+					if (tag.type === 'link') {
+						return (
+							<a href={absLink(tag.text)} target='_blank'>
+								{tag.text}
+							</a>
+						)
+					}
+					return tag.text
+				})
+
+				if (attributes) {
+					if (attributes.italic && attributes.bold)
+						return <span style='font-weight: bold; font-style: italic'>{$tags}</span>
+					if (attributes.italic) return <span style='font-style: italic'>{$tags}</span>
+					if (attributes.bold) return <span style='font-weight: bold'>{$tags}</span>
+				}
+				return <span>{$tags}</span>
+			}
+			return null
+		})
+		let byType = sb.get(this.ev, 'by.type')
+		if (sb.size($deltas) === 0) return null
+		if (byType === 'agent') {
+			return <div class='message-agent message-text--agent'>{$deltas}</div>
 		}
-		return this.renderPlainText()
+		return <div class='message-user message-text--user'>{$deltas}</div>
 	}
 
 	renderMarkdown(text) {
@@ -154,3 +193,31 @@ const emojiCodes = {
 	surprised: '😮',
 	wink: '😉',
 }
+
+function trimQuillDelta(delta) {
+	if (!delta) return delta
+	if (!delta.ops || !delta.ops.length) return delta
+	let last = delta.ops[delta.ops.length - 1]
+	if (typeof last.insert != 'string') return delta
+
+	let insert = last.insert.trim()
+	if (insert) {
+		if (last.insert != insert) {
+			// just fix the last item
+			let newops = delta.ops.slice()
+			// let last = sb.cloneDeep(newops.pop())
+			let last = newops.pop()
+			last.insert = insert
+			newops.push(last)
+			return {ops: newops}
+		}
+
+		// last item dont change, do nothing
+		return delta
+	}
+
+	// remove the last item
+	let newops = delta.ops.slice()
+	newops.pop()
+	return trimQuillDelta({ops: newops})
+}

package/src/chatbox/Widget.js

@@ -31,6 +31,8 @@ export default class Widget extends Com {
 			formData: {},
 			showOrder: false,
 			order_id: '',
+			// hot fix for prechat with bot quick reply
+			quickReplyMessage: {},
 		})
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
@@ -49,7 +51,7 @@ export default class Widget extends Com {
 
 		if (prevProp.cid !== this.props.cid) {
 			this.closeOrder()
-			this.setState({clickedJoin: false})
+			this.setState({clickedJoin: false, quickReplyMessage: {}})
 			// this.props.store.setLastview('chat', { cid: this.props.cid })
 			setTimeout(() => {
 				// focus Events then focus MessageInput
@@ -64,6 +66,17 @@ export default class Widget extends Com {
 	}
 
 	shouldShowForm() {
+		// always show form when ask agentgroup
+		let form
+		let accountSetting = this.props.plugin.chatbox || {}
+		let acc = this.props.store.matchAccount() || {}
+		if (sb.get(accountSetting, 'prechat_form.enabled')) form = accountSetting.prechat_form
+
+		let offlineEnabled = sb.get(accountSetting, 'offline_form.enabled')
+		if (this.isOffline(acc, accountSetting) && offlineEnabled) form = accountSetting.offline_form
+
+		if (!this.hasSentMessage(this.props.cid) && form && (sb.size(form.groups) || form.group_required)) return true
+
 		let formRequired = this.isFormRequired()
 		return (formRequired && !this.props.cid) || (formRequired && this.props.cid && this.state.clickedJoin)
 	}
@@ -175,9 +188,13 @@ export default class Widget extends Com {
 					text: firstmsg,
 					format: 'plaintext',
 					fields: [{key: 'to_agent_group', value: sb.stringify(groupid)}],
+					attachments: this.state.quickReplyMessage.attachments,
 				},
 			})
 
+			// reset quickReplyMessage
+			this.setState({quickReplyMessage: {}})
+
 			// end_conversation_after_submit only for offline form or prechat form
 			if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid)
 			return
@@ -202,6 +219,7 @@ export default class Widget extends Com {
 		this.setState({
 			creating: false,
 			clickedJoin: false,
+			quickReplyMessage: {},
 		})
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
@@ -214,9 +232,11 @@ export default class Widget extends Com {
 			is_required: true,
 			label: this.props.t.i18n(sb.get(form, `i18n_question_label`, {})) || form.question_label,
 			type: 'text',
+			value: this.state.quickReplyMessage.text,
 		}
 
 		this.setState({formData})
+
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
 
@@ -261,6 +281,9 @@ export default class Widget extends Com {
 		if (sb.size(this.state.formData) === 0) return null
 
 		let $fields = sb.map(this.state.formData, (field, key) => {
+			// not display question when click bot quick reply
+			if (this.state.quickReplyMessage.text && key === 'question') return null
+
 			let $field = null
 			var errclass = field.error ? 'input--error' : ''
 			if (field.type === 'text') {
@@ -525,7 +548,23 @@ export default class Widget extends Com {
 		this.focusInput()
 	}
 
+	fillQuickReplyToQuestion(message) {
+		let formData = this.state.formData
+		if (formData) {
+			sb.set(formData, 'question.value', message.text)
+		}
+		this.setState({formData, quickReplyMessage: message})
+	}
+
 	sendMessage = async (message) => {
+		// hot fix click quick reply with prechat with display prechat form
+		let hasPostback = sb.find(message.attachments, (att) => att.type === 'postback')
+		if (this.isFormRequired() && hasPostback) {
+			this.onStartConvoClick()
+			this.fillQuickReplyToQuestion(message)
+			return
+		}
+
 		let text = message.text
 		if (!this.props.cid) {
 			this.creating = true
@@ -635,7 +674,7 @@ export default class Widget extends Com {
 	async onStartConvoClick() {
 		var convo = this.props.store.matchConvo(this.props.cid) || {}
 		if (convo.state === 'ended') return this.props.onGo({view: 'chat', cid: ''})
-		this.setState({clickedJoin: true})
+		this.setState({clickedJoin: true, quickReplyMessage: {}})
 	}
 
 	onEventFormSubmit() {
@@ -675,9 +714,10 @@ export default class Widget extends Com {
 		let convo = this.props.store.matchConvo(this.props.cid) || {}
 
 		if (convo.state === 'ended') return true
-		if (this.userHasSent(this.props.cid)) return false
+		// allow button "Tiep tuc chat" display when sent quick_replies msg
+		//if (this.userHasSent(this.props.cid)) return false
 		if (convo.state && convo.state !== 'pending') delete formData.group
-		return !!sb.find(formData, (field) => field.value == null || field.value === '')
+		return !!sb.find(formData, (field) => field.is_required && (field.value == null || field.value === ''))
 	}
 
 	renderConvoSummary(convo) {
@@ -778,6 +818,16 @@ export default class Widget extends Com {
 		return joined
 	}
 
+	hasSentMessage(cid) {
+		let convo = this.props.store.matchConvo(cid) || {}
+		let joined = sb.find(convo.members, (mem) => {
+			// sometime bot didnt update last_sent
+			if (mem.type === 'bot') return true
+			return mem.last_sent
+		})
+		return joined
+	}
+
 	isOffline(acc, accSetting) {
 		let enableWhen = sb.get(accSetting, 'offline_form.enable_when')
 		let isonline = true

package/src/util/common.js

@@ -824,7 +824,7 @@ export function checkRunConditions(freq, conds, lastrun, store) {
 				break
 			case 'source':
 				if (size(cond.sources) > 0) {
-					let source = store.matchTrafficSource()
+					let source = store.matchTrafficSource() || 'direct'
 					if (!find(cond.sources, (src) => norm(src) === norm(source))) return false
 				}
 				break