@hellotext/hellotext 2.4.4 → 2.4.5

package/src/channels/application_channel.js

@@ -2,6 +2,20 @@ import { Configuration } from '../core'
 
 class ApplicationChannel {
   static webSocket
+  static channels = new Set()
+  static messageHandlers = new Set()
+  static disconnectHandlers = new Set()
+  static subscriptionConfirmHandlers = new Set()
+  static reconnectTimeout = null
+  static reconnectAttempts = 0
+  static reconnectBaseDelay = 500
+  static reconnectMaxDelay = 10000
+  static reconnectJitter = 0.3
+  static needsResubscribe = false
+
+  constructor() {
+    ApplicationChannel.channels.add(this)
+  }
 
   send({ command, identifier, data }) {
     const payload = {
@@ -10,17 +24,20 @@ class ApplicationChannel {
       data: JSON.stringify(data || {}),
     }
 
-    if (this.webSocket.readyState === WebSocket.OPEN) {
-      this.webSocket.send(JSON.stringify(payload))
+    const socket = ApplicationChannel.ensureWebSocket()
+    const message = JSON.stringify(payload)
+
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send(message)
     } else {
-      this.webSocket.addEventListener('open', () => {
-        this.webSocket.send(JSON.stringify(payload))
+      socket.addEventListener('open', () => {
+        socket.send(message)
       })
     }
   }
 
   onMessage(callback) {
-    this.webSocket.addEventListener('message', event => {
+    const handler = event => {
       const data = JSON.parse(event.data)
       const { type, message } = data
 
@@ -29,15 +46,141 @@ class ApplicationChannel {
       }
 
       callback(message)
-    })
+    }
+
+    ApplicationChannel.messageHandlers.add(handler)
+    ApplicationChannel.ensureWebSocket().addEventListener('message', handler)
+  }
+
+  onDisconnect(callback) {
+    ApplicationChannel.disconnectHandlers.add(callback)
+  }
+
+  onSubscriptionConfirmed(callback) {
+    ApplicationChannel.subscriptionConfirmHandlers.add(callback)
   }
 
   get webSocket() {
-    if (!ApplicationChannel.webSocket) {
-      return (ApplicationChannel.webSocket = new WebSocket(Configuration.actionCableUrl))
+    return ApplicationChannel.ensureWebSocket()
+  }
+
+  static ensureWebSocket() {
+    if (this.webSocket && !this.closedWebSocket(this.webSocket)) {
+      return this.webSocket
+    }
+
+    if (this.webSocket) {
+      this.needsResubscribe = true
+    }
+
+    return this.openWebSocket()
+  }
+
+  static openWebSocket() {
+    this.clearReconnectTimeout()
+
+    const socket = new WebSocket(Configuration.actionCableUrl)
+    this.webSocket = socket
+    this.installWebSocketHandlers(socket)
+
+    return socket
+  }
+
+  static installWebSocketHandlers(socket) {
+    socket.addEventListener('open', () => this.handleOpen(socket))
+    socket.addEventListener('close', () => this.handleDisconnect(socket))
+    socket.addEventListener('error', () => this.handleDisconnect(socket))
+    socket.addEventListener('message', event => this.handleControlMessage(event))
+
+    this.messageHandlers.forEach(handler => {
+      socket.addEventListener('message', handler)
+    })
+  }
+
+  static handleOpen(socket) {
+    if (socket !== this.webSocket) {
+      return
+    }
+
+    this.reconnectAttempts = 0
+
+    if (!this.needsResubscribe) {
+      return
     }
 
-    return ApplicationChannel.webSocket
+    this.needsResubscribe = false
+    this.resubscribeChannels()
+  }
+
+  static handleControlMessage(event) {
+    let data
+
+    try {
+      data = JSON.parse(event.data)
+    } catch {
+      return
+    }
+
+    if (data.type !== 'confirm_subscription') {
+      return
+    }
+
+    this.subscriptionConfirmHandlers.forEach(callback => callback(data.identifier))
+  }
+
+  static handleDisconnect(socket) {
+    if (socket !== this.webSocket) {
+      return
+    }
+
+    this.disconnectHandlers.forEach(callback => callback())
+    this.webSocket = null
+    this.needsResubscribe = true
+    this.scheduleReconnect()
+  }
+
+  static scheduleReconnect() {
+    if (this.reconnectTimeout) {
+      return
+    }
+
+    this.reconnectTimeout = setTimeout(() => {
+      this.reconnectTimeout = null
+      this.reconnectAttempts += 1
+      this.openWebSocket()
+    }, this.reconnectDelay)
+  }
+
+  static clearReconnectTimeout() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout)
+      this.reconnectTimeout = null
+    }
+  }
+
+  static resubscribeChannels() {
+    this.channels.forEach(channel => {
+      const resubscribe = channel.resubscribe || channel.subscribe
+
+      if (typeof resubscribe === 'function') {
+        resubscribe.call(channel)
+      }
+    })
+  }
+
+  static closedWebSocket(socket) {
+    return socket.readyState === WebSocket.CLOSED || socket.readyState === WebSocket.CLOSING
+  }
+
+  static get reconnectDelay() {
+    const delay = Math.min(
+      this.reconnectMaxDelay,
+      this.reconnectBaseDelay * 2 ** this.reconnectAttempts,
+    )
+
+    const jitter = Math.round(delay * this.reconnectJitter * Math.random())
+
+    return delay + jitter
   }
 
   get ignoredEvents() {

package/src/channels/webchat_channel.js

@@ -7,11 +7,24 @@ class WebchatChannel extends ApplicationChannel {
     this.id = id
     this.session = session
     this.conversation = conversation
-
+    // Keep our own subscription intent instead of trusting the socket state.
+    // The shared WebSocket can reconnect independently, but an explicit
+    // unsubscribe means this channel should not silently join again.
+    this.subscribed = false
+    this.awaitingReconnectConfirmation = false
+    this.reconnectCallbacks = new Set()
+
+    // ActionCable confirms subscriptions at the socket level. This channel
+    // listens for those confirmations so the controller can wait until Rails has
+    // accepted this exact WebchatChannel subscription before fetching missed
+    // messages from the REST catch-up endpoint.
+    this.onSubscriptionConfirmed(identifier => this.handleSubscriptionConfirmed(identifier))
     this.subscribe()
   }
 
   subscribe() {
+    this.subscribed = true
+
     const params = {
       channel: 'WebchatChannel',
       id: this.id,
@@ -23,6 +36,8 @@ class WebchatChannel extends ApplicationChannel {
   }
 
   unsubscribe() {
+    this.subscribed = false
+
     const params = {
       channel: 'WebchatChannel',
       id: this.id,
@@ -33,6 +48,51 @@ class WebchatChannel extends ApplicationChannel {
     this.send({ command: 'unsubscribe', identifier: params })
   }
 
+  resubscribe() {
+    if (this.subscribed === false) return
+
+    // Reconnect recovery has two phases: send the subscription command first,
+    // then wait for ActionCable to confirm it. Catch-up work should run after
+    // that confirmation so broadcasts and REST backfill are pointed at the same
+    // live conversation subscription.
+    this.awaitingReconnectConfirmation = true
+    this.subscribe()
+  }
+
+  onReconnect(callback) {
+    this.reconnectCallbacks.add(callback)
+  }
+
+  handleSubscriptionConfirmed(identifier) {
+    if (!this.awaitingReconnectConfirmation || !this.matchesIdentifier(identifier)) return
+
+    // Only the first matching confirmation completes the reconnect cycle. This
+    // prevents unrelated subscription confirmations on the shared socket from
+    // triggering duplicate catch-up requests.
+    this.awaitingReconnectConfirmation = false
+    this.reconnectCallbacks.forEach(callback => callback())
+  }
+
+  matchesIdentifier(identifier) {
+    let params
+
+    try {
+      params = typeof identifier === 'string' ? JSON.parse(identifier) : identifier
+    } catch {
+      return false
+    }
+
+    // ActionCable sends the same identifier payload we used when subscribing.
+    // Matching every routing key keeps a confirmation for another webchat,
+    // session, or conversation from being treated as this channel's reconnect.
+    return (
+      params.channel === 'WebchatChannel' &&
+      params.id === this.id &&
+      params.session === this.session &&
+      params.conversation === this.conversation
+    )
+  }
+
   startTypingIndicator() {
     const params = {
       channel: 'WebchatChannel',

package/src/controllers/webchat_controller.js

@@ -18,6 +18,8 @@ const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
   hour: 'numeric',
   minute: '2-digit',
 }
+
+const MOBILE_USER_AGENT_PATTERN = /Android|iPhone|iPad|iPod/i
 const SCROLL_ISOLATION_EVENT_OPTIONS = { capture: true, passive: true }
 
 export default class extends Controller {
@@ -84,16 +86,22 @@ export default class extends Controller {
 
     this.files = []
     this.messageIds = new Set()
+    this.catchUpAfterMessageId = null
+    this.fetchingCatchUpMessages = false
 
     this.onMessageReceived = this.onMessageReceived.bind(this)
     this.onMessageReaction = this.onMessageReaction.bind(this)
     this.onTypingStart = this.onTypingStart.bind(this)
+    this.captureCatchUpCursor = this.captureCatchUpCursor.bind(this)
+    this.catchUpMessages = this.catchUpMessages.bind(this)
 
     this.onScroll = this.onScroll.bind(this)
 
     this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this)
     this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this)
     this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`)
+    this.webChatChannel.onDisconnect(this.captureCatchUpCursor)
+    this.webChatChannel.onReconnect(this.catchUpMessages)
 
     super.initialize()
   }
@@ -330,7 +338,14 @@ export default class extends Controller {
 
       const element = this.messageTemplateTarget.cloneNode(true)
 
+      element.classList.add('hellotext--webchat-message')
       element.setAttribute('data-hellotext--webchat-target', 'message')
+      element.setAttribute('data-id', message.id)
+
+      if (createdAt) {
+        element.setAttribute('data-created-at', createdAt)
+      }
+
       element.style.removeProperty('display')
 
       element.querySelector('[data-body]').innerHTML = div.innerHTML
@@ -409,7 +424,7 @@ export default class extends Controller {
     this.dismissTeaserForSession?.()
 
     if (!this.onMobile) {
-      this.inputTarget.focus()
+      this.focusComposeInput()
     }
 
     if (!this.scrolled) {
@@ -470,7 +485,7 @@ export default class extends Controller {
     }
   }
 
-  onMessageReceived(message) {
+  onMessageReceived(message, options = {}) {
     const { id, body, attachments, teaser } = message
     const createdAt = message.created_at || message.createdAt
 
@@ -479,19 +494,21 @@ export default class extends Controller {
     this.hideTeaser?.()
 
     if (message.carousel) {
-      return this.insertCarouselMessage(message)
+      return this.insertCarouselMessage(message, options)
     }
 
     const div = document.createElement('div')
     div.innerHTML = body
 
     const element = this.messageTemplateTarget.cloneNode(true)
+    element.classList.add('hellotext--webchat-message')
     element.style.display = 'flex'
 
     element.querySelector('[data-body]').innerHTML = div.innerHTML
 
     element.setAttribute('data-id', id)
     element.setAttribute('data-hellotext--webchat-target', 'message')
+    this.setMessageCreatedAt(element, createdAt)
     this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt)
 
     if (attachments) {
@@ -505,14 +522,16 @@ export default class extends Controller {
     }
 
     this.clearTypingIndicator()
-    this.messagesContainerTarget.appendChild(element)
+    this.insertMessageElement(element)
 
     Hellotext.eventEmitter.dispatch('webchat:message:received', {
       ...message,
       body: element.querySelector('[data-body]').innerText,
     })
 
-    element.scrollIntoView({ behavior: 'smooth' })
+    if (options.scroll !== false) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
 
     this.updateMessageTeaser(teaser)
 
@@ -537,6 +556,70 @@ export default class extends Controller {
     return !messageTargets.some(element => element.dataset.id === id)
   }
 
+  captureCatchUpCursor() {
+    this.catchUpAfterMessageId = this.lastRenderedMessageId
+  }
+
+  async catchUpMessages() {
+    const afterId = this.catchUpAfterMessageId
+
+    if (!afterId || this.fetchingCatchUpMessages) return
+
+    this.fetchingCatchUpMessages = true
+
+    try {
+      const response = await this.messagesAPI.catchUp(afterId)
+      const { messages = [] } = await response.json()
+
+      messages.forEach(message => this.onMessageReceived(message, { scroll: false }))
+      this.catchUpAfterMessageId = this.lastRenderedMessageId
+    } finally {
+      this.fetchingCatchUpMessages = false
+    }
+  }
+
+  get lastRenderedMessageId() {
+    const messages = this.persistedMessageElements
+
+    return messages[messages.length - 1]?.dataset.id || null
+  }
+
+  get persistedMessageElements() {
+    return Array.from(
+      this.messagesContainerTarget.querySelectorAll('.hellotext--webchat-message[data-id]'),
+    )
+  }
+
+  setMessageCreatedAt(element, createdAt) {
+    if (createdAt) {
+      element.setAttribute('data-created-at', createdAt)
+    }
+  }
+
+  insertMessageElement(element) {
+    const nextElement = this.nextMessageElementFor(element)
+
+    if (nextElement) {
+      this.messagesContainerTarget.insertBefore(element, nextElement)
+    } else {
+      this.messagesContainerTarget.appendChild(element)
+    }
+  }
+
+  nextMessageElementFor(element) {
+    const createdAt = Date.parse(element.dataset.createdAt)
+
+    if (Number.isNaN(createdAt)) return null
+
+    return this.persistedMessageElements.find(messageElement => {
+      if (messageElement === element) return false
+
+      const messageCreatedAt = Date.parse(messageElement.dataset.createdAt)
+
+      return !Number.isNaN(messageCreatedAt) && messageCreatedAt > createdAt
+    })
+  }
+
   updateMessageTeaser(teaser) {
     this.messageTeaserValue = teaser
 
@@ -556,18 +639,23 @@ export default class extends Controller {
     this.teaserTarget.classList.toggle('invisible', this.openValue)
   }
 
-  insertCarouselMessage(message) {
+  insertCarouselMessage(message, options = {}) {
     const html = message.html
+    const createdAt = message.created_at || message.createdAt
     const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild
 
+    element.classList.add('hellotext--webchat-message')
     element.setAttribute('data-id', message.id)
     element.setAttribute('data-hellotext--webchat-target', 'message')
+    this.setMessageCreatedAt(element, createdAt)
     this.localizeMessageTimestamps(element)
 
     this.clearTypingIndicator()
-    this.messagesContainerTarget.appendChild(element)
+    this.insertMessageElement(element)
 
-    element.scrollIntoView({ behavior: 'smooth' })
+    if (options.scroll !== false) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
 
     Hellotext.eventEmitter.dispatch('webchat:message:received', {
       ...message,
@@ -648,7 +736,10 @@ export default class extends Controller {
     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.localizeMessageTimestamp(
+      element.querySelector('[data-message-timestamp]'),
+      data.created_at || data.createdAt,
+    )
     this.clearRevealedOpeningSequenceMessageIds()
 
     const message = {
@@ -722,7 +813,10 @@ export default class extends Controller {
 
     const data = await response.json()
     element.setAttribute('data-id', data.id)
-    this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt)
+    this.localizeMessageTimestamp(
+      element.querySelector('[data-message-timestamp]'),
+      data.created_at || data.createdAt,
+    )
     this.clearRevealedOpeningSequenceMessageIds()
 
     Hellotext.eventEmitter.dispatch('webchat:message:sent', {
@@ -819,7 +913,7 @@ export default class extends Controller {
     this.attachmentContainerTarget.style.display = 'none'
     this.errorMessageContainerTarget.style.display = 'none'
 
-    this.inputTarget.focus()
+    this.focusComposeInput()
 
     // Set up optimistic typing indicator BEFORE making the API call
     // This prevents race conditions with server responses
@@ -842,7 +936,10 @@ export default class extends Controller {
     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.localizeMessageTimestamp(
+      element.querySelector('[data-message-timestamp]'),
+      data.created_at || data.createdAt,
+    )
     this.clearRevealedOpeningSequenceMessageIds()
 
     Hellotext.eventEmitter.dispatch('webchat:message:sent', message)
@@ -892,19 +989,18 @@ export default class extends Controller {
 
     if (!this.hasInputTarget || target.closest(ignoredSelector)) return
 
-    event.preventDefault()
-    this.inputTarget.focus()
+    if (!this.focusComposeInput({ moveCursorToEnd: true })) return
 
-    if (typeof this.inputTarget.selectionStart === 'number') {
-      const position = this.inputTarget.value.length
-      this.inputTarget.setSelectionRange(position, position)
-    }
+    event.preventDefault()
   }
 
   closePopoverFromHeader(event) {
     const { target } = event
 
-    if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return
+    if (
+      target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')
+    )
+      return
 
     event.preventDefault()
     this.closePopover()
@@ -1085,7 +1181,7 @@ export default class extends Controller {
     this.errorMessageContainerTarget.innerText = ''
 
     newFiles.forEach(file => this.createAttachmentElement(file))
-    this.inputTarget.focus()
+    this.focusComposeInput()
   }
 
   createAttachmentElement(file) {
@@ -1127,7 +1223,7 @@ export default class extends Controller {
     this.attachmentInputTarget.value = ''
 
     attachment.remove()
-    this.inputTarget.focus()
+    this.focusComposeInput()
   }
 
   attachmentTargetDisconnected() {
@@ -1155,7 +1251,22 @@ export default class extends Controller {
     this.inputTarget.value = value.slice(0, start) + emoji + value.slice(end)
 
     this.inputTarget.selectionStart = this.inputTarget.selectionEnd = start + emoji.length
+    this.focusComposeInput()
+  }
+
+  focusComposeInput({ moveCursorToEnd = false } = {}) {
+    if (!this.shouldAutofocusCompose) return false
+    if (this.hasInputTarget === false) return false
+    if (this.hasInputTarget === undefined && !this.inputTarget) return false
+
     this.inputTarget.focus()
+
+    if (moveCursorToEnd && typeof this.inputTarget.selectionStart === 'number') {
+      const position = this.inputTarget.value.length
+      this.inputTarget.setSelectionRange(position, position)
+    }
+
+    return true
   }
 
   byteToMegabyte(bytes) {
@@ -1172,7 +1283,32 @@ export default class extends Controller {
     )
   }
 
+  get shouldAutofocusCompose() {
+    return !this.usesVirtualKeyboard
+  }
+
+  get usesVirtualKeyboard() {
+    if (typeof navigator === 'undefined') return false
+
+    const userAgent = navigator.userAgent || ''
+    const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
+    const isMobileUserAgent = MOBILE_USER_AGENT_PATTERN.test(userAgent)
+    const isUserAgentDataMobile = navigator.userAgentData?.mobile === true
+
+    return isMobileUserAgent || isIPadOS || isUserAgentDataMobile || this.hasTouchOnlyPointer
+  }
+
+  get hasTouchOnlyPointer() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+
+    return (
+      window.matchMedia('(pointer: coarse)').matches && window.matchMedia('(hover: none)').matches
+    )
+  }
+
   get onMobile() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+
     return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches
   }
 }