@botonic/react 1.0.0-beta.0 → 1.0.0-dev.2

package/src/webchat/hooks.js

@@ -15,6 +15,7 @@ import {
   TOGGLE_WEBCHAT,
   UPDATE_DEV_SETTINGS,
   UPDATE_HANDOFF,
+  UPDATE_JWT,
   UPDATE_LAST_MESSAGE_DATE,
   UPDATE_LAST_ROUTE_PATH,
   UPDATE_LATEST_INPUT,
@@ -60,6 +61,7 @@ export const webchatInitialState = {
   isCoverComponentOpen: false,
   lastMessageUpdate: undefined,
   currentAttachment: undefined,
+  jwt: null,
 }
 
 export function useWebchat() {
@@ -164,6 +166,13 @@ export function useWebchat() {
     })
   }
 
+  const updateJwt = jwt => {
+    webchatDispatch({
+      type: UPDATE_JWT,
+      payload: jwt,
+    })
+  }
+
   return {
     webchatState,
     webchatDispatch,
@@ -188,6 +197,7 @@ export function useWebchat() {
     clearMessages,
     updateLastMessageDate,
     setCurrentAttachment,
+    updateJwt,
   }
 }
 

package/src/webchat/webchat-reducer.js

@@ -8,6 +8,7 @@ import {
   TOGGLE_WEBCHAT,
   UPDATE_DEV_SETTINGS,
   UPDATE_HANDOFF,
+  UPDATE_JWT,
   UPDATE_LAST_ROUTE_PATH,
   UPDATE_LATEST_INPUT,
   UPDATE_SESSION,
@@ -52,6 +53,8 @@ export function webchatReducer(state, action) {
       return { ...state, lastRoutePath: action.payload }
     case SET_CURRENT_ATTACHMENT:
       return { ...state, currentAttachment: action.payload }
+    case UPDATE_JWT:
+      return { ...state, jwt: action.payload }
     default:
       return messagesReducer(state, action)
   }

package/src/webchat/webchat.jsx

@@ -212,6 +212,8 @@ export const Webchat = forwardRef((props, ref) => {
 
   const host = props.host || document.body
 
+  const deviceAdapter = new DeviceAdapter()
+
   const saveWebchatState = webchatState => {
     storage &&
       saveState(
@@ -227,7 +229,6 @@ export const Webchat = forwardRef((props, ref) => {
         )
       )
   }
-  const deviceAdapter = new DeviceAdapter()
 
   const handleAttachment = event => {
     if (!isAllowedSize(event.target.files[0].size)) {

package/src/webchat-app.jsx

@@ -141,7 +141,7 @@ export class WebchatApp {
   }
 
   onServiceEvent(event) {
-    if (event.action === 'connectionChange') {
+    if (event.action === 'connection_change') {
       this.onConnectionChange && this.onConnectionChange(this, event.online)
       this.webchatRef.current.setOnline(event.online)
     } else if (event.action === 'update_message_info')
@@ -243,7 +243,7 @@ export class WebchatApp {
   }
 
   // eslint-disable-next-line complexity
-  getComponent(optionsAtRuntime = {}) {
+  getComponent(host, optionsAtRuntime = {}) {
     let {
       theme = {},
       persistentMenu,
@@ -265,6 +265,7 @@ export class WebchatApp {
       appId,
       visibility,
       server,
+      hostId,
       ...webchatOptions
     } = optionsAtRuntime
     theme = merge(this.theme, theme)
@@ -287,6 +288,8 @@ export class WebchatApp {
     this.onConnectionChange = onConnectionChange || this.onConnectionChange
     this.visibility = visibility || this.visibility
     this.appId = appId || this.appId
+    this.hostId = hostId || this.hostId
+    this.createRootElement(host)
     return (
       <Webchat
         {...webchatOptions}
@@ -342,11 +345,10 @@ export class WebchatApp {
 
   async render(dest, optionsAtRuntime = {}) {
     onDOMLoaded(async () => {
-      this.createRootElement(dest)
       const isVisible = await this.resolveWebchatVisibility(optionsAtRuntime)
       if (isVisible)
         render(
-          this.getComponent(optionsAtRuntime),
+          this.getComponent(dest, optionsAtRuntime),
           this.getReactMountNode(dest)
         )
     })

package/lib/experimental/components/audio.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Audio = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _core = require("@botonic/core");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _constants = require("../../constants");
-
-var _message = require("./message");
-
-var serialize = function serialize(audioProps) {
-  return {
-    src: audioProps.src
-  };
-};
-
-var Audio = function Audio(props) {
-  return /*#__PURE__*/_react["default"].createElement(_message.Message, (0, _extends2["default"])({
-    role: _constants.ROLES.AUDIO_MESSAGE,
-    json: serialize(props)
-  }, props, {
-    type: _core.INPUT.AUDIO
-  }), (0, _core.isBrowser)() && /*#__PURE__*/_react["default"].createElement("audio", {
-    style: {
-      maxWidth: '100%'
-    },
-    id: "myAudio",
-    controls: true
-  }, /*#__PURE__*/_react["default"].createElement("source", {
-    src: props.src,
-    type: "audio/mpeg"
-  }), "Your browser does not support this audio format."), props.children);
-};
-
-exports.Audio = Audio;
-Audio.serialize = serialize;
-//# sourceMappingURL=audio.js.map

package/lib/experimental/components/audio.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/experimental/components/audio.jsx"],"names":["serialize","audioProps","src","Audio","props","ROLES","AUDIO_MESSAGE","INPUT","AUDIO","maxWidth","children"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAAAC,UAAU,EAAI;AAC9B,SAAO;AAAEC,IAAAA,GAAG,EAAED,UAAU,CAACC;AAAlB,GAAP;AACD,CAFD;;AAIO,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK;AAAA,sBACxB,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAEC,iBAAMC,aADd;AAEE,IAAA,IAAI,EAAEN,SAAS,CAACI,KAAD;AAFjB,KAGMA,KAHN;AAIE,IAAA,IAAI,EAAEG,YAAMC;AAJd,MAMG,uCACC;AAAO,IAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KAAd;AAAoC,IAAA,EAAE,EAAC,SAAvC;AAAiD,IAAA,QAAQ;AAAzD,kBACE;AAAQ,IAAA,GAAG,EAAEL,KAAK,CAACF,GAAnB;AAAwB,IAAA,IAAI,EAAC;AAA7B,IADF,qDAPJ,EAYGE,KAAK,CAACM,QAZT,CADwB;AAAA,CAAnB;;;AAiBPP,KAAK,CAACH,SAAN,GAAkBA,SAAlB","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React from 'react'\n\nimport { ROLES } from '../../constants'\nimport { Message } from './message'\n\nconst serialize = audioProps => {\n  return { src: audioProps.src }\n}\n\nexport const Audio = props => (\n  <Message\n    role={ROLES.AUDIO_MESSAGE}\n    json={serialize(props)}\n    {...props}\n    type={INPUT.AUDIO}\n  >\n    {isBrowser() && (\n      <audio style={{ maxWidth: '100%' }} id='myAudio' controls>\n        <source src={props.src} type='audio/mpeg' />\n        Your browser does not support this audio format.\n      </audio>\n    )}\n    {props.children}\n  </Message>\n)\n\nAudio.serialize = serialize\n"],"file":"audio.js"}

package/lib/experimental/components/carousel.js

@@ -1,194 +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.Carousel = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@botonic/core");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _leftArrow = _interopRequireDefault(require("../../assets/leftArrow.svg"));
-
-var _rightArrow = _interopRequireDefault(require("../../assets/rightArrow.svg"));
-
-var _buttonsDisabler = require("../../components/buttons-disabler");
-
-var _constants = require("../../constants");
-
-var _contexts = require("../../contexts");
-
-var _environment = require("../../util/environment");
-
-var _styledScrollbar = require("../../webchat/components/styled-scrollbar");
-
-var _message = require("./message");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var StyledCarousel = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px 0px;\n  display: flex;\n  flex-direction: row;\n  max-width: 100%;\n  ", "\n"])), function (props) {
-  return props.carouselArrowsEnabled && 'overflow-x: auto;';
-});
-
-var StyledItems = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n"])));
-
-var StyledArrowContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: calc(50% - 20px);\n  height: 40px;\n  width: 25px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: ", ";\n  left: ", "px;\n  right: ", "px;\n  border-top-", "-radius: 30px;\n  border-bottom-", "-radius: 30px;\n"])), _constants.COLORS.SILVER, function (props) {
-  return props.justifyContent;
-}, function (props) {
-  return props.left;
-}, function (props) {
-  return props.right;
-}, function (props) {
-  return props.arrow;
-}, function (props) {
-  return props.arrow;
-});
-
-var StyledArrow = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 20px;\n  height: 20px;\n"])));
-
-var serialize = function serialize(carouselProps) {
-  var carouselChildren = carouselProps.children;
-  if (!Array.isArray(carouselChildren)) carouselChildren = [carouselChildren];
-  return {
-    type: _core.INPUT.CAROUSEL,
-    elements: carouselChildren.map(function (e) {
-      return e && e.type && e.type.serialize && e.type.serialize(e.props);
-    })
-  };
-};
-/**
- *
- * @param {MessageProps} props
- * @returns {JSX.Element}
- */
-
-
-var Carousel = function Carousel(props) {
-  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
-      getThemeProperty = _useContext.getThemeProperty;
-
-  var content = props.children;
-
-  var scrollbarOptions = _objectSpread(_objectSpread({}, {
-    enable: true,
-    autoHide: true
-  }), getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      hasLeftArrow = _useState2[0],
-      setLeftArrow = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(true),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      hasRightArrow = _useState4[0],
-      setRightArrow = _useState4[1];
-
-  var carouselRef = (0, _react.useRef)(null);
-  var CustomCarouselLeftArrow = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow, undefined);
-  var CustomCarouselRightArrow = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow, undefined);
-  var carouselArrowsEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows, true);
-
-  var scrollCarouselBy = function scrollCarouselBy(value) {
-    carouselRef.current.scrollBy({
-      left: value,
-      behavior: 'smooth'
-    });
-  };
-
-  var setArrowsVisibility = function setArrowsVisibility(event) {
-    var carousel = event.currentTarget;
-    var maxRightScroll = carousel.scrollWidth - carousel.offsetWidth - _constants.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
-    setLeftArrow(carousel.scrollLeft !== 0);
-    setRightArrow(carousel.scrollLeft < maxRightScroll);
-  };
-
-  var getArrows = function getArrows() {
-    var scrollBy = _constants.WEBCHAT.DEFAULTS.ELEMENT_WIDTH + _constants.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasLeftArrow && (CustomCarouselLeftArrow ? /*#__PURE__*/_react["default"].createElement(CustomCarouselLeftArrow, {
-      scrollCarouselBy: scrollCarouselBy
-    }) : /*#__PURE__*/_react["default"].createElement(StyledArrowContainer, {
-      left: 0,
-      arrow: 'right',
-      justifyContent: 'flex-start',
-      onClick: function onClick() {
-        return scrollCarouselBy(-scrollBy);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(StyledArrow, {
-      src: (0, _environment.resolveImage)(_leftArrow["default"])
-    }))), hasRightArrow && (CustomCarouselRightArrow ? /*#__PURE__*/_react["default"].createElement(CustomCarouselRightArrow, {
-      scrollCarouselBy: scrollCarouselBy
-    }) : /*#__PURE__*/_react["default"].createElement(StyledArrowContainer, {
-      right: 0,
-      arrow: 'left',
-      justifyContent: 'flex-end',
-      onClick: function onClick() {
-        return scrollCarouselBy(scrollBy);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(StyledArrow, {
-      src: (0, _environment.resolveImage)(_rightArrow["default"])
-    }))));
-  };
-
-  (0, _react.useEffect)(function () {
-    var carousel = carouselRef.current;
-
-    if (carousel && carousel.addEventListener) {
-      carousel.addEventListener('scroll', setArrowsVisibility, false);
-    } else if (carousel && carousel.attachEvent) {
-      carousel.attachEvent('scroll', setArrowsVisibility);
-    }
-  }, [carouselRef.current]);
-
-  var carouselProps = _objectSpread(_objectSpread({}, props), {}, {
-    children: _buttonsDisabler.ButtonsDisabler.updateChildrenButtons(props.children)
-  });
-
-  if ((0, _core.isBrowser)()) {
-    content = /*#__PURE__*/_react["default"].createElement(_styledScrollbar.StyledScrollbar, {
-      scrollbar: scrollbarOptions,
-      autoHide: scrollbarOptions.autoHide
-    }, /*#__PURE__*/_react["default"].createElement(StyledCarousel, {
-      ref: carouselRef,
-      carouselArrowsEnabled: carouselArrowsEnabled
-    }, /*#__PURE__*/_react["default"].createElement(StyledItems, null, carouselProps.children), carouselArrowsEnabled && getArrows()));
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(_message.Message, (0, _extends2["default"])({
-    style: {
-      width: '85%',
-      padding: 0,
-      backgroundColor: _constants.COLORS.TRANSPARENT
-    },
-    blob: false,
-    json: serialize(carouselProps),
-    type: _core.INPUT.CAROUSEL
-  }, carouselProps), content);
-};
-
-exports.Carousel = Carousel;
-Carousel.serialize = serialize;
-//# sourceMappingURL=carousel.js.map

package/lib/experimental/components/carousel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/experimental/components/carousel.jsx"],"names":["StyledCarousel","styled","div","props","carouselArrowsEnabled","StyledItems","StyledArrowContainer","COLORS","SILVER","justifyContent","left","right","arrow","StyledArrow","img","serialize","carouselProps","carouselChildren","children","Array","isArray","type","INPUT","CAROUSEL","elements","map","e","Carousel","WebchatContext","getThemeProperty","content","scrollbarOptions","enable","autoHide","WEBCHAT","CUSTOM_PROPERTIES","scrollbar","hasLeftArrow","setLeftArrow","hasRightArrow","setRightArrow","carouselRef","CustomCarouselLeftArrow","customCarouselLeftArrow","undefined","CustomCarouselRightArrow","customCarouselRightArrow","enableCarouselArrows","scrollCarouselBy","value","current","scrollBy","behavior","setArrowsVisibility","event","carousel","currentTarget","maxRightScroll","scrollWidth","offsetWidth","DEFAULTS","ELEMENT_MARGIN_RIGHT","scrollLeft","getArrows","ELEMENT_WIDTH","LeftArrow","RightArrow","addEventListener","attachEvent","ButtonsDisabler","updateChildrenButtons","width","padding","backgroundColor","TRANSPARENT"],"mappings":"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","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\n\nimport LeftArrow from '../../assets/leftArrow.svg'\nimport RightArrow from '../../assets/rightArrow.svg'\nimport { ButtonsDisabler } from '../../components/buttons-disabler'\nimport { COLORS, WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../contexts'\nimport { resolveImage } from '../../util/environment'\nimport { StyledScrollbar } from '../../webchat/components/styled-scrollbar'\nimport { Message } from './message'\n\nconst StyledCarousel = styled.div`\n  padding: 10px 0px;\n  display: flex;\n  flex-direction: row;\n  max-width: 100%;\n  ${props => props.carouselArrowsEnabled && 'overflow-x: auto;'}\n`\n\nconst StyledItems = styled.div`\n  display: flex;\n`\n\nconst StyledArrowContainer = styled.div`\n  position: absolute;\n  top: calc(50% - 20px);\n  height: 40px;\n  width: 25px;\n  background: ${COLORS.SILVER};\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  justify-content: ${props => props.justifyContent};\n  left: ${props => props.left}px;\n  right: ${props => props.right}px;\n  border-top-${props => props.arrow}-radius: 30px;\n  border-bottom-${props => props.arrow}-radius: 30px;\n`\nconst StyledArrow = styled.img`\n  width: 20px;\n  height: 20px;\n`\n\nconst serialize = carouselProps => {\n  let carouselChildren = carouselProps.children\n  if (!Array.isArray(carouselChildren)) carouselChildren = [carouselChildren]\n  return {\n    type: INPUT.CAROUSEL,\n    elements: carouselChildren.map(\n      e => e && e.type && e.type.serialize && e.type.serialize(e.props)\n    ),\n  }\n}\n\n/**\n *\n * @param {MessageProps} props\n * @returns {JSX.Element}\n */\nexport const Carousel = props => {\n  const { getThemeProperty } = useContext(WebchatContext)\n  let content = props.children\n  const scrollbarOptions = {\n    ...{ enable: true, autoHide: true },\n    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),\n  }\n  const [hasLeftArrow, setLeftArrow] = useState(false)\n  const [hasRightArrow, setRightArrow] = useState(true)\n  const carouselRef = useRef(null)\n  const CustomCarouselLeftArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselLeftArrow,\n    undefined\n  )\n  const CustomCarouselRightArrow = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customCarouselRightArrow,\n    undefined\n  )\n  const carouselArrowsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableCarouselArrows,\n    true\n  )\n\n  const scrollCarouselBy = value => {\n    carouselRef.current.scrollBy({\n      left: value,\n      behavior: 'smooth',\n    })\n  }\n\n  const setArrowsVisibility = event => {\n    const carousel = event.currentTarget\n    const maxRightScroll =\n      carousel.scrollWidth -\n      carousel.offsetWidth -\n      WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    setLeftArrow(carousel.scrollLeft !== 0)\n    setRightArrow(carousel.scrollLeft < maxRightScroll)\n  }\n\n  const getArrows = () => {\n    const scrollBy =\n      WEBCHAT.DEFAULTS.ELEMENT_WIDTH + WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT\n    return (\n      <>\n        {hasLeftArrow &&\n          (CustomCarouselLeftArrow ? (\n            <CustomCarouselLeftArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              left={0}\n              arrow={'right'}\n              justifyContent={'flex-start'}\n              onClick={() => scrollCarouselBy(-scrollBy)}\n            >\n              <StyledArrow src={resolveImage(LeftArrow)} />\n            </StyledArrowContainer>\n          ))}\n        {hasRightArrow &&\n          (CustomCarouselRightArrow ? (\n            <CustomCarouselRightArrow scrollCarouselBy={scrollCarouselBy} />\n          ) : (\n            <StyledArrowContainer\n              right={0}\n              arrow={'left'}\n              justifyContent={'flex-end'}\n              onClick={() => scrollCarouselBy(scrollBy)}\n            >\n              <StyledArrow src={resolveImage(RightArrow)} />\n            </StyledArrowContainer>\n          ))}\n      </>\n    )\n  }\n\n  useEffect(() => {\n    const carousel = carouselRef.current\n    if (carousel && carousel.addEventListener) {\n      carousel.addEventListener('scroll', setArrowsVisibility, false)\n    } else if (carousel && carousel.attachEvent) {\n      carousel.attachEvent('scroll', setArrowsVisibility)\n    }\n  }, [carouselRef.current])\n\n  const carouselProps = {\n    ...props,\n    children: ButtonsDisabler.updateChildrenButtons(props.children),\n  }\n\n  if (isBrowser()) {\n    content = (\n      <StyledScrollbar\n        scrollbar={scrollbarOptions}\n        autoHide={scrollbarOptions.autoHide}\n      >\n        <StyledCarousel\n          ref={carouselRef}\n          carouselArrowsEnabled={carouselArrowsEnabled}\n        >\n          <StyledItems>{carouselProps.children}</StyledItems>\n          {carouselArrowsEnabled && getArrows()}\n        </StyledCarousel>\n      </StyledScrollbar>\n    )\n  }\n\n  return (\n    <Message\n      style={{ width: '85%', padding: 0, backgroundColor: COLORS.TRANSPARENT }}\n      blob={false}\n      json={serialize(carouselProps)}\n      type={INPUT.CAROUSEL}\n      {...carouselProps}\n    >\n      {content}\n    </Message>\n  )\n}\n\nCarousel.serialize = serialize\n"],"file":"carousel.js"}

package/lib/experimental/components/custom-message.js

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.customMessage = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _core = require("@botonic/core");
-
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reply = require("../../components/reply");
-
-var _constants = require("../../constants");
-
-var _errorBoundary = require("../../util/error-boundary");
-
-var _logs = require("../../util/logs");
-
-var _react2 = require("../../util/react");
-
-var _message = require("./message");
-
-var _excluded = ["id", "children"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-/**
- *
- * @param name as it appears at ThemeProps' message.customTypes key
- * @param CustomMessageComponent
- * @param defaultProps Props for the wrapper Message
- * @param ErrorBoundary to recover in case it fails
- */
-var customMessage = function customMessage(_ref) {
-  var name = _ref.name,
-      CustomMessageComponent = _ref.component,
-      _ref$defaultProps = _ref.defaultProps,
-      defaultProps = _ref$defaultProps === void 0 ? {} : _ref$defaultProps,
-      _ref$errorBoundary = _ref.errorBoundary,
-      ErrorBoundary = _ref$errorBoundary === void 0 ? (0, _errorBoundary.createErrorBoundary)() : _ref$errorBoundary;
-
-  var CustomMessage = function CustomMessage(props) {
-    (0, _logs.warnDeprecatedProps)(defaultProps, 'customMessage:');
-    if (defaultProps.from === _constants.SENDERS.user) defaultProps.ack = 1;
-    return /*#__PURE__*/_react["default"].createElement(_message.Message, (0, _extends2["default"])({}, (0, _lodash["default"])((0, _react2.mapObjectNonBooleanValues)(defaultProps), props), {
-      type: _core.INPUT.CUSTOM
-    }));
-  };
-
-  var splitChildren = function splitChildren(props) {
-    var children = props.children;
-
-    var isReply = function isReply(e) {
-      return e.type === _reply.Reply;
-    };
-
-    try {
-      if (!Array.isArray(children) && !isReply(children)) {
-        return {
-          replies: null,
-          childrenWithoutReplies: children
-        };
-      }
-
-      var childrenArray = _react["default"].Children.toArray(children);
-
-      var replies = childrenArray.filter(isReply);
-      var childrenWithoutReplies = childrenArray.filter(function (e) {
-        return !isReply(e);
-      });
-      return {
-        replies: replies,
-        childrenWithoutReplies: childrenWithoutReplies
-      };
-    } catch (e) {
-      return {
-        replies: null,
-        childrenWithoutReplies: children
-      };
-    }
-  };
-
-  var WrappedComponent = function WrappedComponent(props) {
-    var id = props.id,
-        children = props.children,
-        customMessageProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-
-    var _splitChildren = splitChildren(props),
-        replies = _splitChildren.replies,
-        childrenWithoutReplies = _splitChildren.childrenWithoutReplies;
-
-    return /*#__PURE__*/_react["default"].createElement(CustomMessage, {
-      id: id,
-      json: _objectSpread(_objectSpread({}, customMessageProps), {}, {
-        id: id,
-        children: childrenWithoutReplies,
-        customTypeName: name
-      })
-    }, /*#__PURE__*/_react["default"].createElement(ErrorBoundary, (0, _extends2["default"])({
-      key: 'errorBoundary'
-    }, customMessageProps), /*#__PURE__*/_react["default"].createElement(CustomMessageComponent, customMessageProps, childrenWithoutReplies)), replies);
-  };
-
-  WrappedComponent.customTypeName = name; // eslint-disable-next-line react/display-name
-
-  WrappedComponent.deserialize = function (msg) {
-    return /*#__PURE__*/_react["default"].createElement(WrappedComponent, msg, msg.replies.length > 0 && msg.replies.map(function (r, i) {
-      return /*#__PURE__*/_react["default"].createElement(_reply.Reply, {
-        key: i,
-        payload: r.payload
-      }, r.title);
-    }));
-  };
-
-  return WrappedComponent;
-};
-
-exports.customMessage = customMessage;
-//# sourceMappingURL=custom-message.js.map

package/lib/experimental/components/custom-message.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/experimental/components/custom-message.jsx"],"names":["customMessage","name","CustomMessageComponent","component","defaultProps","errorBoundary","ErrorBoundary","CustomMessage","props","from","SENDERS","user","ack","INPUT","CUSTOM","splitChildren","children","isReply","e","type","Reply","Array","isArray","replies","childrenWithoutReplies","childrenArray","React","Children","toArray","filter","WrappedComponent","id","customMessageProps","customTypeName","deserialize","msg","length","map","r","i","payload","title"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,OAKvB;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHOC,sBAGP,QAHJC,SAGI;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,EAEX;AAAA,gCADJC,aACI;AAAA,MADWC,aACX,mCAD2B,yCAC3B;;AACJ,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAAAC,KAAK,EAAI;AAC7B,mCAAoBJ,YAApB,EAAkC,gBAAlC;AACA,QAAIA,YAAY,CAACK,IAAb,KAAsBC,mBAAQC,IAAlC,EAAwCP,YAAY,CAACQ,GAAb,GAAmB,CAAnB;AACxC,wBACE,gCAAC,gBAAD,gCACM,wBAAM,uCAA0BR,YAA1B,CAAN,EAA+CI,KAA/C,CADN;AAEE,MAAA,IAAI,EAAEK,YAAMC;AAFd,OADF;AAMD,GATD;;AAWA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAAAP,KAAK,EAAI;AAC7B,QAAQQ,QAAR,GAAqBR,KAArB,CAAQQ,QAAR;;AACA,QAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,CAAC;AAAA,aAAIA,CAAC,CAACC,IAAF,KAAWC,YAAf;AAAA,KAAjB;;AACA,QAAI;AACF,UAAI,CAACC,KAAK,CAACC,OAAN,CAAcN,QAAd,CAAD,IAA4B,CAACC,OAAO,CAACD,QAAD,CAAxC,EAAoD;AAClD,eAAO;AAAEO,UAAAA,OAAO,EAAE,IAAX;AAAiBC,UAAAA,sBAAsB,EAAER;AAAzC,SAAP;AACD;;AACD,UAAMS,aAAa,GAAGC,kBAAMC,QAAN,CAAeC,OAAf,CAAuBZ,QAAvB,CAAtB;;AACA,UAAMO,OAAO,GAAGE,aAAa,CAACI,MAAd,CAAqBZ,OAArB,CAAhB;AACA,UAAMO,sBAAsB,GAAGC,aAAa,CAACI,MAAd,CAAqB,UAAAX,CAAC;AAAA,eAAI,CAACD,OAAO,CAACC,CAAD,CAAZ;AAAA,OAAtB,CAA/B;AACA,aAAO;AACLK,QAAAA,OAAO,EAAEA,OADJ;AAELC,QAAAA,sBAAsB,EAAtBA;AAFK,OAAP;AAID,KAXD,CAWE,OAAON,CAAP,EAAU;AACV,aAAO;AAAEK,QAAAA,OAAO,EAAE,IAAX;AAAiBC,QAAAA,sBAAsB,EAAER;AAAzC,OAAP;AACD;AACF,GAjBD;;AAmBA,MAAMc,gBAAgB,GAAG,SAAnBA,gBAAmB,CAAAtB,KAAK,EAAI;AAChC,QAAQuB,EAAR,GAAgDvB,KAAhD,CAAQuB,EAAR;AAAA,QAAYf,QAAZ,GAAgDR,KAAhD,CAAYQ,QAAZ;AAAA,QAAyBgB,kBAAzB,6CAAgDxB,KAAhD;;AACA,yBAA4CO,aAAa,CAACP,KAAD,CAAzD;AAAA,QAAQe,OAAR,kBAAQA,OAAR;AAAA,QAAiBC,sBAAjB,kBAAiBA,sBAAjB;;AACA,wBACE,gCAAC,aAAD;AACE,MAAA,EAAE,EAAEO,EADN;AAEE,MAAA,IAAI,kCACCC,kBADD;AAEFD,QAAAA,EAAE,EAAFA,EAFE;AAGFf,QAAAA,QAAQ,EAAEQ,sBAHR;AAIFS,QAAAA,cAAc,EAAEhC;AAJd;AAFN,oBASE,gCAAC,aAAD;AAAe,MAAA,GAAG,EAAE;AAApB,OAAyC+B,kBAAzC,gBACE,gCAAC,sBAAD,EAA4BA,kBAA5B,EACGR,sBADH,CADF,CATF,EAcGD,OAdH,CADF;AAkBD,GArBD;;AAsBAO,EAAAA,gBAAgB,CAACG,cAAjB,GAAkChC,IAAlC,CArDI,CAsDJ;;AACA6B,EAAAA,gBAAgB,CAACI,WAAjB,GAA+B,UAAAC,GAAG,EAAI;AACpC,wBACE,gCAAC,gBAAD,EAAsBA,GAAtB,EACGA,GAAG,CAACZ,OAAJ,CAAYa,MAAZ,GAAqB,CAArB,IACCD,GAAG,CAACZ,OAAJ,CAAYc,GAAZ,CAAgB,UAACC,CAAD,EAAIC,CAAJ;AAAA,0BACd,gCAAC,YAAD;AAAO,QAAA,GAAG,EAAEA,CAAZ;AAAe,QAAA,OAAO,EAAED,CAAC,CAACE;AAA1B,SACGF,CAAC,CAACG,KADL,CADc;AAAA,KAAhB,CAFJ,CADF;AAUD,GAXD;;AAYA,SAAOX,gBAAP;AACD,CAzEM","sourcesContent":["import { INPUT } from '@botonic/core'\nimport merge from 'lodash.merge'\nimport React from 'react'\n\nimport { Reply } from '../../components/reply'\nimport { SENDERS } from '../../constants'\nimport { createErrorBoundary } from '../../util/error-boundary'\nimport { warnDeprecatedProps } from '../../util/logs'\nimport { mapObjectNonBooleanValues } from '../../util/react'\nimport { Message } from './message'\n\n/**\n *\n * @param name as it appears at ThemeProps' message.customTypes key\n * @param CustomMessageComponent\n * @param defaultProps Props for the wrapper Message\n * @param ErrorBoundary to recover in case it fails\n */\nexport const customMessage = ({\n  name,\n  component: CustomMessageComponent,\n  defaultProps = {},\n  errorBoundary: ErrorBoundary = createErrorBoundary(),\n}) => {\n  const CustomMessage = props => {\n    warnDeprecatedProps(defaultProps, 'customMessage:')\n    if (defaultProps.from === SENDERS.user) defaultProps.ack = 1\n    return (\n      <Message\n        {...merge(mapObjectNonBooleanValues(defaultProps), props)}\n        type={INPUT.CUSTOM}\n      />\n    )\n  }\n\n  const splitChildren = props => {\n    const { children } = props\n    const isReply = e => e.type === Reply\n    try {\n      if (!Array.isArray(children) && !isReply(children)) {\n        return { replies: null, childrenWithoutReplies: children }\n      }\n      const childrenArray = React.Children.toArray(children)\n      const replies = childrenArray.filter(isReply)\n      const childrenWithoutReplies = childrenArray.filter(e => !isReply(e))\n      return {\n        replies: replies,\n        childrenWithoutReplies,\n      }\n    } catch (e) {\n      return { replies: null, childrenWithoutReplies: children }\n    }\n  }\n\n  const WrappedComponent = props => {\n    const { id, children, ...customMessageProps } = props\n    const { replies, childrenWithoutReplies } = splitChildren(props)\n    return (\n      <CustomMessage\n        id={id}\n        json={{\n          ...customMessageProps,\n          id,\n          children: childrenWithoutReplies,\n          customTypeName: name,\n        }}\n      >\n        <ErrorBoundary key={'errorBoundary'} {...customMessageProps}>\n          <CustomMessageComponent {...customMessageProps}>\n            {childrenWithoutReplies}\n          </CustomMessageComponent>\n        </ErrorBoundary>\n        {replies}\n      </CustomMessage>\n    )\n  }\n  WrappedComponent.customTypeName = name\n  // eslint-disable-next-line react/display-name\n  WrappedComponent.deserialize = msg => {\n    return (\n      <WrappedComponent {...msg}>\n        {msg.replies.length > 0 &&\n          msg.replies.map((r, i) => (\n            <Reply key={i} payload={r.payload}>\n              {r.title}\n            </Reply>\n          ))}\n      </WrappedComponent>\n    )\n  }\n  return WrappedComponent\n}\n"],"file":"custom-message.js"}

package/lib/experimental/components/document.js

@@ -1,69 +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.Document = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _core = require("@botonic/core");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../../constants");
-
-var _contexts = require("../../contexts");
-
-var _message = require("./message");
-
-var _templateObject;
-
-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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var StyledButton = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  height: 25px;\n  background-color: #f0f0f0;\n  padding: 10px;\n  text-align: center;\n  border-radius: 5px;\n  color: black;\n  font-weight: bold;\n  line-height: 25px;\n  text-decoration: none;\n  border: 1px solid black;\n  opacity: 0.9;\n  &:hover {\n    opacity: 1;\n  }\n"])));
-
-var serialize = function serialize(documentProps) {
-  return {
-    src: documentProps.src
-  };
-};
-
-var Document = function Document(props) {
-  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
-      getThemeProperty = _useContext.getThemeProperty;
-
-  var documentDownload = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.documentDownload, {});
-  if (typeof documentDownload === 'function') documentDownload = documentDownload(props.from);
-  return /*#__PURE__*/_react["default"].createElement(_message.Message, (0, _extends2["default"])({
-    role: _constants.ROLES.DOCUMENT_MESSAGE,
-    json: serialize(props)
-  }, props, {
-    type: _core.INPUT.DOCUMENT
-  }), (0, _core.isBrowser)() && /*#__PURE__*/_react["default"].createElement(StyledButton, {
-    href: props.src,
-    target: "_blank",
-    rel: "noreferrer",
-    style: _objectSpread({}, documentDownload.style)
-  }, documentDownload.text || 'Download'), props.children);
-};
-
-exports.Document = Document;
-Document.serialize = serialize;
-//# sourceMappingURL=document.js.map

package/lib/experimental/components/document.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/experimental/components/document.jsx"],"names":["StyledButton","styled","a","serialize","documentProps","src","Document","props","WebchatContext","getThemeProperty","documentDownload","WEBCHAT","CUSTOM_PROPERTIES","from","ROLES","DOCUMENT_MESSAGE","INPUT","DOCUMENT","style","text","children"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,YAAY,GAAGC,6BAAOC,CAAV,iYAAlB;;AAkBA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,aAAa,EAAI;AACjC,SAAO;AAAEC,IAAAA,GAAG,EAAED,aAAa,CAACC;AAArB,GAAP;AACD,CAFD;;AAIO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,CAAAC,KAAK,EAAI;AAC/B,oBAA6B,uBAAWC,wBAAX,CAA7B;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAIC,gBAAgB,GAAGD,gBAAgB,CACrCE,mBAAQC,iBAAR,CAA0BF,gBADW,EAErC,EAFqC,CAAvC;AAIA,MAAI,OAAOA,gBAAP,KAA4B,UAAhC,EACEA,gBAAgB,GAAGA,gBAAgB,CAACH,KAAK,CAACM,IAAP,CAAnC;AAEF,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAEC,iBAAMC,gBADd;AAEE,IAAA,IAAI,EAAEZ,SAAS,CAACI,KAAD;AAFjB,KAGMA,KAHN;AAIE,IAAA,IAAI,EAAES,YAAMC;AAJd,MAMG,uCACC,gCAAC,YAAD;AACE,IAAA,IAAI,EAAEV,KAAK,CAACF,GADd;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,GAAG,EAAC,YAHN;AAIE,IAAA,KAAK,oBACAK,gBAAgB,CAACQ,KADjB;AAJP,KAQGR,gBAAgB,CAACS,IAAjB,IAAyB,UAR5B,CAPJ,EAkBGZ,KAAK,CAACa,QAlBT,CADF;AAsBD,CA/BM;;;AAiCPd,QAAQ,CAACH,SAAT,GAAqBA,SAArB","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../contexts'\nimport { Message } from './message'\n\nconst StyledButton = styled.a`\n  display: block;\n  height: 25px;\n  background-color: #f0f0f0;\n  padding: 10px;\n  text-align: center;\n  border-radius: 5px;\n  color: black;\n  font-weight: bold;\n  line-height: 25px;\n  text-decoration: none;\n  border: 1px solid black;\n  opacity: 0.9;\n  &:hover {\n    opacity: 1;\n  }\n`\n\nconst serialize = documentProps => {\n  return { src: documentProps.src }\n}\n\nexport const Document = props => {\n  const { getThemeProperty } = useContext(WebchatContext)\n  let documentDownload = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.documentDownload,\n    {}\n  )\n  if (typeof documentDownload === 'function')\n    documentDownload = documentDownload(props.from)\n\n  return (\n    <Message\n      role={ROLES.DOCUMENT_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      type={INPUT.DOCUMENT}\n    >\n      {isBrowser() && (\n        <StyledButton\n          href={props.src}\n          target='_blank'\n          rel='noreferrer'\n          style={{\n            ...documentDownload.style,\n          }}\n        >\n          {documentDownload.text || 'Download'}\n        </StyledButton>\n      )}\n      {props.children}\n    </Message>\n  )\n}\n\nDocument.serialize = serialize\n"],"file":"document.js"}