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

Collect customer feedback with the Mopinion survey library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = Message;
var _preact = require("preact");
var _hooks = require("preact/hooks");
var _elements = require("../../elements");
var _constants = require("../../../constants");
var _utils = require("../../../utils");
var _hooks2 = require("../../../hooks");
var _form = require("../../form");
var _Wrap = _interopRequireDefault(require("./Wrap"));
var _Bubble = _interopRequireDefault(require("./Bubble"));
var _Answer = _interopRequireDefault(require("./Answer"));
var _BlockInput = _interopRequireDefault(require("./BlockInput"));
var _Typing = _interopRequireDefault(require("./Typing"));
var _Text = _interopRequireDefault(require("./Text"));
var _Icon = _interopRequireDefault(require("./Icon"));
var _RestartButton = _interopRequireDefault(require("./RestartButton"));
var _Delay = _interopRequireDefault(require("./Delay"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function Message(_ref) {
  var _properties$typingTim, _prevBlock$block, _block$properties, _block$properties2;
  var blockId = _ref.blockId,
    prevBlockId = _ref.prevBlockId,
    setScrollPosition = _ref.setScrollPosition,
    elementIndex = _ref.elementIndex;
  var _useFormStore = (0, _form.useFormStore)(),
    formType = _useFormStore.formType,
    formOpen = _useFormStore.formOpen,
    lastKeyPressed = _useFormStore.lastKeyPressed,
    conversationalDummyFocusBlockRef = _useFormStore.conversationalDummyFocusBlockRef,
    conversationalFocusStateValue = _useFormStore.conversationalFocusStateValue;
  var _useConfigStore = (0, _form.useConfigStore)(),
    properties = _useConfigStore.properties,
    text = _useConfigStore.text;
  var _useBlock = (0, _form.useBlock)({
      id: blockId
    }),
    block = _useBlock.block,
    state = _useBlock.state,
    actions = _useBlock.actions,
    errorMessage = _useBlock.errorMessage;
  var prevBlock = (0, _form.useBlock)({
    id: prevBlockId
  });
  var _useState = (0, _hooks.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    doneTyping = _useState2[0],
    setDoneTyping = _useState2[1];
  var _useState3 = (0, _hooks.useState)(false),
    _useState4 = _slicedToArray(_useState3, 2),
    bubbleDidShow = _useState4[0],
    setBubbleDidShow = _useState4[1];
  var typingDelay = Number((_properties$typingTim = properties.typingTimeout) !== null && _properties$typingTim !== void 0 ? _properties$typingTim : _constants.typingTimeout);
  var restartRef = (0, _hooks.useRef)(null);
  (0, _hooks2.useTimeout)(function () {
    setDoneTyping(true);
  }, formOpen || formType === 'embed' ? typingDelay : null);
  (0, _hooks.useEffect)(function () {
    setScrollPosition();
  }, [bubbleDidShow, setScrollPosition]);
  var avatar = properties.avatar;
  var BubbleProps = {
    align: 'left',
    blockType: block.typeName,
    prevBlockType: prevBlock === null || prevBlock === void 0 || (_prevBlock$block = prevBlock.block) === null || _prevBlock$block === void 0 ? void 0 : _prevBlock$block.typeName,
    avatar: avatar,
    id: block.id,
    name: text === null || text === void 0 ? void 0 : text.botName,
    block: block
  };
  var hasSetValue = _constants.textInputBlocks.indexOf(block.typeName) > -1 ? state.value && state.inputSet : state.value || state.screenshotSet;
  var showAnswer = doneTyping && state.isSkipped || doneTyping && hasSetValue && !state.showError && !state.isLoading;
  return (0, _preact.h)("div", {
    className: (0, _utils.makeClassName)('chat-container', !doneTyping && 'is-typing', _constants.noInputBlocks.indexOf(block.typeName) > -1 && 'non-interactive-element')
  }, (0, _preact.h)(_Wrap["default"], {
    key: block.id,
    className: (0, _utils.makeClassName)('bubble-wrap', "bubble-wrap-".concat(block.typeName), {
      className: "".concat(block.typeName !== 'rating' ? block.typeName : '', "-group"),
      prefix: false
    }, {
      className: "".concat(block.typeName, "-group-").concat(state.typeCount),
      prefix: false
    }),
    show: _constants.alwaysNotVisibleBlocks.indexOf(block.typeName) > -1 ? false : state.isVisible,
    id: "".concat(block.typeName, "-").concat(block.id)
  }, !doneTyping && (0, _preact.h)(_Bubble["default"], BubbleProps, (0, _preact.h)(_Typing["default"], null)), doneTyping && (0, _preact.h)(_Bubble["default"], _extends({}, BubbleProps, {
    outerContent: _constants.multimediaBlocks.indexOf(block.typeName) > -1 ? (0, _preact.h)(_elements.Multimedia, {
      block: block
    }) : null,
    onAnimationEnd: function onAnimationEnd() {
      return setBubbleDidShow(true);
    }
  }), block.typeName === 'icon' ? (0, _preact.h)(_Icon["default"], {
    icon: block === null || block === void 0 || (_block$properties = block.properties) === null || _block$properties === void 0 ? void 0 : _block$properties.icon
  }) : ['link', 'ending'].indexOf(block.typeName) > -1 ? (0, _preact.h)(_elements.Link, {
    block: block,
    conversational: true
  }) : block.typeName !== 'multimedia' || block.typeName === 'multimedia' && block.title ? (0, _preact.h)(_Text["default"], {
    block: block,
    text: block.title
  }) : null), doneTyping && block.typeName === 'ending' && ((_block$properties2 = block.properties) === null || _block$properties2 === void 0 ? void 0 : _block$properties2.show_restart) && (0, _preact.h)(_Delay["default"], {
    delay: 1000
  }, (0, _preact.h)(_RestartButton["default"], {
    ref: restartRef,
    block: block,
    onAnimationEnd: function onAnimationEnd() {
      setScrollPosition();
      (0, _utils.tryFocus)(restartRef.current);
    }
  })), showAnswer && (0, _preact.h)(_Bubble["default"], {
    align: "right"
  }, (0, _preact.h)(_Answer["default"], {
    value: state.value,
    state: state,
    block: block
  }))), doneTyping && bubbleDidShow && !showAnswer && _constants.noInputBlocks.indexOf(block.typeName) === -1 && (0, _preact.h)(_BlockInput["default"], {
    state: state,
    block: block,
    setValue: actions.setValue,
    setNestedValue: actions.setNestedValue,
    skipQuestion: actions.skipQuestion,
    text: text,
    errorMessage: errorMessage,
    elementIndex: elementIndex
  }), _constants.noInputBlocks.indexOf(block.typeName) === -1 && (0, _preact.h)("div", {
    id: "focus-dummy-".concat(block.id),
    ref: conversationalDummyFocusBlockRef,
    className: (0, _utils.makeClassName)('conversational-focus-dummy'),
    tabIndex: lastKeyPressed ? 0 : -1
  }, conversationalFocusStateValue));
}
//# sourceMappingURL=Message.js.map