@hellotext/hellotext 2.4.2 → 2.4.4

package/src/controllers/webchat_controller.js

@@ -13,7 +13,16 @@ import { useBehaviour } from './webchat/useBehaviour'
 import { useOpeningSequence } from './webchat/useOpeningSequence'
 import { useTeaser } from './webchat/useTeaser'
 
+const POPOVER_ANIMATION_DURATION = 120
+const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
+  hour: 'numeric',
+  minute: '2-digit',
+}
+const SCROLL_ISOLATION_EVENT_OPTIONS = { capture: true, passive: true }
+
 export default class extends Controller {
+  static messageTimestampFormatters = {}
+
   static values = {
     id: String,
     conversationId: String,
@@ -83,6 +92,7 @@ export default class extends Controller {
     this.onScroll = this.onScroll.bind(this)
 
     this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this)
+    this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this)
     this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`)
 
     super.initialize()
@@ -106,13 +116,25 @@ export default class extends 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
@@ -120,6 +142,7 @@ export default class extends Controller {
 
     Hellotext.eventEmitter.dispatch('webchat:mounted')
     this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent)
+    window.addEventListener('keydown', this.closePopoverOnEscape, true)
     this.scheduleBehaviourOpen()
 
     super.connect()
@@ -127,11 +150,23 @@ export default class extends Controller {
 
   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()
@@ -142,6 +177,20 @@ export default class extends Controller {
     super.disconnect()
   }
 
+  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', '')
+  }
+
+  stopHostScrollPropagation(event) {
+    event.stopPropagation()
+  }
+
   onTypingStart() {
     if (this.typingIndicatorVisible) {
       return this.resetTypingIndicatorTimer()
@@ -228,6 +277,7 @@ export default class extends Controller {
       'message:sent': data => {
         const 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) {
@@ -239,7 +289,9 @@ export default class extends Controller {
         element.scrollIntoView({ behavior: 'instant' })
       },
       'message:failed': data => {
-        this.messagesContainerTarget.querySelector(`#${data.id}`)?.classList.add('failed')
+        const element = this.messagesContainerTarget.querySelector(`#${data.id}`)
+
+        this.markMessageFailed(element, data.reason)
       },
     }
 
@@ -271,6 +323,7 @@ export default class extends Controller {
 
     messages.forEach(message => {
       const { body, attachments } = message
+      const createdAt = message.created_at || message.createdAt
 
       const div = document.createElement('div')
       div.innerHTML = body
@@ -302,6 +355,7 @@ export default class extends Controller {
       }
 
       element.setAttribute('data-body', body)
+      this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt)
       this.messagesContainerTarget.prepend(element)
     })
 
@@ -325,11 +379,29 @@ export default class extends Controller {
   }
 
   closePopover() {
-    this.popoverTarget.classList.add(...this.fadeOutClasses)
+    this.clearPopoverOpenAnimation()
+    this.popoverTarget.classList.remove(...this.fadeOutClasses)
+    this.openValue = false
+  }
 
-    setTimeout(() => {
-      this.openValue = false
-    }, 250)
+  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)
+  }
+
+  clearPopoverOpenAnimation() {
+    if (this.popoverOpenAnimationTimeout) {
+      clearTimeout(this.popoverOpenAnimationTimeout)
+      this.popoverOpenAnimationTimeout = null
+    }
+
+    this.popoverTarget?.classList.remove('hellotext--webchat-popover-opening')
   }
 
   onPopoverOpened() {
@@ -369,6 +441,7 @@ export default class extends Controller {
   }
 
   onPopoverClosed() {
+    this.clearPopoverOpenAnimation()
     Hellotext.eventEmitter.dispatch('webchat:closed')
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed')
   }
@@ -399,6 +472,7 @@ export default class extends Controller {
 
   onMessageReceived(message) {
     const { id, body, attachments, teaser } = message
+    const createdAt = message.created_at || message.createdAt
 
     if (!this.claimMessageId(id)) return
 
@@ -418,6 +492,7 @@ export default class extends Controller {
 
     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 => {
@@ -487,6 +562,7 @@ export default class extends Controller {
 
     element.setAttribute('data-id', message.id)
     element.setAttribute('data-hellotext--webchat-target', 'message')
+    this.localizeMessageTimestamps(element)
 
     this.clearTypingIndicator()
     this.messagesContainerTarget.appendChild(element)
@@ -527,16 +603,16 @@ export default class extends Controller {
     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)
+    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)
 
     const element = this.buildMessageElement()
-    const attachment = cardElement.querySelector('img')?.cloneNode(true)
+    const attachment = cardElement?.querySelector('img')?.cloneNode(true)
 
     element.querySelector('[data-body]').innerText = body
 
@@ -566,17 +642,13 @@ export default class extends Controller {
       // 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)
     }
 
     const data = await 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()
 
     const message = {
@@ -645,16 +717,12 @@ export default class extends Controller {
     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)
     }
 
     const data = await 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', {
@@ -768,17 +836,13 @@ export default class extends Controller {
       // 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)
     }
 
     const data = await 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)
@@ -807,9 +871,173 @@ export default class extends Controller {
     element.setAttribute('data-controller', 'hellotext--message')
     element.setAttribute('data-hellotext--webchat-target', 'message')
 
+    this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date())
     return element
   }
 
+  focusCompose(event) {
+    const { target } = event
+    const 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') {
+      const position = this.inputTarget.value.length
+      this.inputTarget.setSelectionRange(position, position)
+    }
+  }
+
+  closePopoverFromHeader(event) {
+    const { target } = event
+
+    if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return
+
+    event.preventDefault()
+    this.closePopover()
+  }
+
+  closePopoverOnEscape(event) {
+    if (event.key !== 'Escape' || !this.openValue) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    this.closePopover()
+
+    this.triggerTarget?.focus?.()
+  }
+
+  async markMessageFailedFromResponse(response, element) {
+    const reason = await this.messageFailureReason(response)
+
+    this.markMessageFailed(element, reason)
+    this.broadcastChannel.postMessage({
+      type: 'message:failed',
+      id: element.id,
+      reason,
+    })
+  }
+
+  markMessageFailed(element, reason) {
+    if (!element) return
+
+    element.classList.add('failed')
+
+    if (!reason) return
+
+    const timestamp = element.querySelector('[data-message-timestamp]')
+
+    if (timestamp) {
+      timestamp.textContent = reason
+    }
+  }
+
+  localizeMessageTimestamps(root = this.element) {
+    if (!root) return
+
+    const timestamps = root.matches?.('time[datetime][data-message-timestamp]')
+      ? [root]
+      : Array.from(root.querySelectorAll?.('time[datetime][data-message-timestamp]') || [])
+
+    timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp))
+  }
+
+  localizeMessageTimestamp(timestamp, value = timestamp?.getAttribute('datetime')) {
+    if (!timestamp || !value) return
+
+    const date = value instanceof Date ? value : new Date(value)
+
+    if (Number.isNaN(date.getTime())) return
+
+    timestamp.setAttribute('datetime', date.toISOString())
+    timestamp.textContent = this.formatMessageTimestamp(date)
+  }
+
+  formatMessageTimestamp(date) {
+    return this.constructor.messageTimestampFormatterFor(Locale.toString()).format(date)
+  }
+
+  static messageTimestampFormatterFor(locale) {
+    const key = locale || 'default'
+
+    if (!this.messageTimestampFormatters[key]) {
+      this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale)
+    }
+
+    return this.messageTimestampFormatters[key]
+  }
+
+  static buildMessageTimestampFormatter(locale) {
+    try {
+      return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS)
+    } catch (_) {
+      return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS)
+    }
+  }
+
+  async messageFailureReason(response) {
+    const nativeResponse = response?.data || response?.response
+    const fallback = nativeResponse?.statusText || 'Message failed'
+
+    try {
+      const jsonResponse = nativeResponse?.clone ? nativeResponse.clone() : nativeResponse
+      const payload = await jsonResponse?.json?.()
+      const 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 {
+      const textResponse = nativeResponse?.clone ? nativeResponse.clone() : nativeResponse
+      const text = await textResponse?.text?.()
+
+      return this.messageFailureReasonFromText(text) || fallback
+    } catch (_) {
+      return fallback
+    }
+  }
+
+  messageFailureReasonFromText(text) {
+    if (typeof text !== 'string') return null
+
+    const value = text.trim()
+    if (!value || value.startsWith('<')) return null
+
+    try {
+      return this.messageFailureReasonFromPayload(JSON.parse(value)) || value
+    } catch (_) {
+      return value
+    }
+  }
+
+  messageFailureReasonFromPayload(payload) {
+    if (!payload) return null
+
+    return [
+      payload.error?.message,
+      payload.message,
+      payload.errors?.message,
+      payload.errors?.[0]?.message,
+      payload.errors?.[0]?.description,
+    ].find(reason => typeof reason === 'string' && reason.trim().length > 0)
+  }
+
   messageAttachmentsContainer(element) {
     return element.querySelector('[data-attachments-container], [data-attachment-container]')
   }

package/src/core/configuration.js

@@ -32,6 +32,11 @@ class Configuration {
    */
   static 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.assign(value)
@@ -41,6 +46,10 @@ class Configuration {
           this[key] = value
         }
       })
+
+      if (shouldInferActionCableUrl) {
+        this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot)
+      }
     }
 
     return this
@@ -57,6 +66,22 @@ class Configuration {
   static endpoint(path) {
     return `${this.apiRoot}/${path}`
   }
+
+  static 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
+    }
+  }
 }
 
 export { Configuration }

package/src/models/business.js

@@ -1,6 +1,9 @@
 import locales from '../locales'
 import BusinessesAPI from '../api/businesses'
 
+const stylesheetAttribute = 'data-hellotext-stylesheet'
+const stylesheetLoadTimeout = 10000
+
 /**
  * @typedef {Object} BusinessCountry
  * @property {String} [code] - ISO country code configured for the business.
@@ -38,6 +41,8 @@ class Business {
   constructor(id) {
     this.id = id
     this.data = null
+    this.stylesheet = null
+    this.stylesheetLoaded = Promise.resolve(false)
   }
 
   /**
@@ -81,15 +86,91 @@ class Business {
   setData(data) {
     this.data = data
 
-    if (typeof document !== 'undefined') {
-      const linkTag = document.createElement('link')
-      linkTag.rel = 'stylesheet'
-      linkTag.href = data.style_url
+    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)
+    }
+  }
+
+  static get stylesheetSelector() {
+    return `link[rel="stylesheet"][${stylesheetAttribute}]`
+  }
+
+  static 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
+  }
+
+  static get stylesheetLinks() {
+    if (typeof document === 'undefined') return []
+
+    return Array.from(document.querySelectorAll(this.stylesheetSelector))
+  }
+
+  static get latestStylesheet() {
+    return this.stylesheetLinks[this.stylesheetLinks.length - 1]
+  }
 
-      document.head.append(linkTag)
+  static normalizedStylesheetUrl(styleUrl) {
+    try {
+      return new URL(styleUrl, document.baseURI).href
+    } catch (_error) {
+      return styleUrl
     }
   }
 
+  static 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
+  }
+
+  static stylesheetIsLoaded(linkTag) {
+    return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet
+  }
+
   get subscription() {
     return this.data.subscription
   }

package/src/models/webchat.js

@@ -1,23 +1,38 @@
 import { Configuration } from '../core'
 
 import API from '../api'
+import { Business } from './business'
 
 class Webchat {
   static async load(id) {
-    return new Webchat({
+    const webchat = new Webchat({
       id,
       html: await API.webchats.get(id),
     })
+
+    webchat.rendered = webchat.render()
+
+    return webchat
   }
 
   constructor(data) {
     this.data = data
-    this.render()
+    this.mounted = false
+    this.rendered = Promise.resolve(false)
   }
 
-  render() {
+  async render() {
     this.applyBehaviourOverride()
+
+    if (!await this.stylesheetLoaded) {
+      console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.')
+      return false
+    }
+
     this.containerToAppendTo.appendChild(this.data.html)
+    this.mounted = true
+
+    return true
   }
 
   applyBehaviourOverride() {
@@ -50,6 +65,10 @@ class Webchat {
   get containerToAppendTo() {
     return document.querySelector(Configuration.webchat.container)
   }
+
+  get stylesheetLoaded() {
+    return Business.waitForStylesheet(Business.latestStylesheet)
+  }
 }
 
 export { Webchat }