@subiz/widget-v4 4.1.210 → 4.1.212

package/README.md

@@ -4,14 +4,33 @@
 $ npm run dev
 ```
 
-visit: http://localhost:8081/acqcsmrppbftadjzxnvo
+visit: http://localhost:8082/?account_id=acqcsmrppbftadjzxnvo
 
 ### To test widget in injection mode
 
 ``` sh
 $ npm run dev
 ```
-visit: http://localhost:8081/inject.html?account_id=acqcsmrppbftadjzxnvo
+visit: http://localhost:8082/inject.html?account_id=acqcsmrppbftadjzxnvo
+
+### Checks and release artifacts
+
+Use Node.js 26 for development and tests.
+
+```sh
+npm ci
+npm run check
+npm run build
+```
+
+`check` runs the undefined-variable lint check and the tests against source
+code in a DOM environment. Tests cover rendering, recalled messages, safe
+URLs/HTML, upload failures, subscriptions, tickets and cache pagination.
+
+`build` updates `compiled_src` before creating the browser bundles. `npm pack`
+also runs the checks and regenerates the library through `prepack`, so the
+published package includes the current source changes. Test files and the
+test runner are excluded from the package.
 
 
 NOTE:

package/assets/img/dot_chat.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 0C9.84974 0 0 9.84974 0 22C0 34.1503 9.84974 44 22 44C34.1503 44 44 34.1503 44 22C44 9.84974 34.1503 0 22 0ZM16.4104 16.4102C16.6655 16.1402 16.9988 16 17.3333 16H26.6667C27.0012 16 27.3345 16.1402 27.5896 16.4102C27.8464 16.6822 28 17.0627 28 17.4706V24.0588C28 24.4667 27.8464 24.8472 27.5896 25.1192C27.3345 25.3892 27.0012 25.5294 26.6667 25.5294H22.7778C22.5879 25.5294 22.4019 25.5835 22.2415 25.6853L19.8889 27.18V26.5294C19.8889 25.9771 19.4412 25.5294 18.8889 25.5294H17.3333C16.9988 25.5294 16.6655 25.3892 16.4104 25.1192C16.1536 24.8472 16 24.4667 16 24.0588V17.4706C16 17.0627 16.1536 16.6822 16.4104 16.4102ZM17.3333 14C16.4302 14 15.5765 14.3804 14.9564 15.037C14.3381 15.6917 14 16.568 14 17.4706V24.0588C14 24.9614 14.3381 25.8377 14.9564 26.4924C15.5765 27.149 16.4302 27.5294 17.3333 27.5294H17.8889V29C17.8889 29.3648 18.0876 29.7007 18.4073 29.8764C18.7271 30.0521 19.1172 30.0397 19.4251 29.8441L23.0686 27.5294H26.6667C27.5698 27.5294 28.4235 27.149 29.0436 26.4924C29.6619 25.8377 30 24.9614 30 24.0588V17.4706C30 16.568 29.6619 15.6917 29.0436 15.037C28.4235 14.3804 27.5698 14 26.6667 14H17.3333Z" fill="#0047CC"/>
+</svg>

package/assets/less/chatbox.less

@@ -109,6 +109,15 @@ body div#sbz92 {
 		outline: none;
 	}
 
+	button:focus-visible {
+		outline: 2px solid @gray-600;
+		outline-offset: 3px;
+	}
+
+	button:not(:disabled) {
+		cursor: pointer;
+	}
+
 	img {
 		overflow: hidden;
 		flex-shrink: 0;

package/assets/less/form.less

@@ -43,6 +43,8 @@ input.form-control[disabled] {
 }
 
 input[type='text'].form-control.input--error,
+input[type='tel'].form-control.input--error,
+input[type='email'].form-control.input--error,
 input[type='number'].form-control.input--error,
 input[type='date'].form-control.input--error,
 textarea.form-control.input--error,
@@ -52,6 +54,8 @@ select.form-control.input--error {
 }
 
 input[type='text'].form-control,
+input[type='tel'].form-control,
+input[type='email'].form-control,
 input[type='number'].form-control,
 input[type='date'].form-control,
 textarea.form-control,
@@ -87,6 +91,8 @@ input[type='date'].form-control {
 }
 
 input[type='text'].form-control:focus,
+input[type='tel'].form-control:focus,
+input[type='email'].form-control:focus,
 input[type='number'].form-control:focus,
 input[type='date'].form-control:focus,
 textarea.form-control:focus,
@@ -95,6 +101,8 @@ select.form-control:focus {
 }
 
 input[type='text'].form-control.input--error:focus,
+input[type='tel'].form-control.input--error:focus,
+input[type='email'].form-control.input--error:focus,
 input[type='number'].form-control.input--error:focus,
 input[type='date'].form-control.input--error:focus,
 textarea.form-control.input--error:focus,
@@ -462,6 +470,8 @@ select {
 	box-shadow: 0 0 0 1px #eeeeee;
 
 	input[type='text'].form-control,
+	input[type='tel'].form-control,
+	input[type='email'].form-control,
 	input[type='number'].form-control,
 	input[type='date'].form-control,
 	select.form-control,

package/assets/less/message.less

@@ -1,3 +1,47 @@
+.conversation-history-error {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 8px 0 16px;
+	padding: 8px 10px;
+	border-radius: 10px;
+	background: #f5f6f8;
+	color: #737782;
+	font-size: 12px;
+	line-height: 18px;
+	text-align: left;
+}
+
+.conversation-history-error__text {
+	flex: 1;
+	min-width: 0;
+}
+
+.conversation-history-error__retry {
+	position: relative;
+	flex-shrink: 0;
+	border: 0;
+	border-radius: 6px;
+	padding: 5px 8px;
+	background: transparent;
+	color: #545866;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 18px;
+	cursor: pointer;
+	&:hover:not(:disabled) { background: #e8eaf0; }
+	&:disabled { cursor: wait; }
+	&:focus-visible { outline: 2px solid #737782; outline-offset: 2px; }
+}
+
+.conversation-history-error__spinner {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
 .widget-body--events-container {
 	overflow-x: hidden;
 	overflow-y: auto;
@@ -127,7 +171,7 @@
 	background-color: @red;
 }
 
-.message-text--agent.message-text--deleted {
+.message-text--deleted {
 	opacity: 0.7;
 	font-style: italic;
 }
@@ -147,14 +191,28 @@
 }
 
 .message-block-pre {
+	display: block;
+	min-width: 0;
 	max-width: 100%;
-	margin: 0;
-	overflow-x: auto;
-	white-space: pre;
+	margin: 4px 0;
+	padding: 10px 12px;
+	border: 1px solid rgba(0, 0, 0, 0.06);
+	border-radius: 8px;
+	background: rgba(0, 0, 0, 0.03);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	word-break: normal;
 }
 
-.message-block-code {
-	font-family: monospace;
+.message-block-code,
+.message-block-code * {
+	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+	font-size: 13px;
+	line-height: 20px;
+}
+
+.message-block-pre .message-block-code {
+	display: block;
 }
 
 .message-user__container {
@@ -274,6 +332,54 @@ a.message_error {
 	margin: 10px;
 }
 
+.info-message--ended {
+	padding-top: 16px;
+}
+
+.conversation-event {
+	display: block;
+	min-width: 0;
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+.conversation-history-start {
+	display: block;
+	height: 1px;
+	flex-shrink: 0;
+}
+
+.message-user__container--send {
+	// Transitions can interpolate the !important styles used by the widget reset.
+	transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+	transform: translate3d(0, 0, 0);
+}
+
+.message-user__container--send.message-user__container--enter {
+	transform: translate3d(0, 14px, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.message-user__container--send {
+		transition: none !important;
+	}
+	.message-user__container--send.message-user__container--enter {
+		transform: none !important;
+	}
+}
+
+.conversation-event--history {
+	filter: grayscale(0.8);
+}
+
+.conversation-event--history + .conversation-event:not(.conversation-event--history)::before {
+	content: '';
+	display: block;
+	border-top: 2px solid @primary-color-faded;
+	margin: 60px 40px;
+}
+
 .message-sender {
 	margin-top: 10px;
 }
@@ -528,20 +634,15 @@ a.message_error {
 		object-fit: cover;
 	}
 
-	.url-button-attachment:first-child {
-		border-radius: 0;
-	}
-	.url-button-attachment:last-child {
-	}
-
 	.url-button-attachment {
 		padding: 10px;
 		display: block;
 		padding-top: 9px;
-		padding-button: 9px;
+		padding-bottom: 9px;
 		text-align: center;
 		border: none;
 		border-top: 1px solid #d8d8d8;
+		border-radius: 0;
 		width: 100%;
 		.color(@link);
 		&:hover {

package/assets/less/widget.less

@@ -139,15 +139,6 @@
 	text-align: center;
 }
 
-.widget-body--empty-icon {
-	width: 128px;
-	height: 128px;
-	.inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g data-name="Layer 2"><path d="M130.9 366.9a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.52 10.52 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zM483.7 282a183.07 183.07 0 0 0 28.3-98C512 82.5 429.5 0 328 0a183.16 183.16 0 0 0-96 27 10 10 0 0 0 10.5 17.1A162.67 162.67 0 0 1 328 20c90.4 0 164 73.6 164 164a162.73 162.73 0 0 1-27.9 91.5 10.07 10.07 0 0 0 .3 11.6l11 40.9-44-11.8a10 10 0 0 0-8.4 1.5 164.32 164.32 0 0 1-151.8 20.2 138.68 138.68 0 0 0-97.1-97.1 164.31 164.31 0 0 1 14.5-143.2 10 10 0 0 0-17-10.6 184 184 0 0 0-19.9 149.6c-4.5-.4-9.1-.7-13.7-.7C61.9 236 0 297.9 0 374a136.88 136.88 0 0 0 22.9 76.1L12.2 490a10 10 0 0 0 12.3 12.3l40.9-11a137.71 137.71 0 0 0 146.5-.8 10 10 0 0 0-10.7-16.9 118.09 118.09 0 0 1-128.6-1.5 9.73 9.73 0 0 0-8.1-1.3L36 478.5l7.4-27.7a10 10 0 0 0-1.5-8.4 117.95 117.95 0 1 1 207-28 10 10 0 0 0 18.8 6.8 137.72 137.72 0 0 0 8.3-47.3 124.44 124.44 0 0 0-.7-13.7 183.93 183.93 0 0 0 155.3-23.6l56.2 15.1a10 10 0 0 0 12.3-12.3zm-246 162.2a10.52 10.52 0 0 0-7.1 2.9 9.73 9.73 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 9.9 9.9 0 0 0-10-10zM205.3 70.7a10.52 10.52 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.14 10.14 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.52 10.52 0 0 0-7.1 2.9 9.9 9.9 0 0 0-2.9 7.1 10.52 10.52 0 0 0 2.9 7.1 9.9 9.9 0 0 0 7.1 2.9zm-19.4 296.2a9.9 9.9 0 0 0-2.9 7.1 10.33 10.33 0 0 0 2.9 7.1 9.73 9.73 0 0 0 7.1 2.9 10.33 10.33 0 0 0 7.1-2.9 9.73 9.73 0 0 0 2.9-7.1 10.33 10.33 0 0 0-2.9-7.1 9.9 9.9 0 0 0-7.1-2.9 10.33 10.33 0 0 0-7.1 2.9zm210.8-201.1a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zm-68.1 107.4a58 58 0 0 0 57.9-57.9 7 7 0 0 0-7-7H277.7a7 7 0 0 0-7 7 58 58 0 0 0 57.9 57.9zm-43.5-50.9h87.1l-1 3.7a43.93 43.93 0 0 1-85.2 0zm-25.8-56.5a9.8 9.8 0 0 0 5.2-1.5l1.3-.8a9.92 9.92 0 0 0 3.3-13.7 10.06 10.06 0 0 0-13.8-3.3l-1.3.8a10 10 0 0 0 5.3 18.5zM75.9 366.9A9.9 9.9 0 0 0 73 374a10.33 10.33 0 0 0 2.9 7.1A9.73 9.73 0 0 0 83 384a10.33 10.33 0 0 0 7.1-2.9A9.73 9.73 0 0 0 93 374a10.33 10.33 0 0 0-2.9-7.1A9.9 9.9 0 0 0 83 364a10.33 10.33 0 0 0-7.1 2.9z" fill="#4285f4" data-name="Capa 1"/></g></svg>'
-	);
-	-webkit-mask-image: @-inline-svg-url;
-	border-radius: 0;
-	background-color: @primary-color;
-}
 
 .mobile {
 	.widget-container {
@@ -416,21 +407,28 @@
 .chat-button {
 	cursor: pointer;
 	position: relative;
-	scale: 1;
+	transform: scale(1);
 	transition:
-		filter 250ms ease,
-		opacity 0.15s ease-in,
-		scale 0.125s ease-in-out,
-		transform 0.2s ease-in-out;
+		opacity 200ms ease-in,
+		transform 250ms cubic-bezier(0.34, 1.5, 0.64, 1);
 
 	&.hidden {
+		visibility: hidden;
 		opacity: 0;
+		transform: scale(0.2);
+		pointer-events: none;
 	}
 }
 
-.chat-button:hover {
+@media (prefers-reduced-motion: reduce) {
+	.chat-button {
+		transition: none !important;
+	}
+}
+
+.chat-button:not(.hidden):hover {
 	filter: brightness(1.1);
-	scale: 1.05;
+	transform: scale(1.05);
 }
 
 .chat-button--img {
@@ -729,13 +727,12 @@
 	z-index: @z-index-3;
 	background: @white;
 	box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.15);
-	border: 1px solid @border;
 	border-radius: 15px;
 	max-width: 100%;
 	min-width: 210px;
 	margin-bottom: 15px;
 	padding: 15px 20px;
-	positive: relative;
+	position: relative;
 	cursor: pointer;
 
 	&.right {

package/compiled_src/call/css.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = require('css-loader!less-loader!../../assets/less/notif.less');
+var _default = exports.default = require('css-loader?import=false!less-loader!../../assets/less/notif.less');

package/compiled_src/chatbox/Buttons.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Buttons;
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _preact = require("preact");
+var _url = require("../util/url.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Buttons(props) {
   if (_index.default.size(props.buttons) === 0) return null;
@@ -13,7 +14,7 @@ function Buttons(props) {
     if (button.type === 'call_button') {
       return (0, _preact.h)("a", {
         class: "url-button-attachment",
-        href: 'tel:' + button.phone_number,
+        href: (0, _url.safeUrl)('tel:' + button.phone_number),
         key: index,
         title: button.title
       }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || `${props.t('call')} ${button.phone_number}`);
@@ -21,16 +22,18 @@ function Buttons(props) {
     if (button.type === 'url_button') {
       return (0, _preact.h)("a", {
         class: "url-button-attachment",
-        href: button.url,
+        href: (0, _url.safeUrl)(button.url) || undefined,
         target: "_blank",
+        rel: "noopener noreferrer",
         key: index,
         title: button.title
       }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || button.url);
     }
     if (button.type === 'postback_button') {
-      return (0, _preact.h)("a", {
+      return (0, _preact.h)("button", {
+        type: "button",
         class: "url-button-attachment",
-        href: "javascript:;",
+        key: index,
         onClick: _ => props.onSelect(button)
       }, props.t.i18n(button.i18n_title) || button.title);
     }

package/compiled_src/chatbox/ChatButton.js

@@ -11,6 +11,7 @@ var _block = _interopRequireDefault(require("./block.js"));
 var _preact = require("preact");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var defaultBubble = require('../../assets/img/bubble_default.svg');
+const dotChatIcon = require('../../assets/img/dot_chat.svg');
 let defaultAvatar = require('../../assets/img/default_avatar.png');
 class ChatButton extends _common.Com {
   constructor(props) {
@@ -345,22 +346,7 @@ class ChatButton extends _common.Com {
       }, reply.title);
     })));
   }
-  async prepareButtonImage() {
-    let accountSetting = this.props.plugin.chatbox;
-    accountSetting = this.fixMissingSetting(accountSetting);
-    let imgsrc = _index.default.get(accountSetting, 'desktop_button.background_image_url') || _index.default.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
-    if (this.props.store.isMobile()) {
-      imgsrc = _index.default.get(accountSetting, 'mobile_button.background_image_url') || _index.default.get(accountSetting, 'mobile_button.background_mask_url') || imgsrc;
-    }
-    imgsrc = this.props.store.replaceFileUrl(imgsrc);
-    await _index.default.preloadImg(imgsrc);
-    this.setState({
-      ready: true
-    });
-    this.readyGate.open();
-  }
-  renderButton() {
-    if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = _index.default.Date.now();
+  getButtonAppearance() {
     let accountSetting = this.props.plugin.chatbox;
     accountSetting = this.fixMissingSetting(accountSetting);
     let imgsrc = _index.default.get(accountSetting, 'desktop_button.background_image_url') || _index.default.get(accountSetting, 'desktop_button.background_mask_url') || defaultBubble;
@@ -382,22 +368,93 @@ class ChatButton extends _common.Com {
         maskurl = mobilemaskurl;
       }
     }
+    const imageUrl = url => {
+      const asset = normalizeButtonImageUrl(this.props.store.replaceFileUrl(url));
+      return asset === dotChatIcon ? asset : addVersionParam(asset);
+    };
+    imgsrc = imageUrl(imgsrc);
+    imgurl = imageUrl(imgurl);
+    maskurl = imageUrl(maskurl);
+    const defaultMask = !imgurl && !maskurl ? DEF_BG_URL : '';
+    const urls = [...new Set([imgsrc, imgurl && encodeURI(imgurl), maskurl && encodeURI(maskurl), defaultMask].filter(Boolean))];
+    return {
+      imgsrc,
+      imgurl,
+      maskurl,
+      background,
+      position,
+      imgwidth,
+      imgheight,
+      urls,
+      maskAsset: maskurl ? encodeURI(maskurl) : defaultMask,
+      key: JSON.stringify([urls, maskurl, defaultMask])
+    };
+  }
+  componentDidUpdate() {
+    if (this.getButtonAppearance().key !== this._buttonImageKey) this.prepareButtonImage();
+  }
+  async prepareButtonImage() {
+    const appearance = this.getButtonAppearance();
+    const version = this._buttonImageVersion = (this._buttonImageVersion || 0) + 1;
+    this._buttonImageKey = appearance.key;
+    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;
+    }
+    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 (this._buttonElement) window.getComputedStyle(this._buttonElement).transform;
+    this.setState({
+      ready,
+      readyImageKey: appearance.key,
+      fallbackButtonImage: fallback,
+      buttonMaskUrl: mask
+    });
+    this.readyGate.open();
+  }
+  componentWillUnmount() {
+    if (this._buttonMaskUrl) URL.revokeObjectURL(this._buttonMaskUrl);
+    if (this._animateTimeout) clearTimeout(this._animateTimeout);
+  }
+  renderButton() {
+    if (typeof sbz_info != 'undefined') sbz_info.render_chatbox_button = _index.default.Date.now();
+    const appearance = this.getButtonAppearance();
+    let {
+      imgsrc,
+      imgurl,
+      maskurl,
+      background,
+      position,
+      imgwidth,
+      imgheight
+    } = appearance;
+    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) {
+      imgsrc = imgurl = defaultBubble;
+      maskurl = '';
+    }
     let whitebgcls = 'chat-button--white-bg';
     if (!imgurl && maskurl) whitebgcls += ' chat-button--white-bg--mask-only';
     let imgcontainerstyle = '';
-    imgurl = this.props.store.replaceFileUrl(imgurl);
-    imgsrc = this.props.store.replaceFileUrl(imgsrc);
-    maskurl = this.props.store.replaceFileUrl(maskurl);
-    imgurl = addVersionParam(imgurl);
-    imgsrc = addVersionParam(imgsrc);
-    maskurl = addVersionParam(maskurl);
     if (!imgurl && !maskurl) {
       whitebgcls += ' chat-button--white-bg--mask-only';
       imgcontainerstyle = `
-				-webkit-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				-o-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				-moz-mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
-				mask-image: url("${encodeURI(DEF_BG_URL)}") !important;
+				-webkit-mask-image: none !important;
+				-o-mask-image: none !important;
+				-moz-mask-image: none !important;
+				mask-image: none !important;
 				height: ${imgheight}px !important;
 				width: ${imgwidth}px !important;
 				background: ${background} !important;
@@ -450,9 +507,15 @@ class ChatButton extends _common.Com {
 			height: ${imgheight - 4}px !important;
 
     `;
-    if (!this.state.ready) cls += ' hidden';
-    return (0, _preact.h)("div", {
+    if (!this.state.ready || this.state.readyImageKey !== appearance.key) cls += ' hidden';
+    return (0, _preact.h)("button", {
+      ref: element => {
+        this._buttonElement = element;
+      },
+      type: "button",
       class: cls,
+      "aria-label": this.props.t('chat'),
+      "aria-expanded": !this.props.isShow,
       onClick: e => this.onClick(e)
     }, (0, _preact.h)("div", {
       class: whitebgcls,
@@ -492,7 +555,9 @@ class ChatButton extends _common.Com {
         return defmsg;
       }
       return (0, _preact.h)(_block.default, {
-        block: block
+        block: block,
+        store: this.props.store,
+        t: this.props.t
       });
     }
     let message = _index.default.get(ev, 'data.message.text', defmsg);
@@ -521,6 +586,10 @@ function randomAgent(agentM) {
   return agents[Math.floor(Math.random() * _index.default.size(agents))] || {};
 }
 const Ms30Mins = 30 * 60 * 1000;
+function normalizeButtonImageUrl(url) {
+  if (/^https:\/\/(?:storage\.googleapis\.com\/public-gcs\.subiz-cdn\.com|public-gcs\.subiz-cdn\.com|vcdn\.subiz-cdn\.com)\/dashboard-v4\/public\/img\/bubble\/dot_chat\.svg(?=$|[?#])/.test(url)) return dotChatIcon;
+  return url;
+}
 const DEF_BG_URL = 'https://vcdn.subiz-cdn.com/file/bubble_11.svg?v=5';
 const DEF_BG = 'linear-gradient(280.16deg, #0053d3 22.03%, #0265ff 78.2%)';
 function addVersionParam(url, version = 8) {
@@ -535,4 +604,33 @@ function addVersionParam(url, version = 8) {
     const newUrl = base + (hasQuery ? '&' : '?') + `v=${version}`;
     return hash ? newUrl + '#' + hash : newUrl;
   }
+}
+function preloadButtonImage(src, {
+  crossOrigin = false
+} = {}) {
+  return new Promise(resolve => {
+    const image = new Image();
+    if (crossOrigin) image.crossOrigin = 'anonymous';
+    image.onerror = () => resolve(false);
+    image.onload = async () => {
+      try {
+        if (image.decode) await image.decode();
+        resolve(true);
+      } catch (_) {
+        resolve(false);
+      }
+    };
+    image.src = 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;
+  } catch (_) {}
+  if (url) URL.revokeObjectURL(url);
+  return null;
 }