@hellotext/hellotext 2.3.9 → 2.4.0

package/lib/controllers/webchat_controller.js

@@ -23,9 +23,11 @@ import WebchatMessagesAPI from '../api/webchat/messages';
 import WebchatChannel from '../channels/webchat_channel';
 import Hellotext from '../hellotext';
 import { Locale } from '../core';
-import { Webchat as WebchatConfiguration, behaviors } from '../core/configuration/webchat';
-import { LogoBuilder } from '../builders/logo_builder';
+import { Webchat as WebchatConfiguration, modes } from '../core/configuration/webchat';
 import { usePopover } from './mixins/usePopover';
+import { useBehaviour } from './webchat/useBehaviour';
+import { useOpeningSequence } from './webchat/useOpeningSequence';
+import { useTeaser } from './webchat/useTeaser';
 var _default = /*#__PURE__*/function (_Controller) {
   _inherits(_default, _Controller);
   var _super = _createSuper(_default);
@@ -39,6 +41,7 @@ var _default = /*#__PURE__*/function (_Controller) {
       this.messagesAPI = new WebchatMessagesAPI(this.idValue);
       this.webChatChannel = new WebchatChannel(this.idValue, Hellotext.session, this.conversationIdValue);
       this.files = [];
+      this.messageIds = new Set();
       this.onMessageReceived = this.onMessageReceived.bind(this);
       this.onMessageReaction = this.onMessageReaction.bind(this);
       this.onTypingStart = this.onTypingStart.bind(this);
@@ -50,30 +53,41 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "connect",
     value: function connect() {
+      useBehaviour(this);
       usePopover(this);
-      this.popoverTarget.classList.add(...WebchatConfiguration.classes);
-      this.triggerTarget.classList.add(...WebchatConfiguration.triggerClasses);
+      useOpeningSequence(this);
+      useTeaser(this);
       this.setupFloatingUI({
         trigger: this.triggerTarget,
         popover: this.popoverTarget
       });
+      if (this.hasTeaserTarget) {
+        this.setupFloatingUI({
+          trigger: this.triggerTarget,
+          popover: this.teaserTarget,
+          strategy: 'absolute'
+        });
+      }
+      this.setupTeaser();
+      this.setupOpeningSequence();
       this.webChatChannel.onMessage(this.onMessageReceived);
       this.webChatChannel.onTypingStart(this.onTypingStart);
       this.webChatChannel.onReaction(this.onMessageReaction);
       this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
-      if (!Hellotext.business.features.white_label) {
-        this.toolbarTarget.appendChild(LogoBuilder.build());
-      }
       if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
       Hellotext.eventEmitter.dispatch('webchat:mounted');
       this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent);
+      this.scheduleBehaviourOpen();
       _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
+      this.cancelBehaviourOpen();
+      this.teardownTeaser();
+      this.teardownOpeningSequence();
       this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
       this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
 
@@ -220,11 +234,12 @@ var _default = /*#__PURE__*/function (_Controller) {
           }
           if (attachments) {
             attachments.forEach(attachmentUrl => {
+              var _this$messageAttachme;
               var image = this.attachmentImageTarget.cloneNode(true);
               image.removeAttribute('data-hellotext--webchat-target');
               image.src = attachmentUrl;
               image.style.display = 'block';
-              element.querySelector('[data-attachment-container]').appendChild(image);
+              (_this$messageAttachme = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme === void 0 ? void 0 : _this$messageAttachme.appendChild(image);
             });
           }
           element.setAttribute('data-body', body);
@@ -244,7 +259,7 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onClickOutside",
     value: function onClickOutside(event) {
-      if (WebchatConfiguration.behaviour === behaviors.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
+      if (WebchatConfiguration.mode === modes.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
         this.openValue = false;
       }
     }
@@ -259,7 +274,9 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onPopoverOpened",
     value: function onPopoverOpened() {
+      var _this$dismissTeaserFo;
       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();
       }
@@ -274,6 +291,10 @@ var _default = /*#__PURE__*/function (_Controller) {
       }
       Hellotext.eventEmitter.dispatch('webchat:opened');
       localStorage.setItem("hellotext--webchat--".concat(this.idValue), 'opened');
+      if (this.messageTeaserValue) {
+        this.messageTeaserValue = null;
+      }
+      this.startOpeningSequence();
       if (this.unreadCounterTarget.style.display === 'none') return;
       this.unreadCounterTarget.style.display = 'none';
       this.unreadCounterTarget.innerText = '0';
@@ -312,11 +333,15 @@ var _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
+      var _this$hideTeaser;
       var {
         id,
         body,
-        attachments
+        attachments,
+        teaser
       } = message;
+      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);
       }
@@ -325,13 +350,15 @@ var _default = /*#__PURE__*/function (_Controller) {
       var element = this.messageTemplateTarget.cloneNode(true);
       element.style.display = 'flex';
       element.querySelector('[data-body]').innerHTML = div.innerHTML;
+      element.setAttribute('data-id', id);
       element.setAttribute('data-hellotext--webchat-target', 'message');
       if (attachments) {
         attachments.forEach(attachmentUrl => {
+          var _this$messageAttachme2;
           var image = this.attachmentImageTarget.cloneNode(true);
           image.src = attachmentUrl;
           image.style.display = 'block';
-          element.querySelector('[data-attachment-container]').appendChild(image);
+          (_this$messageAttachme2 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme2 === void 0 ? void 0 : _this$messageAttachme2.appendChild(image);
         });
       }
       this.clearTypingIndicator();
@@ -342,13 +369,33 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
+      this.updateMessageTeaser(teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
       }
-      this.unreadCounterTarget.style.display = 'flex';
-      var unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
-      this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
+      this.incrementUnreadCounter();
+    }
+
+    // TCP broadcasts may deliver the same incoming message twice before Stimulus
+    // has connected the appended message target. Claiming the id in memory closes
+    // that window, while the target check still drops messages rendered earlier.
+  }, {
+    key: "claimMessageId",
+    value: function claimMessageId(id) {
+      var messageTargets = this.messageTargets || [];
+      if (this.messageIds.has(id)) return false;
+      this.messageIds.add(id);
+      return !messageTargets.some(element => element.dataset.id === id);
+    }
+  }, {
+    key: "updateMessageTeaser",
+    value: function updateMessageTeaser(teaser) {
+      this.messageTeaserValue = teaser;
+      if (this.messageTeaserValue && this.hasTeaserTarget) {
+        this.teaserTarget.innerHTML = this.messageTeaserValue;
+        this.teaserTarget.classList.toggle('invisible', this.openValue);
+      }
     }
   }, {
     key: "insertCarouselMessage",
@@ -356,6 +403,8 @@ var _default = /*#__PURE__*/function (_Controller) {
       var _element$querySelecto;
       var html = message.html;
       var element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild;
+      element.setAttribute('data-id', message.id);
+      element.setAttribute('data-hellotext--webchat-target', 'message');
       this.clearTypingIndicator();
       this.messagesContainerTarget.appendChild(element);
       element.scrollIntoView({
@@ -364,13 +413,12 @@ var _default = /*#__PURE__*/function (_Controller) {
       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) || ''
       }));
+      this.updateMessageTeaser(message.teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(message.id);
         return;
       }
-      this.unreadCounterTarget.style.display = 'flex';
-      var unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
-      this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
+      this.incrementUnreadCounter();
     }
   }, {
     key: "resizeInput",
@@ -389,7 +437,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "sendQuickReplyMessage",
     value: function () {
       var _sendQuickReplyMessage = _asyncToGenerator(function* (_ref) {
-        var _cardElement$querySel;
+        var _this$dismissTeaserFo2, _cardElement$querySel;
         var {
           detail: {
             id,
@@ -399,6 +447,7 @@ var _default = /*#__PURE__*/function (_Controller) {
             cardElement
           }
         } = _ref;
+        (_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);
@@ -406,13 +455,15 @@ var _default = /*#__PURE__*/function (_Controller) {
         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);
         element.querySelector('[data-body]').innerText = body;
         if (attachment) {
+          var _this$messageAttachme3;
           attachment.removeAttribute('width');
           attachment.removeAttribute('height');
-          element.querySelector('[data-attachment-container]').appendChild(attachment);
+          (_this$messageAttachme3 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme3 === void 0 ? void 0 : _this$messageAttachme3.appendChild(attachment);
         }
         if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
           this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
@@ -441,6 +492,7 @@ var _default = /*#__PURE__*/function (_Controller) {
           target: element,
           detail: data.id
         });
+        this.clearRevealedOpeningSequenceMessageIds();
         var message = {
           id: data.id,
           body: body,
@@ -457,11 +509,87 @@ var _default = /*#__PURE__*/function (_Controller) {
       }
       return sendQuickReplyMessage;
     }()
+  }, {
+    key: "sendTeaserQuickReply",
+    value: function () {
+      var _sendTeaserQuickReply = _asyncToGenerator(function* (event) {
+        var _this$dismissTeaserFo3;
+        event.preventDefault();
+        event.stopPropagation();
+        var button = event.currentTarget;
+        var value = (button.dataset.value || '').trim();
+        var label = [button.dataset.text, button.textContent].map(text => (text || '').trim()).find(text => text.length > 0);
+        var text = value || label;
+        if (!text) return;
+        (_this$dismissTeaserFo3 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo3 === void 0 ? void 0 : _this$dismissTeaserFo3.call(this);
+        this.show();
+        var buttonType = (button.dataset.type || '').trim() || 'quick_reply';
+        var formData = new FormData();
+        formData.append('message[body]', text);
+        formData.append('session', Hellotext.session);
+        formData.append('locale', Locale.toString());
+        this.appendOpeningSequenceMessageIds(formData);
+        var element = this.buildMessageElement();
+        element.querySelector('[data-body]').innerText = text;
+        if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) {
+          this.messagesContainerTarget.insertBefore(element, this.typingIndicatorTarget);
+        } else {
+          this.messagesContainerTarget.appendChild(element);
+        }
+        element.scrollIntoView({
+          behavior: 'smooth'
+        });
+        this.broadcastChannel.postMessage({
+          type: 'message:sent',
+          element: element.outerHTML
+        });
+        if (!this.typingIndicatorVisible) {
+          clearTimeout(this.optimisticTypingTimeout);
+          this.optimisticTypingTimeout = setTimeout(() => {
+            this.showOptimisticTypingIndicator();
+          }, this.optimisticTypingIndicatorWaitValue);
+        }
+        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');
+        }
+        var data = yield response.json();
+        element.setAttribute('data-id', data.id);
+        this.clearRevealedOpeningSequenceMessageIds();
+        Hellotext.eventEmitter.dispatch('webchat:message:sent', {
+          id: data.id,
+          body: text,
+          attachments: [],
+          type: 'quick_reply',
+          teaser: {
+            text: label || text,
+            value: value || text,
+            type: buttonType
+          }
+        });
+        if (data.conversation && data.conversation !== this.conversationIdValue) {
+          this.conversationIdValue = data.conversation;
+          this.webChatChannel.updateSubscriptionWith(this.conversationIdValue);
+        }
+        if (this.typingIndicatorVisible) {
+          this.resetTypingIndicatorTimer();
+        }
+      });
+      function sendTeaserQuickReply(_x2) {
+        return _sendTeaserQuickReply.apply(this, arguments);
+      }
+      return sendTeaserQuickReply;
+    }()
   }, {
     key: "sendMessage",
     value: function () {
       var _sendMessage = _asyncToGenerator(function* (e) {
-        var formData = new FormData();
+        var _this$dismissTeaserFo4;
         var message = {
           body: this.inputTarget.value,
           attachments: this.files
@@ -472,6 +600,8 @@ var _default = /*#__PURE__*/function (_Controller) {
           }
           return;
         }
+        (_this$dismissTeaserFo4 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo4 === void 0 ? void 0 : _this$dismissTeaserFo4.call(this);
+        var formData = new FormData();
         if (this.inputTarget.value.trim().length > 0) {
           formData.append('message[body]', this.inputTarget.value);
         } else {
@@ -482,6 +612,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         });
         formData.append('session', Hellotext.session);
         formData.append('locale', Locale.toString());
+        this.appendOpeningSequenceMessageIds(formData);
         var element = this.buildMessageElement();
         if (this.inputTarget.value.trim().length > 0) {
           element.querySelector('[data-body]').innerText = this.inputTarget.value;
@@ -491,7 +622,8 @@ var _default = /*#__PURE__*/function (_Controller) {
         var attachments = this.attachmentContainerTarget.querySelectorAll('img');
         if (attachments.length > 0) {
           attachments.forEach(attachment => {
-            element.querySelector('[data-attachment-container]').appendChild(attachment.cloneNode(true));
+            var _this$messageAttachme4;
+            (_this$messageAttachme4 = this.messageAttachmentsContainer(element)) === null || _this$messageAttachme4 === void 0 ? void 0 : _this$messageAttachme4.appendChild(attachment.cloneNode(true));
           });
         }
 
@@ -538,6 +670,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         var data = yield response.json();
         element.setAttribute('data-id', data.id);
         message.id = data.id;
+        this.clearRevealedOpeningSequenceMessageIds();
         Hellotext.eventEmitter.dispatch('webchat:message:sent', message);
         if (data.conversation !== this.conversationIdValue) {
           this.conversationIdValue = data.conversation;
@@ -550,7 +683,7 @@ var _default = /*#__PURE__*/function (_Controller) {
         }
         this.attachmentContainerTarget.style.display = '';
       });
-      function sendMessage(_x2) {
+      function sendMessage(_x3) {
         return _sendMessage.apply(this, arguments);
       }
       return sendMessage;
@@ -566,6 +699,18 @@ var _default = /*#__PURE__*/function (_Controller) {
       element.setAttribute('data-hellotext--webchat-target', 'message');
       return element;
     }
+  }, {
+    key: "messageAttachmentsContainer",
+    value: function messageAttachmentsContainer(element) {
+      return element.querySelector('[data-attachments-container], [data-attachment-container]');
+    }
+  }, {
+    key: "incrementUnreadCounter",
+    value: function incrementUnreadCounter() {
+      this.unreadCounterTarget.style.display = 'flex';
+      var unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
+      this.unreadCounterTarget.innerText = Math.min(unreadCount, 9);
+    }
   }, {
     key: "openAttachment",
     value: function openAttachment() {
@@ -732,8 +877,12 @@ _default.values = {
   optimisticTypingIndicatorWait: {
     type: Number,
     default: 1000
-  } // 1 second
+  },
+  // 1 second,
+  teaser: Object,
+  messageTeaser: String,
+  behaviour: Object
 };
 _default.classes = ['fadeOut'];
-_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate'];
+_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'attachmentImage', 'footer', 'toolbar', 'message', 'unreadCounter', 'typingIndicator', 'typingIndicatorTemplate', 'teaser', 'openingSequence', 'openingSequenceMessage'];
 export { _default as default };

package/lib/core/configuration/webchat.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.behaviors = exports.Webchat = void 0;
+exports.modes = exports.Webchat = void 0;
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -39,13 +39,13 @@ const strategies = {
 };
 
 /**
- * @typedef {'modal' | 'popover'} Behaviour
+ * @typedef {'modal' | 'popover'} Mode
  */
 
 /**
- * @enum {Behaviour}
+ * @enum {Mode}
  */
-const behaviors = {
+const modes = {
   MODAL: 'modal',
   POPOVER: 'popover'
 };
@@ -57,6 +57,20 @@ const behaviors = {
  * @property {string} typography - The typography style (e.g., font family).
  */
 
+/**
+ * @typedef {Object} Appearance
+ * @property {Object} [header] - Header appearance overrides.
+ * @property {string} [header.name] - Business name shown in the webchat header.
+ * @property {Object} [launcher] - Launcher appearance overrides.
+ * @property {string} [launcher.iconUrl] - Image URL used for the launcher icon.
+ */
+
+/**
+ * @typedef {Object} WhatsApp
+ * @property {string} [number] - WhatsApp number used by the handoff configuration.
+ * @property {boolean} [restrictToChannel] - Whether handoff should be restricted to the configured channel.
+ */
+
 /**
  * @class Webchat
  * @classdesc
@@ -64,13 +78,14 @@ const behaviors = {
  * @property {String} id - the id of the webchat.
  * @property {String} container - the container to append the webchat to, defaults to 'body'
  * @property {Placement} placement - the placement of the webchat within the container, defaults to "bottom-right".
- * @property {String} classes - additional classes to apply to the webchat popup.
- * @property {String} triggerClasses - additional classes to apply to the webchat popup trigger.
- * @property {Behaviour} behaviour - the behaviour of the webchat, defaults to 'popover'.
+ * @property {Mode} mode - how the webchat behaves while open, defaults to 'popover'.
+ * @property {Object} behaviour - runtime opening behaviour for the webchat.
  * @property {Style} style - the style of the webchat.
+ * @property {Appearance} appearance - appearance overrides.
+ * @property {WhatsApp} whatsapp - WhatsApp handoff overrides.
  * @property {Strategy} strategy - the strategy used to position the webchat. Defaults to 'absolute'
  */
-exports.behaviors = behaviors;
+exports.modes = modes;
 let Webchat = /*#__PURE__*/function () {
   function Webchat() {
     _classCallCheck(this, Webchat);
@@ -94,36 +109,6 @@ let Webchat = /*#__PURE__*/function () {
       }
       this._placement = value;
     }
-  }, {
-    key: "classes",
-    get: function () {
-      if (typeof this._classes === 'string') {
-        return this._classes.split(',').map(c => c.trim());
-      } else {
-        return this._classes;
-      }
-    },
-    set: function (value) {
-      if (!Array.isArray(value) && typeof value !== 'string') {
-        throw new Error('classes must be an array or a string');
-      }
-      this._classes = value;
-    }
-  }, {
-    key: "triggerClasses",
-    get: function () {
-      if (typeof this._triggerClasses === 'string') {
-        return this._triggerClasses.split(',').map(c => c.trim());
-      } else {
-        return this._triggerClasses;
-      }
-    },
-    set: function (value) {
-      if (!Array.isArray(value) && typeof value !== 'string') {
-        throw new Error('triggerClasses must be an array or a string');
-      }
-      this._triggerClasses = value;
-    }
   }, {
     key: "id",
     get: function () {
@@ -159,17 +144,100 @@ let Webchat = /*#__PURE__*/function () {
       });
       this._style = value;
     }
+  }, {
+    key: "appearance",
+    get: function () {
+      return this._appearance;
+    },
+    set: function (value) {
+      if (!this.isPlainObject(value)) {
+        throw new Error('Appearance must be an object');
+      }
+      Object.entries(value).forEach(([key, nestedValue]) => {
+        if (!['header', 'launcher'].includes(key)) {
+          throw new Error(`Invalid appearance property: ${key}`);
+        }
+        if (!this.isPlainObject(nestedValue)) {
+          throw new Error(`Appearance ${key} must be an object`);
+        }
+        Object.entries(nestedValue).forEach(([nestedKey, propertyValue]) => {
+          if (key === 'header' && nestedKey !== 'name') {
+            throw new Error(`Invalid appearance header property: ${nestedKey}`);
+          }
+          if (key === 'launcher' && nestedKey !== 'iconUrl') {
+            throw new Error(`Invalid appearance launcher property: ${nestedKey}`);
+          }
+          if (propertyValue == null) {
+            return;
+          }
+          if (typeof propertyValue !== 'string') {
+            throw new Error(`Invalid appearance ${key}.${nestedKey} value: ${propertyValue}`);
+          }
+        });
+      });
+      this._appearance = value;
+    }
+  }, {
+    key: "whatsapp",
+    get: function () {
+      return this._whatsapp;
+    },
+    set: function (value) {
+      if (!this.isPlainObject(value)) {
+        throw new Error('WhatsApp must be an object');
+      }
+      Object.entries(value).forEach(([key, nestedValue]) => {
+        if (!['number', 'restrictToChannel'].includes(key)) {
+          throw new Error(`Invalid WhatsApp property: ${key}`);
+        }
+        if (nestedValue == null) {
+          return;
+        }
+        if (key === 'number' && typeof nestedValue !== 'string') {
+          throw new Error(`Invalid WhatsApp number value: ${nestedValue}`);
+        }
+        if (key === 'restrictToChannel' && typeof nestedValue !== 'boolean') {
+          throw new Error(`Invalid WhatsApp restrictToChannel value: ${nestedValue}`);
+        }
+      });
+      this._whatsapp = value;
+    }
+  }, {
+    key: "mode",
+    get: function () {
+      return this._mode;
+    },
+    set: function (value) {
+      if (!Object.values(modes).includes(value)) {
+        throw new Error(`Invalid mode value: ${value}`);
+      }
+      this._mode = value;
+    }
   }, {
     key: "behaviour",
     get: function () {
       return this._behaviour;
     },
     set: function (value) {
-      if (!Object.values(behaviors).includes(value)) {
+      if (value == null) {
+        this._behaviour = value;
+        return;
+      }
+      if (typeof value !== 'object' || Array.isArray(value)) {
         throw new Error(`Invalid behaviour value: ${value}`);
       }
       this._behaviour = value;
     }
+  }, {
+    key: "hasBehaviourOverride",
+    get: function () {
+      return this._hasBehaviourOverride;
+    }
+  }, {
+    key: "behaviourOverride",
+    set: function (value) {
+      this._hasBehaviourOverride = !!value;
+    }
   }, {
     key: "strategy",
     get: function () {
@@ -199,6 +267,11 @@ let Webchat = /*#__PURE__*/function () {
     value: function isHexOrRgba(value) {
       return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value) || /^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(value);
     }
+  }, {
+    key: "isPlainObject",
+    value: function isPlainObject(value) {
+      return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
   }]);
   return Webchat;
 }();
@@ -206,8 +279,10 @@ exports.Webchat = Webchat;
 Webchat._id = void 0;
 Webchat._container = 'body';
 Webchat._placement = 'bottom-right';
-Webchat._classes = [];
-Webchat._triggerClasses = [];
 Webchat._style = {};
-Webchat._behaviour = behaviors.POPOVER;
+Webchat._appearance = {};
+Webchat._whatsapp = {};
+Webchat._mode = modes.POPOVER;
+Webchat._behaviour = null;
+Webchat._hasBehaviourOverride = false;
 Webchat._strategy = null;