@hellotext/hellotext 2.4.4 → 2.4.51

package/lib/api/webchat/messages.cjs

@@ -30,6 +30,14 @@ let WebchatMessagesAPI = /*#__PURE__*/function () {
         headers: _hellotext.default.headers
       });
     }
+  }, {
+    key: "catchUp",
+    value: function catchUp(afterId) {
+      return this.index({
+        after_id: afterId,
+        session: _hellotext.default.session
+      });
+    }
   }, {
     key: "create",
     value: async function create(formData) {

package/lib/api/webchat/messages.js

@@ -32,6 +32,14 @@ var WebchatMessagesAPI = /*#__PURE__*/function () {
       }
       return index;
     }()
+  }, {
+    key: "catchUp",
+    value: function catchUp(afterId) {
+      return this.index({
+        after_id: afterId,
+        session: Hellotext.session
+      });
+    }
   }, {
     key: "create",
     value: function () {

package/lib/channels/application_channel.cjs

@@ -13,6 +13,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 let ApplicationChannel = /*#__PURE__*/function () {
   function ApplicationChannel() {
     _classCallCheck(this, ApplicationChannel);
+    ApplicationChannel.channels.add(this);
   }
   _createClass(ApplicationChannel, [{
     key: "send",
@@ -26,18 +27,20 @@ let ApplicationChannel = /*#__PURE__*/function () {
         identifier: JSON.stringify(identifier),
         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);
         });
       }
     }
   }, {
     key: "onMessage",
     value: function onMessage(callback) {
-      this.webSocket.addEventListener('message', event => {
+      const handler = event => {
         const data = JSON.parse(event.data);
         const {
           type,
@@ -47,24 +50,154 @@ let ApplicationChannel = /*#__PURE__*/function () {
           return;
         }
         callback(message);
-      });
+      };
+      ApplicationChannel.messageHandlers.add(handler);
+      ApplicationChannel.ensureWebSocket().addEventListener('message', handler);
+    }
+  }, {
+    key: "onDisconnect",
+    value: function onDisconnect(callback) {
+      ApplicationChannel.disconnectHandlers.add(callback);
+    }
+  }, {
+    key: "onSubscriptionConfirmed",
+    value: function onSubscriptionConfirmed(callback) {
+      ApplicationChannel.subscriptionConfirmHandlers.add(callback);
     }
   }, {
     key: "webSocket",
     get: function () {
-      if (!ApplicationChannel.webSocket) {
-        return ApplicationChannel.webSocket = new WebSocket(_core.Configuration.actionCableUrl);
-      }
-      return ApplicationChannel.webSocket;
+      return ApplicationChannel.ensureWebSocket();
     }
   }, {
     key: "ignoredEvents",
     get: function () {
       return ['ping', 'confirm_subscription', 'welcome'];
     }
+  }], [{
+    key: "ensureWebSocket",
+    value: function ensureWebSocket() {
+      if (this.webSocket && !this.closedWebSocket(this.webSocket)) {
+        return this.webSocket;
+      }
+      if (this.webSocket) {
+        this.needsResubscribe = true;
+      }
+      return this.openWebSocket();
+    }
+  }, {
+    key: "openWebSocket",
+    value: function openWebSocket() {
+      this.clearReconnectTimeout();
+      const socket = new WebSocket(_core.Configuration.actionCableUrl);
+      this.webSocket = socket;
+      this.installWebSocketHandlers(socket);
+      return socket;
+    }
+  }, {
+    key: "installWebSocketHandlers",
+    value: function 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);
+      });
+    }
+  }, {
+    key: "handleOpen",
+    value: function handleOpen(socket) {
+      if (socket !== this.webSocket) {
+        return;
+      }
+      this.reconnectAttempts = 0;
+      if (!this.needsResubscribe) {
+        return;
+      }
+      this.needsResubscribe = false;
+      this.resubscribeChannels();
+    }
+  }, {
+    key: "handleControlMessage",
+    value: function 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));
+    }
+  }, {
+    key: "handleDisconnect",
+    value: function handleDisconnect(socket) {
+      if (socket !== this.webSocket) {
+        return;
+      }
+      this.disconnectHandlers.forEach(callback => callback());
+      this.webSocket = null;
+      this.needsResubscribe = true;
+      this.scheduleReconnect();
+    }
+  }, {
+    key: "scheduleReconnect",
+    value: function scheduleReconnect() {
+      if (this.reconnectTimeout) {
+        return;
+      }
+      this.reconnectTimeout = setTimeout(() => {
+        this.reconnectTimeout = null;
+        this.reconnectAttempts += 1;
+        this.openWebSocket();
+      }, this.reconnectDelay);
+    }
+  }, {
+    key: "clearReconnectTimeout",
+    value: function clearReconnectTimeout() {
+      if (this.reconnectTimeout) {
+        clearTimeout(this.reconnectTimeout);
+        this.reconnectTimeout = null;
+      }
+    }
+  }, {
+    key: "resubscribeChannels",
+    value: function resubscribeChannels() {
+      this.channels.forEach(channel => {
+        const resubscribe = channel.resubscribe || channel.subscribe;
+        if (typeof resubscribe === 'function') {
+          resubscribe.call(channel);
+        }
+      });
+    }
+  }, {
+    key: "closedWebSocket",
+    value: function closedWebSocket(socket) {
+      return socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING;
+    }
+  }, {
+    key: "reconnectDelay",
+    get: function () {
+      const delay = Math.min(this.reconnectMaxDelay, this.reconnectBaseDelay * 2 ** this.reconnectAttempts);
+      const jitter = Math.round(delay * this.reconnectJitter * Math.random());
+      return delay + jitter;
+    }
   }]);
   return ApplicationChannel;
 }();
 ApplicationChannel.webSocket = void 0;
+ApplicationChannel.channels = new Set();
+ApplicationChannel.messageHandlers = new Set();
+ApplicationChannel.disconnectHandlers = new Set();
+ApplicationChannel.subscriptionConfirmHandlers = new Set();
+ApplicationChannel.reconnectTimeout = null;
+ApplicationChannel.reconnectAttempts = 0;
+ApplicationChannel.reconnectBaseDelay = 500;
+ApplicationChannel.reconnectMaxDelay = 10000;
+ApplicationChannel.reconnectJitter = 0.3;
+ApplicationChannel.needsResubscribe = false;
 var _default = ApplicationChannel;
 exports.default = _default;

package/lib/channels/application_channel.js

@@ -7,6 +7,7 @@ import { Configuration } from '../core';
 var ApplicationChannel = /*#__PURE__*/function () {
   function ApplicationChannel() {
     _classCallCheck(this, ApplicationChannel);
+    ApplicationChannel.channels.add(this);
   }
   _createClass(ApplicationChannel, [{
     key: "send",
@@ -21,18 +22,20 @@ var ApplicationChannel = /*#__PURE__*/function () {
         identifier: JSON.stringify(identifier),
         data: JSON.stringify(data || {})
       };
-      if (this.webSocket.readyState === WebSocket.OPEN) {
-        this.webSocket.send(JSON.stringify(payload));
+      var socket = ApplicationChannel.ensureWebSocket();
+      var 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);
         });
       }
     }
   }, {
     key: "onMessage",
     value: function onMessage(callback) {
-      this.webSocket.addEventListener('message', event => {
+      var handler = event => {
         var data = JSON.parse(event.data);
         var {
           type,
@@ -42,23 +45,153 @@ var ApplicationChannel = /*#__PURE__*/function () {
           return;
         }
         callback(message);
-      });
+      };
+      ApplicationChannel.messageHandlers.add(handler);
+      ApplicationChannel.ensureWebSocket().addEventListener('message', handler);
+    }
+  }, {
+    key: "onDisconnect",
+    value: function onDisconnect(callback) {
+      ApplicationChannel.disconnectHandlers.add(callback);
+    }
+  }, {
+    key: "onSubscriptionConfirmed",
+    value: function onSubscriptionConfirmed(callback) {
+      ApplicationChannel.subscriptionConfirmHandlers.add(callback);
     }
   }, {
     key: "webSocket",
     get: function get() {
-      if (!ApplicationChannel.webSocket) {
-        return ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl);
-      }
-      return ApplicationChannel.webSocket;
+      return ApplicationChannel.ensureWebSocket();
     }
   }, {
     key: "ignoredEvents",
     get: function get() {
       return ['ping', 'confirm_subscription', 'welcome'];
     }
+  }], [{
+    key: "ensureWebSocket",
+    value: function ensureWebSocket() {
+      if (this.webSocket && !this.closedWebSocket(this.webSocket)) {
+        return this.webSocket;
+      }
+      if (this.webSocket) {
+        this.needsResubscribe = true;
+      }
+      return this.openWebSocket();
+    }
+  }, {
+    key: "openWebSocket",
+    value: function openWebSocket() {
+      this.clearReconnectTimeout();
+      var socket = new WebSocket(Configuration.actionCableUrl);
+      this.webSocket = socket;
+      this.installWebSocketHandlers(socket);
+      return socket;
+    }
+  }, {
+    key: "installWebSocketHandlers",
+    value: function 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);
+      });
+    }
+  }, {
+    key: "handleOpen",
+    value: function handleOpen(socket) {
+      if (socket !== this.webSocket) {
+        return;
+      }
+      this.reconnectAttempts = 0;
+      if (!this.needsResubscribe) {
+        return;
+      }
+      this.needsResubscribe = false;
+      this.resubscribeChannels();
+    }
+  }, {
+    key: "handleControlMessage",
+    value: function handleControlMessage(event) {
+      var data;
+      try {
+        data = JSON.parse(event.data);
+      } catch (_unused) {
+        return;
+      }
+      if (data.type !== 'confirm_subscription') {
+        return;
+      }
+      this.subscriptionConfirmHandlers.forEach(callback => callback(data.identifier));
+    }
+  }, {
+    key: "handleDisconnect",
+    value: function handleDisconnect(socket) {
+      if (socket !== this.webSocket) {
+        return;
+      }
+      this.disconnectHandlers.forEach(callback => callback());
+      this.webSocket = null;
+      this.needsResubscribe = true;
+      this.scheduleReconnect();
+    }
+  }, {
+    key: "scheduleReconnect",
+    value: function scheduleReconnect() {
+      if (this.reconnectTimeout) {
+        return;
+      }
+      this.reconnectTimeout = setTimeout(() => {
+        this.reconnectTimeout = null;
+        this.reconnectAttempts += 1;
+        this.openWebSocket();
+      }, this.reconnectDelay);
+    }
+  }, {
+    key: "clearReconnectTimeout",
+    value: function clearReconnectTimeout() {
+      if (this.reconnectTimeout) {
+        clearTimeout(this.reconnectTimeout);
+        this.reconnectTimeout = null;
+      }
+    }
+  }, {
+    key: "resubscribeChannels",
+    value: function resubscribeChannels() {
+      this.channels.forEach(channel => {
+        var resubscribe = channel.resubscribe || channel.subscribe;
+        if (typeof resubscribe === 'function') {
+          resubscribe.call(channel);
+        }
+      });
+    }
+  }, {
+    key: "closedWebSocket",
+    value: function closedWebSocket(socket) {
+      return socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING;
+    }
+  }, {
+    key: "reconnectDelay",
+    get: function get() {
+      var delay = Math.min(this.reconnectMaxDelay, this.reconnectBaseDelay * 2 ** this.reconnectAttempts);
+      var jitter = Math.round(delay * this.reconnectJitter * Math.random());
+      return delay + jitter;
+    }
   }]);
   return ApplicationChannel;
 }();
 ApplicationChannel.webSocket = void 0;
+ApplicationChannel.channels = new Set();
+ApplicationChannel.messageHandlers = new Set();
+ApplicationChannel.disconnectHandlers = new Set();
+ApplicationChannel.subscriptionConfirmHandlers = new Set();
+ApplicationChannel.reconnectTimeout = null;
+ApplicationChannel.reconnectAttempts = 0;
+ApplicationChannel.reconnectBaseDelay = 500;
+ApplicationChannel.reconnectMaxDelay = 10000;
+ApplicationChannel.reconnectJitter = 0.3;
+ApplicationChannel.needsResubscribe = false;
 export default ApplicationChannel;

package/lib/channels/webchat_channel.cjs

@@ -30,12 +30,25 @@ let WebchatChannel = /*#__PURE__*/function (_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();
     return _this;
   }
   _createClass(WebchatChannel, [{
     key: "subscribe",
     value: function subscribe() {
+      this.subscribed = true;
       const params = {
         channel: 'WebchatChannel',
         id: this.id,
@@ -50,6 +63,7 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.subscribed = false;
       const params = {
         channel: 'WebchatChannel',
         id: this.id,
@@ -61,6 +75,49 @@ let WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         identifier: params
       });
     }
+  }, {
+    key: "resubscribe",
+    value: function 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();
+    }
+  }, {
+    key: "onReconnect",
+    value: function onReconnect(callback) {
+      this.reconnectCallbacks.add(callback);
+    }
+  }, {
+    key: "handleSubscriptionConfirmed",
+    value: function 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());
+    }
+  }, {
+    key: "matchesIdentifier",
+    value: function 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;
+    }
   }, {
     key: "startTypingIndicator",
     value: function startTypingIndicator() {

package/lib/channels/webchat_channel.js

@@ -23,12 +23,25 @@ var WebchatChannel = /*#__PURE__*/function (_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();
     return _this;
   }
   _createClass(WebchatChannel, [{
     key: "subscribe",
     value: function subscribe() {
+      this.subscribed = true;
       var params = {
         channel: 'WebchatChannel',
         id: this.id,
@@ -43,6 +56,7 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
   }, {
     key: "unsubscribe",
     value: function unsubscribe() {
+      this.subscribed = false;
       var params = {
         channel: 'WebchatChannel',
         id: this.id,
@@ -54,6 +68,49 @@ var WebchatChannel = /*#__PURE__*/function (_ApplicationChannel) {
         identifier: params
       });
     }
+  }, {
+    key: "resubscribe",
+    value: function 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();
+    }
+  }, {
+    key: "onReconnect",
+    value: function onReconnect(callback) {
+      this.reconnectCallbacks.add(callback);
+    }
+  }, {
+    key: "handleSubscriptionConfirmed",
+    value: function 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());
+    }
+  }, {
+    key: "matchesIdentifier",
+    value: function matchesIdentifier(identifier) {
+      var params;
+      try {
+        params = typeof identifier === 'string' ? JSON.parse(identifier) : identifier;
+      } catch (_unused) {
+        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;
+    }
   }, {
     key: "startTypingIndicator",
     value: function startTypingIndicator() {

package/lib/controllers/message_controller.cjs

@@ -30,6 +30,13 @@ let _default = /*#__PURE__*/function (_Controller) {
     key: "connect",
     value: function connect() {
       this.updateFades();
+      this.observeContainerSize();
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      var _this$resizeObserver;
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     }
   }, {
     key: "setId",
@@ -221,6 +228,13 @@ let _default = /*#__PURE__*/function (_Controller) {
     value: function getPageStartOffset() {
       return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
+  }, {
+    key: "observeContainerSize",
+    value: function observeContainerSize() {
+      if (!this.hasCarouselContainerTarget || !window.ResizeObserver) return;
+      this.resizeObserver = new ResizeObserver(() => this.updateFades());
+      this.resizeObserver.observe(this.carouselContainerTarget);
+    }
   }, {
     key: "updateFades",
     value: function updateFades() {

package/lib/controllers/message_controller.js

@@ -26,6 +26,13 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "connect",
     value: function connect() {
       this.updateFades();
+      this.observeContainerSize();
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      var _this$resizeObserver;
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     }
   }, {
     key: "setId",
@@ -217,6 +224,13 @@ var _default = /*#__PURE__*/function (_Controller) {
     value: function getPageStartOffset() {
       return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0;
     }
+  }, {
+    key: "observeContainerSize",
+    value: function observeContainerSize() {
+      if (!this.hasCarouselContainerTarget || !window.ResizeObserver) return;
+      this.resizeObserver = new ResizeObserver(() => this.updateFades());
+      this.resizeObserver.observe(this.carouselContainerTarget);
+    }
   }, {
     key: "updateFades",
     value: function updateFades() {