@hellotext/hellotext 2.1.51 → 2.2.1

package/lib/models/page.cjs

@@ -24,7 +24,7 @@ let Page = /*#__PURE__*/function () {
   _createClass(Page, [{
     key: "url",
     get: function () {
-      return this._url || window.location.href;
+      return this._url !== null && this._url !== undefined ? this._url : window.location.href;
     }
 
     /**
@@ -80,6 +80,84 @@ let Page = /*#__PURE__*/function () {
         utm_params: this.utmParams
       };
     }
+
+    /**
+     * Get the current page domain (root domain for cookie sharing)
+     * @returns {string} The root domain with leading dot, or null if no valid URL
+     */
+  }, {
+    key: "domain",
+    get: function () {
+      try {
+        const url = this.url;
+        if (!url) {
+          return null;
+        }
+        const hostname = new URL(url).hostname;
+        return Page.getRootDomain(hostname);
+      } catch (e) {
+        return null;
+      }
+    }
+
+    /**
+     * Get the root domain from a hostname (static method, no instance needed)
+     * @param {string} hostname - The hostname to parse
+     * @returns {string} The root domain with leading dot, or null if invalid
+     */
+  }], [{
+    key: "getRootDomain",
+    value: function getRootDomain(hostname = null) {
+      try {
+        if (!hostname) {
+          var _window$location;
+          if (typeof window === 'undefined' || !((_window$location = window.location) !== null && _window$location !== void 0 && _window$location.hostname)) {
+            return null;
+          }
+          hostname = window.location.hostname;
+        }
+        const parts = hostname.split('.');
+
+        // Handle localhost or single-part domains
+        if (parts.length <= 1) {
+          return hostname;
+        }
+
+        // Handle e-commerce platform domains where store identifier must be preserved
+        // Examples:
+        //   storename.myshopify.com -> .storename.myshopify.com
+        //   storename.vtexcommercestable.com.br -> .storename.vtexcommercestable.com.br
+        //   storename.wixsite.com -> .storename.wixsite.com
+        const platformSuffixes = ['myshopify.com', 'vtexcommercestable.com.br', 'myvtex.com', 'wixsite.com'];
+        for (const suffix of platformSuffixes) {
+          const suffixParts = suffix.split('.');
+          // Get the last N parts of the hostname (e.g., last 2 parts for 'myshopify.com')
+          const domainTail = parts.slice(-suffixParts.length).join('.');
+
+          // Check if the tail exactly matches the platform suffix
+          // and there are additional parts for the store identifier
+          if (domainTail === suffix && parts.length > suffixParts.length) {
+            // Include store identifier + platform suffix
+            // e.g., ['secure', 'mystore', 'myshopify', 'com'] -> '.mystore.myshopify.com'
+            return `.${parts.slice(-(suffixParts.length + 1)).join('.')}`;
+          }
+        }
+
+        // Simple heuristic: if TLD is 2 chars and second-level is short (<=3 chars),
+        // it's likely a multi-part TLD like .com.br, .co.uk
+        const tld = parts[parts.length - 1];
+        const secondLevel = parts[parts.length - 2];
+        if (parts.length > 2 && tld.length === 2 && secondLevel.length <= 3) {
+          // Multi-part TLD: take last 3 parts (e.g., store.com.br)
+          return `.${parts.slice(-3).join('.')}`;
+        }
+
+        // Regular TLD: take last 2 parts (e.g., example.com)
+        return `.${parts.slice(-2).join('.')}`;
+      } catch (e) {
+        return null;
+      }
+    }
   }]);
   return Page;
 }();

package/lib/models/page.js

@@ -19,7 +19,7 @@ var Page = /*#__PURE__*/function () {
   _createClass(Page, [{
     key: "url",
     get: function get() {
-      return this._url || window.location.href;
+      return this._url !== null && this._url !== undefined ? this._url : window.location.href;
     }
 
     /**
@@ -75,6 +75,85 @@ var Page = /*#__PURE__*/function () {
         utm_params: this.utmParams
       };
     }
+
+    /**
+     * Get the current page domain (root domain for cookie sharing)
+     * @returns {string} The root domain with leading dot, or null if no valid URL
+     */
+  }, {
+    key: "domain",
+    get: function get() {
+      try {
+        var url = this.url;
+        if (!url) {
+          return null;
+        }
+        var hostname = new URL(url).hostname;
+        return Page.getRootDomain(hostname);
+      } catch (e) {
+        return null;
+      }
+    }
+
+    /**
+     * Get the root domain from a hostname (static method, no instance needed)
+     * @param {string} hostname - The hostname to parse
+     * @returns {string} The root domain with leading dot, or null if invalid
+     */
+  }], [{
+    key: "getRootDomain",
+    value: function getRootDomain() {
+      var hostname = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      try {
+        if (!hostname) {
+          var _window$location;
+          if (typeof window === 'undefined' || !((_window$location = window.location) !== null && _window$location !== void 0 && _window$location.hostname)) {
+            return null;
+          }
+          hostname = window.location.hostname;
+        }
+        var parts = hostname.split('.');
+
+        // Handle localhost or single-part domains
+        if (parts.length <= 1) {
+          return hostname;
+        }
+
+        // Handle e-commerce platform domains where store identifier must be preserved
+        // Examples:
+        //   storename.myshopify.com -> .storename.myshopify.com
+        //   storename.vtexcommercestable.com.br -> .storename.vtexcommercestable.com.br
+        //   storename.wixsite.com -> .storename.wixsite.com
+        var platformSuffixes = ['myshopify.com', 'vtexcommercestable.com.br', 'myvtex.com', 'wixsite.com'];
+        for (var suffix of platformSuffixes) {
+          var suffixParts = suffix.split('.');
+          // Get the last N parts of the hostname (e.g., last 2 parts for 'myshopify.com')
+          var domainTail = parts.slice(-suffixParts.length).join('.');
+
+          // Check if the tail exactly matches the platform suffix
+          // and there are additional parts for the store identifier
+          if (domainTail === suffix && parts.length > suffixParts.length) {
+            // Include store identifier + platform suffix
+            // e.g., ['secure', 'mystore', 'myshopify', 'com'] -> '.mystore.myshopify.com'
+            return ".".concat(parts.slice(-(suffixParts.length + 1)).join('.'));
+          }
+        }
+
+        // Simple heuristic: if TLD is 2 chars and second-level is short (<=3 chars),
+        // it's likely a multi-part TLD like .com.br, .co.uk
+        var tld = parts[parts.length - 1];
+        var secondLevel = parts[parts.length - 2];
+        if (parts.length > 2 && tld.length === 2 && secondLevel.length <= 3) {
+          // Multi-part TLD: take last 3 parts (e.g., store.com.br)
+          return ".".concat(parts.slice(-3).join('.'));
+        }
+
+        // Regular TLD: take last 2 parts (e.g., example.com)
+        return ".".concat(parts.slice(-2).join('.'));
+      } catch (e) {
+        return null;
+      }
+    }
   }]);
   return Page;
 }();

package/package.json

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

package/src/controllers/message_controller.js

@@ -0,0 +1,95 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    id: String,
+  }
+
+  static targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard']
+
+  connect() {
+    this.updateFades()
+  }
+
+  setId({ detail: id }) {
+    this.idValue = id
+    this.element.id = id
+  }
+
+  onScroll() {
+    this.updateFades()
+  }
+
+  quickReply({ currentTarget }) {
+    const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]')
+
+    this.dispatch('quickReply', {
+      detail: {
+        id: this.idValue,
+        product: card.dataset.id,
+        buttonId: currentTarget.dataset.id,
+        body: currentTarget.dataset.text,
+        cardElement: card,
+      },
+    })
+  }
+
+  moveToLeft() {
+    if (!this.hasCarouselContainerTarget) return
+
+    const scrollAmount = this.getScrollAmount()
+
+    this.carouselContainerTarget.scrollBy({
+      left: -scrollAmount,
+      behavior: 'smooth',
+    })
+  }
+
+  moveToRight() {
+    if (!this.hasCarouselContainerTarget) return
+
+    const scrollAmount = this.getScrollAmount()
+
+    this.carouselContainerTarget.scrollBy({
+      left: scrollAmount,
+      behavior: 'smooth',
+    })
+  }
+
+  getScrollAmount() {
+    // Get the actual card width from DOM
+    const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card')
+
+    if (!firstCard) {
+      return 280 // Fallback to default desktop card width
+    }
+
+    const cardWidth = firstCard.offsetWidth
+    const gap = 16 // gap-x-4 = 1rem = 16px
+
+    return cardWidth + gap
+  }
+
+  updateFades() {
+    if (!this.hasCarouselContainerTarget) return
+
+    const scrollLeft = this.carouselContainerTarget.scrollLeft
+    const maxScroll =
+      this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth
+
+    // Show left fade if scrolled past start
+    if (scrollLeft > 0) {
+      this.leftFadeTarget.classList.remove('hidden')
+    } else {
+      this.leftFadeTarget.classList.add('hidden')
+    }
+
+    // Show right fade if not at end
+    if (scrollLeft < maxScroll - 1) {
+      // -1 for rounding errors
+      this.rightFadeTarget.classList.remove('hidden')
+    } else {
+      this.rightFadeTarget.classList.add('hidden')
+    }
+  }
+}

package/src/controllers/webchat_controller.js

@@ -369,6 +369,10 @@ export default class extends Controller {
   onMessageReceived(message) {
     const { id, body, attachments } = message
 
+    if (message.carousel) {
+      return this.insertCarouselMessage(message)
+    }
+
     const div = document.createElement('div')
     div.innerHTML = body
 
@@ -409,6 +413,30 @@ export default class extends Controller {
     this.unreadCounterTarget.innerText = unreadCount > 99 ? '99+' : unreadCount
   }
 
+  insertCarouselMessage(message) {
+    const html = message.html
+    const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild
+
+    this.clearTypingIndicator()
+    this.messagesContainerTarget.appendChild(element)
+
+    element.scrollIntoView({ behavior: 'smooth' })
+
+    Hellotext.eventEmitter.dispatch('webchat:message:received', {
+      ...message,
+      body: element.querySelector('[data-body]')?.innerText || '',
+    })
+
+    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
+  }
+
   resizeInput() {
     const maxHeight = 96
 
@@ -422,6 +450,73 @@ export default class extends Controller {
     this.inputTarget.style.height = `${Math.min(scrollHeight, maxHeight)}px`
   }
 
+  async sendQuickReplyMessage({ detail: { id, product, buttonId, body, cardElement } }) {
+    const formData = new FormData()
+
+    formData.append('message[body]', body)
+    formData.append('message[replied_to]', id)
+    formData.append('message[product]', product)
+    formData.append('message[button]', buttonId)
+
+    formData.append('session', Hellotext.session)
+    formData.append('locale', Locale.toString())
+
+    const element = this.buildMessageElement()
+    const attachment = cardElement.querySelector('img')?.cloneNode(true)
+
+    element.querySelector('[data-body]').innerText = body
+
+    if (attachment) {
+      attachment.removeAttribute('width')
+      attachment.removeAttribute('height')
+
+      element.querySelector('[data-attachment-container]').appendChild(attachment)
+    }
+
+    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,
+    })
+
+    const response = await this.messagesAPI.create(formData)
+
+    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')
+    }
+
+    const data = await response.json()
+
+    this.dispatch('set:id', { target: element, detail: data.id })
+
+    const message = {
+      id: data.id,
+      body: body,
+      attachments: attachment ? [attachment.src] : [],
+      replied_to: id,
+      product: product,
+      button: buttonId,
+      type: 'quick_reply',
+    }
+
+    Hellotext.eventEmitter.dispatch('webchat:message:sent', message)
+  }
+
   async sendMessage(e) {
     const formData = new FormData()
 
@@ -451,14 +546,7 @@ export default class extends Controller {
     formData.append('session', Hellotext.session)
     formData.append('locale', Locale.toString())
 
-    const element = this.messageTemplateTarget.cloneNode(true)
-
-    element.id = `hellotext--webchat--${this.idValue}--message--${Date.now()}`
-
-    element.classList.add('received')
-    element.style.removeProperty('display')
-
-    element.setAttribute('data-hellotext--webchat-target', 'message')
+    const element = this.buildMessageElement()
 
     if (this.inputTarget.value.trim().length > 0) {
       element.querySelector('[data-body]').innerText = this.inputTarget.value
@@ -470,7 +558,7 @@ export default class extends Controller {
 
     if (attachments.length > 0) {
       attachments.forEach(attachment => {
-        element.querySelector('[data-attachment-container]').appendChild(attachment)
+        element.querySelector('[data-attachment-container]').appendChild(attachment.cloneNode(true))
       })
     }
 
@@ -542,6 +630,20 @@ export default class extends Controller {
     this.attachmentContainerTarget.style.display = ''
   }
 
+  buildMessageElement() {
+    const element = this.messageTemplateTarget.cloneNode(true)
+
+    element.id = `hellotext--webchat--${this.idValue}--message--${Date.now()}`
+
+    element.classList.add('received')
+    element.style.removeProperty('display')
+
+    element.setAttribute('data-controller', 'hellotext--message')
+    element.setAttribute('data-hellotext--webchat-target', 'message')
+
+    return element
+  }
+
   openAttachment() {
     this.attachmentInputTarget.click()
   }

package/src/index.js

@@ -2,6 +2,7 @@ import { Application } from '@hotwired/stimulus'
 import Hellotext from './hellotext'
 
 import FormController from './controllers/form_controller'
+import MessageController from './controllers/message_controller'
 import WebChatEmojiController from './controllers/webchat/emoji_picker_controller'
 import WebchatController from './controllers/webchat_controller'
 
@@ -10,6 +11,7 @@ const application = Application.start()
 application.register('hellotext--form', FormController)
 application.register('hellotext--webchat', WebchatController)
 application.register('hellotext--webchat--emoji', WebChatEmojiController)
+application.register('hellotext--message', MessageController)
 
 window.Hellotext = Hellotext
 

package/src/models/cookies.js

@@ -1,9 +1,18 @@
 import Hellotext from '../hellotext'
+import { Page } from './page'
 
 class Cookies {
   static set(name, value) {
     if (typeof document !== 'undefined') {
-      document.cookie = `${name}=${value}; path=/;`
+      const secure = window.location.protocol === 'https:' ? '; Secure' : ''
+      const domain = Page.getRootDomain()
+      const maxAge = 10 * 365 * 24 * 60 * 60 // 10 years in seconds
+
+      if (domain) {
+        document.cookie = `${name}=${value}; path=/${secure}; domain=${domain}; max-age=${maxAge}; SameSite=Lax`
+      } else {
+        document.cookie = `${name}=${value}; path=/${secure}; max-age=${maxAge}; SameSite=Lax`
+      }
     }
 
     if (name === 'hello_session') {

package/src/models/page.js

@@ -11,7 +11,7 @@ class Page {
    * @returns {string} The page URL
    */
   get url() {
-    return this._url || window.location.href
+    return this._url !== null && this._url !== undefined ? this._url : window.location.href
   }
 
   /**
@@ -60,6 +60,88 @@ class Page {
       utm_params: this.utmParams,
     }
   }
+
+  /**
+   * Get the current page domain (root domain for cookie sharing)
+   * @returns {string} The root domain with leading dot, or null if no valid URL
+   */
+  get domain() {
+    try {
+      const url = this.url
+      if (!url) {
+        return null
+      }
+
+      const hostname = new URL(url).hostname
+      return Page.getRootDomain(hostname)
+    } catch (e) {
+      return null
+    }
+  }
+
+  /**
+   * Get the root domain from a hostname (static method, no instance needed)
+   * @param {string} hostname - The hostname to parse
+   * @returns {string} The root domain with leading dot, or null if invalid
+   */
+  static getRootDomain(hostname = null) {
+    try {
+      if (!hostname) {
+        if (typeof window === 'undefined' || !window.location?.hostname) {
+          return null
+        }
+        hostname = window.location.hostname
+      }
+
+      const parts = hostname.split('.')
+
+      // Handle localhost or single-part domains
+      if (parts.length <= 1) {
+        return hostname
+      }
+
+      // Handle e-commerce platform domains where store identifier must be preserved
+      // Examples:
+      //   storename.myshopify.com -> .storename.myshopify.com
+      //   storename.vtexcommercestable.com.br -> .storename.vtexcommercestable.com.br
+      //   storename.wixsite.com -> .storename.wixsite.com
+      const platformSuffixes = [
+        'myshopify.com',
+        'vtexcommercestable.com.br',
+        'myvtex.com',
+        'wixsite.com',
+      ]
+
+      for (const suffix of platformSuffixes) {
+        const suffixParts = suffix.split('.')
+        // Get the last N parts of the hostname (e.g., last 2 parts for 'myshopify.com')
+        const domainTail = parts.slice(-suffixParts.length).join('.')
+
+        // Check if the tail exactly matches the platform suffix
+        // and there are additional parts for the store identifier
+        if (domainTail === suffix && parts.length > suffixParts.length) {
+          // Include store identifier + platform suffix
+          // e.g., ['secure', 'mystore', 'myshopify', 'com'] -> '.mystore.myshopify.com'
+          return `.${parts.slice(-(suffixParts.length + 1)).join('.')}`
+        }
+      }
+
+      // Simple heuristic: if TLD is 2 chars and second-level is short (<=3 chars),
+      // it's likely a multi-part TLD like .com.br, .co.uk
+      const tld = parts[parts.length - 1]
+      const secondLevel = parts[parts.length - 2]
+
+      if (parts.length > 2 && tld.length === 2 && secondLevel.length <= 3) {
+        // Multi-part TLD: take last 3 parts (e.g., store.com.br)
+        return `.${parts.slice(-3).join('.')}`
+      }
+
+      // Regular TLD: take last 2 parts (e.g., example.com)
+      return `.${parts.slice(-2).join('.')}`
+    } catch (e) {
+      return null
+    }
+  }
 }
 
 export { Page }