@mopinion/survey/features/conversational/components/Bubble.js

Collect customer feedback with the Mopinion survey library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Bubble;
var _preact = require("preact");
var _form = require("../../form");
var _constants = require("../../../constants");
var _utils = require("../../../utils");
var _excluded = ["img"];
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function Avatar(_ref) {
  var img = _ref.img,
    props = _objectWithoutProperties(_ref, _excluded);
  return (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('bubble-avatar'),
    style: img ? {
      backgroundImage: "url(".concat(img, ")")
    } : {}
  }, !img ? (0, _preact.h)(_form.SvgIcon, {
    icon: "conversational_avatar",
    alt: "chatbot"
  }) : null);
}
function Bubble(_ref2) {
  var children = _ref2.children,
    name = _ref2.name,
    align = _ref2.align,
    blockType = _ref2.blockType,
    prevBlockType = _ref2.prevBlockType,
    avatar = _ref2.avatar,
    outerContent = _ref2.outerContent,
    typing = _ref2.typing,
    id = _ref2.id,
    _ref2$onAnimationEnd = _ref2.onAnimationEnd,
    onAnimationEnd = _ref2$onAnimationEnd === void 0 ? function () {} : _ref2$onAnimationEnd;
  return (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('bubble-container', align === 'left' ? 'align-bubble-content-left' : 'align-bubble-content-right', typing && 'is-typing', 'has-avatar')
  }, (0, _preact.h)("div", null, align === 'left' && (0, _preact.h)(Avatar, {
    img: avatar
  }), align === 'left' && (!prevBlockType || _constants.noInputBlocks.indexOf(prevBlockType) === -1) && (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('name-wrap')
  }, (0, _preact.h)("h5", {
    className: (0, _utils.makeClassName)('bubble-user-name')
  }, name)), (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('bubble', "bubble-".concat(blockType), align === 'left' ? 'bubble-left' : 'bubble-right'),
    onAnimationEnd: onAnimationEnd
  }, outerContent, (0, _preact.toChildArray)(children).length > 0 && (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('bubble-inner')
  }, children))));
}
//# sourceMappingURL=Bubble.js.map