@botonic/react 0.21.5 → 0.21.7-alpha.0

package/lib/components/message.js

@@ -1,351 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Message = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@botonic/core");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Fade = _interopRequireDefault(require("react-reveal/Fade"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _uuid = require("uuid");
-
-var _constants = require("../constants");
-
-var _contexts = require("../contexts");
-
-var _environment = require("../util/environment");
-
-var _react2 = require("../util/react");
-
-var _button = require("./button");
-
-var _buttonsDisabler = require("./buttons-disabler");
-
-var _markdown = require("./markdown");
-
-var _reply = require("./reply");
-
-var _timestamps = require("./timestamps");
-
-var _excluded = ["type", "blob", "from", "delay", "typing", "children", "enabletimestamps", "json", "style", "imagestyle"],
-    _excluded2 = ["blob", "json"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var MessageContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: ", ";\n  position: relative;\n  padding: 0px 6px;\n"])), function (props) {
-  return props.isfromuser ? 'flex-end' : 'flex-start';
-});
-
-var BotMessageImageContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 28px;\n  padding: 12px 4px;\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-
-var Blob = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  margin: 8px;\n  border-radius: 8px;\n  background-color: ", ";\n  color: ", ";\n  max-width: ", ";\n"])), function (props) {
-  return props.bgcolor;
-}, function (props) {
-  return props.color;
-}, function (props) {
-  return props.blob ? props.blobwidth ? props.blobwidth : '60%' : 'calc(100% - 16px)';
-});
-
-var BlobText = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  ", "\n"])), function (props) {
-  return props.blob ? '8px 12px' : '0px';
-}, function (props) {
-  return props.markdownstyle;
-});
-
-var BlobTickContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  box-sizing: border-box;\n  height: 100%;\n  padding: 18px 0px 18px 0px;\n  display: flex;\n  top: 0;\n  align-items: center;\n"])));
-
-var BlobTick = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  margin: -", "px 0px;\n  border: ", "px solid ", ";\n"])), function (props) {
-  return props.pointerSize;
-}, function (props) {
-  return props.pointerSize;
-}, _constants.COLORS.TRANSPARENT);
-
-var Message = function Message(props) {
-  var _useContext = (0, _react.useContext)(_contexts.RequestContext),
-      defaultTyping = _useContext.defaultTyping,
-      defaultDelay = _useContext.defaultDelay;
-
-  var _props$type = props.type,
-      type = _props$type === void 0 ? '' : _props$type,
-      _props$blob = props.blob,
-      blob = _props$blob === void 0 ? true : _props$blob,
-      _props$from = props.from,
-      from = _props$from === void 0 ? _constants.SENDERS.bot : _props$from,
-      _props$delay = props.delay,
-      delay = _props$delay === void 0 ? defaultDelay : _props$delay,
-      _props$typing = props.typing,
-      typing = _props$typing === void 0 ? defaultTyping : _props$typing,
-      children = props.children,
-      _props$enabletimestam = props.enabletimestamps,
-      enabletimestamps = _props$enabletimestam === void 0 ? props.enabletimestamps || props.enableTimestamps : _props$enabletimestam,
-      json = props.json,
-      style = props.style,
-      _props$imagestyle = props.imagestyle,
-      imagestyle = _props$imagestyle === void 0 ? props.imagestyle || props.imageStyle : _props$imagestyle,
-      otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var isFromUser = from === _constants.SENDERS.user;
-  var isFromBot = from === _constants.SENDERS.bot;
-  var markdown = props.markdown;
-
-  var _useContext2 = (0, _react.useContext)(_contexts.WebchatContext),
-      webchatState = _useContext2.webchatState,
-      addMessage = _useContext2.addMessage,
-      updateReplies = _useContext2.updateReplies,
-      getThemeProperty = _useContext2.getThemeProperty;
-
-  var _useState = (0, _react.useState)({
-    id: props.id || (0, _uuid.v4)()
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      disabled = _useState4[0],
-      setDisabled = _useState4[1];
-
-  children = _buttonsDisabler.ButtonsDisabler.updateChildrenButtons(children, {
-    parentId: state.id,
-    disabled: disabled,
-    setDisabled: setDisabled
-  });
-
-  var replies = _react["default"].Children.toArray(children).filter(function (e) {
-    return e.type === _reply.Reply;
-  });
-
-  var buttons = _react["default"].Children.toArray(children).filter(function (e) {
-    return e.type === _button.Button;
-  });
-
-  var textChildren = _react["default"].Children.toArray(children).filter(function (e) {
-    return ![_button.Button, _reply.Reply].includes(e.type);
-  });
-
-  if (isFromUser) textChildren = textChildren.map(function (e) {
-    return typeof e === 'string' ? (0, _markdown.renderLinks)(e) : e;
-  });
-
-  var _resolveMessageTimest = (0, _timestamps.resolveMessageTimestamps)(getThemeProperty, enabletimestamps),
-      timestampsEnabled = _resolveMessageTimest.timestampsEnabled,
-      getFormattedTimestamp = _resolveMessageTimest.getFormattedTimestamp,
-      timestampStyle = _resolveMessageTimest.timestampStyle;
-
-  var getEnvAck = function getEnvAck() {
-    if (_environment.isDev) return 1;
-    if (!isFromUser) return 1;
-    if (props.ack !== undefined) return props.ack;
-    return 0;
-  };
-
-  var ack = getEnvAck();
-
-  if ((0, _core.isBrowser)()) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useEffect)(function () {
-      var decomposedChildren = json;
-      var message = {
-        id: state.id,
-        type: type,
-        data: decomposedChildren ? decomposedChildren : textChildren,
-        timestamp: props.timestamp || getFormattedTimestamp,
-        markdown: markdown,
-        from: from,
-        buttons: buttons.map(function (b) {
-          return _objectSpread({
-            parentId: b.props.parentId,
-            payload: b.props.payload,
-            path: b.props.path,
-            url: b.props.url,
-            target: b.props.target,
-            webview: b.props.webview && String(b.props.webview),
-            title: b.props.children
-          }, _buttonsDisabler.ButtonsDisabler.withDisabledProps(b.props));
-        }),
-        delay: delay,
-        typing: typing,
-        replies: replies.map(function (r) {
-          return {
-            payload: r.props.payload,
-            path: r.props.path,
-            url: r.props.url,
-            text: r.props.children
-          };
-        }),
-        display: delay + typing == 0,
-        customTypeName: decomposedChildren.customTypeName,
-        ack: ack
-      };
-      addMessage(message);
-    }, []); // eslint-disable-next-line react-hooks/rules-of-hooks
-
-    (0, _react.useEffect)(function () {
-      var msg = webchatState.messagesJSON.find(function (m) {
-        return m.id === state.id;
-      });
-
-      if (msg && msg.display && webchatState.messagesJSON.filter(function (m) {
-        return !m.display;
-      }).length == 0) {
-        updateReplies(replies);
-      }
-    }, [webchatState.messagesJSON]);
-  }
-
-  var brandColor = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandColor, _constants.COLORS.BOTONIC_BLUE);
-
-  var getBgColor = function getBgColor() {
-    if (!blob) return _constants.COLORS.TRANSPARENT;
-
-    if (isFromUser) {
-      return getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground, brandColor);
-    }
-
-    return getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground, _constants.COLORS.SEASHELL_WHITE);
-  };
-
-  var getMessageStyle = function getMessageStyle() {
-    return isFromBot ? getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle) : getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle);
-  };
-
-  var hasBlobTick = function hasBlobTick() {
-    return getThemeProperty("message.".concat(from, ".blobTick"), true);
-  };
-
-  var renderBrowser = function renderBrowser() {
-    var m = webchatState.messagesJSON.find(function (m) {
-      return m.id === state.id;
-    });
-    if (!m || !m.display) return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
-
-    var getBlobTick = function getBlobTick(pointerSize) {
-      // to add a border to the blobTick we need to create two triangles and overlap them
-      // that is why the color depends on the pointerSize
-      // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/
-      var color = pointerSize == 5 ? getBgColor() : getThemeProperty("message.".concat(from, ".style.borderColor"), _constants.COLORS.TRANSPARENT);
-
-      var containerStyle = _objectSpread({}, getThemeProperty("message.".concat(from, ".blobTickStyle")));
-
-      var blobTickStyle = {};
-
-      if (isFromUser) {
-        containerStyle.right = 0;
-        containerStyle.marginRight = -pointerSize;
-        blobTickStyle.borderRight = 0;
-        blobTickStyle.borderLeftColor = color;
-      } else {
-        containerStyle.left = 0;
-        containerStyle.marginLeft = -pointerSize;
-        blobTickStyle.borderLeft = 0;
-        blobTickStyle.borderRightColor = color;
-      }
-
-      return /*#__PURE__*/_react["default"].createElement(BlobTickContainer, {
-        style: containerStyle
-      }, /*#__PURE__*/_react["default"].createElement(BlobTick, {
-        pointerSize: pointerSize,
-        style: blobTickStyle
-      }));
-    };
-
-    var BotMessageImage = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.botMessageImage, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandImage, _constants.WEBCHAT.DEFAULTS.LOGO));
-    var animationsEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
-
-    var resolveCustomTypeName = function resolveCustomTypeName() {
-      return isFromBot && type === _core.INPUT.CUSTOM ? " ".concat(m.customTypeName) : '';
-    };
-
-    var className = "".concat(type, "-").concat(from).concat(resolveCustomTypeName());
-    return /*#__PURE__*/_react["default"].createElement(_react2.ConditionalWrapper, {
-      condition: animationsEnabled,
-      wrapper: function wrapper(children) {
-        return /*#__PURE__*/_react["default"].createElement(_Fade["default"], null, children);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(MessageContainer, {
-      isfromuser: isFromUser,
-      style: _objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.messageStyle))
-    }, isFromBot && BotMessageImage && /*#__PURE__*/_react["default"].createElement(BotMessageImageContainer, {
-      style: _objectSpread(_objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle)), imagestyle)
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      style: {
-        width: '100%'
-      },
-      src: (0, _environment.resolveImage)(BotMessageImage)
-    })), /*#__PURE__*/_react["default"].createElement(Blob, (0, _extends2["default"])({
-      className: className,
-      bgcolor: getBgColor(),
-      color: isFromUser ? _constants.COLORS.SOLID_WHITE : _constants.COLORS.SOLID_BLACK,
-      blobwidth: getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth),
-      blob: blob,
-      style: _objectSpread(_objectSpread(_objectSpread({}, getMessageStyle()), style), {
-        opacity: ack === 0 ? 0.6 : 1
-      })
-    }, otherProps), markdown ? /*#__PURE__*/_react["default"].createElement(BlobText, {
-      blob: blob,
-      dangerouslySetInnerHTML: {
-        __html: (0, _markdown.renderMarkdown)(textChildren)
-      },
-      markdownstyle: (0, _markdown.getMarkdownStyle)(getThemeProperty, isFromUser ? _constants.COLORS.SEASHELL_WHITE : brandColor)
-    }) : /*#__PURE__*/_react["default"].createElement(BlobText, {
-      blob: blob
-    }, textChildren), !!buttons.length && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "message-buttons-container"
-    }, buttons), Boolean(blob) && hasBlobTick() && getBlobTick(6), Boolean(blob) && hasBlobTick() && getBlobTick(5))), timestampsEnabled && /*#__PURE__*/_react["default"].createElement(_timestamps.MessageTimestamp, {
-      timestamp: m.timestamp,
-      style: timestampStyle,
-      isfromuser: isFromUser
-    })));
-  };
-
-  var _blob = props.blob,
-      _json = props.json,
-      nodeProps = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-
-  var renderNode = function renderNode() {
-    return type === _core.INPUT.CUSTOM ? /*#__PURE__*/_react["default"].createElement("message", (0, _extends2["default"])({
-      json: JSON.stringify(_json),
-      typing: typing,
-      delay: delay
-    }, nodeProps)) : /*#__PURE__*/_react["default"].createElement("message", (0, _extends2["default"])({
-      typing: typing,
-      delay: delay
-    }, nodeProps), children);
-  };
-
-  return (0, _react2.renderComponent)({
-    renderBrowser: renderBrowser,
-    renderNode: renderNode
-  });
-};
-
-exports.Message = Message;
-//# sourceMappingURL=message.js.map

package/lib/components/message.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/message.jsx"],"names":["MessageContainer","styled","div","props","isfromuser","BotMessageImageContainer","Blob","bgcolor","color","blob","blobwidth","BlobText","markdownstyle","BlobTickContainer","BlobTick","pointerSize","COLORS","TRANSPARENT","Message","RequestContext","defaultTyping","defaultDelay","type","from","SENDERS","bot","delay","typing","children","enabletimestamps","enableTimestamps","json","style","imagestyle","imageStyle","otherProps","isFromUser","user","isFromBot","markdown","WebchatContext","webchatState","addMessage","updateReplies","getThemeProperty","id","state","setState","disabled","setDisabled","ButtonsDisabler","updateChildrenButtons","parentId","replies","React","Children","toArray","filter","e","Reply","buttons","Button","textChildren","includes","map","timestampsEnabled","getFormattedTimestamp","timestampStyle","getEnvAck","isDev","ack","undefined","decomposedChildren","message","data","timestamp","b","payload","path","url","target","webview","String","title","withDisabledProps","r","text","display","customTypeName","msg","messagesJSON","find","m","length","brandColor","WEBCHAT","CUSTOM_PROPERTIES","BOTONIC_BLUE","getBgColor","userMessageBackground","botMessageBackground","SEASHELL_WHITE","getMessageStyle","botMessageStyle","userMessageStyle","hasBlobTick","renderBrowser","getBlobTick","containerStyle","blobTickStyle","right","marginRight","borderRight","borderLeftColor","left","marginLeft","borderLeft","borderRightColor","BotMessageImage","botMessageImage","brandImage","DEFAULTS","LOGO","animationsEnabled","enableAnimations","resolveCustomTypeName","INPUT","CUSTOM","className","messageStyle","botMessageImageStyle","width","SOLID_WHITE","SOLID_BLACK","botMessageBlobWidth","opacity","__html","Boolean","_blob","_json","nodeProps","renderNode","JSON","stringify"],"mappings":"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","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useEffect, useState } from 'react'\nimport Fade from 'react-reveal/Fade'\nimport styled from 'styled-components'\nimport { v4 as uuidv4 } from 'uuid'\n\nimport { COLORS, SENDERS, WEBCHAT } from '../constants'\nimport { RequestContext, WebchatContext } from '../contexts'\nimport { isDev, resolveImage } from '../util/environment'\nimport { ConditionalWrapper, renderComponent } from '../util/react'\nimport { Button } from './button'\nimport { ButtonsDisabler } from './buttons-disabler'\nimport { getMarkdownStyle, renderLinks, renderMarkdown } from './markdown'\nimport { Reply } from './reply'\nimport { MessageTimestamp, resolveMessageTimestamps } from './timestamps'\n\nconst MessageContainer = styled.div`\n  display: flex;\n  justify-content: ${props => (props.isfromuser ? 'flex-end' : 'flex-start')};\n  position: relative;\n  padding: 0px 6px;\n`\n\nconst BotMessageImageContainer = styled.div`\n  width: 28px;\n  padding: 12px 4px;\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Blob = styled.div`\n  position: relative;\n  margin: 8px;\n  border-radius: 8px;\n  background-color: ${props => props.bgcolor};\n  color: ${props => props.color};\n  max-width: ${props =>\n    props.blob\n      ? props.blobwidth\n        ? props.blobwidth\n        : '60%'\n      : 'calc(100% - 16px)'};\n`\n\nconst BlobText = styled.div`\n  padding: ${props => (props.blob ? '8px 12px' : '0px')};\n  display: flex;\n  flex-direction: column;\n  white-space: pre-line;\n  ${props => props.markdownstyle}\n`\n\nconst BlobTickContainer = styled.div`\n  position: absolute;\n  box-sizing: border-box;\n  height: 100%;\n  padding: 18px 0px 18px 0px;\n  display: flex;\n  top: 0;\n  align-items: center;\n`\nconst BlobTick = styled.div`\n  position: relative;\n  margin: -${props => props.pointerSize}px 0px;\n  border: ${props => props.pointerSize}px solid ${COLORS.TRANSPARENT};\n`\n\nexport const Message = props => {\n  const { defaultTyping, defaultDelay } = useContext(RequestContext)\n  let {\n    type = '',\n    blob = true,\n    from = SENDERS.bot,\n    delay = defaultDelay,\n    typing = defaultTyping,\n    children,\n    enabletimestamps = props.enabletimestamps || props.enableTimestamps,\n    json,\n    style,\n    imagestyle = props.imagestyle || props.imageStyle,\n    ...otherProps\n  } = props\n  const isFromUser = from === SENDERS.user\n  const isFromBot = from === SENDERS.bot\n  const markdown = props.markdown\n  const {\n    webchatState,\n    addMessage,\n    updateReplies,\n    getThemeProperty,\n  } = useContext(WebchatContext)\n  const [state, setState] = useState({\n    id: props.id || uuidv4(),\n  })\n\n  const [disabled, setDisabled] = useState(false)\n  children = ButtonsDisabler.updateChildrenButtons(children, {\n    parentId: state.id,\n    disabled,\n    setDisabled,\n  })\n  const replies = React.Children.toArray(children).filter(e => e.type === Reply)\n  const buttons = React.Children.toArray(children).filter(\n    e => e.type === Button\n  )\n\n  let textChildren = React.Children.toArray(children).filter(\n    e => ![Button, Reply].includes(e.type)\n  )\n  if (isFromUser)\n    textChildren = textChildren.map(e =>\n      typeof e === 'string' ? renderLinks(e) : e\n    )\n\n  const {\n    timestampsEnabled,\n    getFormattedTimestamp,\n    timestampStyle,\n  } = resolveMessageTimestamps(getThemeProperty, enabletimestamps)\n\n  const getEnvAck = () => {\n    if (isDev) return 1\n    if (!isFromUser) return 1\n    if (props.ack !== undefined) return props.ack\n    return 0\n  }\n\n  const ack = getEnvAck()\n\n  if (isBrowser()) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const decomposedChildren = json\n      const message = {\n        id: state.id,\n        type,\n        data: decomposedChildren ? decomposedChildren : textChildren,\n        timestamp: props.timestamp || getFormattedTimestamp,\n        markdown,\n        from,\n        buttons: buttons.map(b => ({\n          parentId: b.props.parentId,\n          payload: b.props.payload,\n          path: b.props.path,\n          url: b.props.url,\n          target: b.props.target,\n          webview: b.props.webview && String(b.props.webview),\n          title: b.props.children,\n          ...ButtonsDisabler.withDisabledProps(b.props),\n        })),\n        delay,\n        typing,\n        replies: replies.map(r => ({\n          payload: r.props.payload,\n          path: r.props.path,\n          url: r.props.url,\n          text: r.props.children,\n        })),\n        display: delay + typing == 0,\n        customTypeName: decomposedChildren.customTypeName,\n        ack: ack,\n      }\n      addMessage(message)\n    }, [])\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      const msg = webchatState.messagesJSON.find(m => m.id === state.id)\n      if (\n        msg &&\n        msg.display &&\n        webchatState.messagesJSON.filter(m => !m.display).length == 0\n      ) {\n        updateReplies(replies)\n      }\n    }, [webchatState.messagesJSON])\n  }\n\n  const brandColor = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.brandColor,\n    COLORS.BOTONIC_BLUE\n  )\n\n  const getBgColor = () => {\n    if (!blob) return COLORS.TRANSPARENT\n    if (isFromUser) {\n      return getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground,\n        brandColor\n      )\n    }\n    return getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground,\n      COLORS.SEASHELL_WHITE\n    )\n  }\n\n  const getMessageStyle = () =>\n    isFromBot\n      ? getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)\n      : getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle)\n\n  const hasBlobTick = () => getThemeProperty(`message.${from}.blobTick`, true)\n\n  const renderBrowser = () => {\n    const m = webchatState.messagesJSON.find(m => m.id === state.id)\n    if (!m || !m.display) return <></>\n\n    const getBlobTick = pointerSize => {\n      // to add a border to the blobTick we need to create two triangles and overlap them\n      // that is why the color depends on the pointerSize\n      // https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/\n      const color =\n        pointerSize == 5\n          ? getBgColor()\n          : getThemeProperty(\n              `message.${from}.style.borderColor`,\n              COLORS.TRANSPARENT\n            )\n      const containerStyle = {\n        ...getThemeProperty(`message.${from}.blobTickStyle`),\n      }\n      const blobTickStyle = {}\n      if (isFromUser) {\n        containerStyle.right = 0\n        containerStyle.marginRight = -pointerSize\n        blobTickStyle.borderRight = 0\n        blobTickStyle.borderLeftColor = color\n      } else {\n        containerStyle.left = 0\n        containerStyle.marginLeft = -pointerSize\n        blobTickStyle.borderLeft = 0\n        blobTickStyle.borderRightColor = color\n      }\n      return (\n        <BlobTickContainer style={containerStyle}>\n          <BlobTick pointerSize={pointerSize} style={blobTickStyle} />\n        </BlobTickContainer>\n      )\n    }\n\n    const BotMessageImage = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.botMessageImage,\n      getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.brandImage,\n        WEBCHAT.DEFAULTS.LOGO\n      )\n    )\n    const animationsEnabled = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,\n      true\n    )\n\n    const resolveCustomTypeName = () =>\n      isFromBot && type === INPUT.CUSTOM ? ` ${m.customTypeName}` : ''\n\n    const className = `${type}-${from}${resolveCustomTypeName()}`\n    return (\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => <Fade>{children}</Fade>}\n      >\n        <>\n          <MessageContainer\n            isfromuser={isFromUser}\n            style={{\n              ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.messageStyle),\n            }}\n          >\n            {isFromBot && BotMessageImage && (\n              <BotMessageImageContainer\n                style={{\n                  ...getThemeProperty(\n                    WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle\n                  ),\n                  ...imagestyle,\n                }}\n              >\n                <img\n                  style={{ width: '100%' }}\n                  src={resolveImage(BotMessageImage)}\n                />\n              </BotMessageImageContainer>\n            )}\n            <Blob\n              className={className}\n              bgcolor={getBgColor()}\n              color={isFromUser ? COLORS.SOLID_WHITE : COLORS.SOLID_BLACK}\n              blobwidth={getThemeProperty(\n                WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth\n              )}\n              blob={blob}\n              style={{\n                ...getMessageStyle(),\n                ...style,\n                ...{ opacity: ack === 0 ? 0.6 : 1 },\n              }}\n              {...otherProps}\n            >\n              {markdown ? (\n                <BlobText\n                  blob={blob}\n                  dangerouslySetInnerHTML={{\n                    __html: renderMarkdown(textChildren),\n                  }}\n                  markdownstyle={getMarkdownStyle(\n                    getThemeProperty,\n                    isFromUser ? COLORS.SEASHELL_WHITE : brandColor\n                  )}\n                />\n              ) : (\n                <BlobText blob={blob}>{textChildren}</BlobText>\n              )}\n              {!!buttons.length && (\n                <div className='message-buttons-container'>{buttons}</div>\n              )}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(6)}\n              {Boolean(blob) && hasBlobTick() && getBlobTick(5)}\n            </Blob>\n          </MessageContainer>\n          {timestampsEnabled && (\n            <MessageTimestamp\n              timestamp={m.timestamp}\n              style={timestampStyle}\n              isfromuser={isFromUser}\n            />\n          )}\n        </>\n      </ConditionalWrapper>\n    )\n  }\n\n  const { blob: _blob, json: _json, ...nodeProps } = props\n  const renderNode = () =>\n    type === INPUT.CUSTOM ? (\n      <message\n        json={JSON.stringify(_json)}\n        typing={typing}\n        delay={delay}\n        {...nodeProps}\n      />\n    ) : (\n      <message typing={typing} delay={delay} {...nodeProps}>\n        {children}\n      </message>\n    )\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n"],"file":"message.js"}

package/lib/components/multichannel/facebook/facebook.js

@@ -1,96 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultichannelFacebook = exports.MAX_CHARACTERS_FACEBOOK = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var MAX_CHARACTERS_FACEBOOK = 640;
-exports.MAX_CHARACTERS_FACEBOOK = MAX_CHARACTERS_FACEBOOK;
-
-var MultichannelFacebook = /*#__PURE__*/function () {
-  function MultichannelFacebook() {
-    (0, _classCallCheck2["default"])(this, MultichannelFacebook);
-  }
-
-  (0, _createClass2["default"])(MultichannelFacebook, [{
-    key: "convertText",
-    value: function convertText(props, originalText) {
-      if (originalText.length > MAX_CHARACTERS_FACEBOOK) {
-        var texts = this.splitText(originalText);
-        var lastText = texts.pop();
-
-        var _this$getNewProps = this.getNewProps(props, lastText),
-            propsLastText = _this$getNewProps.propsLastText,
-            propsWithoutChildren = _this$getNewProps.propsWithoutChildren;
-
-        return {
-          texts: texts,
-          propsLastText: propsLastText,
-          propsWithoutChildren: propsWithoutChildren
-        };
-      }
-
-      return {
-        propsLastText: props
-      };
-    }
-  }, {
-    key: "splitText",
-    value: function splitText(originalText) {
-      var lines = originalText.split('\n');
-      var initialText = lines.shift();
-      var texts = [initialText];
-      var index = 0;
-      lines.forEach(function (currentText) {
-        if (texts[index].length + currentText.length > MAX_CHARACTERS_FACEBOOK) {
-          index++;
-          texts.push(currentText);
-        } else {
-          texts[index] = texts[index].concat('\n', currentText);
-        }
-      });
-      return texts;
-    } // modifies the props to keep the children only for the last text message, this message will be the one with buttons and replies
-
-  }, {
-    key: "getNewProps",
-    value: function getNewProps(props, lastText) {
-      var propsLastText = _objectSpread({}, props);
-
-      propsLastText.children = [lastText];
-
-      if (Array.isArray(props.children)) {
-        props.children.filter(function (e) {
-          return e.type;
-        }).forEach(function (e) {
-          return propsLastText.children.push(e);
-        });
-      }
-
-      var propsWithoutChildren = _objectSpread({}, props);
-
-      delete propsWithoutChildren.children;
-      return {
-        propsLastText: propsLastText,
-        propsWithoutChildren: propsWithoutChildren
-      };
-    }
-  }]);
-  return MultichannelFacebook;
-}();
-
-exports.MultichannelFacebook = MultichannelFacebook;
-//# sourceMappingURL=facebook.js.map

package/lib/components/multichannel/facebook/facebook.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/multichannel/facebook/facebook.jsx"],"names":["MAX_CHARACTERS_FACEBOOK","MultichannelFacebook","props","originalText","length","texts","splitText","lastText","pop","getNewProps","propsLastText","propsWithoutChildren","lines","split","initialText","shift","index","forEach","currentText","push","concat","children","Array","isArray","filter","e","type"],"mappings":";;;;;;;;;;;;;;;;;;;AAAO,IAAMA,uBAAuB,GAAG,GAAhC;;;IAEMC,oB;AACX,kCAAc;AAAA;AAAE;;;;WAEhB,qBAAYC,KAAZ,EAAmBC,YAAnB,EAAiC;AAC/B,UAAIA,YAAY,CAACC,MAAb,GAAsBJ,uBAA1B,EAAmD;AACjD,YAAMK,KAAK,GAAG,KAAKC,SAAL,CAAeH,YAAf,CAAd;AACA,YAAMI,QAAQ,GAAGF,KAAK,CAACG,GAAN,EAAjB;;AACA,gCAAgD,KAAKC,WAAL,CAC9CP,KAD8C,EAE9CK,QAF8C,CAAhD;AAAA,YAAQG,aAAR,qBAAQA,aAAR;AAAA,YAAuBC,oBAAvB,qBAAuBA,oBAAvB;;AAIA,eAAO;AAAEN,UAAAA,KAAK,EAALA,KAAF;AAASK,UAAAA,aAAa,EAAbA,aAAT;AAAwBC,UAAAA,oBAAoB,EAApBA;AAAxB,SAAP;AACD;;AACD,aAAO;AAAED,QAAAA,aAAa,EAAER;AAAjB,OAAP;AACD;;;WAED,mBAAUC,YAAV,EAAwB;AACtB,UAAMS,KAAK,GAAGT,YAAY,CAACU,KAAb,CAAmB,IAAnB,CAAd;AACA,UAAMC,WAAW,GAAGF,KAAK,CAACG,KAAN,EAApB;AACA,UAAMV,KAAK,GAAG,CAACS,WAAD,CAAd;AACA,UAAIE,KAAK,GAAG,CAAZ;AACAJ,MAAAA,KAAK,CAACK,OAAN,CAAc,UAAAC,WAAW,EAAI;AAC3B,YAAIb,KAAK,CAACW,KAAD,CAAL,CAAaZ,MAAb,GAAsBc,WAAW,CAACd,MAAlC,GAA2CJ,uBAA/C,EAAwE;AACtEgB,UAAAA,KAAK;AACLX,UAAAA,KAAK,CAACc,IAAN,CAAWD,WAAX;AACD,SAHD,MAGO;AACLb,UAAAA,KAAK,CAACW,KAAD,CAAL,GAAeX,KAAK,CAACW,KAAD,CAAL,CAAaI,MAAb,CAAoB,IAApB,EAA0BF,WAA1B,CAAf;AACD;AACF,OAPD;AAQA,aAAOb,KAAP;AACD,K,CAED;;;;WACA,qBAAYH,KAAZ,EAAmBK,QAAnB,EAA6B;AAC3B,UAAMG,aAAa,qBAAQR,KAAR,CAAnB;;AACAQ,MAAAA,aAAa,CAACW,QAAd,GAAyB,CAACd,QAAD,CAAzB;;AACA,UAAIe,KAAK,CAACC,OAAN,CAAcrB,KAAK,CAACmB,QAApB,CAAJ,EAAmC;AACjCnB,QAAAA,KAAK,CAACmB,QAAN,CACGG,MADH,CACU,UAAAC,CAAC;AAAA,iBAAIA,CAAC,CAACC,IAAN;AAAA,SADX,EAEGT,OAFH,CAEW,UAAAQ,CAAC;AAAA,iBAAIf,aAAa,CAACW,QAAd,CAAuBF,IAAvB,CAA4BM,CAA5B,CAAJ;AAAA,SAFZ;AAGD;;AACD,UAAMd,oBAAoB,qBAAQT,KAAR,CAA1B;;AACA,aAAOS,oBAAoB,CAACU,QAA5B;AACA,aAAO;AAAEX,QAAAA,aAAa,EAAbA,aAAF;AAAiBC,QAAAA,oBAAoB,EAApBA;AAAjB,OAAP;AACD","sourcesContent":["export const MAX_CHARACTERS_FACEBOOK = 640\n\nexport class MultichannelFacebook {\n  constructor() {}\n\n  convertText(props, originalText) {\n    if (originalText.length > MAX_CHARACTERS_FACEBOOK) {\n      const texts = this.splitText(originalText)\n      const lastText = texts.pop()\n      const { propsLastText, propsWithoutChildren } = this.getNewProps(\n        props,\n        lastText\n      )\n      return { texts, propsLastText, propsWithoutChildren }\n    }\n    return { propsLastText: props }\n  }\n\n  splitText(originalText) {\n    const lines = originalText.split('\\n')\n    const initialText = lines.shift()\n    const texts = [initialText]\n    let index = 0\n    lines.forEach(currentText => {\n      if (texts[index].length + currentText.length > MAX_CHARACTERS_FACEBOOK) {\n        index++\n        texts.push(currentText)\n      } else {\n        texts[index] = texts[index].concat('\\n', currentText)\n      }\n    })\n    return texts\n  }\n\n  // modifies the props to keep the children only for the last text message, this message will be the one with buttons and replies\n  getNewProps(props, lastText) {\n    const propsLastText = { ...props }\n    propsLastText.children = [lastText]\n    if (Array.isArray(props.children)) {\n      props.children\n        .filter(e => e.type)\n        .forEach(e => propsLastText.children.push(e))\n    }\n    const propsWithoutChildren = { ...props }\n    delete propsWithoutChildren.children\n    return { propsLastText, propsWithoutChildren }\n  }\n}\n"],"file":"facebook.js"}

package/lib/components/multichannel/index.d.ts

@@ -1,65 +0,0 @@
-import * as React from 'react'
-
-type IndexMode = 'number' | 'letter' | undefined //undefined means no index
-
-export interface MultichannelViewOptions {
-  boldIndex?: boolean
-  indexSeparator?: string // after it, a space will always be added
-}
-
-export interface MultichannelContextType extends MultichannelViewOptions {
-  currentIndex: number | string // can be letter or number
-  /** @see same field at MultichannelProps */
-  messageSeparator?: string
-}
-
-// Text
-export interface MultichannelTextProps extends MultichannelViewOptions {
-  index?: string
-  indexMode?: IndexMode
-  /** Defaults to no separator between lines*/
-  newline?: string
-  buttonsAsText?: boolean
-  buttonsTextSeparator?: string
-}
-
-export const MultichannelText: React.FunctionComponent<MultichannelTextProps>
-
-// Carousel
-export interface MultichannelCarouselProps extends MultichannelViewOptions {
-  enableURL?: boolean
-  indexMode?: IndexMode
-  showTitle?: boolean
-  showSubtitle?: boolean
-  buttonsAsText?: boolean
-}
-export const MultichannelCarousel: React.FunctionComponent<MultichannelCarouselProps>
-
-// Button
-export interface MultichannelButtonProps {
-  newline?: string
-  path?: string
-  payload?: string
-  url?: string
-  webview?: string
-  asText?: boolean
-}
-export const MultichannelButton: React.FunctionComponent<MultichannelButtonProps>
-
-// Reply
-export const MultichannelReply: React.FunctionComponent<MultichannelButtonProps>
-
-export interface MultichannelProps extends MultichannelViewOptions {
-  firstIndex?: number | string
-  carousel?: MultichannelCarouselProps
-  text?: MultichannelTextProps
-  /**
-   * If undefined, each component will be served in a different botonic message
-   * '' will concatenate in the same line
-   * '\n' will split in different lines
-   * '\n\n' will separate with an empty line
-   **/
-  messageSeparator?: string
-}
-
-export const Multichannel: React.FunctionComponent<MultichannelProps>

package/lib/components/multichannel/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Multichannel", {
-  enumerable: true,
-  get: function get() {
-    return _multichannel.Multichannel;
-  }
-});
-Object.defineProperty(exports, "MultichannelButton", {
-  enumerable: true,
-  get: function get() {
-    return _multichannelButton.MultichannelButton;
-  }
-});
-Object.defineProperty(exports, "MultichannelCarousel", {
-  enumerable: true,
-  get: function get() {
-    return _multichannelCarousel.MultichannelCarousel;
-  }
-});
-Object.defineProperty(exports, "MultichannelReply", {
-  enumerable: true,
-  get: function get() {
-    return _multichannelReply.MultichannelReply;
-  }
-});
-Object.defineProperty(exports, "MultichannelText", {
-  enumerable: true,
-  get: function get() {
-    return _multichannelText.MultichannelText;
-  }
-});
-
-var _multichannel = require("./multichannel");
-
-var _multichannelButton = require("./multichannel-button");
-
-var _multichannelCarousel = require("./multichannel-carousel");
-
-var _multichannelReply = require("./multichannel-reply");
-
-var _multichannelText = require("./multichannel-text");
-//# sourceMappingURL=index.js.map

package/lib/components/multichannel/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/multichannel/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import { Multichannel } from './multichannel'\nimport { MultichannelButton } from './multichannel-button'\nimport { MultichannelCarousel } from './multichannel-carousel'\nimport { MultichannelReply } from './multichannel-reply'\nimport { MultichannelText } from './multichannel-text'\n\nexport { Multichannel }\nexport { MultichannelText }\nexport { MultichannelButton }\nexport { MultichannelReply }\nexport { MultichannelCarousel }\n"],"file":"index.js"}