webchat_controller.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _stimulus = require("@hotwired/stimulus");
var _dom = require("@floating-ui/dom");
var _messages = _interopRequireDefault(require("../api/web_chat/messages"));
var _web_chat_channel = _interopRequireDefault(require("../channels/web_chat_channel"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var _default = /*#__PURE__*/function (_Controller) {
  _inherits(_default, _Controller);
  var _super = _createSuper(_default);
  function _default() {
    _classCallCheck(this, _default);
    return _super.apply(this, arguments);
  }
  _createClass(_default, [{
    key: "initialize",
    value: function initialize() {
      this.messagesAPI = new _messages.default(this.idValue);
      this.webChatChannel = new _web_chat_channel.default(this.idValue, Hellotext.session);
      this.files = [];
      this.socket = new WebSocket('ws://localhost:3000/cable');
      _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
    }
  }, {
    key: "connect",
    value: function connect() {
      this.floatingUICleanup = (0, _dom.autoUpdate)(this.triggerTarget, this.popoverTarget, () => {
        (0, _dom.computePosition)(this.triggerTarget, this.popoverTarget, {
          placement: this.placementValue,
          middleware: this.middlewares
        }).then(_ref => {
          var {
            x,
            y
          } = _ref;
          var newStyle = {
            left: "".concat(x, "px"),
            top: "".concat(y, "px")
          };
          Object.assign(this.popoverTarget.style, newStyle);
        });
      });
      var params = {
        channel: "WebChatChannel",
        id: this.idValue,
        session: Hellotext.session
      };
      this.webChatChannel.onMessage(message => {
        var {
          body,
          attachments
        } = message;
        var div = document.createElement('div');
        div.innerHTML = body;
        var element = this.messageTemplateTarget.cloneNode(true);
        element.style.display = 'flex';
        element.querySelector('[data-body]').innerHTML = div.innerHTML;
        if (attachments) {
          attachments.forEach(attachmentUrl => {
            var image = this.attachmentImageTarget.cloneNode(true);
            image.src = attachmentUrl;
            image.style.display = 'block';
            element.querySelector('[data-attachment-container]').appendChild(image);
          });
        }
        this.messagesContainerTarget.appendChild(element);
      });
      this.webChatChannel.onConversationAssignment(conversation => {
        var {
          to: user
        } = conversation;
        this.titleTarget.innerText = user.name;
        if (user.online) {
          this.onlineStatusTarget.style.display = 'flex';
        } else {
          this.onlineStatusTarget.style.display = 'none';
        }
      });
      _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
    }
  }, {
    key: "disconnect",
    value: function disconnect() {
      this.floatingUICleanup();
      _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
    }
  }, {
    key: "show",
    value: function show() {
      this.openValue = true;
    }
  }, {
    key: "hide",
    value: function hide() {
      this.openValue = false;
    }
  }, {
    key: "toggle",
    value: function toggle() {
      this.openValue = !this.openValue;
    }
  }, {
    key: "onClickOutside",
    value: function onClickOutside(event) {
      if (event.target.nodeType && this.element.contains(event.target) === false) {
        this.openValue = false;
        setTimeout(() => this.dispatch("aborted"), 400);
      }
    }
  }, {
    key: "openValueChanged",
    value: function openValueChanged() {
      if (this.disabledValue) return;
      this.dispatch("toggle", {
        detail: this.openValue
      });
      if (this.openValue) {
        this.popoverTarget.showPopover();
        this.popoverTarget.setAttribute("aria-expanded", "true");
        this.dispatch("opened");
        this.inputTarget.focus();
        if (!this.scrolled) {
          this.messagesContainerTarget.scroll({
            top: this.messagesContainerTarget.scrollHeight,
            behavior: 'instant'
          });
          this.scrolled = true;
        }
      } else {
        this.popoverTarget.hidePopover();
        this.popoverTarget.removeAttribute("aria-expanded");
        this.dispatch("hidden");
        this.inputTarget.value = "";
      }
    }
  }, {
    key: "sendMessage",
    value: function () {
      var _sendMessage = _asyncToGenerator(function* () {
        var formData = new FormData();
        formData.append('message[body]', this.inputTarget.value);
        this.files.forEach(file => {
          formData.append('message[attachments][]', file);
        });
        formData.append('session', Hellotext.session);
        var response = yield this.messagesAPI.create(formData);
        if (response.succeeded) {
          var element = this.messageTemplateTarget.cloneNode(true);
          element.classList.add('received');
          element.style.removeProperty('display');
          element.setAttribute('data-hellotext--webchat-target', 'message');
          element.querySelector('[data-body]').innerText = this.inputTarget.value;
          var attachments = this.attachmentContainerTarget.querySelectorAll('img');
          if (attachments.length > 0) {
            attachments.forEach(attachment => {
              element.querySelector('[data-attachment-container]').appendChild(attachment);
            });
          }
          this.messagesContainerTarget.appendChild(element);
          this.inputTarget.value = "";
          this.files = [];
          this.attachmentContainerTarget.innerHTML = "";
          this.attachmentContainerTarget.classList.add("hidden");
          this.inputTarget.focus();
        }
      });
      function sendMessage() {
        return _sendMessage.apply(this, arguments);
      }
      return sendMessage;
    }()
  }, {
    key: "openAttachment",
    value: function openAttachment() {
      this.attachmentInputTarget.click();
    }
  }, {
    key: "onFileInputChange",
    value: function onFileInputChange() {
      this.errorMessageContainerTarget.classList.add('hidden');
      this.files = Array.from(this.attachmentInputTarget.files);
      var fileMaxSizeTooMuch = this.files.find(file => {
        var type = file.type.split("/")[0];
        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) {
        var type = fileMaxSizeTooMuch.type.split("/")[0];
        var mediaType = ['image', 'audio', 'video'].includes(type) ? type : 'document';
        this.errorMessageContainerTarget.innerText = this.fileSizeErrorMessageValue.replace('%{limit}', this.byteToMegabyte(this.mediaValue[mediaType].max_size));
        return;
      }
      this.errorMessageContainerTarget.innerText = "";
      this.files.forEach(file => this.createAttachmentElement(file));
      this.inputTarget.focus();
    }
  }, {
    key: "createAttachmentElement",
    value: function createAttachmentElement(file) {
      var element = this.attachmentElement();
      this.attachmentContainerTarget.classList.remove('hidden');
      element.setAttribute('data-name', file.name);
      if (file.type.startsWith("image/")) {
        var thumbnail = this.attachmentImageTarget.cloneNode(true);
        thumbnail.src = URL.createObjectURL(file);
        thumbnail.style.display = 'block';
        element.appendChild(thumbnail);
        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;
      }
    }
  }, {
    key: "removeAttachment",
    value: function removeAttachment(_ref2) {
      var {
        currentTarget
      } = _ref2;
      var attachment = currentTarget.closest("[data-hellotext--webchat-target='attachment']");
      this.files = this.files.filter(file => file.name !== attachment.dataset.name);
      attachment.remove();
      this.inputTarget.focus();
    }
  }, {
    key: "attachmentTargetDisconnected",
    value: function attachmentTargetDisconnected() {
      if (this.attachmentTargets.length === 0) {
        this.attachmentContainerTarget.innerHTML = "";
        this.attachmentContainerTarget.style.display = 'none';
      }
    }
  }, {
    key: "attachmentElement",
    value: function attachmentElement() {
      var element = this.attachmentTemplateTarget.cloneNode(true);
      element.removeAttribute("hidden");
      element.style.display = 'flex';
      element.setAttribute("data-hellotext--webchat-target", "attachment");
      return element;
    }
  }, {
    key: "byteToMegabyte",
    value: function byteToMegabyte(bytes) {
      return Math.ceil(bytes / 1024 / 1024);
    }
  }, {
    key: "middlewares",
    get: function get() {
      return [(0, _dom.offset)(5), (0, _dom.shift)({
        padding: 24
      }), (0, _dom.flip)()];
    }
  }]);
  return _default;
}(_stimulus.Controller);
exports.default = _default;
_default.values = {
  id: String,
  conversationId: String,
  media: Object,
  fileSizeErrorMessage: String,
  placement: {
    type: String,
    default: "bottom-end"
  },
  open: {
    type: Boolean,
    default: false
  },
  autoPlacement: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
};
_default.targets = ['trigger', 'popover', 'input', 'attachmentInput', 'attachmentButton', 'errorMessageContainer', 'attachmentTemplate', 'attachmentContainer', 'attachment', 'messageTemplate', 'messagesContainer', 'title', 'onlineStatus', 'attachmentImage'];