@subiz/widget-v4 4.1.219 → 4.1.222

package/assets/img/bar_ho_tro.svg

@@ -0,0 +1,3 @@
+<svg width="89" height="38" viewBox="0 0 89 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M77 0C83.6274 0 89 5.37258 89 12V35C89 36.6569 87.6569 38 86 38L3 38C1.34315 38 0 36.6569 0 35V12C0 5.37258 5.37258 0 12 0L77 0ZM35.076 24V13.0909H37.0522V17.7092H42.1072V13.0909H44.0888V24H42.1072V19.3658H37.0522V24H35.076ZM49.7218 24.1598C48.9228 24.1598 48.2303 23.984 47.6444 23.6325C47.0584 23.2809 46.6039 22.7891 46.2807 22.157C45.9611 21.5249 45.8013 20.7862 45.8013 19.9411C45.8013 19.0959 45.9611 18.3555 46.2807 17.7198C46.6039 17.0842 47.0584 16.5906 47.6444 16.239C48.2303 15.8874 48.9228 15.7116 49.7218 15.7116C50.5208 15.7116 51.2132 15.8874 51.7992 16.239C52.3851 16.5906 52.8379 17.0842 53.1575 17.7198C53.4806 18.3555 53.6422 19.0959 53.6422 19.9411C53.6422 20.7862 53.4806 21.5249 53.1575 22.157C52.8379 22.7891 52.3851 23.2809 51.7992 23.6325C51.2132 23.984 50.5208 24.1598 49.7218 24.1598ZM49.7324 22.6151C50.1657 22.6151 50.5279 22.4961 50.8191 22.2582C51.1103 22.0167 51.3269 21.6935 51.4689 21.2887C51.6145 20.8839 51.6873 20.4329 51.6873 19.9357C51.6873 19.435 51.6145 18.9822 51.4689 18.5774C51.3269 18.169 51.1103 17.8441 50.8191 17.6026C50.5279 17.3612 50.1657 17.2404 49.7324 17.2404C49.2885 17.2404 48.9192 17.3612 48.6245 17.6026C48.3333 17.8441 48.1149 18.169 47.9693 18.5774C47.8272 18.9822 47.7562 19.435 47.7562 19.9357C47.7562 20.4329 47.8272 20.8839 47.9693 21.2887C48.1149 21.6935 48.3333 22.0167 48.6245 22.2582C48.9192 22.4961 49.2885 22.6151 49.7324 22.6151ZM50.2864 13.3466L52.465 15.0352H50.9842L49.7111 14.055L48.454 15.0352H46.9519L49.1358 13.3466H50.2864ZM50.9256 11.5142L51.65 11.7539C51.65 12.0415 51.5506 12.3061 51.3517 12.5476C51.1529 12.7855 50.8936 12.9045 50.574 12.9045C50.4 12.9045 50.2456 12.8796 50.1106 12.8299C49.9792 12.7802 49.8567 12.7234 49.7431 12.6594C49.6294 12.5955 49.514 12.5387 49.3968 12.489C49.2832 12.4393 49.1571 12.4144 49.0186 12.4144C48.8908 12.4144 48.7807 12.4677 48.6884 12.5742C48.5961 12.6808 48.5517 12.7997 48.5552 12.9311L47.8521 12.7393C47.8485 12.4624 47.9444 12.2031 48.1397 11.9616C48.335 11.7166 48.5943 11.5941 48.9174 11.5941C49.0559 11.5941 49.1909 11.6172 49.3223 11.6634C49.4537 11.7095 49.5815 11.7646 49.7058 11.8285C49.8301 11.8888 49.9544 11.9421 50.0787 11.9883C50.2065 12.0344 50.3379 12.0575 50.4728 12.0575C50.5936 12.0575 50.6983 12.0007 50.7871 11.8871C50.8794 11.7699 50.9256 11.6456 50.9256 11.5142ZM63.0851 15.8182V17.3097H61.4711V21.5391C61.4711 21.7983 61.5102 21.9972 61.5883 22.1357C61.67 22.2706 61.7765 22.3629 61.9079 22.4126C62.0393 22.4624 62.1849 22.4872 62.3447 22.4872C62.4655 22.4872 62.5756 22.4783 62.675 22.4606C62.778 22.4428 62.8561 22.4268 62.9094 22.4126L63.2343 23.9201C63.1313 23.9556 62.9839 23.9947 62.7922 24.0373C62.604 24.0799 62.3731 24.1048 62.0997 24.1119C61.6167 24.1261 61.1817 24.0533 60.7947 23.8935C60.4076 23.7301 60.1004 23.478 59.8731 23.1371C59.6494 22.7962 59.5393 22.37 59.5429 21.8587V17.3097H58.3817V15.8182H59.5429V13.858H61.4711V15.8182H63.0851ZM64.6978 24V15.8182H66.5675V17.1818H66.6527C66.8018 16.7095 67.0575 16.3455 67.4197 16.0898C67.7855 15.8306 68.2028 15.701 68.6715 15.701C68.7781 15.701 68.897 15.7063 69.0284 15.717C69.1634 15.7241 69.2752 15.7365 69.364 15.7543V17.5281C69.2823 17.4996 69.1527 17.4748 68.9751 17.4535C68.8011 17.4286 68.6325 17.4162 68.4691 17.4162C68.1175 17.4162 67.8015 17.4925 67.521 17.6452C67.244 17.7944 67.0256 18.0021 66.8658 18.2685C66.706 18.5348 66.6261 18.842 66.6261 19.19V24H64.6978ZM77.3394 15.2962H78.6285C78.6285 16.1626 78.426 16.8445 78.0212 17.3416C77.8515 17.5504 77.6342 17.715 77.3692 17.8354C77.6547 18.4448 77.7975 19.1466 77.7975 19.9411C77.7975 20.7862 77.6359 21.5249 77.3128 22.157C76.9932 22.7891 76.5404 23.2809 75.9545 23.6325C75.3685 23.984 74.676 24.1598 73.877 24.1598C73.078 24.1598 72.3856 23.984 71.7996 23.6325C71.2137 23.2809 70.7591 22.7891 70.436 22.157C70.1164 21.5249 69.9566 20.7862 69.9566 19.9411C69.9566 19.0959 70.1164 18.3555 70.436 17.7198C70.7591 17.0842 71.2137 16.5906 71.7996 16.239C72.3856 15.8874 73.078 15.7116 73.877 15.7116C74.676 15.7116 75.3685 15.8874 75.9545 16.239C76.2862 16.438 76.5753 16.6826 76.8217 16.9728C76.833 16.9646 76.844 16.9561 76.8547 16.9474C77.0464 16.7947 77.1743 16.5781 77.2382 16.2976C77.3057 16.0135 77.3394 15.6797 77.3394 15.2962ZM73.8877 22.6151C74.3209 22.6151 74.6832 22.4961 74.9743 22.2582C75.2655 22.0167 75.4822 21.6935 75.6242 21.2887C75.7698 20.8839 75.8426 20.4329 75.8426 19.9357C75.8426 19.435 75.7698 18.9822 75.6242 18.5774C75.4822 18.169 75.2655 17.8441 74.9743 17.6026C74.6832 17.3612 74.3209 17.2404 73.8877 17.2404C73.4438 17.2404 73.0745 17.3612 72.7797 17.6026C72.4885 17.8441 72.2702 18.169 72.1246 18.5774C71.9825 18.9822 71.9115 19.435 71.9115 19.9357C71.9115 20.4329 71.9825 20.8839 72.1246 21.2887C72.2702 21.6935 72.4885 22.0167 72.7797 22.2582C73.0745 22.4961 73.4438 22.6151 73.8877 22.6151ZM73.8824 26.9457C73.5734 26.9457 73.3089 26.8427 73.0887 26.6367C72.8721 26.4308 72.7638 26.1839 72.7638 25.8963C72.7638 25.6087 72.8721 25.3619 73.0887 25.1559C73.3089 24.9499 73.5716 24.8469 73.877 24.8469C74.186 24.8469 74.4488 24.9499 74.6654 25.1559C74.8856 25.3619 74.9957 25.6087 74.9957 25.8963C74.9957 26.1839 74.8856 26.4308 74.6654 26.6367C74.4488 26.8427 74.1878 26.9457 73.8824 26.9457ZM19 10C17.8181 10 16.6478 10.2328 15.5558 10.6851C14.4639 11.1374 13.4718 11.8003 12.636 12.636C11.8003 13.4718 11.1374 14.4639 10.6851 15.5558C10.2328 16.6478 10 17.8181 10 19C10 20.1819 10.2328 21.3522 10.6851 22.4442C11.1374 23.5361 11.8003 24.5282 12.636 25.364C13.4718 26.1997 14.4639 26.8626 15.5558 27.3149C16.6478 27.7672 17.8181 28 19 28C20.1819 28 21.3522 27.7672 22.4442 27.3149C23.5361 26.8626 24.5282 26.1997 25.364 25.364C26.1997 24.5282 26.8626 23.5361 27.3149 22.4442C27.7672 21.3522 28 20.1819 28 19C28 17.8181 27.7672 16.6478 27.3149 15.5558C26.8626 14.4639 26.1997 13.4718 25.364 12.636C24.5282 11.8003 23.5361 11.1374 22.4442 10.6851C21.3522 10.2328 20.1819 10 19 10ZM16.3212 12.5328C17.1705 12.1811 18.0807 12 19 12C19.9193 12 20.8295 12.1811 21.6788 12.5328C22.5281 12.8846 23.2997 13.4002 23.9497 14.0503C24.5998 14.7003 25.1154 15.4719 25.4672 16.3212C25.8189 17.1705 26 18.0807 26 19C26 19.9193 25.8189 20.8295 25.4672 21.6788C25.1154 22.5281 24.5998 23.2997 23.9497 23.9497C23.2997 24.5998 22.5281 25.1154 21.6788 25.4672C20.8295 25.8189 19.9193 26 19 26C18.0807 26 17.1705 25.8189 16.3212 25.4672C15.4719 25.1154 14.7003 24.5998 14.0503 23.9497C13.4002 23.2997 12.8846 22.5281 12.5328 21.6788C12.1811 20.8295 12 19.9193 12 19C12 18.0807 12.1811 17.1705 12.5328 16.3212C12.8846 15.4719 13.4002 14.7003 14.0503 14.0503C14.7003 13.4002 15.4719 12.8846 16.3212 12.5328ZM19 22.4444C19.5523 22.4444 20 22.8922 20 23.4444V23.4533C20 24.0056 19.5523 24.4533 19 24.4533C18.4477 24.4533 18 24.0056 18 23.4533V23.4444C18 22.8922 18.4477 22.4444 19 22.4444ZM19.0726 13.5304C18.5601 13.529 18.0543 13.6465 17.5949 13.8738C17.1356 14.1011 16.7353 14.4319 16.4256 14.8402C16.0917 15.2801 16.1778 15.9074 16.6178 16.2413C17.0578 16.5751 17.6851 16.489 18.0189 16.049C18.1415 15.8874 18.3 15.7564 18.4819 15.6664C18.6638 15.5764 18.8641 15.5298 19.067 15.5304C19.27 15.5309 19.47 15.5786 19.6514 15.6696C19.8327 15.7606 19.9905 15.8925 20.1123 16.0548C20.234 16.2172 20.3165 16.4056 20.353 16.6052C20.3896 16.8048 20.3793 17.0101 20.3231 17.2051C20.2668 17.4001 20.166 17.5793 20.0287 17.7287C19.8936 17.8757 19.7267 17.9899 19.5409 18.0626C19.0707 18.2318 18.6671 18.5476 18.3897 18.9637C18.1092 19.3845 17.973 19.8851 18.0016 20.3901C18.0329 20.9415 18.5052 21.3631 19.0566 21.3319C19.608 21.3006 20.0297 20.8283 19.9984 20.2769C19.9943 20.2047 20.0138 20.1332 20.0538 20.0731C20.0939 20.013 20.1525 19.9675 20.2206 19.9435C20.2291 19.9405 20.2376 19.9374 20.2461 19.9342C20.7248 19.7511 21.1544 19.4595 21.5012 19.0821C21.848 18.7048 22.1025 18.2522 22.2446 17.7598C22.3867 17.2674 22.4126 16.7488 22.3203 16.2447C22.2279 15.7406 22.0198 15.2648 21.7123 14.8548C21.4048 14.4448 21.0063 14.1118 20.5483 13.882C20.0902 13.6522 19.5851 13.5318 19.0726 13.5304Z" fill="#0047CC"/>
+</svg>

package/{dist/assets/img/bubble_default.6f6eec8.svg → assets/img/bubble_11.svg}

@@ -7,7 +7,6 @@
     </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/form-page.less

@@ -1,4 +1,5 @@
 @primary-color: '@primary_color'; //
+@primary-color-faded: '@primary_color_faded';
 @form-page-background-color: '@form_background_color';
 @form-page-header-font-size: '@form_header_font_size';
 @form-page-header-font-family: '@form_header_font_family';
@@ -317,3 +318,60 @@ select.form-control {
 		margin-top: -15px;
 	}
 }
+
+// Fullscreen form page, closer to Jotform: roomier card, prominent header
+// separated by a full-width divider, more space between questions.
+// Placed after form.less so it wins over the shared form styles.
+.form-page {
+	.form-wrapper.form {
+		padding: 32px;
+	}
+
+	.form-page-header {
+		margin: 0 -32px 32px;
+		padding: 4px 32px 28px;
+		border-bottom: 1px solid #e3e5ec;
+	}
+
+	.form-page-title {
+		.color(#2c3345);
+		font-weight: 600;
+		line-height: 1.35;
+	}
+
+	.form-page-desc {
+		.color(#57647e);
+		margin-top: 8px;
+		line-height: 1.6;
+		white-space: pre-wrap;
+	}
+
+	.form-component {
+		margin-bottom: 32px;
+		&:last-child {
+			margin-bottom: 0;
+		}
+		&.submitted {
+			margin-bottom: 20px;
+		}
+		.label {
+			margin-top: 0;
+		}
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	.form-page {
+		.form-wrapper.form {
+			padding: 24px 20px;
+		}
+		.form-page-header {
+			margin: 0 -20px 28px;
+			padding: 0 20px 24px;
+		}
+		.form-component {
+			margin-bottom: 28px;
+		}
+	}
+}
+

package/assets/less/form.less

@@ -119,6 +119,15 @@ select.form-control.input--error:focus {
 	font-weight: 500;
 }
 
+// question labels of Form blocks: bold and dark, like Jotform.
+// Size: form page uses input_style.font_size (form-page.less, default 16px), chat attachment 15px below.
+.form-wrapper.form .label {
+	padding-bottom: 6px;
+	.color(#2c3345);
+	line-height: 1.35;
+	font-weight: 600;
+}
+
 .form--btn-submit {
 	border-radius: 7px;
 	padding-left: 32px;
@@ -502,7 +511,8 @@ select {
 	}
 
 	.label {
-		padding-bottom: 4px;
+		padding-bottom: 6px;
+		font-size: 15px;
 	}
 
 	.form-control--valid-input--error {
@@ -525,7 +535,7 @@ select.form-control.form-control--empty {
 
 		.radio {
 			margin-right: 10px;
-			width: 300px; // form wrapper width is 620px
+			width: calc(50% - 5px); // 2 columns whatever the form padding is
 
 			&:first-child {
 				margin-top: 0;
@@ -545,7 +555,7 @@ select.form-control.form-control--empty {
 
 		.checkbox {
 			margin-right: 10px;
-			width: 300px; // form wrapper width is 620px
+			width: calc(50% - 5px); // 2 columns whatever the form padding is
 
 			&:first-child {
 				margin-top: 0;
@@ -596,3 +606,269 @@ select.form-control.form-control--empty {
 		}
 	}
 }
+
+// ---
+// New form block fields: description, rating faces, linear scale, chips, "Other…"
+// All selectors are scoped under .form so a block class like "chips" never styles anything else.
+
+.form {
+	&.form-wrapper .form-component.has-description > .label {
+		padding-bottom: 2px;
+	}
+
+	.form-field-description {
+		.color(@text-muted);
+		font-size: 13px;
+		line-height: 1.4;
+		// same gap to the input as a label without description (.label padding-bottom)
+		margin-bottom: 6px;
+		white-space: pre-wrap;
+	}
+
+	.form-other-input {
+		margin-top: 8px;
+	}
+
+	.form-ratings-wrapper.readonly .star-wrapper {
+		cursor: default;
+	}
+
+	.form-submitted-rating {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		// the star sprite is positioned in px, so stars keep their 32x30 size here
+		.star-wrapper {
+			padding-right: 6px;
+		}
+	}
+
+	// shared look of square/rounded toggle buttons
+	.form-rating-face,
+	.form-linear-scale-item,
+	.form-chip {
+		-webkit-appearance: none;
+		appearance: none;
+		margin: 0;
+		font-family: inherit;
+		background: #fff;
+		border: 1px solid @gray-400;
+		border-radius: 8px;
+		cursor: pointer;
+		.color(@gray-600);
+		transition:
+			border-color 100ms ease,
+			background-color 100ms ease,
+			color 100ms ease;
+		box-sizing: border-box;
+
+		&:hover {
+			border-color: @gray-600;
+		}
+
+		&:focus-visible {
+			outline: 2px solid @primary-color;
+			outline-offset: 1px;
+		}
+	}
+
+	// RATING FACES
+	.form-rating-faces {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.form-rating-face {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 48px;
+		height: 48px;
+		padding: 0;
+
+		&.selected {
+			border-color: @primary-color;
+			background: @primary-color-faded;
+			.color(@primary-color);
+		}
+	}
+
+	.form-rating-faces.readonly .form-rating-face {
+		cursor: default;
+		width: 36px;
+		height: 36px;
+		.form-face-icon {
+			width: 24px;
+			height: 24px;
+		}
+	}
+
+	// LINEAR SCALE
+	// as wide as the row of cells (48px each, at least 320px in total) so the
+	// min/max labels sit under the first/last cell instead of the form edges
+	.form-linear-scale {
+		width: 100%;
+		max-width: ~'max(320px, calc(var(--scale-count, 5) * 48px + (var(--scale-count, 5) - 1) * 6px))';
+	}
+
+	.form-linear-scale-items {
+		display: flex;
+		gap: 6px;
+	}
+
+	// 8+ cells in a narrow form (chat box, phone): two even rows instead of tiny cells.
+	// Browsers without container queries keep one row of shrunk cells.
+	.form-linear-scale.many {
+		container-type: inline-size;
+	}
+
+	@container (max-width: 340px) {
+		.form-linear-scale-items {
+			// !important: the chatbox bundle marks every rule important, except inside @container
+			display: grid !important;
+			grid-template-columns: repeat(var(--scale-cols, 5), minmax(0, 1fr)) !important;
+		}
+		.form-linear-scale-item.row2-start {
+			grid-column-start: 2 !important;
+		}
+	}
+
+	.form-linear-scale-item {
+		// the chatbox resets buttons (all: unset), so center the number explicitly
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		// cells shrink to fit one row (up to 11 cells in a ~330px chat form)
+		flex: 1 1 0;
+		min-width: 0;
+		height: 40px;
+		padding: 0;
+		font-size: 14px;
+		font-weight: 500;
+		font-variant-numeric: tabular-nums;
+		.color(@black);
+
+		&.selected {
+			border-color: @primary-color;
+			background: @primary-color;
+			.color(#fff);
+		}
+	}
+
+	.form-linear-scale-labels {
+		display: flex;
+		justify-content: space-between;
+		gap: 12px;
+		margin-top: 6px;
+		font-size: 12px;
+		line-height: 1.3;
+		.color(@text-muted);
+	}
+
+	.form-linear-scale-label {
+		// set on the span itself: form-page.less has `* {font-size: 16px}`
+		font-size: 12px;
+		line-height: 1.3;
+		max-width: 50%;
+		&.max {
+			text-align: right;
+			margin-left: auto;
+		}
+	}
+
+	// CHECKBOX CHIPS
+	.form-chips {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.form-chip {
+		padding: 6px 12px;
+		font-size: 14px;
+		line-height: 1.4;
+		text-align: left;
+		border-radius: 16px;
+		.color(@black);
+		max-width: 100%;
+		overflow-wrap: anywhere;
+
+		&.selected {
+			border-color: @primary-color;
+			background: @primary-color-faded;
+			.color(@primary-color);
+		}
+	}
+
+	.form-chips.readonly .form-chip {
+		cursor: default;
+		padding: 2px 10px;
+		font-size: 13px;
+	}
+}
+
+.form-wrapper-attachment.form {
+	// header: bold title + softer description, separated from the questions by a divider
+	.form-component.form-attachment-header {
+		margin: 0 -15px 14px;
+		padding: 2px 15px 12px;
+		border-bottom: 1px solid #e3e5ec;
+	}
+	.form-attachment-header + .form-component .label {
+		margin-top: 0;
+	}
+	.form-attachment-title {
+		.color(#2c3345);
+		font-size: 17px;
+		font-weight: 600;
+		line-height: 1.35;
+	}
+	.form-attachment-desc {
+		.color(#57647e);
+		font-size: 13px;
+		line-height: 1.5;
+		margin-top: 4px;
+		white-space: pre-wrap;
+	}
+
+	// option text smaller than the question label (15px)
+	.radio--label,
+	.checkbox--label {
+		font-size: 14px;
+		line-height: 20px;
+	}
+	.radio--check,
+	.checkbox--check {
+		top: 2px;
+	}
+	.radio,
+	.checkbox {
+		margin-top: 6px;
+	}
+	.radio:first-of-type,
+	.checkbox:first-of-type {
+		margin-top: 0;
+	}
+
+	.form-linear-scale-items {
+		gap: 4px;
+	}
+	.form-linear-scale-item {
+		height: 34px;
+		font-size: 13px;
+		border-radius: 6px;
+	}
+	.form-rating-faces {
+		gap: 6px;
+	}
+	.form-rating-face {
+		width: 40px;
+		height: 40px;
+	}
+	.form-chip {
+		padding: 4px 10px;
+		font-size: 13px;
+	}
+}

package/assets/less/widget.less

@@ -642,6 +642,12 @@
 .widget-preview-text-message--content {
 	margin-top: 10px;
 	white-space: pre-wrap;
+	line-height: 24px;
+	max-height: 144px;
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 6;
 }
 
 .widget-preview-quick-reply-wrapper {

package/compiled_src/chatbox/ChatButton.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.isSamePreview = isSamePreview;
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _Emoji = _interopRequireDefault(require("./Emoji.js"));
 var _common = require("../common.js");
@@ -12,6 +13,10 @@ 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');
+const builtInButtonIcons = {
+  bubble_11: require('../../assets/img/bubble_11.svg?inline'),
+  bar_ho_tro: require('../../assets/img/bar_ho_tro.svg?inline')
+};
 let defaultAvatar = require('../../assets/img/default_avatar.png');
 class ChatButton extends _common.Com {
   constructor(props) {
@@ -62,7 +67,11 @@ class ChatButton extends _common.Com {
       let screen = _index.default.get(this.props.store.matchLastview(), 'screen');
       let previewEvent = _index.default.get(this.props.store.matchLastview(), 'previewEvent') || {};
       let isOpen = screen === 'preview' && _index.default.size(previewEvent) > 0;
-      if (isOpen) {
+      if (isOpen && this.state.hasPreviewDom && !this.state.previewExtraCls && isSamePreview(this.state.previewEvent, previewEvent)) {
+        this.setState({
+          previewEvent
+        });
+      } else if (isOpen) {
         this.makeAnimateShowPreview(previewEvent);
       } else {
         this.makeAnimateHidePreview();
@@ -370,7 +379,7 @@ class ChatButton extends _common.Com {
     }
     const imageUrl = url => {
       const asset = normalizeButtonImageUrl(this.props.store.replaceFileUrl(url));
-      return asset === dotChatIcon ? asset : addVersionParam(asset);
+      return asset === dotChatIcon || asset && asset.startsWith('data:') ? asset : addVersionParam(asset);
     };
     imgsrc = imageUrl(imgsrc);
     imgurl = imageUrl(imgurl);
@@ -582,11 +591,20 @@ function randomAgent(agentM) {
   return agents[Math.floor(Math.random() * _index.default.size(agents))] || {};
 }
 const Ms30Mins = 30 * 60 * 1000;
+function isSamePreview(a, b) {
+  if (!_index.default.size(a) || !_index.default.size(b)) return false;
+  if (a.id || b.id) return a.id === b.id;
+  if (_index.default.get(a, 'data.message.conversation_id') || _index.default.get(b, 'data.message.conversation_id')) return false;
+  return _index.default.get(a, 'by.id') === _index.default.get(b, 'by.id');
+}
 function normalizeButtonImageUrl(url) {
+  if (/^https:\/\/vcdn\.subiz-cdn\.com\/file\/bubble_11\.svg(?=$|[?#])/.test(url)) return builtInButtonIcons.bubble_11;
+  const builtIn = /^https:\/\/(?:storage\.googleapis\.com\/public-gcs\.subiz-cdn\.com|public-gcs\.subiz-cdn\.com|vcdn\.subiz-cdn\.com)\/dashboard-v4\/public\/img\/bubble\/(bubble_11|bar_ho_tro)\.svg(?=$|[?#])/.exec(url);
+  if (builtIn) return builtInButtonIcons[builtIn[1]];
   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_URL = builtInButtonIcons.bubble_11;
 const DEF_BG = 'linear-gradient(280.16deg, #0053d3 22.03%, #0265ff 78.2%)';
 function addVersionParam(url, version = 8) {
   if (!url) return url;
@@ -620,6 +638,7 @@ function preloadButtonImage(src, {
   });
 }
 async function prepareButtonMask(src) {
+  if (src.startsWith('data:')) return (await preloadButtonImage(src)) ? src : null;
   try {
     const response = await fetch(src);
     if (!response.ok) return null;