@subiz/widget-v4 4.0.89 → 4.0.90

package/compiled_src/chatbox/Event.js

@@ -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

@@ -124,7 +124,7 @@ class Widget extends _common.Com {
       formData: {},
       showOrder: false,
       order_id: '',
-      quickReplyMessage: ''
+      quickReplyMessage: {}
     });
     this.props.store.onUpdate(this, _ => this.forceUpdate());
   }
@@ -143,7 +143,7 @@ class Widget extends _common.Com {
       this.closeOrder();
       this.setState({
         clickedJoin: false,
-        quickReplyMessage: ''
+        quickReplyMessage: {}
       });
       setTimeout(() => {
         this.events && this.events.focus();
@@ -279,11 +279,12 @@ class Widget extends _common.Com {
           fields: [{
             key: 'to_agent_group',
             value: _index.default.stringify(groupid)
-          }]
+          }],
+          attachments: this.state.quickReplyMessage.attachments
         }
       });
       this.setState({
-        quickReplyMessage: ''
+        quickReplyMessage: {}
       });
       if (form.end_conversation_after_submit) await this.props.store.endConvo(this.props.cid);
       return;
@@ -331,7 +332,7 @@ class Widget extends _common.Com {
     this.setState({
       creating: false,
       clickedJoin: false,
-      quickReplyMessage: ''
+      quickReplyMessage: {}
     });
     if (!this.props.store.isMobile()) this.focusInput();
   }
@@ -343,7 +344,7 @@ class Widget extends _common.Com {
       is_required: true,
       label: this.props.t.i18n(_index.default.get(form, `i18n_question_label`, {})) || form.question_label,
       type: 'text',
-      value: this.state.quickReplyMessage
+      value: this.state.quickReplyMessage.text
     };
     this.setState({
       formData
@@ -405,7 +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 && key === 'question') return null;
+      if (this.state.quickReplyMessage.text && key === 'question') return null;
       let $field = null;
       var errclass = field.error ? 'input--error' : '';
 
@@ -682,7 +683,7 @@ class Widget extends _common.Com {
 
     this.setState({
       formData,
-      quickReplyMessage: message.text
+      quickReplyMessage: message
     });
   }
 
@@ -757,7 +758,7 @@ class Widget extends _common.Com {
     });
     this.setState({
       clickedJoin: true,
-      quickReplyMessage: ''
+      quickReplyMessage: {}
     });
   }
 
@@ -785,7 +786,7 @@ class Widget extends _common.Com {
     let convo = this.props.store.matchConvo(this.props.cid) || {};
     if (convo.state === 'ended') return true;
     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) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.89",
+	"version": "4.0.90",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -14,7 +14,7 @@
 		"@subiz/storage": "0.0.8",
 		"@subiz/wsclient": "^3.1.7",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.25.1",
+		"core-js": "^3.25.2",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
@@ -24,10 +24,10 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.18.10",
-		"@babel/core": "^7.19.0",
+		"@babel/core": "^7.19.1",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.19.0",
-		"@babel/preset-env": "^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",
@@ -36,6 +36,6 @@
 		"webpack": "^5.74.0",
 		"webpack-bundle-analyzer": "^4.6.1",
 		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.11.0"
+		"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

@@ -32,7 +32,7 @@ export default class Widget extends Com {
 			showOrder: false,
 			order_id: '',
 			// hot fix for prechat with bot quick reply
-			quickReplyMessage: '',
+			quickReplyMessage: {},
 		})
 
 		this.props.store.onUpdate(this, (_) => this.forceUpdate())
@@ -51,7 +51,7 @@ export default class Widget extends Com {
 
 		if (prevProp.cid !== this.props.cid) {
 			this.closeOrder()
-			this.setState({clickedJoin: false, quickReplyMessage: ''})
+			this.setState({clickedJoin: false, quickReplyMessage: {}})
 			// this.props.store.setLastview('chat', { cid: this.props.cid })
 			setTimeout(() => {
 				// focus Events then focus MessageInput
@@ -188,11 +188,12 @@ 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: ''})
+			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)
@@ -218,7 +219,7 @@ export default class Widget extends Com {
 		this.setState({
 			creating: false,
 			clickedJoin: false,
-			quickReplyMessage: '',
+			quickReplyMessage: {},
 		})
 		if (!this.props.store.isMobile()) this.focusInput()
 	}
@@ -231,7 +232,7 @@ 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,
+			value: this.state.quickReplyMessage.text,
 		}
 
 		this.setState({formData})
@@ -281,7 +282,7 @@ export default class Widget extends Com {
 
 		let $fields = sb.map(this.state.formData, (field, key) => {
 			// not display question when click bot quick reply
-			if (this.state.quickReplyMessage && key === 'question') return null
+			if (this.state.quickReplyMessage.text && key === 'question') return null
 
 			let $field = null
 			var errclass = field.error ? 'input--error' : ''
@@ -552,7 +553,7 @@ export default class Widget extends Com {
 		if (formData) {
 			sb.set(formData, 'question.value', message.text)
 		}
-		this.setState({formData, quickReplyMessage: message.text})
+		this.setState({formData, quickReplyMessage: message})
 	}
 
 	sendMessage = async (message) => {
@@ -673,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, quickReplyMessage: ''})
+		this.setState({clickedJoin: true, quickReplyMessage: {}})
 	}
 
 	onEventFormSubmit() {
@@ -716,7 +717,7 @@ export default class Widget extends Com {
 		// 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) {