@subiz/widget-v4 4.1.215 → 4.1.216

package/README.md

@@ -6,6 +6,12 @@ $ npm run dev
 
 visit: http://localhost:8082/?account_id=acqcsmrppbftadjzxnvo
 
+The fallback button keeps the configured width and height and has an opaque
+white backing. Each dimension defaults to 70px only when it is not configured.
+
+Masks use data URLs rather than blob URLs. If data URLs are blocked, the widget
+tries the original image URL with CORS before using the fallback button.
+
 ### To test widget in injection mode
 
 ``` sh

package/api.md

@@ -1264,6 +1264,7 @@ nghiệp vụ của form do website thực hiện.
 subiz('waitReady', async function () {
   try {
     const result = await subiz('getFormStatus', 'website_contact')
+    // result.values: [{key: 'fullname', label: 'Họ tên', value: 'Nguyễn Văn An'}, ...]
     if (result.submitted) document.getElementById('contact-form').hidden = true
   } catch (error) {
     // Không ẩn form khi kiểm tra thất bại.
@@ -1272,11 +1273,13 @@ subiz('waitReady', async function () {
 ```
 
 `getFormStatus(formId)` đọc qua store KV/LSDB của widget, không gọi API trạng thái
-hay lấy hội thoại. Sau khi submit thành công, SDK lưu dấu đã gửi trong 7 ngày,
-tách theo account, ID khách và ID form. Chỉ lưu mã hội thoại và thời điểm hết hạn,
-không lưu các giá trị khách nhập. Đọc trạng thái không gia hạn thời gian lưu.
+hay lấy hội thoại. Sau khi submit thành công, SDK lưu dấu đã gửi và nội dung form
+trong 7 ngày, tách theo account, ID khách và ID form. Bản ghi gồm mã hội thoại,
+thời điểm hết hạn và `values` của lần gửi thành công gần nhất, theo dạng
+`[{key, label, value}]` với giá trị đã chuẩn hóa thành chuỗi như khi gửi.
+Đọc trạng thái không gia hạn thời gian lưu. Lần gửi thất bại không ghi đè dữ liệu cũ.
 
-Kết quả: `{submitted: true, status: 'found', conversation_id}` nếu còn hạn;
+Kết quả: `{submitted: true, status: 'found', conversation_id, values}` nếu còn hạn;
 `{submitted: false, status: 'not_found'}` nếu chưa lưu; `status: 'expired'` khi
 hết hạn (đồng thời xóa bản ghi); `status: 'storage_unavailable'` khi trình duyệt
 không cho truy cập localStorage. Lỗi lưu localStorage không biến một submit đã
@@ -1286,7 +1289,8 @@ SDK bỏ qua sự kiện realtime của hội thoại kênh form trước khi l
 thoại; không mở hội thoại form trong chat widget. Luồng chat thông thường giữ
 nguyên. Trạng thái chỉ có trên cùng website/trình duyệt và cùng ID khách, không
 đồng bộ thiết bị khác, mất khi xóa localStorage. Các lần gửi trước khi bổ sung
-cơ chế lưu này không được tự khôi phục từ server.
+cơ chế lưu này không được tự khôi phục từ server. Bản ghi cũ chỉ lưu dấu đã gửi
+vẫn trả `submitted: true` nếu còn hạn, nhưng `values: []` vì chưa lưu nội dung.
 
 SDK không truy cập localStorage trực tiếp: store dùng `kv.put/match/del` và
 LSDB hiện có. Khi widget dùng chế độ in-memory hoặc trình duyệt chặn lưu trữ,

package/assets/img/bubble_default.svg

@@ -7,6 +7,7 @@
     </style>
   </defs>
   <title>Asset 5</title>
+  <circle cx="30" cy="30" r="30" fill="white"/>
   <g id="Layer_2" data-name="Layer 2">
     <g id="Layer_1-2" data-name="Layer 1">
       <g>

package/assets/less/widget.less

@@ -438,6 +438,18 @@
 	// min-height: @desktop-chat-button-height;
 }
 
+.chat-button--fallback {
+	.chat-button--img-container {
+		background-size: 100% 100%;
+	}
+
+	.chat-button--img {
+		width: 100%;
+		min-width: 0;
+		height: 100%;
+	}
+}
+
 .chat-button.chat-button--left {
 	float: left;
 }

package/compiled_src/chatbox/ChatButton.js

@@ -400,18 +400,10 @@ class ChatButton extends _common.Com {
     this.readyGate.close();
     const [loaded, mask] = await Promise.all([Promise.all(appearance.urls.filter(url => url !== appearance.maskAsset).map(url => preloadButtonImage(url))), appearance.maskAsset ? prepareButtonMask(appearance.maskAsset) : Promise.resolve(null)]);
     const stale = () => !this._isMounted || this._buttonImageVersion !== version;
-    if (stale()) {
-      if (mask) URL.revokeObjectURL(mask);
-      return;
-    }
+    if (stale()) return;
     const fallback = loaded.some(success => !success) || !!appearance.maskAsset && !mask;
     const ready = !fallback || (await preloadButtonImage(defaultBubble));
-    if (stale()) {
-      if (mask) URL.revokeObjectURL(mask);
-      return;
-    }
-    if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
-    this._buttonMaskUrl = mask;
+    if (stale()) return;
     if (this._buttonElement) window.getComputedStyle(this._buttonElement).transform;
     this.setState({
       ready,
@@ -422,7 +414,6 @@ class ChatButton extends _common.Com {
     this.readyGate.open();
   }
   componentWillUnmount() {
-    if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
     if (this._animateTimeout) clearTimeout(this._animateTimeout);
   }
   renderButton() {
@@ -437,11 +428,12 @@ class ChatButton extends _common.Com {
       imgwidth,
       imgheight
     } = appearance;
+    const fallback = this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage;
     if (appearance.maskAsset) {
       maskurl = this.state.readyImageKey === appearance.key ? this.state.buttonMaskUrl : '';
       if (imgsrc === appearance.maskAsset) imgsrc = maskurl || '';
     }
-    if (this.state.readyImageKey === appearance.key && this.state.fallbackButtonImage) {
+    if (fallback) {
       imgsrc = imgurl = defaultBubble;
       maskurl = '';
     }
@@ -501,7 +493,11 @@ class ChatButton extends _common.Com {
         mask-size: cover !important;
 			`;
     }
+    if (fallback) {
+      imgcontainerstyle += `width: ${imgwidth}px !important; height: ${imgheight}px !important;`;
+    }
     let cls = 'chat-button chat-button--' + position;
+    if (fallback) cls += ' chat-button--fallback';
     let whiteBgStyle = `
 			width: ${imgwidth - 4}px !important;
 			height: ${imgheight - 4}px !important;
@@ -624,13 +620,19 @@ function preloadButtonImage(src, {
   });
 }
 async function prepareButtonMask(src) {
-  let url;
   try {
     const response = await fetch(src);
     if (!response.ok) return null;
-    url = URL.createObjectURL(await response.blob());
-    if (await preloadButtonImage(url)) return url;
+    const blob = await response.blob();
+    const url = await new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reader.onabort = () => resolve('');
+      reader.readAsDataURL(blob);
+    });
+    if (url && (await preloadButtonImage(url))) return url;
   } catch (_) {}
-  if (url) URL.revokeObjectURL(url);
-  return null;
+  return (await preloadButtonImage(src, {
+    crossOrigin: true
+  })) ? src : null;
 }

package/compiled_src/store/store.js

@@ -885,10 +885,12 @@ class Store {
     await this.readyGate.entry();
     const key = websiteFormStorageKey(this.api, formid);
     const kv = this.kv;
+    const values = _index.default.cloneDeep(payload.values);
     const result = formResult(await this.api.submitWebsiteForm(formid, payload));
     try {
       kv.put(key, {
         conversation_id: result.conversation_id,
+        values,
         expires_at: _index.default.Date.now() + 7 * 24 * 60 * 60 * 1000
       });
     } catch (_) {}
@@ -919,7 +921,8 @@ class Store {
       return {
         submitted: true,
         status: 'found',
-        conversation_id: receipt.conversation_id
+        conversation_id: receipt.conversation_id,
+        values: Array.isArray(receipt.values) ? _index.default.cloneDeep(receipt.values) : []
       };
     } catch (_) {
       return {