@hellotext/hellotext 2.3.8 → 2.4.0

package/lib/controllers/webchat/useTeaser.js

@@ -0,0 +1,156 @@
+// The teaser markup is already present in the document; this mixin only manages
+// the runtime around it. Keeping the teaser policy here gives the controller one
+// place to delegate click-to-open, the pre-conversation presentation, and timer
+// cleanup. Message sending stays on the controller because it owns the API flow
+// and optimistic customer bubble insertion.
+export var useTeaser = controller => {
+  Object.assign(controller, {
+    // Called from `connect` after `usePopover` has given the controller `show`.
+    // The teaser is optional, so setup first prepares reusable lifecycle state,
+    // wires the click surface when present, and then lets eligibility decide
+    // whether this session may still show the presentation.
+    setupTeaser() {
+      this.teaserCycleTimeout = null;
+      this.teaserMessages = [];
+      this.boundOnTeaserClick = this.boundOnTeaserClick || this.onTeaserClick.bind(this);
+      if (!this.hasTeaserTarget) return;
+      this.teaserTarget.addEventListener('click', this.boundOnTeaserClick);
+      this.startTeaserPresentation();
+    },
+    // This is the shared teardown path for Stimulus disconnect. Cycling timers
+    // and DOM listeners both outlive the current call stack, so they need to be
+    // cancelled explicitly when the rendered widget leaves the page.
+    teardownTeaser() {
+      this.stopTeaserCycle();
+      if (this.hasTeaserTarget && this.boundOnTeaserClick) {
+        this.teaserTarget.removeEventListener('click', this.boundOnTeaserClick);
+      }
+    },
+    // The current DOM is the source of truth. Each setup pass collects the
+    // rendered teaser messages from the teaser surface itself, which keeps the
+    // target list small and avoids carrying stale nodes between presentations.
+    collectTeaserMessages() {
+      if (!this.hasTeaserTarget) return [];
+      return Array.from(this.teaserTarget.querySelectorAll('[data-teaser-message]'));
+    },
+    // The teaser is a one-time, pre-conversation presentation. It can run while
+    // the popover is closed, but any active conversation signal makes the teaser
+    // ineligible for the rest of this browser session.
+    startTeaserPresentation() {
+      this.stopTeaserCycle();
+      this.teaserMessages = this.collectTeaserMessages();
+      if (!this.hasTeaserTarget) return;
+      if (this.teaserMessages.length === 0) {
+        this.hideTeaser();
+        return;
+      }
+      if (this.openValue) {
+        this.dismissTeaserForSession();
+        return;
+      }
+      if (this.conversationIdValue || this.hasRenderedConversationMessages()) {
+        this.dismissTeaserForSession();
+        return;
+      }
+      if (this.teaserSeenForSession()) {
+        this.hideTeaser();
+        return;
+      }
+      this.teaserTarget.classList.remove('invisible');
+      this.showTeaserMessage(0);
+      if (this.teaserMessages.length < 2) return;
+      this.scheduleNextTeaserMessage(0);
+    },
+    // Delays belong to the currently visible message, so each teaser controls
+    // how long it remains on screen before the next one replaces it. The
+    // presentation stops after the last message instead of looping forever.
+    scheduleNextTeaserMessage(currentIndex) {
+      var nextIndex = currentIndex + 1;
+      if (nextIndex >= this.teaserMessages.length) return;
+      var currentMessage = this.teaserMessages[currentIndex];
+      var delay = this.teaserPresentationDelay(currentMessage);
+      this.teaserCycleTimeout = window.setTimeout(() => {
+        this.teaserCycleTimeout = null;
+        this.showTeaserMessage(nextIndex);
+        this.scheduleNextTeaserMessage(nextIndex);
+      }, delay);
+    },
+    // Visibility is managed with the existing `hidden` class for initially
+    // concealed teaser messages. This keeps JS from restructuring teaser markup.
+    showTeaserMessage(index) {
+      this.teaserMessages.forEach((message, messageIndex) => {
+        message.classList.toggle('hidden', messageIndex !== index);
+      });
+    },
+    // Safe to call even when no timer exists. Lifecycle hooks call this before
+    // starting, hiding, or tearing down the teaser so only one cycle can be alive.
+    stopTeaserCycle() {
+      if (this.teaserCycleTimeout === null || this.teaserCycleTimeout === undefined) return;
+      window.clearTimeout(this.teaserCycleTimeout);
+      this.teaserCycleTimeout = null;
+    },
+    // Invalid or missing delay values should not break teaser rendering. Treat
+    // them as zero, then use a small minimum so zero-delay presentations advance
+    // deliberately instead of flashing through every message in one frame.
+    teaserMessageDelay(message) {
+      var delay = Number(message.dataset.delaySeconds || 0);
+      return Number.isFinite(delay) ? delay : 0;
+    },
+    teaserPresentationDelay(message) {
+      return Math.max(this.teaserMessageDelay(message) * 1000, 250);
+    },
+    // A rendered transcript means the visitor is no longer in the pre-conversation
+    // state. The hidden template is deliberately excluded because it is not a live
+    // customer-visible message.
+    hasRenderedConversationMessages() {
+      var messages = [];
+      try {
+        messages = Array.from(this.messageTargets || []);
+      } catch (_error) {
+        messages = [];
+      }
+      return messages.some(message => message !== this.messageTemplateTarget);
+    },
+    teaserSeenKey() {
+      return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen");
+    },
+    teaserSeenForSession() {
+      try {
+        return window.sessionStorage.getItem(this.teaserSeenKey()) === 'true';
+      } catch (_error) {
+        return false;
+      }
+    },
+    markTeaserSeenForSession() {
+      try {
+        window.sessionStorage.setItem(this.teaserSeenKey(), 'true');
+      } catch (_error) {
+        // Storage can be unavailable in locked-down browsers. The in-memory hide
+        // still keeps the active controller from showing the teaser again.
+      }
+    },
+    // Opening or sending ends the pre-conversation window for this browser
+    // session. Incoming message teasers are separate ephemeral content, so they
+    // use `hideTeaser`/`updateMessageTeaser` without writing this session flag.
+    dismissTeaserForSession() {
+      this.markTeaserSeenForSession();
+      this.hideTeaser();
+    },
+    // Stopping the timer before hiding prevents queued presentation steps from
+    // flipping hidden messages after the teaser surface has been dismissed.
+    hideTeaser() {
+      this.stopTeaserCycle();
+      if (this.hasTeaserTarget) {
+        this.teaserTarget.classList.add('invisible');
+      }
+    },
+    // A teaser surface click is a user request to open chat, but links inside the
+    // teaser already have native browser behavior. Leaving anchors alone keeps
+    // external URLs and `tel:` actions working without extra JS.
+    onTeaserClick(event) {
+      if (event.target.closest('a')) return;
+      this.dismissTeaserForSession();
+      this.show();
+    }
+  });
+};

package/lib/controllers/webchat_controller.cjs

@@ -11,8 +11,10 @@ var _webchat_channel = _interopRequireDefault(require("../channels/webchat_chann
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _core = require("../core");
 var _webchat = require("../core/configuration/webchat");
-var _logo_builder = require("../builders/logo_builder");
 var _usePopover = require("./mixins/usePopover");
+var _useBehaviour = require("./webchat/useBehaviour");
+var _useOpeningSequence = require("./webchat/useOpeningSequence");
+var _useTeaser = require("./webchat/useTeaser");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); } }
@@ -41,6 +43,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       this.messagesAPI = new _messages.default(this.idValue);
       this.webChatChannel = new _webchat_channel.default(this.idValue, _hellotext.default.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);
@@ -52,30 +55,41 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "connect",
     value: function connect() {
+      (0, _useBehaviour.useBehaviour)(this);
       (0, _usePopover.usePopover)(this);
-      this.popoverTarget.classList.add(..._webchat.Webchat.classes);
-      this.triggerTarget.classList.add(..._webchat.Webchat.triggerClasses);
+      (0, _useOpeningSequence.useOpeningSequence)(this);
+      (0, _useTeaser.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.default.business.features.white_label) {
-        this.toolbarTarget.appendChild(_logo_builder.LogoBuilder.build());
-      }
       if (this.shouldOpenOnMount) {
         this.openValue = true;
       }
       _hellotext.default.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);
 
@@ -221,11 +235,12 @@ let _default = /*#__PURE__*/function (_Controller) {
         }
         if (attachments) {
           attachments.forEach(attachmentUrl => {
+            var _this$messageAttachme;
             const 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);
@@ -240,7 +255,7 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onClickOutside",
     value: function onClickOutside(event) {
-      if (_webchat.Webchat.behaviour === _webchat.behaviors.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
+      if (_webchat.Webchat.mode === _webchat.modes.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
         this.openValue = false;
       }
     }
@@ -255,7 +270,9 @@ let _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();
       }
@@ -270,6 +287,10 @@ let _default = /*#__PURE__*/function (_Controller) {
       }
       _hellotext.default.eventEmitter.dispatch('webchat:opened');
       localStorage.setItem(`hellotext--webchat--${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';
@@ -308,11 +329,15 @@ let _default = /*#__PURE__*/function (_Controller) {
   }, {
     key: "onMessageReceived",
     value: function onMessageReceived(message) {
+      var _this$hideTeaser;
       const {
         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);
       }
@@ -321,13 +346,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       const 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;
           const 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();
@@ -339,13 +366,33 @@ let _default = /*#__PURE__*/function (_Controller) {
       element.scrollIntoView({
         behavior: 'smooth'
       });
+      this.updateMessageTeaser(teaser);
       if (this.openValue) {
         this.messagesAPI.markAsSeen(id);
         return;
       }
-      this.unreadCounterTarget.style.display = 'flex';
-      const 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) {
+      const 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",
@@ -353,6 +400,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       var _element$querySelecto;
       const html = message.html;
       const 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({
@@ -362,13 +411,12 @@ let _default = /*#__PURE__*/function (_Controller) {
         ...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';
-      const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
-      this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount;
+      this.incrementUnreadCounter();
     }
   }, {
     key: "resizeInput",
@@ -394,7 +442,8 @@ let _default = /*#__PURE__*/function (_Controller) {
         cardElement
       }
     }) {
-      var _cardElement$querySel;
+      var _this$dismissTeaserFo2, _cardElement$querySel;
+      (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this);
       const formData = new FormData();
       formData.append('message[body]', body);
       formData.append('message[replied_to]', id);
@@ -402,13 +451,15 @@ let _default = /*#__PURE__*/function (_Controller) {
       formData.append('message[button]', buttonId);
       formData.append('session', _hellotext.default.session);
       formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
       const element = this.buildMessageElement();
       const 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);
@@ -437,6 +488,7 @@ let _default = /*#__PURE__*/function (_Controller) {
         target: element,
         detail: data.id
       });
+      this.clearRevealedOpeningSequenceMessageIds();
       const message = {
         id: data.id,
         body: body,
@@ -448,10 +500,80 @@ let _default = /*#__PURE__*/function (_Controller) {
       };
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message);
     }
+  }, {
+    key: "sendTeaserQuickReply",
+    value: async function sendTeaserQuickReply(event) {
+      var _this$dismissTeaserFo3;
+      event.preventDefault();
+      event.stopPropagation();
+      const button = event.currentTarget;
+      const value = (button.dataset.value || '').trim();
+      const label = [button.dataset.text, button.textContent].map(text => (text || '').trim()).find(text => text.length > 0);
+      const text = value || label;
+      if (!text) return;
+      (_this$dismissTeaserFo3 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo3 === void 0 ? void 0 : _this$dismissTeaserFo3.call(this);
+      this.show();
+      const buttonType = (button.dataset.type || '').trim() || 'quick_reply';
+      const formData = new FormData();
+      formData.append('message[body]', text);
+      formData.append('session', _hellotext.default.session);
+      formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
+      const 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);
+      }
+      const response = await this.messagesAPI.create(formData);
+      if (response.failed) {
+        clearTimeout(this.optimisticTypingTimeout);
+        this.broadcastChannel.postMessage({
+          type: 'message:failed',
+          id: element.id
+        });
+        return element.classList.add('failed');
+      }
+      const data = await response.json();
+      element.setAttribute('data-id', data.id);
+      this.clearRevealedOpeningSequenceMessageIds();
+      _hellotext.default.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();
+      }
+    }
   }, {
     key: "sendMessage",
     value: async function sendMessage(e) {
-      const formData = new FormData();
+      var _this$dismissTeaserFo4;
       const message = {
         body: this.inputTarget.value,
         attachments: this.files
@@ -462,6 +584,8 @@ let _default = /*#__PURE__*/function (_Controller) {
         }
         return;
       }
+      (_this$dismissTeaserFo4 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo4 === void 0 ? void 0 : _this$dismissTeaserFo4.call(this);
+      const formData = new FormData();
       if (this.inputTarget.value.trim().length > 0) {
         formData.append('message[body]', this.inputTarget.value);
       } else {
@@ -472,6 +596,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       });
       formData.append('session', _hellotext.default.session);
       formData.append('locale', _core.Locale.toString());
+      this.appendOpeningSequenceMessageIds(formData);
       const element = this.buildMessageElement();
       if (this.inputTarget.value.trim().length > 0) {
         element.querySelector('[data-body]').innerText = this.inputTarget.value;
@@ -481,7 +606,8 @@ let _default = /*#__PURE__*/function (_Controller) {
       const 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));
         });
       }
 
@@ -528,6 +654,7 @@ let _default = /*#__PURE__*/function (_Controller) {
       const data = await response.json();
       element.setAttribute('data-id', data.id);
       message.id = data.id;
+      this.clearRevealedOpeningSequenceMessageIds();
       _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message);
       if (data.conversation !== this.conversationIdValue) {
         this.conversationIdValue = data.conversation;
@@ -551,6 +678,18 @@ let _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';
+      const unreadCount = (parseInt(this.unreadCounterTarget.innerText) || 0) + 1;
+      this.unreadCounterTarget.innerText = Math.min(unreadCount, 9);
+    }
   }, {
     key: "openAttachment",
     value: function openAttachment() {
@@ -716,7 +855,11 @@ _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'];