@subiz/widget-v4 4.1.209 → 4.1.211

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/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 {
@@ -418,17 +409,32 @@
 	position: relative;
 	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,
+		scale 250ms cubic-bezier(0.34, 1.5, 0.64, 1);
 
 	&.hidden {
+		visibility: hidden;
 		opacity: 0;
+		scale: 0.2;
+		pointer-events: none;
+	}
+}
+
+// Also animate when the cached image is ready before the first browser paint.
+@starting-style {
+	.chat-button:not(.hidden) {
+		opacity: 0 !important;
+		scale: 0.25 !important;
 	}
 }
 
-.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;
 }
@@ -729,13 +735,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

@@ -345,22 +345,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 +367,89 @@ class ChatButton extends _common.Com {
         maskurl = mobilemaskurl;
       }
     }
+    const imageUrl = url => addVersionParam(this.props.store.replaceFileUrl(url));
+    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;
+    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 +502,12 @@ 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", {
+      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 +547,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);
@@ -535,4 +592,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;
 }

package/compiled_src/chatbox/Event.js

@@ -56,10 +56,26 @@ class Event extends _common.Com {
     this.state = {
       pongs: _index.default.get(this.props.event, 'ev.data.message.pongs') || []
     };
+    const _ev = this.props.event.ev;
+    const age = (this.props.store.now ? this.props.store.now() : _index.default.Date.now()) - _ev.created;
+    this.animateSend = !props.isHistory && _ev.type === 'message_sent' && _index.default.get(_ev, 'by.type') === 'user' && _ev.id === _index.default.get(_ev, 'source_event_id') && age >= 0 && age < 2000;
     this.textMessageRef = (0, _preact.createRef)();
     this.fileAttachmentRef = (0, _preact.createRef)();
     this.imageAttachmentRef = (0, _preact.createRef)();
   }
+  componentDidMount() {
+    if (!this.animateSend) return;
+    this.sendAnimationFrame = window.requestAnimationFrame(() => {
+      this.sendAnimationFrame = window.requestAnimationFrame(() => {
+        if (this._isMounted) this.setState({
+          sendEntered: true
+        });
+      });
+    });
+  }
+  componentWillUnmount() {
+    if (this.sendAnimationFrame) window.cancelAnimationFrame(this.sendAnimationFrame);
+  }
   render() {
     var ev = _index.default.get(this.props.event, 'ev', {});
     switch (ev.type) {
@@ -104,6 +120,7 @@ class Event extends _common.Com {
     return !!_index.default.find(pongs, pong => pong.type === 'dislike');
   }
   chooseQuickReply(reply) {
+    if (this.props.isHistory) return;
     let ev = _index.default.get(this.props.event, 'ev', {});
     let message = {
       text: reply.title,
@@ -121,6 +138,7 @@ class Event extends _common.Com {
     this.props.onSend(message);
   }
   choosePostbackBtn(button) {
+    if (this.props.isHistory) return;
     let ev = _index.default.get(this.props.event, 'ev', {});
     let message = {
       text: button.title,
@@ -261,6 +279,17 @@ class Event extends _common.Com {
   }
   renderMessageSent() {
     let ev = this.props.event.ev;
+    if (_index.default.get(ev, 'data.message.deleted')) {
+      let byType = _index.default.get(ev, 'by.type') === 'user' ? 'user' : 'agent';
+      return (0, _preact.h)("div", {
+        class: 'convo-event ' + byType + '-message',
+        "data-ev-id": ev.id
+      }, (0, _preact.h)(_TextMessage.default, {
+        ev: ev,
+        t: this.props.t,
+        store: this.props.store
+      }));
+    }
     let attachments = _index.default.get(ev, 'data.message.attachments');
     let hasForm = _index.default.find(attachments, att => att.type === 'form');
     if (_index.default.isEmptyMessage(_index.default.get(ev, 'data.message'))) return null;
@@ -331,13 +360,13 @@ class Event extends _common.Com {
         t: this.props.t,
         store: this.props.store,
         ev: ev
-      }), (0, _preact.h)(_QuickReplies.default, {
+      }), !this.props.isHistory && (0, _preact.h)(_QuickReplies.default, {
         store: this.props.store,
         ev: ev,
         onSelect: e => this.chooseQuickReply(e)
       }), this.renderReactions(), this.renderAIDevNote())));
     }
-    if (_index.default.get(ev, 'data.message.idempotency_key') === ev.id && this.props.store.now() - ev.created < 900) {
+    if (_index.default.get(ev, 'source_event_id') === ev.id && this.props.store.now() - ev.created < 900) {
       _index.default.setTimeout(() => this.setState({
         refresh: this.state.refresh
       }), 1000);
@@ -345,7 +374,7 @@ class Event extends _common.Com {
     let $dot = (0, _preact.h)("div", {
       class: "sending_dot"
     });
-    if (this.props.store.now() - ev.created < 900 || _index.default.get(ev, 'data.message.idempotency_key') !== ev.id) {
+    if (this.props.store.now() - ev.created < 900 || _index.default.get(ev, 'source_event_id') !== ev.id) {
       $dot = (0, _preact.h)("div", {
         class: "sending_dot sending_dot__hide"
       });
@@ -373,10 +402,11 @@ class Event extends _common.Com {
       class: "convo-event user-message",
       "data-ev-id": ev.id
     }, $sender, (0, _preact.h)("div", {
-      class: "message-user__container"
+      class: 'message-user__container' + (this.animateSend && !this.props.isHistory ? ' message-user__container--send' + (this.state.sendEntered ? '' : ' message-user__container--enter') : '')
     }, $dot, (0, _preact.h)(_TextMessage.default, {
       ref: this.textMessageRef,
       store: this.props.store,
+      t: this.props.t,
       ev: ev,
       refresh: this.state.refresh,
       onLink: this.props.onLink
@@ -412,6 +442,7 @@ class Event extends _common.Com {
     })), $error);
   }
   async onSendReaction(action) {
+    if (this.props.isHistory) return;
     if (this._reacting) return;
     let ev = this.props.event.ev;
     let cid = _index.default.get(ev, 'data.message.conversation_id');
@@ -463,6 +494,7 @@ class Event extends _common.Com {
     this._reacting = false;
   }
   renderReactions() {
+    if (this.props.isHistory) return null;
     if (this.props.store.isAIDevMode()) return null;
     let cid = _index.default.get(this.props.event.ev, 'data.message.conversation_id', '');
     if (cid.startsWith('cslight')) return null;
@@ -550,7 +582,7 @@ class Event extends _common.Com {
     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 (bytype === 'agent' || _index.default.get(ev, 'by.display_type') === '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];