@hellotext/hellotext 1.8.7 → 2.0.0

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,39 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "1.8.7",
+  "version": "2.0.0",
   "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",
   "author": "Hellotext",
   "license": "MIT",
   "homepage": "https://github.com/hellotext/hellotext.js",
+  "files": [
+    "lib",
+    "dist",
+    "src"
+  ],
   "exports": {
-    ".": "./lib/index.js",
-    "./vanilla": "./lib/vanilla.js"
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs",
+      "default": "./dist/hellotext.js"
+    },
+    "./vanilla": {
+      "import": "./lib/vanilla.js",
+      "require": "./lib/vanilla.cjs"
+    },
+    "./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 +62,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",
+    "build:cjs": "BABEL_ENV=cjs babel src -d lib --out-file-extension .cjs",
+    "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
@@ -47,7 +46,7 @@ class Hellotext {
     }
 
     const headers = {
-      ...(params && params.headers) || {},
+      ...((params && params.headers) || {}),
       ...this.headers,
     }
 

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/.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

package/.prettierrc.json

@@ -1,18 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "printWidth": 100,
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": false,
-  "overrides": [
-    {
-      "files": "*.json",
-      "options": {
-        "printWidth": 200
-      }
-    }
-  ]
-}

package/MIT-LICENSE

@@ -1,20 +0,0 @@
-Copyright (c) 2022 HelloText
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/__tests__/builders/input_builder_test.js

@@ -1,117 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import Hellotext from '../../src/hellotext'
-import { InputBuilder } from '../../src/builders/input_builder'
-
-describe('when the input is first_name', () => {
-  const data = {
-    label: 'First Name',
-    type: 'text',
-    required: true,
-    placeholder: 'Enter your first name',
-    kind: 'first_name',
-  }
-
-  it('builds an article element that contains a label and input elements', () => {
-    const article = InputBuilder.build(data)
-    const label = article.querySelector('label')
-    const input = article.querySelector('input')
-
-    expect(label.innerText).toEqual('First Name')
-    expect(label.getAttribute('for')).toEqual('first_name')
-
-    expect(input.id).toEqual('first_name')
-    expect(input.type).toEqual('text')
-    expect(input.required).toEqual(true)
-    expect(input.placeholder).toEqual('Enter your first name')
-    expect(input.name).toEqual('first_name')
-  })
-})
-
-describe('when the input is last_name', () => {
-  const data = {
-    label: 'Last Name',
-    type: 'text',
-    required: false,
-    placeholder: 'Enter your last name',
-    kind: 'last_name',
-  }
-
-  it('builds an article element that contains a label and input elements', () => {
-    const article = InputBuilder.build(data)
-    const label = article.querySelector('label')
-    const input = article.querySelector('input')
-
-    expect(label.innerText).toEqual('Last Name')
-    expect(label.getAttribute('for')).toEqual('last_name')
-
-    expect(input.id).toEqual('last_name')
-    expect(input.type).toEqual('text')
-    expect(input.required).toEqual(false)
-    expect(input.placeholder).toEqual('Enter your last name')
-    expect(input.name).toEqual('last_name')
-  })
-})
-
-describe('when the input belongs to a property', () => {
-  const data = {
-    label: 'Email',
-    type: 'email',
-    required: true,
-    placeholder: 'Enter your email',
-    kind: 'email',
-    property: 'xybz',
-  }
-
-  it('builds an article element that contains a label and input elements', () => {
-    const article = InputBuilder.build(data)
-    const label = article.querySelector('label')
-    const input = article.querySelector('input')
-
-    expect(label.innerText).toEqual('Email')
-    expect(label.getAttribute('for')).toEqual('email')
-
-    expect(input.id).toEqual('email')
-    expect(input.type).toEqual('email')
-    expect(input.required).toEqual(true)
-    expect(input.placeholder).toEqual('Enter your email')
-    expect(input.name).toEqual('email')
-  })
-})
-
-describe('when the input is a phone number', () => {
-  const data = {
-    label: 'Phone',
-    type: 'tel',
-    required: true,
-    placeholder: 'Enter your phone number',
-    kind: 'phone',
-  }
-
-  beforeEach(() => {
-    Hellotext.business = {
-      country: {
-        prefix: '598',
-        code: 'UY',
-      }
-    }
-  })
-
-  it('builds an article element that contains a label and input elements', () => {
-    const article = InputBuilder.build(data)
-    const label = article.querySelector('label')
-    const input = article.querySelector('input')
-
-    expect(label.innerText).toEqual('Phone')
-    expect(label.getAttribute('for')).toEqual('phone')
-
-    expect(input.id).toEqual('phone')
-    expect(input.type).toEqual('tel')
-    expect(input.required).toEqual(true)
-    expect(input.placeholder).toEqual('Enter your phone number')
-    expect(input.name).toEqual('phone')
-    expect(input.value).toEqual('+598')
-  })
-})

package/__tests__/core/configuration/forms_test.js

@@ -1,30 +0,0 @@
-import { Forms } from '../../../src/core/configuration/forms'
-
-describe('Forms', () => {
-  describe('.autoMount', () => {
-    it('is true by default', () => {
-      expect(Forms.autoMount).toEqual(true)
-    })
-
-    it('can be set to false', () => {
-      Forms.autoMount = false
-      expect(Forms.autoMount).toEqual(false)
-    })
-  })
-
-  describe('.successMessage', () => {
-    it('is true by default', () => {
-      expect(Forms.successMessage).toEqual(true)
-    })
-
-    it('can be set to false', () => {
-      Forms.successMessage = false
-      expect(Forms.successMessage).toEqual(false)
-    })
-
-    it('can be set to a string', () => {
-      Forms.successMessage = 'Thank you for your submission'
-      expect(Forms.successMessage).toEqual('Thank you for your submission')
-    })
-  })
-})