@hellotext/hellotext 1.8.7 → 2.0.1

package/lib/vanilla.js

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _hellotext.default;
-  }
-});
-var _hellotext = _interopRequireDefault(require("./hellotext"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+export { default } from './hellotext';

package/package.json

@@ -1,15 +1,46 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "1.8.7",
+  "version": "2.0.1",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
-  "main": "lib/index.js",
+  "main": "lib/index.cjs",
+  "module": "lib/index.js",
+  "browser": "dist/hellotext.js",
+  "unpkg": "dist/hellotext.js",
+  "types": "index.d.ts",
   "author": "Hellotext",
   "license": "MIT",
   "homepage": "https://github.com/hellotext/hellotext.js",
+  "files": [
+    "lib",
+    "dist",
+    "src",
+    "styles",
+    "index.d.ts"
+  ],
   "exports": {
-    ".": "./lib/index.js",
-    "./vanilla": "./lib/vanilla.js"
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./dist/hellotext.js"
+    },
+    "./vanilla": {
+      "types": "./index.d.ts",
+      "import": "./lib/vanilla.js",
+      "require": "./lib/vanilla.cjs"
+    },
+    "./styles/*": "./styles/*",
+    "./styles/index.css": "./styles/index.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css",
+    "./lib/index.js",
+    "./lib/index.cjs"
+  ],
+  "engines": {
+    "node": ">=14.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.20.7",
@@ -38,9 +69,12 @@
   ],
   "scripts": {
     "test": "NODE_ENV=test jest",
-    "build": "npm run build:babel && npm run build:webpack",
-    "build:babel": "babel src -d lib",
-    "build:webpack": "webpack"
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:bundle",
+    "build:esm": "babel src -d lib --ignore src/index.bundle.js",
+    "build:cjs": "BABEL_ENV=cjs babel src -d lib --out-file-extension .cjs --ignore src/index.bundle.js",
+    "build:bundle": "webpack",
+    "clean": "rm -rf lib dist",
+    "prepublishOnly": "npm test && npm run build"
   },
   "bugs": {
     "url": "https://github.com/hellotext/hellotext.js/issues"

package/src/controllers/webchat_controller.js

@@ -1,14 +1,14 @@
+import { flip, offset, shift } from '@floating-ui/dom'
 import { Controller } from '@hotwired/stimulus'
-import { shift, flip, offset } from '@floating-ui/dom'
 
 import WebchatMessagesAPI from '../api/webchat/messages'
 import WebchatChannel from '../channels/webchat_channel'
-import Hellotext from "../hellotext"
+import Hellotext from '../hellotext'
 
 import { Webchat as WebchatConfiguration, behaviors } from '../core/configuration/webchat'
 
-import { usePopover } from './mixins/usePopover'
 import { LogoBuilder } from '../builders/logo_builder'
+import { usePopover } from './mixins/usePopover'
 
 export default class extends Controller {
   static values = {
@@ -16,7 +16,7 @@ export default class extends Controller {
     conversationId: String,
     media: Object,
     fileSizeErrorMessage: String,
-    placement: { type: String, default: "bottom-end" },
+    placement: { type: String, default: 'bottom-end' },
     open: { type: Boolean, default: false },
     autoPlacement: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
@@ -46,7 +46,13 @@ export default class extends Controller {
 
   initialize() {
     this.messagesAPI = new WebchatMessagesAPI(this.idValue)
-    this.webChatChannel = new WebchatChannel(this.idValue, Hellotext.session, this.conversationIdValue)
+
+    this.webChatChannel = new WebchatChannel(
+      this.idValue,
+      Hellotext.session,
+      this.conversationIdValue,
+    )
+
     this.files = []
 
     this.onMessageReceived = this.onMessageReceived.bind(this)
@@ -79,7 +85,7 @@ export default class extends Controller {
       this.toolbarTarget.appendChild(LogoBuilder.build())
     }
 
-    if(localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened') {
+    if (localStorage.getItem(`hellotext--webchat--${this.idValue}`) === 'opened') {
       this.openValue = true
     }
 
@@ -95,10 +101,18 @@ export default class extends Controller {
   }
 
   async onScroll() {
-    if(this.messagesContainerTarget.scrollTop > 300 || !this.nextPageValue || this.fetchingNextPage) return
+    if (
+      this.messagesContainerTarget.scrollTop > 300 ||
+      !this.nextPageValue ||
+      this.fetchingNextPage
+    )
+      return
 
     this.fetchingNextPage = true
-    const response = await this.messagesAPI.index({ page: this.nextPageValue, session: Hellotext.session })
+    const response = await this.messagesAPI.index({
+      page: this.nextPageValue,
+      session: Hellotext.session,
+    })
 
     const { next: nextPage, messages } = await response.json()
 
@@ -118,13 +132,13 @@ export default class extends Controller {
 
       element.querySelector('[data-body]').innerHTML = div.innerHTML
 
-      if(message.state === 'received') {
+      if (message.state === 'received') {
         element.classList.add('received')
       } else {
         element.classList.remove('received')
       }
 
-      if(attachments) {
+      if (attachments) {
         attachments.forEach(attachmentUrl => {
           const image = this.attachmentImageTarget.cloneNode(true)
 
@@ -150,7 +164,12 @@ export default class extends Controller {
   }
 
   onClickOutside(event) {
-    if (WebchatConfiguration.behaviour === behaviors.POPOVER && this.openValue && event.target.nodeType && this.element.contains(event.target) === false) {
+    if (
+      WebchatConfiguration.behaviour === behaviors.POPOVER &&
+      this.openValue &&
+      event.target.nodeType &&
+      this.element.contains(event.target) === false
+    ) {
       this.openValue = false
     }
   }
@@ -158,7 +177,7 @@ export default class extends Controller {
   onPopoverOpened() {
     this.inputTarget.focus()
 
-    if(!this.scrolled) {
+    if (!this.scrolled) {
       this.messagesContainerTarget.scroll({
         top: this.messagesContainerTarget.scrollHeight,
         behavior: 'instant',
@@ -171,7 +190,7 @@ export default class extends Controller {
 
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'opened')
 
-    if(this.unreadCounterTarget.style.display === 'none') return
+    if (this.unreadCounterTarget.style.display === 'none') return
 
     this.unreadCounterTarget.style.display = 'none'
     this.unreadCounterTarget.innerText = '0'
@@ -183,7 +202,7 @@ export default class extends Controller {
     Hellotext.eventEmitter.dispatch('webchat:closed')
 
     setTimeout(() => {
-      this.inputTarget.value = ""
+      this.inputTarget.value = ''
     })
 
     localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed')
@@ -195,12 +214,12 @@ export default class extends Controller {
 
     const reactionsContainer = messageElement.querySelector('[data-reactions]')
 
-    if(type === 'reaction.destroy') {
+    if (type === 'reaction.destroy') {
       const reactionElement = reactionsContainer.querySelector(`[data-id="${reaction.id}"]`)
       return reactionElement.remove()
     }
 
-    if(reactionsContainer.querySelector(`[data-id="${reaction.id}"]`)) {
+    if (reactionsContainer.querySelector(`[data-id="${reaction.id}"]`)) {
       const reactionElement = reactionsContainer.querySelector(`[data-id="${reaction.id}"]`)
       reactionElement.innerText = reaction.emoji
     } else {
@@ -225,7 +244,7 @@ export default class extends Controller {
     element.querySelector('[data-body]').innerHTML = div.innerHTML
     element.setAttribute('data-hellotext--webchat-target', 'message')
 
-    if(attachments) {
+    if (attachments) {
       attachments.forEach(attachmentUrl => {
         const image = this.attachmentImageTarget.cloneNode(true)
         image.src = attachmentUrl
@@ -245,7 +264,7 @@ export default class extends Controller {
     element.scrollIntoView({ behavior: 'smooth' })
     this.setOfflineTimeout()
 
-    if(this.openValue) return
+    if (this.openValue) return
 
     this.unreadCounterTarget.style.display = 'flex'
 
@@ -258,7 +277,7 @@ export default class extends Controller {
 
     this.titleTarget.innerText = user.name
 
-    if(user.online) {
+    if (user.online) {
       this.onlineStatusTarget.style.display = 'flex'
     } else {
       this.onlineStatusTarget.style.display = 'none'
@@ -275,7 +294,7 @@ export default class extends Controller {
 
     const message = {
       body: this.inputTarget.value,
-      attachments: this.files
+      attachments: this.files,
     }
 
     formData.append('message[body]', this.inputTarget.value)
@@ -294,9 +313,9 @@ export default class extends Controller {
     element.setAttribute('data-hellotext--webchat-target', 'message')
     element.querySelector('[data-body]').innerText = this.inputTarget.value
 
-    const attachments =  this.attachmentContainerTarget.querySelectorAll('img')
+    const attachments = this.attachmentContainerTarget.querySelectorAll('img')
 
-    if(attachments.length > 0) {
+    if (attachments.length > 0) {
       attachments.forEach(attachment => {
         element.querySelector('[data-attachment-container]').appendChild(attachment)
       })
@@ -305,16 +324,16 @@ export default class extends Controller {
     this.messagesContainerTarget.appendChild(element)
     element.scrollIntoView({ behavior: 'smooth' })
 
-    this.inputTarget.value = ""
+    this.inputTarget.value = ''
     this.files = []
-    this.attachmentContainerTarget.innerHTML = ""
-    this.attachmentContainerTarget.classList.add("hidden")
+    this.attachmentContainerTarget.style.display = 'none'
+    this.errorMessageContainerTarget.style.display = 'none'
 
     this.inputTarget.focus()
 
     const response = await this.messagesAPI.create(formData)
 
-    if(response.failed) {
+    if (response.failed) {
       return element.classList.add('failed')
     }
 
@@ -324,10 +343,12 @@ export default class extends Controller {
 
     Hellotext.eventEmitter.dispatch('webchat:message:sent', message)
 
-    if(data.conversation !== this.conversationIdValue) {
+    if (data.conversation !== this.conversationIdValue) {
       this.conversationIdValue = data.conversation
       this.webChatChannel.updateSubscriptionWith(this.conversationIdValue)
     }
+
+    this.attachmentContainerTarget.style.display = ''
   }
 
   openAttachment() {
@@ -335,29 +356,32 @@ export default class extends Controller {
   }
 
   onFileInputChange() {
-    this.errorMessageContainerTarget.classList.add('hidden')
+    this.errorMessageContainerTarget.style.display = 'none'
 
     this.files = Array.from(this.attachmentInputTarget.files)
 
     const fileMaxSizeTooMuch = this.files.find(file => {
-      const type = file.type.split("/")[0]
+      const type = file.type.split('/')[0]
 
-      if(['image', 'video', 'audio'].includes(type)) {
+      if (['image', 'video', 'audio'].includes(type)) {
         return this.mediaValue[type].max_size < file.size
       } else {
         return this.mediaValue.document.max_size < file.size
       }
     })
 
-    if(fileMaxSizeTooMuch) {
-      const type = fileMaxSizeTooMuch.type.split("/")[0]
+    if (fileMaxSizeTooMuch) {
+      const type = fileMaxSizeTooMuch.type.split('/')[0]
       const mediaType = ['image', 'audio', 'video'].includes(type) ? type : 'document'
 
-      this.errorMessageContainerTarget.innerText = this.fileSizeErrorMessageValue.replace('%{limit}', this.byteToMegabyte(this.mediaValue[mediaType].max_size))
+      this.errorMessageContainerTarget.innerText = this.fileSizeErrorMessageValue.replace(
+        '%{limit}',
+        this.byteToMegabyte(this.mediaValue[mediaType].max_size),
+      )
       return
     }
 
-    this.errorMessageContainerTarget.innerText = ""
+    this.errorMessageContainerTarget.innerText = ''
     this.files.forEach(file => this.createAttachmentElement(file))
     this.inputTarget.focus()
   }
@@ -365,11 +389,11 @@ export default class extends Controller {
   createAttachmentElement(file) {
     const element = this.attachmentElement()
 
-    this.attachmentContainerTarget.classList.remove('hidden')
+    this.attachmentContainerTarget.style.display = ''
 
     element.setAttribute('data-name', file.name)
 
-    if(file.type.startsWith("image/")) {
+    if (file.type.startsWith('image/')) {
       const thumbnail = this.attachmentImageTarget.cloneNode(true)
 
       thumbnail.src = URL.createObjectURL(file)
@@ -380,8 +404,13 @@ export default class extends Controller {
       this.attachmentContainerTarget.appendChild(element)
       this.attachmentContainerTarget.style.display = 'flex'
     } else {
-      element.querySelector("main").classList.add(...this.widthClasses, "h-20", "rounded-md", "bg-gray-200", "p-1")
-      element.querySelector("p[data-attachment-name]").innerText = file.name
+      const main = element.querySelector('main')
+      main.style.height = '5rem'
+      main.style.borderRadius = '0.375rem'
+      main.style.backgroundColor = '#e5e7eb'
+      main.style.padding = '0.25rem'
+
+      element.querySelector('p[data-attachment-name]').innerText = file.name
     }
   }
 
@@ -395,18 +424,18 @@ export default class extends Controller {
   }
 
   attachmentTargetDisconnected() {
-    if(this.attachmentTargets.length === 0) {
-      this.attachmentContainerTarget.innerHTML = ""
+    if (this.attachmentTargets.length === 0) {
+      this.attachmentContainerTarget.innerHTML = ''
       this.attachmentContainerTarget.style.display = 'none'
     }
   }
 
   attachmentElement() {
     const element = this.attachmentTemplateTarget.cloneNode(true)
-    element.removeAttribute("hidden")
+    element.removeAttribute('hidden')
     element.style.display = 'flex'
 
-    element.setAttribute("data-hellotext--webchat-target", "attachment")
+    element.setAttribute('data-hellotext--webchat-target', 'attachment')
 
     return element
   }
@@ -439,10 +468,6 @@ export default class extends Controller {
   }
 
   get middlewares() {
-    return [
-      offset(5),
-      shift({ padding: 24 }),
-      flip(),
-    ]
+    return [offset(5), shift({ padding: 24 }), flip()]
   }
 }

package/src/hellotext.js

@@ -1,11 +1,10 @@
-import { Event, Configuration } from './core'
+import { Configuration, Event } from './core'
 
 import API, { Response } from './api'
-import { Business, Query, FormCollection, Session, Webchat } from './models'
+import { Business, FormCollection, Query, Session, Webchat } from './models'
 
 import { NotInitializedError } from './errors'
 
-
 class Hellotext {
   static #session
   static #query
@@ -32,6 +31,8 @@ class Hellotext {
     if (Configuration.webchat.id) {
       this.webchat = await Webchat.load(Configuration.webchat.id)
     }
+
+    this.forms.collect()
   }
 
   /**
@@ -47,7 +48,7 @@ class Hellotext {
     }
 
     const headers = {
-      ...(params && params.headers) || {},
+      ...((params && params.headers) || {}),
       ...this.headers,
     }
 

package/src/index.bundle.js

@@ -0,0 +1,5 @@
+import '../styles/index.css'
+import './index.js'
+
+import Hellotext from './index.js'
+export default Hellotext

package/src/index.js

@@ -2,8 +2,8 @@ import { Application } from '@hotwired/stimulus'
 import Hellotext from './hellotext'
 
 import FormController from './controllers/form_controller'
-import WebchatController from './controllers/webchat_controller'
 import WebChatEmojiController from './controllers/webchat/emoji_picker_controller'
+import WebchatController from './controllers/webchat_controller'
 
 const application = Application.start()
 
@@ -11,8 +11,6 @@ application.register('hellotext--form', FormController)
 application.register('hellotext--webchat', WebchatController)
 application.register('hellotext--webchat--emoji', WebChatEmojiController)
 
-import '../styles/index.css'
-
 window.Hellotext = Hellotext
 
 export default Hellotext

package/src/models/business.js

@@ -6,7 +6,6 @@ class Business {
   constructor(id) {
     this.id = id
     this.data = {}
-    this.fetchPublicData()
   }
 
   get subscription() {
@@ -29,15 +28,13 @@ class Business {
     return this.data.features
   }
 
-  // private
-
-  fetchPublicData() {
-    API.get(this.id)
+  async fetchPublicData() {
+    return API.get(this.id)
       .then(response => response.json())
       .then(data => {
         this.data = data
 
-        if(typeof document !== 'undefined') {
+        if (typeof document !== 'undefined') {
           const linkTag = document.createElement('link')
           linkTag.rel = 'stylesheet'
           linkTag.href = data.style_url

package/src/models/form_collection.js

@@ -1,5 +1,5 @@
-import Hellotext from '../hellotext'
 import API from '../api/forms'
+import Hellotext from '../hellotext'
 
 import { Configuration } from '../core'
 import { Form } from './form'
@@ -15,7 +15,7 @@ class FormCollection {
 
     this.add = this.add.bind(this)
 
-    if(typeof MutationObserver !== 'undefined') {
+    if (typeof MutationObserver !== 'undefined') {
       this.mutationObserver = new MutationObserver(this.formMutationObserver.bind(this))
       this.mutationObserver.observe(document.body, { childList: true, subtree: true })
     }
@@ -40,7 +40,13 @@ class FormCollection {
       throw new NotInitializedError()
     }
 
-    if(this.fetching) return
+    if (this.fetching) return
+
+    if (typeof document === 'undefined' || !('querySelectorAll' in document)) {
+      return console.warn(
+        'Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.',
+      )
+    }
 
     const formsIdsToFetch = this.#formIdsToFetch
     if (formsIdsToFetch.length === 0) return
@@ -60,7 +66,7 @@ class FormCollection {
     await Promise.all(promises)
       .then(forms => forms.forEach(this.add))
       .then(() => Hellotext.eventEmitter.dispatch('forms:collected', this))
-      .then(() => this.fetching = false)
+      .then(() => (this.fetching = false))
 
     if (Configuration.forms.autoMount) {
       this.forms.forEach(form => form.mount())

package/src/models/session.js

@@ -1,5 +1,6 @@
-import {Configuration} from '../core';
-import {Cookies, Query} from './index'
+import { Configuration } from '../core'
+import { Cookies } from './cookies'
+import { Query } from './query'
 
 class Session {
   static #session
@@ -29,4 +30,4 @@ class Session {
   }
 }
 
-export {Session}
+export { Session }

package/styles/index.css

@@ -1,38 +1,30 @@
-.hidden {
-  display: none;
-}
-
 form[data-hello-form] {
   position: relative;
+}
 
-  & article {
-    & [data-error-container] {
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      display: none;
-    }
+form[data-hello-form] article [data-error-container] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: none;
+}
 
-    &:has(input:invalid) {
-      & [data-error-container] {
-        display: block;
-      }
-    }
-  }
+form[data-hello-form] article:has(input:invalid) [data-error-container] {
+  display: block;
+}
 
-  & [data-logo-container] {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
+form[data-hello-form] [data-logo-container] {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+}
 
-    & small {
-      margin: 0 0.3rem;
-    }
+form[data-hello-form] [data-logo-container] small {
+  margin: 0 0.3rem;
+}
 
-    & [data-hello-brand] {
-      width: 4rem;
-    }
-  }
+form[data-hello-form] [data-logo-container] [data-hello-brand] {
+  width: 4rem;
 }

package/.babelrc

@@ -1,24 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "esmodules": true
-        }
-      }
-    ]
-  ],
-  "plugins": [
-    [
-      "@babel/plugin-proposal-private-methods",
-      {
-        "loose": true
-      }
-    ],
-    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }],
-    "@babel/plugin-transform-classes",
-    "@babel/plugin-proposal-export-default-from"
-  ]
-}

package/.github/workflows/ci.yml

@@ -1,24 +0,0 @@
-name: Tests
-
-on:
-  pull_request:
-    branches:
-      - '*'
-  push:
-    branches:
-      - main
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: ['20', '22']
-    name: Node ${{ matrix.node }}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node }}
-      - run: npm install
-      - run: npm run test

package/.prettierignore

@@ -1,3 +0,0 @@
-__tests__
-dist
-lib