@hellotext/hellotext 2.4.3 → 2.4.5

package/lib/controllers/webchat_controller.js

@@ -33,6 +33,11 @@ var MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
   hour: 'numeric',
   minute: '2-digit'
 };
+var MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i;
+var SCROLL_ISOLATION_EVENT_OPTIONS = {
+  capture: true,
+  passive: true
+};
 var _default = /*#__PURE__*/function (_Controller) {
   _inherits(_default, _Controller);
   var _super = _createSuper(_default);
@@ -47,13 +52,19 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.webChatChannel = new WebchatChannel(this.idValue, Hellotext.session, this.conversationIdValue);
       this.files = [];
       this.messageIds = new Set();
+      this.catchUpAfterMessageId = null;
+      this.fetchingCatchUpMessages = false;
       this.onMessageReceived = this.onMessageReceived.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onTypingStart = this.onTypingStart.bind(this);
+      this.captureCatchUpCursor = this.captureCatchUpCursor.bind(this);
+      this.catchUpMessages = this.catchUpMessages.bind(this);
       this.onScroll = this.onScroll.bind(this);
       this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this);
       this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this);
       this.broadcastChannel = new BroadcastChannel("hellotext--webchat--".concat(this.idValue));
+      this.webChatChannel.onDisconnect(this.captureCatchUpCursor);
+      this.webChatChannel.onReconnect(this.catchUpMessages);
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
   }, {
@@ -80,7 +91,10 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.webChatChannel.onMessage(this.onMessageReceived);
       this.webChatChannel.onTypingStart(this.onTypingStart);
       this.webChatChannel.onReaction(this.onMessageReaction);
+      this.setupMessagesContainerScrollIsolation();
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
+      this.messagesContainerTarget.addEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
+      this.messagesContainerTarget.addEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
       if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
@@ -99,6 +113,8 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.teardownOpeningSequence();
       this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
+      this.messagesContainerTarget.removeEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
+      this.messagesContainerTarget.removeEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
       window.removeEventListener('keydown', this.closePopoverOnEscape, true);
 
       // Clean up typing indicator timeouts
@@ -107,6 +123,21 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.floatingUICleanup();
       _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
     }
+  }, {
+    key: "setupMessagesContainerScrollIsolation",
+    value: function setupMessagesContainerScrollIsolation() {
+      this.messagesContainerTarget.style.overscrollBehavior = 'contain';
+      this.messagesContainerTarget.style.webkitOverflowScrolling = 'touch';
+      this.messagesContainerTarget.style.touchAction = 'pan-y';
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent', '');
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent-wheel', '');
+      this.messagesContainerTarget.setAttribute('data-lenis-prevent-touch', '');
+    }
+  }, {
+    key: "stopHostScrollPropagation",
+    value: function stopHostScrollPropagation(event) {
+      event.stopPropagation();
+    }
   }, {
     key: "onTypingStart",
     value: function onTypingStart() {
@@ -236,7 +267,12 @@ var _default = /*#__PURE__*/function (_Controller) {
           var div = document.createElement('div');
           div.innerHTML = body;
           var element = this.messageTemplateTarget.cloneNode(true);
+          element.classList.add('hellotext--webchat-message');
           element.setAttribute('data-hellotext--webchat-target', 'message');
+          element.setAttribute('data-id', message.id);
+          if (createdAt) {
+            element.setAttribute('data-created-at', createdAt);
+          }
           element.style.removeProperty('display');
           element.querySelector('[data-body]').innerHTML = div.innerHTML;
           if (message.state === 'received') {
@@ -311,7 +347,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.popoverTarget.classList.remove(...this.fadeOutClasses);
       (_this$dismissTeaserFo = this.dismissTeaserForSession) === null || _this$dismissTeaserFo === void 0 ? void 0 : _this$dismissTeaserFo.call(this);
       if (!this.onMobile) {
-        this.inputTarget.focus();
+        this.focusComposeInput();
       }
       if (!this.scrolled) {
         requestAnimationFrame(() => {
@@ -368,6 +404,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
       var _this$hideTeaser;
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var {
         id,
         body,
@@ -378,15 +415,17 @@ var _default = /*#__PURE__*/function (_Controller) {
       if (!this.claimMessageId(id)) return;
       (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this);
       if (message.carousel) {
-        return this.insertCarouselMessage(message);
+        return this.insertCarouselMessage(message, options);
       }
       var div = document.createElement('div');
       div.innerHTML = body;
       var element = this.messageTemplateTarget.cloneNode(true);
+      element.classList.add('hellotext--webchat-message');
       element.style.display = 'flex';
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.setMessageCreatedAt(element, createdAt);
       this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
       if (attachments) {
         attachments.forEach(attachmentUrl => {
@@ -398,13 +437,15 @@ var _default = /*#__PURE__*/function (_Controller) {
         });
       }
       this.clearTypingIndicator();
-      this.messagesContainerTarget.appendChild(element);
+      this.insertMessageElement(element);
       Hellotext.eventEmitter.dispatch('webchat:message:received', _objectSpread(_objectSpread({}, message), {}, {
         body: element.querySelector('[data-body]').innerText
       }));
-      element.scrollIntoView({
-        behavior: 'smooth'
-      });
+      if (options.scroll !== false) {
+        element.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
       this.updateMessageTeaser(teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
@@ -424,6 +465,76 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.messageIds.add(id);
       return !messageTargets.some(element => element.dataset.id === id);
     }
+  }, {
+    key: "captureCatchUpCursor",
+    value: function captureCatchUpCursor() {
+      this.catchUpAfterMessageId = this.lastRenderedMessageId;
+    }
+  }, {
+    key: "catchUpMessages",
+    value: function () {
+      var _catchUpMessages = _asyncToGenerator(function* () {
+        var afterId = this.catchUpAfterMessageId;
+        if (!afterId || this.fetchingCatchUpMessages) return;
+        this.fetchingCatchUpMessages = true;
+        try {
+          var response = yield this.messagesAPI.catchUp(afterId);
+          var {
+            messages = []
+          } = yield response.json();
+          messages.forEach(message => this.onMessageReceived(message, {
+            scroll: false
+          }));
+          this.catchUpAfterMessageId = this.lastRenderedMessageId;
+        } finally {
+          this.fetchingCatchUpMessages = false;
+        }
+      });
+      function catchUpMessages() {
+        return _catchUpMessages.apply(this, arguments);
+      }
+      return catchUpMessages;
+    }()
+  }, {
+    key: "lastRenderedMessageId",
+    get: function get() {
+      var _messages;
+      var messages = this.persistedMessageElements;
+      return ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.dataset.id) || null;
+    }
+  }, {
+    key: "persistedMessageElements",
+    get: function get() {
+      return Array.from(this.messagesContainerTarget.querySelectorAll('.hellotext--webchat-message[data-id]'));
+    }
+  }, {
+    key: "setMessageCreatedAt",
+    value: function setMessageCreatedAt(element, createdAt) {
+      if (createdAt) {
+        element.setAttribute('data-created-at', createdAt);
+      }
+    }
+  }, {
+    key: "insertMessageElement",
+    value: function insertMessageElement(element) {
+      var nextElement = this.nextMessageElementFor(element);
+      if (nextElement) {
+        this.messagesContainerTarget.insertBefore(element, nextElement);
+      } else {
+        this.messagesContainerTarget.appendChild(element);
+      }
+    }
+  }, {
+    key: "nextMessageElementFor",
+    value: function nextMessageElementFor(element) {
+      var createdAt = Date.parse(element.dataset.createdAt);
+      if (Number.isNaN(createdAt)) return null;
+      return this.persistedMessageElements.find(messageElement => {
+        if (messageElement === element) return false;
+        var messageCreatedAt = Date.parse(messageElement.dataset.createdAt);
+        return !Number.isNaN(messageCreatedAt) && messageCreatedAt > createdAt;
+      });
+    }
   }, {
     key: "updateMessageTeaser",
     value: function updateMessageTeaser(teaser) {
@@ -440,16 +551,22 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "insertCarouselMessage",
     value: function insertCarouselMessage(message) {
       var _element$querySelecto;
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var html = message.html;
+      var createdAt = message.created_at || message.createdAt;
       var element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      element.classList.add('hellotext--webchat-message');
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.setMessageCreatedAt(element, createdAt);
       this.localizeMessageTimestamps(element);
       this.clearTypingIndicator();
-      this.messagesContainerTarget.appendChild(element);
-      element.scrollIntoView({
-        behavior: 'smooth'
-      });
+      this.insertMessageElement(element);
+      if (options.scroll !== false) {
+        element.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }
       Hellotext.eventEmitter.dispatch('webchat:message:received', _objectSpread(_objectSpread({}, message), {}, {
         body: ((_element$querySelecto = element.querySelector('[data-body]')) === null || _element$querySelecto === void 0 ? void 0 : _element$querySelecto.innerText) || ''
       }));
@@ -681,7 +798,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.attachmentContainerTarget.innerHTML = '';
         this.attachmentContainerTarget.style.display = 'none';
         this.errorMessageContainerTarget.style.display = 'none';
-        this.inputTarget.focus();
+        this.focusComposeInput();
 
         // Set up optimistic typing indicator BEFORE making the API call
         // This prevents race conditions with server responses
@@ -739,12 +856,10 @@ var _default = /*#__PURE__*/function (_Controller) {
       } = event;
       var ignoredSelector = ['button', 'a', 'input', 'textarea', 'select', 'label', '[role="button"]', 'em-emoji-picker', '[data-hellotext--webchat--emoji-target~="popover"]', '[data-controller~="hellotext--webchat--emoji"]'].join(', ');
       if (!this.hasInputTarget || target.closest(ignoredSelector)) return;
+      if (!this.focusComposeInput({
+        moveCursorToEnd: true
+      })) return;
       event.preventDefault();
-      this.inputTarget.focus();
-      if (typeof this.inputTarget.selectionStart === 'number') {
-        var position = this.inputTarget.value.length;
-        this.inputTarget.setSelectionRange(position, position);
-      }
     }
   }, {
     key: "closePopoverFromHeader",
@@ -907,7 +1022,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.files = [...this.files, ...newFiles];
       this.errorMessageContainerTarget.innerText = '';
       newFiles.forEach(file => this.createAttachmentElement(file));
-      this.inputTarget.focus();
+      this.focusComposeInput();
     }
   }, {
     key: "createAttachmentElement",
@@ -943,7 +1058,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.files = this.files.filter(file => file.name !== attachment.dataset.name);
       this.attachmentInputTarget.value = '';
       attachment.remove();
-      this.inputTarget.focus();
+      this.focusComposeInput();
     }
   }, {
     key: "attachmentTargetDisconnected",
@@ -973,7 +1088,23 @@ var _default = /*#__PURE__*/function (_Controller) {
       var end = this.inputTarget.selectionEnd;
       this.inputTarget.value = value.slice(0, start) + emoji + value.slice(end);
       this.inputTarget.selectionStart = this.inputTarget.selectionEnd = start + emoji.length;
+      this.focusComposeInput();
+    }
+  }, {
+    key: "focusComposeInput",
+    value: function focusComposeInput() {
+      var {
+        moveCursorToEnd = false
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      if (!this.shouldAutofocusCompose) return false;
+      if (this.hasInputTarget === false) return false;
+      if (this.hasInputTarget === undefined && !this.inputTarget) return false;
       this.inputTarget.focus();
+      if (moveCursorToEnd && typeof this.inputTarget.selectionStart === 'number') {
+        var position = this.inputTarget.value.length;
+        this.inputTarget.setSelectionRange(position, position);
+      }
+      return true;
     }
   }, {
     key: "byteToMegabyte",
@@ -992,9 +1123,32 @@ var _default = /*#__PURE__*/function (_Controller) {
     get: function get() {
       return localStorage.getItem("hellotext--webchat--".concat(this.idValue)) === 'opened' && !this.onMobile;
     }
+  }, {
+    key: "shouldAutofocusCompose",
+    get: function get() {
+      return !this.usesVirtualKeyboard;
+    }
+  }, {
+    key: "usesVirtualKeyboard",
+    get: function get() {
+      var _navigator$userAgentD;
+      if (typeof navigator === 'undefined') return false;
+      var userAgent = navigator.userAgent || '';
+      var isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+      var isMobileUserAgent = MOBILE_USER_AGENT_PATTERN.test(userAgent);
+      var isUserAgentDataMobile = ((_navigator$userAgentD = navigator.userAgentData) === null || _navigator$userAgentD === void 0 ? void 0 : _navigator$userAgentD.mobile) === true;
+      return isMobileUserAgent || isIPadOS || isUserAgentDataMobile || this.hasTouchOnlyPointer;
+    }
+  }, {
+    key: "hasTouchOnlyPointer",
+    get: function get() {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
+      return window.matchMedia('(pointer: coarse)').matches && window.matchMedia('(hover: none)').matches;
+    }
   }, {
     key: "onMobile",
     get: function get() {
+      if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
       return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue, "px)")).matches;
     }
   }], [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/api/webchat/messages.js

@@ -25,6 +25,13 @@ class WebchatMessagesAPI {
     })
   }
 
+  catchUp(afterId) {
+    return this.index({
+      after_id: afterId,
+      session: Hellotext.session,
+    })
+  }
+
   async create(formData) {
     const response = await fetch(this.url, {
       method: 'POST',

package/src/channels/application_channel.js

@@ -2,6 +2,20 @@ import { Configuration } from '../core'
 
 class ApplicationChannel {
   static webSocket
+  static channels = new Set()
+  static messageHandlers = new Set()
+  static disconnectHandlers = new Set()
+  static subscriptionConfirmHandlers = new Set()
+  static reconnectTimeout = null
+  static reconnectAttempts = 0
+  static reconnectBaseDelay = 500
+  static reconnectMaxDelay = 10000
+  static reconnectJitter = 0.3
+  static needsResubscribe = false
+
+  constructor() {
+    ApplicationChannel.channels.add(this)
+  }
 
   send({ command, identifier, data }) {
     const payload = {
@@ -10,17 +24,20 @@ class ApplicationChannel {
       data: JSON.stringify(data || {}),
     }
 
-    if (this.webSocket.readyState === WebSocket.OPEN) {
-      this.webSocket.send(JSON.stringify(payload))
+    const socket = ApplicationChannel.ensureWebSocket()
+    const message = JSON.stringify(payload)
+
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send(message)
     } else {
-      this.webSocket.addEventListener('open', () => {
-        this.webSocket.send(JSON.stringify(payload))
+      socket.addEventListener('open', () => {
+        socket.send(message)
       })
     }
   }
 
   onMessage(callback) {
-    this.webSocket.addEventListener('message', event => {
+    const handler = event => {
       const data = JSON.parse(event.data)
       const { type, message } = data
 
@@ -29,15 +46,141 @@ class ApplicationChannel {
       }
 
       callback(message)
-    })
+    }
+
+    ApplicationChannel.messageHandlers.add(handler)
+    ApplicationChannel.ensureWebSocket().addEventListener('message', handler)
+  }
+
+  onDisconnect(callback) {
+    ApplicationChannel.disconnectHandlers.add(callback)
+  }
+
+  onSubscriptionConfirmed(callback) {
+    ApplicationChannel.subscriptionConfirmHandlers.add(callback)
   }
 
   get webSocket() {
-    if (!ApplicationChannel.webSocket) {
-      return (ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl))
+    return ApplicationChannel.ensureWebSocket()
+  }
+
+  static ensureWebSocket() {
+    if (this.webSocket && !this.closedWebSocket(this.webSocket)) {
+      return this.webSocket
+    }
+
+    if (this.webSocket) {
+      this.needsResubscribe = true
+    }
+
+    return this.openWebSocket()
+  }
+
+  static openWebSocket() {
+    this.clearReconnectTimeout()
+
+    const socket = new WebSocket(Configuration.actionCableUrl)
+    this.webSocket = socket
+    this.installWebSocketHandlers(socket)
+
+    return socket
+  }
+
+  static installWebSocketHandlers(socket) {
+    socket.addEventListener('open', () => this.handleOpen(socket))
+    socket.addEventListener('close', () => this.handleDisconnect(socket))
+    socket.addEventListener('error', () => this.handleDisconnect(socket))
+    socket.addEventListener('message', event => this.handleControlMessage(event))
+
+    this.messageHandlers.forEach(handler => {
+      socket.addEventListener('message', handler)
+    })
+  }
+
+  static handleOpen(socket) {
+    if (socket !== this.webSocket) {
+      return
+    }
+
+    this.reconnectAttempts = 0
+
+    if (!this.needsResubscribe) {
+      return
     }
 
-    return ApplicationChannel.webSocket
+    this.needsResubscribe = false
+    this.resubscribeChannels()
+  }
+
+  static handleControlMessage(event) {
+    let data
+
+    try {
+      data = JSON.parse(event.data)
+    } catch {
+      return
+    }
+
+    if (data.type !== 'confirm_subscription') {
+      return
+    }
+
+    this.subscriptionConfirmHandlers.forEach(callback => callback(data.identifier))
+  }
+
+  static handleDisconnect(socket) {
+    if (socket !== this.webSocket) {
+      return
+    }
+
+    this.disconnectHandlers.forEach(callback => callback())
+    this.webSocket = null
+    this.needsResubscribe = true
+    this.scheduleReconnect()
+  }
+
+  static scheduleReconnect() {
+    if (this.reconnectTimeout) {
+      return
+    }
+
+    this.reconnectTimeout = setTimeout(() => {
+      this.reconnectTimeout = null
+      this.reconnectAttempts += 1
+      this.openWebSocket()
+    }, this.reconnectDelay)
+  }
+
+  static clearReconnectTimeout() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+  }
+
+  static resubscribeChannels() {
+    this.channels.forEach(channel => {
+      const resubscribe = channel.resubscribe || channel.subscribe
+
+      if (typeof resubscribe === 'function') {
+        resubscribe.call(channel)
+      }
+    })
+  }
+
+  static closedWebSocket(socket) {
+    return socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING
+  }
+
+  static get reconnectDelay() {
+    const delay = Math.min(
+      this.reconnectMaxDelay,
+      this.reconnectBaseDelay * 2 ** this.reconnectAttempts,
+    )
+
+    const jitter = Math.round(delay * this.reconnectJitter * Math.random())
+
+    return delay + jitter
   }
 
   get ignoredEvents() {

package/src/channels/webchat_channel.js

@@ -7,11 +7,24 @@ class WebchatChannel extends ApplicationChannel {
     this.id = id
     this.session = session
     this.conversation = conversation
-
+    // Keep our own subscription intent instead of trusting the socket state.
+    // The shared WebSocket can reconnect independently, but an explicit
+    // unsubscribe means this channel should not silently join again.
+    this.subscribed = false
+    this.awaitingReconnectConfirmation = false
+    this.reconnectCallbacks = new Set()
+
+    // ActionCable confirms subscriptions at the socket level. This channel
+    // listens for those confirmations so the controller can wait until Rails has
+    // accepted this exact WebchatChannel subscription before fetching missed
+    // messages from the REST catch-up endpoint.
+    this.onSubscriptionConfirmed(identifier => this.handleSubscriptionConfirmed(identifier))
     this.subscribe()
   }
 
   subscribe() {
+    this.subscribed = true
+
     const params = {
       channel: 'WebchatChannel',
       id: this.id,
@@ -23,6 +36,8 @@ class WebchatChannel extends ApplicationChannel {
   }
 
   unsubscribe() {
+    this.subscribed = false
+
     const params = {
       channel: 'WebchatChannel',
       id: this.id,
@@ -33,6 +48,51 @@ class WebchatChannel extends ApplicationChannel {
     this.send({ command: 'unsubscribe', identifier: params })
   }
 
+  resubscribe() {
+    if (this.subscribed === false) return
+
+    // Reconnect recovery has two phases: send the subscription command first,
+    // then wait for ActionCable to confirm it. Catch-up work should run after
+    // that confirmation so broadcasts and REST backfill are pointed at the same
+    // live conversation subscription.
+    this.awaitingReconnectConfirmation = true
+    this.subscribe()
+  }
+
+  onReconnect(callback) {
+    this.reconnectCallbacks.add(callback)
+  }
+
+  handleSubscriptionConfirmed(identifier) {
+    if (!this.awaitingReconnectConfirmation || !this.matchesIdentifier(identifier)) return
+
+    // Only the first matching confirmation completes the reconnect cycle. This
+    // prevents unrelated subscription confirmations on the shared socket from
+    // triggering duplicate catch-up requests.
+    this.awaitingReconnectConfirmation = false
+    this.reconnectCallbacks.forEach(callback => callback())
+  }
+
+  matchesIdentifier(identifier) {
+    let params
+
+    try {
+      params = typeof identifier === 'string' ? JSON.parse(identifier) : identifier
+    } catch {
+      return false
+    }
+
+    // ActionCable sends the same identifier payload we used when subscribing.
+    // Matching every routing key keeps a confirmation for another webchat,
+    // session, or conversation from being treated as this channel's reconnect.
+    return (
+      params.channel === 'WebchatChannel' &&
+      params.id === this.id &&
+      params.session === this.session &&
+      params.conversation === this.conversation
+    )
+  }
+
   startTypingIndicator() {
     const params = {
       channel: 'WebchatChannel',