@hellotext/hellotext 2.4.2 → 2.4.4

package/lib/controllers/webchat_controller.js

@@ -28,6 +28,15 @@ import { usePopover } from './mixins/usePopover';
 import { useBehaviour } from './webchat/useBehaviour';
 import { useOpeningSequence } from './webchat/useOpeningSequence';
 import { useTeaser } from './webchat/useTeaser';
+var POPOVER_ANIMATION_DURATION = 120;
+var MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
+  hour: 'numeric',
+  minute: '2-digit'
+};
+var SCROLL_ISOLATION_EVENT_OPTIONS = {
+  capture: true,
+  passive: true
+};
 var _default = /*#__PURE__*/function (_Controller) {
   _inherits(_default, _Controller);
   var _super = _createSuper(_default);
@@ -47,6 +56,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.onTypingStart = this.onTypingStart.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));
       _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
     }
@@ -70,15 +80,20 @@ var _default = /*#__PURE__*/function (_Controller) {
       }
       this.setupTeaser();
       this.setupOpeningSequence();
+      this.localizeMessageTimestamps();
       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;
       }
       Hellotext.eventEmitter.dispatch('webchat:mounted');
       this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
+      window.addEventListener('keydown', this.closePopoverOnEscape, true);
       this.scheduleBehaviourOpen();
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
@@ -86,10 +101,14 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "disconnect",
     value: function disconnect() {
       this.cancelBehaviourOpen();
+      this.clearPopoverOpenAnimation();
       this.teardownTeaser();
       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
       this.clearTypingIndicator();
@@ -97,6 +116,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() {
@@ -178,6 +212,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       var callbacks = {
         'message:sent': data => {
           var element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild;
+          this.localizeMessageTimestamps(element);
 
           // Insert message before typing indicator if one exists
           if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
@@ -190,8 +225,8 @@ var _default = /*#__PURE__*/function (_Controller) {
           });
         },
         'message:failed': data => {
-          var _this$messagesContain;
-          (_this$messagesContain = this.messagesContainerTarget.querySelector("#".concat(data.id))) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed');
+          var element = this.messagesContainerTarget.querySelector("#".concat(data.id));
+          this.markMessageFailed(element, data.reason);
         }
       };
       if (callbacks[data.type]) {
@@ -221,6 +256,7 @@ var _default = /*#__PURE__*/function (_Controller) {
             body,
             attachments
           } = message;
+          var createdAt = message.created_at || message.createdAt;
           var div = document.createElement('div');
           div.innerHTML = body;
           var element = this.messageTemplateTarget.cloneNode(true);
@@ -243,6 +279,7 @@ var _default = /*#__PURE__*/function (_Controller) {
             });
           }
           element.setAttribute('data-body', body);
+          this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
           this.messagesContainerTarget.prepend(element);
         });
         this.messagesContainerTarget.scroll({
@@ -266,10 +303,30 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "closePopover",
     value: function closePopover() {
-      this.popoverTarget.classList.add(...this.fadeOutClasses);
-      setTimeout(() => {
-        this.openValue = false;
-      }, 250);
+      this.clearPopoverOpenAnimation();
+      this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      this.openValue = false;
+    }
+  }, {
+    key: "preparePopoverOpenAnimation",
+    value: function preparePopoverOpenAnimation() {
+      this.clearPopoverOpenAnimation();
+      this.popoverTarget.classList.remove(...this.fadeOutClasses);
+      this.popoverTarget.classList.add('hellotext--webchat-popover-opening');
+      this.popoverOpenAnimationTimeout = setTimeout(() => {
+        this.popoverTarget.classList.remove('hellotext--webchat-popover-opening');
+        this.popoverOpenAnimationTimeout = null;
+      }, POPOVER_ANIMATION_DURATION);
+    }
+  }, {
+    key: "clearPopoverOpenAnimation",
+    value: function clearPopoverOpenAnimation() {
+      var _this$popoverTarget;
+      if (this.popoverOpenAnimationTimeout) {
+        clearTimeout(this.popoverOpenAnimationTimeout);
+        this.popoverOpenAnimationTimeout = null;
+      }
+      (_this$popoverTarget = this.popoverTarget) === null || _this$popoverTarget === void 0 ? void 0 : _this$popoverTarget.classList.remove('hellotext--webchat-popover-opening');
     }
   }, {
     key: "onPopoverOpened",
@@ -303,6 +360,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onPopoverClosed",
     value: function onPopoverClosed() {
+      this.clearPopoverOpenAnimation();
       Hellotext.eventEmitter.dispatch('webchat:closed');
       localStorage.setItem("hellotext--webchat--".concat(this.idValue), 'closed');
     }
@@ -340,6 +398,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         attachments,
         teaser
       } = message;
+      var createdAt = message.created_at || message.createdAt;
       if (!this.claimMessageId(id)) return;
       (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this);
       if (message.carousel) {
@@ -352,6 +411,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
       element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt);
       if (attachments) {
         attachments.forEach(attachmentUrl => {
           var _this$messageAttachme2;
@@ -408,6 +468,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       var element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
       element.setAttribute('data-id', message.id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamps(element);
       this.clearTypingIndicator();
       this.messagesContainerTarget.appendChild(element);
       element.scrollIntoView({
@@ -453,14 +514,14 @@ var _default = /*#__PURE__*/function (_Controller) {
         (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this);
         var formData = new FormData();
         formData.append('message[body]', body);
-        formData.append('message[replied_to]', id);
-        formData.append('message[product]', product);
-        formData.append('message[button]', buttonId);
+        if (id) formData.append('message[replied_to]', id);
+        if (product) formData.append('message[product]', product);
+        if (buttonId) formData.append('message[button]', buttonId);
         formData.append('session', Hellotext.session);
         formData.append('locale', Locale.toString());
         this.appendOpeningSequenceMessageIds(formData);
         var element = this.buildMessageElement();
-        var attachment = (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true);
+        var attachment = cardElement === null || cardElement === void 0 ? void 0 : (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true);
         element.querySelector('[data-body]').innerText = body;
         if (attachment) {
           var _this$messageAttachme3;
@@ -484,17 +545,14 @@ var _default = /*#__PURE__*/function (_Controller) {
         if (response.failed) {
           // Clear the optimistic typing indicator on failure
           clearTimeout(this.optimisticTypingTimeout);
-          this.broadcastChannel.postMessage({
-            type: 'message:failed',
-            id: element.id
-          });
-          return element.classList.add('failed');
+          return this.markMessageFailedFromResponse(response, element);
         }
         var data = yield response.json();
         this.dispatch('set:id', {
           target: element,
           detail: data.id
         });
+        this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
         this.clearRevealedOpeningSequenceMessageIds();
         var message = {
           id: data.id,
@@ -555,14 +613,11 @@ var _default = /*#__PURE__*/function (_Controller) {
         var response = yield this.messagesAPI.create(formData);
         if (response.failed) {
           clearTimeout(this.optimisticTypingTimeout);
-          this.broadcastChannel.postMessage({
-            type: 'message:failed',
-            id: element.id
-          });
-          return element.classList.add('failed');
+          return this.markMessageFailedFromResponse(response, element);
         }
         var data = yield response.json();
         element.setAttribute('data-id', data.id);
+        this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
         this.clearRevealedOpeningSequenceMessageIds();
         Hellotext.eventEmitter.dispatch('webchat:message:sent', {
           id: data.id,
@@ -664,15 +719,12 @@ var _default = /*#__PURE__*/function (_Controller) {
         if (response.failed) {
           // Clear the optimistic typing indicator on failure
           clearTimeout(this.optimisticTypingTimeout);
-          this.broadcastChannel.postMessage({
-            type: 'message:failed',
-            id: element.id
-          });
-          return element.classList.add('failed');
+          return this.markMessageFailedFromResponse(response, element);
         }
         var data = yield response.json();
         element.setAttribute('data-id', data.id);
         message.id = data.id;
+        this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt);
         this.clearRevealedOpeningSequenceMessageIds();
         Hellotext.eventEmitter.dispatch('webchat:message:sent', message);
         if (data.conversation !== this.conversationIdValue) {
@@ -700,8 +752,145 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.style.removeProperty('display');
       element.setAttribute('data-controller', 'hellotext--message');
       element.setAttribute('data-hellotext--webchat-target', 'message');
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date());
       return element;
     }
+  }, {
+    key: "focusCompose",
+    value: function focusCompose(event) {
+      var {
+        target
+      } = 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;
+      event.preventDefault();
+      this.inputTarget.focus();
+      if (typeof this.inputTarget.selectionStart === 'number') {
+        var position = this.inputTarget.value.length;
+        this.inputTarget.setSelectionRange(position, position);
+      }
+    }
+  }, {
+    key: "closePopoverFromHeader",
+    value: function closePopoverFromHeader(event) {
+      var {
+        target
+      } = event;
+      if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return;
+      event.preventDefault();
+      this.closePopover();
+    }
+  }, {
+    key: "closePopoverOnEscape",
+    value: function closePopoverOnEscape(event) {
+      var _this$triggerTarget, _this$triggerTarget$f;
+      if (event.key !== 'Escape' || !this.openValue) return;
+      event.preventDefault();
+      event.stopPropagation();
+      this.closePopover();
+      (_this$triggerTarget = this.triggerTarget) === null || _this$triggerTarget === void 0 ? void 0 : (_this$triggerTarget$f = _this$triggerTarget.focus) === null || _this$triggerTarget$f === void 0 ? void 0 : _this$triggerTarget$f.call(_this$triggerTarget);
+    }
+  }, {
+    key: "markMessageFailedFromResponse",
+    value: function () {
+      var _markMessageFailedFromResponse = _asyncToGenerator(function* (response, element) {
+        var reason = yield this.messageFailureReason(response);
+        this.markMessageFailed(element, reason);
+        this.broadcastChannel.postMessage({
+          type: 'message:failed',
+          id: element.id,
+          reason
+        });
+      });
+      function markMessageFailedFromResponse(_x4, _x5) {
+        return _markMessageFailedFromResponse.apply(this, arguments);
+      }
+      return markMessageFailedFromResponse;
+    }()
+  }, {
+    key: "markMessageFailed",
+    value: function markMessageFailed(element, reason) {
+      if (!element) return;
+      element.classList.add('failed');
+      if (!reason) return;
+      var timestamp = element.querySelector('[data-message-timestamp]');
+      if (timestamp) {
+        timestamp.textContent = reason;
+      }
+    }
+  }, {
+    key: "localizeMessageTimestamps",
+    value: function localizeMessageTimestamps() {
+      var _root$matches, _root$querySelectorAl;
+      var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.element;
+      if (!root) return;
+      var timestamps = (_root$matches = root.matches) !== null && _root$matches !== void 0 && _root$matches.call(root, 'time[datetime][data-message-timestamp]') ? [root] : Array.from(((_root$querySelectorAl = root.querySelectorAll) === null || _root$querySelectorAl === void 0 ? void 0 : _root$querySelectorAl.call(root, 'time[datetime][data-message-timestamp]')) || []);
+      timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp));
+    }
+  }, {
+    key: "localizeMessageTimestamp",
+    value: function localizeMessageTimestamp(timestamp) {
+      var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : timestamp === null || timestamp === void 0 ? void 0 : timestamp.getAttribute('datetime');
+      if (!timestamp || !value) return;
+      var date = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(date.getTime())) return;
+      timestamp.setAttribute('datetime', date.toISOString());
+      timestamp.textContent = this.formatMessageTimestamp(date);
+    }
+  }, {
+    key: "formatMessageTimestamp",
+    value: function formatMessageTimestamp(date) {
+      return this.constructor.messageTimestampFormatterFor(Locale.toString()).format(date);
+    }
+  }, {
+    key: "messageFailureReason",
+    value: function () {
+      var _messageFailureReason = _asyncToGenerator(function* (response) {
+        var nativeResponse = (response === null || response === void 0 ? void 0 : response.data) || (response === null || response === void 0 ? void 0 : response.response);
+        var fallback = (nativeResponse === null || nativeResponse === void 0 ? void 0 : nativeResponse.statusText) || 'Message failed';
+        try {
+          var _jsonResponse$json;
+          var jsonResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse;
+          var payload = yield jsonResponse === null || jsonResponse === void 0 ? void 0 : (_jsonResponse$json = jsonResponse.json) === null || _jsonResponse$json === void 0 ? void 0 : _jsonResponse$json.call(jsonResponse);
+          var reason = this.messageFailureReasonFromPayload(payload);
+          if (reason) return reason;
+        } catch (_) {
+          // Fall through to text parsing/fallback. Some stores strip content-type or
+          // return non-JSON failures, so the timestamp still needs a useful reason.
+        }
+        try {
+          var _textResponse$text;
+          var textResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse;
+          var text = yield textResponse === null || textResponse === void 0 ? void 0 : (_textResponse$text = textResponse.text) === null || _textResponse$text === void 0 ? void 0 : _textResponse$text.call(textResponse);
+          return this.messageFailureReasonFromText(text) || fallback;
+        } catch (_) {
+          return fallback;
+        }
+      });
+      function messageFailureReason(_x6) {
+        return _messageFailureReason.apply(this, arguments);
+      }
+      return messageFailureReason;
+    }()
+  }, {
+    key: "messageFailureReasonFromText",
+    value: function messageFailureReasonFromText(text) {
+      if (typeof text !== 'string') return null;
+      var value = text.trim();
+      if (!value || value.startsWith('<')) return null;
+      try {
+        return this.messageFailureReasonFromPayload(JSON.parse(value)) || value;
+      } catch (_) {
+        return value;
+      }
+    }
+  }, {
+    key: "messageFailureReasonFromPayload",
+    value: function messageFailureReasonFromPayload(payload) {
+      var _payload$error, _payload$errors, _payload$errors2, _payload$errors2$, _payload$errors3, _payload$errors3$;
+      if (!payload) return null;
+      return [(_payload$error = payload.error) === null || _payload$error === void 0 ? void 0 : _payload$error.message, payload.message, (_payload$errors = payload.errors) === null || _payload$errors === void 0 ? void 0 : _payload$errors.message, (_payload$errors2 = payload.errors) === null || _payload$errors2 === void 0 ? void 0 : (_payload$errors2$ = _payload$errors2[0]) === null || _payload$errors2$ === void 0 ? void 0 : _payload$errors2$.message, (_payload$errors3 = payload.errors) === null || _payload$errors3 === void 0 ? void 0 : (_payload$errors3$ = _payload$errors3[0]) === null || _payload$errors3$ === void 0 ? void 0 : _payload$errors3$.description].find(reason => typeof reason === 'string' && reason.trim().length > 0);
+    }
   }, {
     key: "messageAttachmentsContainer",
     value: function messageAttachmentsContainer(element) {
@@ -832,9 +1021,28 @@ var _default = /*#__PURE__*/function (_Controller) {
     get: function get() {
       return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue, "px)")).matches;
     }
+  }], [{
+    key: "messageTimestampFormatterFor",
+    value: function messageTimestampFormatterFor(locale) {
+      var key = locale || 'default';
+      if (!this.messageTimestampFormatters[key]) {
+        this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale);
+      }
+      return this.messageTimestampFormatters[key];
+    }
+  }, {
+    key: "buildMessageTimestampFormatter",
+    value: function buildMessageTimestampFormatter(locale) {
+      try {
+        return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS);
+      } catch (_) {
+        return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS);
+      }
+    }
   }]);
   return _default;
 }(Controller);
+_default.messageTimestampFormatters = {};
 _default.values = {
   id: String,
   conversationId: String,

package/lib/core/configuration.cjs

@@ -39,6 +39,7 @@ let Configuration = /*#__PURE__*/function () {
      */
     function assign(props) {
       if (props) {
+        const shouldInferActionCableUrl = Object.prototype.hasOwnProperty.call(props, 'apiRoot') && !Object.prototype.hasOwnProperty.call(props, 'actionCableUrl');
         Object.entries(props).forEach(([key, value]) => {
           if (key === 'forms') {
             this.forms = _forms.Forms.assign(value);
@@ -48,6 +49,9 @@ let Configuration = /*#__PURE__*/function () {
             this[key] = value;
           }
         });
+        if (shouldInferActionCableUrl) {
+          this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot);
+        }
       }
       return this;
     }
@@ -64,6 +68,21 @@ let Configuration = /*#__PURE__*/function () {
     value: function endpoint(path) {
       return `${this.apiRoot}/${path}`;
     }
+  }, {
+    key: "actionCableUrlForApiRoot",
+    value: function actionCableUrlForApiRoot(apiRoot) {
+      try {
+        const url = new URL(apiRoot);
+        const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        url.protocol = protocol;
+        url.pathname = '/cable';
+        url.search = '';
+        url.hash = '';
+        return url.toString();
+      } catch (_) {
+        return this.actionCableUrl;
+      }
+    }
   }]);
   return Configuration;
 }();

package/lib/core/configuration.js

@@ -34,6 +34,7 @@ var Configuration = /*#__PURE__*/function () {
      */
     function assign(props) {
       if (props) {
+        var shouldInferActionCableUrl = Object.prototype.hasOwnProperty.call(props, 'apiRoot') && !Object.prototype.hasOwnProperty.call(props, 'actionCableUrl');
         Object.entries(props).forEach(_ref => {
           var [key, value] = _ref;
           if (key === 'forms') {
@@ -44,6 +45,9 @@ var Configuration = /*#__PURE__*/function () {
             this[key] = value;
           }
         });
+        if (shouldInferActionCableUrl) {
+          this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot);
+        }
       }
       return this;
     }
@@ -60,6 +64,21 @@ var Configuration = /*#__PURE__*/function () {
     value: function endpoint(path) {
       return "".concat(this.apiRoot, "/").concat(path);
     }
+  }, {
+    key: "actionCableUrlForApiRoot",
+    value: function actionCableUrlForApiRoot(apiRoot) {
+      try {
+        var url = new URL(apiRoot);
+        var protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        url.protocol = protocol;
+        url.pathname = '/cable';
+        url.search = '';
+        url.hash = '';
+        return url.toString();
+      } catch (_) {
+        return this.actionCableUrl;
+      }
+    }
   }]);
   return Configuration;
 }();

package/lib/models/business.cjs

@@ -12,17 +12,22 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const stylesheetAttribute = 'data-hellotext-stylesheet';
+const stylesheetLoadTimeout = 10000;
+
 /**
  * @typedef {Object} BusinessCountry
  * @property {String} [code] - ISO country code configured for the business.
  * @property {String} [prefix] - Phone country prefix configured for the business.
  */
+
 /**
  * @typedef {Object} BusinessWebchat
  * @property {String} [id] - Dashboard webchat id configured for the business.
  * @property {Object} [appearance] - Dashboard appearance defaults for the webchat.
  * @property {Object} [whatsapp] - Dashboard WhatsApp handoff defaults for the webchat.
  */
+
 /**
  * Public business metadata returned by `public/businesses/:id`.
  *
@@ -36,6 +41,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
  * @property {String|Array<String>} [whitelist] - Domain whitelist configuration.
  * @property {String} [subscription] - Current business subscription tier.
  */
+
 /**
  * Public business context used by the SDK for tracking, forms, and webchat defaults.
  */
@@ -47,6 +53,8 @@ let Business = /*#__PURE__*/function () {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = null;
+    this.stylesheet = null;
+    this.stylesheetLoaded = Promise.resolve(false);
   }
 
   /**
@@ -87,11 +95,12 @@ let Business = /*#__PURE__*/function () {
     key: "setData",
     value: function setData(data) {
       this.data = data;
-      if (typeof document !== 'undefined') {
-        const linkTag = document.createElement('link');
-        linkTag.rel = 'stylesheet';
-        linkTag.href = data.style_url;
-        document.head.append(linkTag);
+      if (typeof document !== 'undefined' && data.style_url) {
+        this.stylesheet = this.constructor.ensureStylesheet(data.style_url);
+        this.stylesheetLoaded = this.constructor.waitForStylesheet(this.stylesheet);
+      } else {
+        this.stylesheet = null;
+        this.stylesheetLoaded = Promise.resolve(false);
       }
     }
   }, {
@@ -135,6 +144,78 @@ let Business = /*#__PURE__*/function () {
     get: function () {
       return this.data.features;
     }
+  }], [{
+    key: "stylesheetSelector",
+    get: function () {
+      return `link[rel="stylesheet"][${stylesheetAttribute}]`;
+    }
+  }, {
+    key: "ensureStylesheet",
+    value: function ensureStylesheet(styleUrl) {
+      const href = this.normalizedStylesheetUrl(styleUrl);
+      const existingLink = this.stylesheetLinks.find(link => link.href === href);
+      if (existingLink) {
+        existingLink.setAttribute(stylesheetAttribute, 'true');
+        return existingLink;
+      }
+      const linkTag = document.createElement('link');
+      linkTag.rel = 'stylesheet';
+      linkTag.href = styleUrl;
+      linkTag.setAttribute(stylesheetAttribute, 'true');
+      this.waitForStylesheet(linkTag);
+      document.head.append(linkTag);
+      return linkTag;
+    }
+  }, {
+    key: "stylesheetLinks",
+    get: function () {
+      if (typeof document === 'undefined') return [];
+      return Array.from(document.querySelectorAll(this.stylesheetSelector));
+    }
+  }, {
+    key: "latestStylesheet",
+    get: function () {
+      return this.stylesheetLinks[this.stylesheetLinks.length - 1];
+    }
+  }, {
+    key: "normalizedStylesheetUrl",
+    value: function normalizedStylesheetUrl(styleUrl) {
+      try {
+        return new URL(styleUrl, document.baseURI).href;
+      } catch (_error) {
+        return styleUrl;
+      }
+    }
+  }, {
+    key: "waitForStylesheet",
+    value: function waitForStylesheet(linkTag) {
+      if (!linkTag) return Promise.resolve(false);
+      if (this.stylesheetIsLoaded(linkTag)) return Promise.resolve(true);
+      if (linkTag.dataset.hellotextStylesheetLoaded === 'false') return Promise.resolve(false);
+      if (linkTag._hellotextStylesheetLoaded) return linkTag._hellotextStylesheetLoaded;
+      linkTag._hellotextStylesheetLoaded = new Promise(resolve => {
+        let timeout;
+        const finish = loaded => {
+          clearTimeout(timeout);
+          linkTag.removeEventListener('load', handleLoad);
+          linkTag.removeEventListener('error', handleError);
+          linkTag.dataset.hellotextStylesheetLoaded = loaded ? 'true' : 'false';
+          resolve(loaded);
+        };
+        const handleLoad = () => finish(this.stylesheetIsLoaded(linkTag));
+        const handleError = () => finish(false);
+        linkTag.addEventListener('load', handleLoad);
+        linkTag.addEventListener('error', handleError);
+        timeout = setTimeout(() => finish(this.stylesheetIsLoaded(linkTag)), stylesheetLoadTimeout);
+        if (timeout.unref) timeout.unref();
+      });
+      return linkTag._hellotextStylesheetLoaded;
+    }
+  }, {
+    key: "stylesheetIsLoaded",
+    value: function stylesheetIsLoaded(linkTag) {
+      return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet;
+    }
   }]);
   return Business;
 }();