@subiz/widget-v4 4.1.146 → 4.1.147

package/assets/less/form.less

@@ -75,6 +75,17 @@ select.form-control {
 select.form-control {
 	padding: 1px 8px;
 }
+input[type='date'].form-control {
+	height: 40px;
+	width: 100%;
+	background-color: #fff;
+}
+.form-wrapper-attachment input[type='date'].form-control {
+	height: 32px;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
+
 input[type='text'].form-control:focus,
 input[type='number'].form-control:focus,
 input[type='date'].form-control:focus,
@@ -548,11 +559,11 @@ select.form-control.form-control--empty {
 	height: 30px;
 	background-image: url('../img/stars_v2.png');
 	background-position: 0px 0px;
-  background-size: cover;
+	background-size: cover;
 }
 
 .form-wrapper-attachment .star-wrapper {
-  padding-right: 12px;
+	padding-right: 12px;
 }
 
 .star-wrapper {

package/assets/less/message_input.less

@@ -7,17 +7,19 @@
 }
 
 .message-input--disabled {
-	background: #F0F0F0;
+	background: #f0f0f0;
 	opacity: 0.6;
 	filter: grayscale(1);
 }
 
-textarea[disabled=disabled] {
-	&::-webkit-input-placeholder { // Edge
+textarea[disabled='disabled'] {
+	&::-webkit-input-placeholder {
+		// Edge
 		.color(#a4a4a4);
 	}
 
-	&:-ms-input-placeholder { // Internet Explorer 10-11
+	&:-ms-input-placeholder {
+		// Internet Explorer 10-11
 		.color(#a4a4a4);
 	}
 
@@ -36,15 +38,16 @@ textarea[disabled=disabled] {
 }
 
 .message-input--input::placeholder {
-  opacity: 0.5; /* Firefox */
+	opacity: 0.5; /* Firefox */
 }
 
-.message-input--input::-ms-input-placeholder { /* Edge 12 -18 */
-  opacity: 0.5; /* Firefox */
+.message-input--input::-ms-input-placeholder {
+	/* Edge 12 -18 */
+	opacity: 0.5; /* Firefox */
 }
 
 .message-input--emoji-button {
-	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXNtaWxlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTIiPjwvcGF0aD48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSI5LjAxIiB5Mj0iOSI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSIxNS4wMSIgeTI9IjkiPjwvbGluZT48L3N2Zz4K");
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXNtaWxlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PHBhdGggZD0iTTggMTRzMS41IDIgNCAyIDQtMiA0LTIiPjwvcGF0aD48bGluZSB4MT0iOSIgeTE9IjkiIHgyPSI5LjAxIiB5Mj0iOSI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjkiIHgyPSIxNS4wMSIgeTI9IjkiPjwvbGluZT48L3N2Zz4K');
 }
 
 .message-input--button {
@@ -72,7 +75,7 @@ textarea[disabled=disabled] {
 }
 
 .message-input--attachment-button {
-	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBhcGVyY2xpcCI+PHBhdGggZD0iTTIxLjQ0IDExLjA1bC05LjE5IDkuMTlhNiA2IDAgMCAxLTguNDktOC40OWw5LjE5LTkuMTlhNCA0IDAgMCAxIDUuNjYgNS42NmwtOS4yIDkuMTlhMiAyIDAgMCAxLTIuODMtMi44M2w4LjQ5LTguNDgiPjwvcGF0aD48L3N2Zz4K");
+	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXBhcGVyY2xpcCI+PHBhdGggZD0iTTIxLjQ0IDExLjA1bC05LjE5IDkuMTlhNiA2IDAgMCAxLTguNDktOC40OWw5LjE5LTkuMTlhNCA0IDAgMCAxIDUuNjYgNS42NmwtOS4yIDkuMTlhMiAyIDAgMCAxLTIuODMtMi44M2w4LjQ5LTguNDgiPjwvcGF0aD48L3N2Zz4K');
 }
 
 .message-input--send-button {
@@ -94,7 +97,13 @@ textarea[disabled=disabled] {
 	.color(@white);
 	font-size: 14px;
 	line-height: 20px;
-	text-align: center;;
+	text-align: center;
 	background: @primary-color;
 	width: 60%;
 }
+
+.widget-body.embed-chat .message-input {
+	border: 1px solid #e3e3e3;
+	border-radius: 8px;
+	margin-bottom: 20px;
+}

package/assets/less/widget.less

@@ -291,6 +291,10 @@
 	position: relative;
 }
 
+.widget-body.embed-chat {
+	max-width: 600px;
+}
+
 .widget-body--content {
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -543,21 +547,21 @@
 }
 
 .widget-internet-status {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  font-size: 14px;
-  z-index: 10;
-  text-align: center;
-  padding: 6px 5px;
-
-  &.negative {
-    background-color: #212325;
-    color: #fff;
-  }
-  &.positive {
-    background-color: #19b600;
-    color: #fff;
-  }
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	font-size: 14px;
+	z-index: 10;
+	text-align: center;
+	padding: 6px 5px;
+
+	&.negative {
+		background-color: #212325;
+		color: #fff;
+	}
+	&.positive {
+		background-color: #19b600;
+		color: #fff;
+	}
 }

package/chat.html

@@ -0,0 +1,10 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	</head>
+	<body style="margin: 0">
+		<div style="overflow: hidden; width: 100%; height: 100%" class="container">
+			<div id="result_text" style="color: #f00; padding-top: 120px; text-align: center; font-size: 24px"></div>
+		</div>
+	</body>
+</html>

package/chat.js

@@ -0,0 +1,50 @@
+// TODO: lam bo test template
+// chu ngan, chu dai, anh ngan, anh dai voi tung template
+import ApiV4 from './src/lib.js'
+const config = require('./config.js')
+
+function getUrlParameter(name) {
+	name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
+	var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
+	var results = regex.exec(location.search)
+	return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '))
+}
+
+function runChatbox(subiz) {
+	let popup = {
+		type: 'chatbox',
+		enabled: true,
+		chatbox: {
+			window_mode: 'full',
+		},
+	}
+	subiz._overridePlugin([popup])
+
+	setTimeout(() => {
+		subiz.showWidget()
+	}, 1)
+}
+
+async function run() {
+	let accid = getUrlParameter('id') || getUrlParameter('acc_id') || getUrlParameter('account_id')
+
+	let subiz = new ApiV4(config.ApiURL, config.FileURL, config.RealtimeURL, true, false)
+	window.subiz = subiz
+	subiz._overrideDeviceType('mobile')
+	if (window.innerWidth > 760) {
+		// table or wider screen
+		subiz.setEmbebedChatMode()
+	}
+
+	//runChatbox(subiz)
+	let res = await subiz.setAccount(accid, document.querySelector('.container'))
+	if (res.error) {
+		document.querySelector('#result_text').textContent = `ERROR: ${res.error} with account id "${accid}"`
+		return
+	}
+	setTimeout(() => {
+		subiz.showWidget()
+	}, 1)
+}
+
+run()

package/compiled_src/chatbox/FileAttachments.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 class FileAttachments extends _common.Com {
   render() {
     var byType = _index.default.get(this.props.ev, 'by.type', 'agent');
+    if (byType !== 'user') byType = 'agent';
     var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
     var files = [];
     _index.default.each(attachments, att => {

package/compiled_src/chatbox/Header.js

@@ -211,6 +211,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
   renderCloseButton() {
     let accSetting = this.props.plugin.chatbox || {};
     if (accSetting.hide_close_button) return null;
+    if (this.props.store.isEmbededChatMode()) return;
     return (0, _preact.h)("div", {
       class: "widget-header--button-close",
       "data-tooltip": this.props.t('close'),

package/compiled_src/chatbox/ImageAttachments.js

@@ -70,6 +70,7 @@ class ImageAttachment extends _common.Com {
       return;
     }
     let byType = _index.default.get(this.props.ev, 'by.type');
+    if (byType !== 'user') byType = 'agent';
     if (!image.width || !image.height) {
       return (0, _preact.h)("div", {
         class: `image-attachment image-attachment--${byType}`
@@ -116,6 +117,7 @@ class ImageAttachment extends _common.Com {
     var attachments = _index.default.get(this.props.ev, 'data.message.attachments', []);
     var images = [];
     let byType = _index.default.get(this.props.ev, 'by.type');
+    if (byType !== 'user') byType = 'agent';
     _index.default.each(attachments, (att, i) => {
       if (!att) return;
       if (!_index.default.includes(att.mimetype, 'image')) return;

package/compiled_src/chatbox/Widget.js

@@ -654,8 +654,10 @@ class Widget extends _common.Com {
     let hasError = _index.default.find(this.state.formData, field => !!field.error);
     let newData = this.validateForm(this.state.formData);
     let hasEmptyError = _index.default.find(newData, field => !!field.is_empty_error);
+    let bodycls = 'widget-body';
+    if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
     return (0, _preact.h)("div", {
-      class: "widget-body"
+      class: bodycls
     }, (0, _preact.h)(FormMounter, {
       key: form._updated,
       form: form,
@@ -816,8 +818,10 @@ class Widget extends _common.Com {
         onClick: e => this.onStartConvoClick(e)
       }, this.props.t('offline_preform_btn')));
     }
+    let bodycls = 'widget-body';
+    if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat';
     return (0, _preact.h)("div", {
-      class: "widget-body"
+      class: bodycls
     }, (0, _preact.h)("div", {
       class: "widget-body--content",
       onClick: e => this.onContainerClick(e)

package/compiled_src/lib.js

@@ -44,6 +44,9 @@ class Widget {
   setAIDevMode(mode) {
     this.store.setAIDevMode(mode);
   }
+  setEmbebedChatMode() {
+    this.store.setEmbebedChatMode();
+  }
   setTrackPageView(val) {
     this.store.setTrackPageview(val);
   }
@@ -105,7 +108,9 @@ class Widget {
     return outmask;
   }
   async setAccount(id, $container, mask, cb) {
-    if (!id) return;
+    if (!id) return {
+      error: 'empty_account_id'
+    };
     let outmask = await this.store.init(id, mask);
     _index.default.setTimeout(() => window.postMessage({
       type: 'widget_loaded',

package/compiled_src/store/store.js

@@ -362,9 +362,15 @@ class Store {
   setAIDevMode(mode) {
     this.ai_dev_mode = mode;
   }
+  setEmbebedChatMode() {
+    this.is_embed_chat_mode = true;
+  }
   isAIDevMode() {
     return this.ai_dev_mode;
   }
+  isEmbededChatMode() {
+    return this.is_embed_chat_mode;
+  }
   overrideDeviceType(type) {
     this.forceDevice = type;
     this.pubsub.publish('account');
@@ -449,7 +455,10 @@ class Store {
       mask: mask,
       ref: userRef
     });
-    if (user.error) return console.error(user);
+    if (user.error) {
+      console.error(user);
+      return user;
+    }
     if (this.realtime) this.realtime.stop();
     if (this.fake) this.realtime = new _realtime_fake.default();else this.realtime = new Realtime(this.RealtimeURL, {
       account_id: accid,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.146",
+	"version": "4.1.147",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -13,7 +13,7 @@
 		"@subiz/flow": "^1.1.0",
 		"@subiz/wsclient": "^4.0.34",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.42.0",
+		"core-js": "^3.43.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.3.0",
@@ -22,7 +22,7 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.27.2",
-		"@babel/core": "^7.27.1",
+		"@babel/core": "^7.27.4",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.27.1",
 		"@babel/preset-env": "^7.27.2",
@@ -30,10 +30,10 @@
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
 		"prettier": "^3.5.3",
-		"puppeteer": "^24.9.0",
+		"puppeteer": "^24.10.1",
 		"webpack": "^5.99.9",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
-		"webpack-dev-server": "^5.2.1"
+		"webpack-dev-server": "^5.2.2"
 	}
 }

package/src/chatbox/FileAttachments.js

@@ -1,10 +1,11 @@
 import sb from '../util/index.js'
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 
 export default class FileAttachments extends Com {
-	render () {
+	render() {
 		var byType = sb.get(this.props.ev, 'by.type', 'agent')
+		if (byType !== 'user') byType = 'agent'
 		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
 		var files = []
 		sb.each(attachments, (att) => {
@@ -28,9 +29,9 @@ export default class FileAttachments extends Com {
 		var $files = sb.map(files, (file, index) => {
 			return (
 				<div key={index} class={`file-attachment file-attachment--${byType}`}>
-					<a class="file-attachment--link" href={this.props.store.replaceFileUrl(file.url)} target="_blank">
-						<span class="file-attachment--download mr-2"></span>
-						<span class="file-attachment--filename">{file.name}</span>
+					<a class='file-attachment--link' href={this.props.store.replaceFileUrl(file.url)} target='_blank'>
+						<span class='file-attachment--download mr-2'></span>
+						<span class='file-attachment--filename'>{file.name}</span>
 					</a>
 				</div>
 			)

package/src/chatbox/Header.js

@@ -233,6 +233,7 @@ Vui lòng hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi
 	renderCloseButton() {
 		let accSetting = this.props.plugin.chatbox || {}
 		if (accSetting.hide_close_button) return null
+		if (this.props.store.isEmbededChatMode()) return
 		return (
 			<div
 				class='widget-header--button-close'

package/src/chatbox/ImageAttachments.js

@@ -58,6 +58,7 @@ export default class ImageAttachment extends Com {
 			return
 		}
 		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType !== 'user') byType = 'agent'
 
 		if (!image.width || !image.height) {
 			return (
@@ -108,6 +109,7 @@ export default class ImageAttachment extends Com {
 		var attachments = sb.get(this.props.ev, 'data.message.attachments', [])
 		var images = []
 		let byType = sb.get(this.props.ev, 'by.type')
+		if (byType !== 'user') byType = 'agent'
 
 		sb.each(attachments, (att, i) => {
 			if (!att) return

package/src/chatbox/Widget.js

@@ -629,8 +629,10 @@ export default class Widget extends Com {
 		let hasError = sb.find(this.state.formData, (field) => !!field.error)
 		let newData = this.validateForm(this.state.formData)
 		let hasEmptyError = sb.find(newData, (field) => !!field.is_empty_error)
+		let bodycls = 'widget-body'
+		if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat'
 		return (
-			<div class='widget-body'>
+			<div class={bodycls}>
 				<FormMounter key={form._updated} form={form} onMount={this.formMounted} />
 				<div class='widget-body--content flex-grow-1 pl-3 pr-3 pb-2 d-flex flex-column'>
 					<div class='mt-2 d-flex flex-column'>
@@ -832,8 +834,10 @@ export default class Widget extends Com {
 				</div>
 			)
 		}
+		let bodycls = 'widget-body'
+		if (this.props.store.isEmbededChatMode()) bodycls += ' embed-chat'
 		return (
-			<div class='widget-body'>
+			<div class={bodycls}>
 				<div class='widget-body--content' onClick={(e) => this.onContainerClick(e)}>
 					<Events
 						isShow={this.props.isShow}

package/src/lib.js

@@ -41,6 +41,10 @@ class Widget {
 		this.store.setAIDevMode(mode)
 	}
 
+	setEmbebedChatMode() {
+		this.store.setEmbebedChatMode()
+	}
+
 	setTrackPageView(val) {
 		this.store.setTrackPageview(val)
 	}
@@ -114,7 +118,7 @@ class Widget {
 	}
 
 	async setAccount(id, $container, mask, cb) {
-		if (!id) return // do nothing
+		if (!id) return {error: 'empty_account_id'} // do nothing 
 		let outmask = await this.store.init(id, mask)
 		sb.setTimeout(() => window.postMessage({type: 'widget_loaded', account_id: id}, '*'), 0) // send to chrome extension
 		// add container to client site

package/src/store/store.js

@@ -243,10 +243,18 @@ export default class Store {
 		this.ai_dev_mode = mode
 	}
 
+	setEmbebedChatMode() {
+		this.is_embed_chat_mode = true
+	}
+
 	isAIDevMode() {
 		return this.ai_dev_mode
 	}
 
+	isEmbededChatMode() {
+		return this.is_embed_chat_mode
+	}
+
 	overrideDeviceType(type) {
 		this.forceDevice = type
 		this.pubsub.publish('account')
@@ -435,7 +443,7 @@ export default class Store {
 	matchClosePreviewAt = () => this.kv.match('close_preview_at') || 0
 
 	checkFormToken = (accid, token) => this.api.checkFormToken(accid, token)
-	submitForm2 = (accid, token, data) =>  this.api.submitForm2(accid, token, data)
+	submitForm2 = (accid, token, data) => this.api.submitForm2(accid, token, data)
 	sendPresence = sb.throttle(
 		async () => {
 			if (this._die) return dieErr
@@ -511,7 +519,10 @@ export default class Store {
 		// set cookie forever
 		if (userRef) this.cookie.set('__sbref', userRef)
 		let user = await this.api.setAuth({accid: accid, mask: mask, ref: userRef})
-		if (user.error) return console.error(user)
+		if (user.error) {
+			console.error(user)
+			return user
+		}
 
 		if (this.realtime) this.realtime.stop()
 		if (this.fake) this.realtime = new RealtimeFake()

package/webpack.dev.js

@@ -11,6 +11,7 @@ module.exports = {
 		library: './library.js',
 		order: './src/order/index.js',
 		screenshoot: './screenshoot.js',
+		chat: './chat.js',
 	},
 	output: {publicPath: '/'},
 	devServer: {port: 8082, host: '0.0.0.0', hot: false, liveReload: false},
@@ -22,6 +23,7 @@ module.exports = {
 		new HtmlWebpackPlugin({filename: './inject.html', template: './inject.html', inject: 'body', chunks: ['inject']}),
 		new HtmlWebpackPlugin({filename: './library.html', template: './index.html', inject: 'body', chunks: ['library']}),
 		new HtmlWebpackPlugin({filename: './form.html', template: './form.html', inject: 'body', chunks: ['form']}),
+		new HtmlWebpackPlugin({filename: './chat.html', template: './chat.html', inject: 'body', chunks: ['chat']}),
 		new HtmlWebpackPlugin({
 			filename: './screenshoot.html',
 			template: './screenshoot.html',

package/webpack.prod.js

@@ -11,6 +11,7 @@ webpackconfig.entry = {
 	preview: './preview.js',
 	form: './src/form/index.js',
 	library: './library.js',
+	chat: './chat.js',
 }
 
 const HASH = Date.now().toString(16)
@@ -46,6 +47,12 @@ webpackconfig.plugins = [
 		inject: 'body',
 		chunks: ['form'],
 	}),
+	new HtmlWebpackPlugin({
+		filename: HASH + '.chat.html',
+		template: './chat.html',
+		inject: 'body',
+		chunks: ['chat'],
+	}),
 	new HtmlWebpackPlugin({
 		filename: HASH + '.library.html',
 		template: './index.html',

package/dist/.HASH

@@ -1 +0,0 @@
-1970d063f3c