@subiz/widget-v4 4.1.146 → 4.1.148

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.less

@@ -919,3 +919,14 @@ a.product_attachment__title {
 	font-weight: 500;
 	opacity: 0.4;
 }
+
+.message-text-inline-image-wrapper {
+	display: block;
+	margin-top: 8px;
+  margin-bottom: 8px;
+	max-width: 100%;
+}
+
+.message-text-inline-image {
+	width: 100%;
+}

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/reboot.less

@@ -51,6 +51,7 @@ a {
 	color: @blue;
 	text-decoration: none;
 	background-color: transparent; // Remove the gray background on active links in IE 10.
+	font-weight: 600;
 
 	&:hover {
 		cursor: pointer;
@@ -204,7 +205,6 @@ textarea {
 // 2. Change font properties to `inherit` in Safari.
 //
 
-
 // Always hide an element with the `hidden` HTML attribute (from PureCSS).
 // Needed for proper display in IE 10-.
 [hidden] {

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/Event.js

@@ -494,10 +494,11 @@ class Event extends _common.Com {
   }
   getSenderName(ev) {
     let bytype = _index.default.get(ev, 'by.type');
-    let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id'));
+    let byid = _index.default.get(ev, 'by.display_id', _index.default.get(ev, 'by.id')) || '';
     if (bytype === 'user') return _index.default.getUserDisplayName(this.props.store.matchUser());
     let acc = this.props.store.matchAccount();
     if (bytype === 'agent') return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
+    if (byid.startsWith('at')) return _index.default.getAgentDisplayName(acc, this.props.store.matchAgent(byid));
     if (bytype === 'bot') {
       let bot = this.props.store.matchBot()[byid];
       if (!bot) return 'Bot';

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/chatbox/block.js

@@ -99,6 +99,11 @@ class Block extends _common.Com {
     if (block.type == 'table') {
       return null;
     }
+    if (block.type === 'image') {
+      ele.tag = 'img';
+      ele.attrs['src'] = _index.default.get(block, 'image.url');
+      ele.attrs['alt'] = block.alt_text;
+    }
     let $body = null;
     if (_index.default.size(block.content)) {
       $body = _index.default.map(block.content, block => this.renderBlock(block));
@@ -128,6 +133,16 @@ class Block extends _common.Com {
       $body = ele.text;
     }
     switch (ele.tag) {
+      case 'img':
+        return (0, _preact.h)("a", {
+          class: "message-text-inline-image-wrapper",
+          href: _index.default.get(ele, 'attrs.src'),
+          target: "_blank"
+        }, (0, _preact.h)("img", {
+          class: "message-text-inline-image",
+          src: _index.default.get(ele, 'attrs.src'),
+          alt: _index.default.get(ele, 'attrs.alt') || ''
+        }));
       case 'div':
         return (0, _preact.h)("div", null, $body);
       case 'h1':

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/api.js

@@ -60,40 +60,36 @@ class _default {
     _defineProperty(this, "sendTyping", cid => this.apireq.post(`/accounts/${this.accid}/conversations/${cid}/typing`));
     _defineProperty(this, "sendLostFocus", () => this.apireq.post(`/accounts/${this.accid}/focuses/${this.uid}/delete`));
     _defineProperty(this, "uploadToS3", async file => {
-      let {
-        body: signed,
+      var {
+        body,
         error
-      } = await this.apireq.post(`/accounts/${this.accid}/files`, {
-        account_id: this.accid,
+      } = await ajax.setBaseUrl('https://api5.subiz.com.vn/4.1').withCredentials(true).setQuery({
+        'account-id': accid,
         description: 'upload\n user-client: web-widget',
         name: file.name.replace(/\s+/g, '_'),
         size: file.size,
         type: file.type
-      });
-      if (error) return {
-        body: signed,
-        error
-      };
-      let contentType = file.type || 'application/octet-stream';
-      ({
-        error
-      } = await ajax.setContentType(contentType).put(signed.signed_url, file));
-      if (error) return {
-        error
-      };
-      let body;
-      ({
-        body,
-        error
-      } = await this.apireq.post(`/accounts/${this.accid}/files/${signed.id}`, {
-        account_id: this.accid
-      }));
+      }).setParser('json').beforeHook((param, done) => {
+        if (this.token_generator) {
+          let user_id = this.profile_id;
+          this.token_generator().then(token => {
+            if (user_id != this.profile_id) return done(true);
+            if (!token) return done(false);
+            if (token == 'error') return done(false);
+            param.request = param.request.addQuery('x-access-token', token);
+            return done(true);
+          });
+          return;
+        }
+        if (this.ref) param.request = param.request.addQuery('x-user-ref', this.ref);else if (this.mask) param.request = param.request.addQuery('x-user-mask', this.mask);
+        return done(true);
+      }).post('/files', file);
       if (error) return {
         body,
         error
       };
       return {
-        url: body.url
+        url: _index.default.get(body, 'file.url')
       };
     });
     _defineProperty(this, "time", _ => ajax.setBaseUrl(this.ApiURL).withCredentials(true).setParser('json').get('/time'));

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,
@@ -1058,7 +1067,7 @@ class Store {
     src = src.replace('http://file.subiz.com/', this.FileURL);
     src = src.replace('https://file.mysubiz.com/', this.FileURL);
     src = src.replace('http://file.mysubiz.com/', this.FileURL);
-    return src;
+    return src.replace('vcdn.subiz-cdn.com', 'cdn.subiz.net');
   }
   clearBrowserData() {
     _index.default.each(this.cookie.all(), (v, k) => {