@hellotext/hellotext 2.1.6 → 2.2.0

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

@@ -309,6 +309,8 @@ export default class extends Controller {
   }
 
   onPopoverOpened() {
+    this.popoverTarget.classList.remove(...this.fadeOutClasses)
+
     if (!this.onMobile) {
       this.inputTarget.focus()
     }
@@ -367,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
 
@@ -407,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
 
@@ -420,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()
 
@@ -449,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
@@ -468,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))
       })
     }
 
@@ -540,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