@botonic/react 0.21.6 → 0.21.7-alpha.0

package/lib/components/element.js

@@ -1,69 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Element = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _react2 = require("../util/react");
-
-var _templateObject;
-
-var ElementContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: ", "px;\n  margin-right: ", "px;\n  border-radius: 6px;\n  border: 1px solid ", ";\n  overflow: hidden;\n  justify-content: space-between;\n"])), _constants.WEBCHAT.DEFAULTS.ELEMENT_WIDTH, _constants.WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT, _constants.COLORS.SEASHELL_WHITE);
-
-var Element = function Element(props) {
-  var renderBrowser = function renderBrowser() {
-    return /*#__PURE__*/_react["default"].createElement(ElementContainer, null, props.children);
-  };
-
-  var renderNode = function renderNode() {
-    return /*#__PURE__*/_react["default"].createElement("element", null, props.children);
-  };
-
-  return (0, _react2.renderComponent)({
-    renderBrowser: renderBrowser,
-    renderNode: renderNode
-  });
-};
-
-exports.Element = Element;
-
-Element.serialize = function (elementProps) {
-  var element = Object.assign.apply(Object, [{}].concat((0, _toConsumableArray2["default"])(elementProps.children.filter(function (c) {
-    return c && c.type && c.type.name != 'Button';
-  }).map(function (c) {
-    return c.type.serialize && c.type.serialize(c.props);
-  })))); // When we are serializer buttons from backend, we are receiving the data
-  // as an array of buttons, so we have to keep robust with serve and deal with arrays
-
-  element.buttons = (0, _toConsumableArray2["default"])(elementProps.children.filter(function (c) {
-    if (c instanceof Array) return true;
-    return c && c.type && c.type.name == 'Button';
-  }).map(function (b) {
-    if (b instanceof Array) {
-      return b.map(function (bb) {
-        return bb && bb.type && bb.type.serialize && bb.type.serialize(bb.props).button;
-      });
-    }
-
-    return b && b.type && b.type.serialize && b.type.serialize(b.props).button;
-  })); // When we have the buttons from backend, we have all buttons inside an array on the first position
-  // of another array in element['buttons'] we want that element['buttons'] to be an array of buttons,
-  // not an array of another array of buttons
-
-  if (element.buttons[0] instanceof Array) element.buttons = element.buttons[0];
-  return element;
-};
-//# sourceMappingURL=element.js.map

package/lib/components/element.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/element.jsx"],"names":["ElementContainer","styled","div","WEBCHAT","DEFAULTS","ELEMENT_WIDTH","ELEMENT_MARGIN_RIGHT","COLORS","SEASHELL_WHITE","Element","props","renderBrowser","children","renderNode","serialize","elementProps","element","Object","assign","filter","c","type","name","map","buttons","Array","b","bb","button"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,gBAAgB,GAAGC,6BAAOC,GAAV,2RAGXC,mBAAQC,QAAR,CAAiBC,aAHN,EAIJF,mBAAQC,QAAR,CAAiBE,oBAJb,EAMAC,kBAAOC,cANP,CAAtB;;AAWO,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AAC9B,MAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,wBACpB,gCAAC,gBAAD,QAAmBD,KAAK,CAACE,QAAzB,CADoB;AAAA,GAAtB;;AAIA,MAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,wBAAM,iDAAUH,KAAK,CAACE,QAAhB,CAAN;AAAA,GAAnB;;AAEA,SAAO,6BAAgB;AAAED,IAAAA,aAAa,EAAbA,aAAF;AAAiBE,IAAAA,UAAU,EAAVA;AAAjB,GAAhB,CAAP;AACD,CARM;;;;AAUPJ,OAAO,CAACK,SAAR,GAAoB,UAAAC,YAAY,EAAI;AAClC,MAAMC,OAAO,GAAGC,MAAM,CAACC,MAAP,OAAAD,MAAM,GACpB,EADoB,6CAEjBF,YAAY,CAACH,QAAb,CACAO,MADA,CACO,UAAAC,CAAC;AAAA,WAAIA,CAAC,IAAIA,CAAC,CAACC,IAAP,IAAeD,CAAC,CAACC,IAAF,CAAOC,IAAP,IAAe,QAAlC;AAAA,GADR,EAEAC,GAFA,CAEI,UAAAH,CAAC;AAAA,WAAIA,CAAC,CAACC,IAAF,CAAOP,SAAP,IAAoBM,CAAC,CAACC,IAAF,CAAOP,SAAP,CAAiBM,CAAC,CAACV,KAAnB,CAAxB;AAAA,GAFL,CAFiB,GAAtB,CADkC,CAOlC;AACA;;AACAM,EAAAA,OAAO,CAACQ,OAAR,uCACKT,YAAY,CAACH,QAAb,CACAO,MADA,CACO,UAAAC,CAAC,EAAI;AACX,QAAIA,CAAC,YAAYK,KAAjB,EAAwB,OAAO,IAAP;AACxB,WAAOL,CAAC,IAAIA,CAAC,CAACC,IAAP,IAAeD,CAAC,CAACC,IAAF,CAAOC,IAAP,IAAe,QAArC;AACD,GAJA,EAKAC,GALA,CAKI,UAAAG,CAAC,EAAI;AACR,QAAIA,CAAC,YAAYD,KAAjB,EAAwB;AACtB,aAAOC,CAAC,CAACH,GAAF,CACL,UAAAI,EAAE;AAAA,eACAA,EAAE,IACFA,EAAE,CAACN,IADH,IAEAM,EAAE,CAACN,IAAH,CAAQP,SAFR,IAGAa,EAAE,CAACN,IAAH,CAAQP,SAAR,CAAkBa,EAAE,CAACjB,KAArB,EAA4BkB,MAJ5B;AAAA,OADG,CAAP;AAOD;;AACD,WACEF,CAAC,IAAIA,CAAC,CAACL,IAAP,IAAeK,CAAC,CAACL,IAAF,CAAOP,SAAtB,IAAmCY,CAAC,CAACL,IAAF,CAAOP,SAAP,CAAiBY,CAAC,CAAChB,KAAnB,EAA0BkB,MAD/D;AAGD,GAlBA,CADL,EATkC,CA8BlC;AACA;AACA;;AACA,MAAIZ,OAAO,CAACQ,OAAR,CAAgB,CAAhB,aAA8BC,KAAlC,EAAyCT,OAAO,CAACQ,OAAR,GAAkBR,OAAO,CAACQ,OAAR,CAAgB,CAAhB,CAAlB;AACzC,SAAOR,OAAP;AACD,CAnCD","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS, WEBCHAT } from '../constants'\nimport { renderComponent } from '../util/react'\n\nconst ElementContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: ${WEBCHAT.DEFAULTS.ELEMENT_WIDTH}px;\n  margin-right: ${WEBCHAT.DEFAULTS.ELEMENT_MARGIN_RIGHT}px;\n  border-radius: 6px;\n  border: 1px solid ${COLORS.SEASHELL_WHITE};\n  overflow: hidden;\n  justify-content: space-between;\n`\n\nexport const Element = props => {\n  const renderBrowser = () => (\n    <ElementContainer>{props.children}</ElementContainer>\n  )\n\n  const renderNode = () => <element>{props.children}</element>\n\n  return renderComponent({ renderBrowser, renderNode })\n}\n\nElement.serialize = elementProps => {\n  const element = Object.assign(\n    {},\n    ...elementProps.children\n      .filter(c => c && c.type && c.type.name != 'Button')\n      .map(c => c.type.serialize && c.type.serialize(c.props))\n  )\n  // When we are serializer buttons from backend, we are receiving the data\n  // as an array of buttons, so we have to keep robust with serve and deal with arrays\n  element.buttons = [\n    ...elementProps.children\n      .filter(c => {\n        if (c instanceof Array) return true\n        return c && c.type && c.type.name == 'Button'\n      })\n      .map(b => {\n        if (b instanceof Array) {\n          return b.map(\n            bb =>\n              bb &&\n              bb.type &&\n              bb.type.serialize &&\n              bb.type.serialize(bb.props).button\n          )\n        }\n        return (\n          b && b.type && b.type.serialize && b.type.serialize(b.props).button\n        )\n      }),\n  ]\n  // When we have the buttons from backend, we have all buttons inside an array on the first position\n  // of another array in element['buttons'] we want that element['buttons'] to be an array of buttons,\n  // not an array of another array of buttons\n  if (element.buttons[0] instanceof Array) element.buttons = element.buttons[0]\n  return element\n}\n"],"file":"element.js"}

package/lib/components/handoff.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.Handoff = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _contexts = require("../contexts");
-
-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; }
-
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: inherit;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 24px;\n"])));
-
-var TransferredContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: center;\n  white-space: normal;\n"])));
-
-var EndedContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: center;\n  white-space: normal;\n"])));
-
-var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-width: 60%;\n  padding: 12px 24px;\n  background-color: ", ";\n  border: none;\n  border-radius: 4px;\n  margin-top: 8px;\n  cursor: pointer;\n"])), _constants.COLORS.SOLID_WHITE);
-
-var Handoff = function Handoff(props) {
-  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
-      resolveCase = _useContext.resolveCase;
-
-  var _useState = (0, _react.useState)({
-    showContinue: true
-  }),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
-  var continueClick = function continueClick() {
-    setState({
-      showContinue: false
-    });
-    resolveCase();
-  };
-
-  var bgColor = state.showContinue ? _constants.COLORS.FRINGY_FLOWER_GREEN : _constants.COLORS.TASMAN_GRAY;
-  var fontColor = state.showContinue ? _constants.COLORS.APPLE_GREEN : _constants.COLORS.CACTUS_GREEN;
-  return /*#__PURE__*/_react["default"].createElement(Container, {
-    style: {
-      color: fontColor,
-      backgroundColor: bgColor
-    }
-  }, state.showContinue ? /*#__PURE__*/_react["default"].createElement(TransferredContainer, null, "Conversation transferred to a human agent...") : /*#__PURE__*/_react["default"].createElement(EndedContainer, null, "Human handoff ended"), state.showContinue && /*#__PURE__*/_react["default"].createElement(StyledButton, {
-    onClick: continueClick
-  }, "Continue"));
-};
-
-exports.Handoff = Handoff;
-//# sourceMappingURL=handoff.js.map

package/lib/components/handoff.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/handoff.jsx"],"names":["Container","styled","div","TransferredContainer","EndedContainer","StyledButton","button","COLORS","SOLID_WHITE","Handoff","props","WebchatContext","resolveCase","showContinue","state","setState","continueClick","bgColor","FRINGY_FLOWER_GREEN","TASMAN_GRAY","fontColor","APPLE_GREEN","CACTUS_GREEN","color","backgroundColor"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,6BAAOC,GAAV,oOAAf;;AASA,IAAMC,oBAAoB,GAAGF,6BAAOC,GAAV,yIAA1B;;AAKA,IAAME,cAAc,GAAGH,6BAAOC,GAAV,yIAApB;;AAKA,IAAMG,YAAY,GAAGJ,6BAAOK,MAAV,gPAGIC,kBAAOC,WAHX,CAAlB;;AAUO,IAAMC,OAAO,GAAG,SAAVA,OAAU,CAAAC,KAAK,EAAI;AAC9B,oBAAwB,uBAAWC,wBAAX,CAAxB;AAAA,MAAQC,WAAR,eAAQA,WAAR;;AACA,kBAA0B,qBAAS;AAAEC,IAAAA,YAAY,EAAE;AAAhB,GAAT,CAA1B;AAAA;AAAA,MAAOC,KAAP;AAAA,MAAcC,QAAd;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AAC1BD,IAAAA,QAAQ,CAAC;AAAEF,MAAAA,YAAY,EAAE;AAAhB,KAAD,CAAR;AACAD,IAAAA,WAAW;AACZ,GAHD;;AAKA,MAAMK,OAAO,GAAGH,KAAK,CAACD,YAAN,GACZN,kBAAOW,mBADK,GAEZX,kBAAOY,WAFX;AAGA,MAAMC,SAAS,GAAGN,KAAK,CAACD,YAAN,GACdN,kBAAOc,WADO,GAEdd,kBAAOe,YAFX;AAGA,sBACE,gCAAC,SAAD;AACE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEH,SADF;AAELI,MAAAA,eAAe,EAAEP;AAFZ;AADT,KAMGH,KAAK,CAACD,YAAN,gBACC,gCAAC,oBAAD,uDADD,gBAKC,gCAAC,cAAD,8BAXJ,EAaGC,KAAK,CAACD,YAAN,iBACC,gCAAC,YAAD;AAAc,IAAA,OAAO,EAAEG;AAAvB,gBAdJ,CADF;AAmBD,CAlCM","sourcesContent":["import React, { useContext, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\nimport { WebchatContext } from '../contexts'\n\nconst Container = styled.div`\n  display: flex;\n  font-family: inherit;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 24px;\n`\n\nconst TransferredContainer = styled.div`\n  text-align: center;\n  white-space: normal;\n`\n\nconst EndedContainer = styled.div`\n  text-align: center;\n  white-space: normal;\n`\n\nconst StyledButton = styled.button`\n  max-width: 60%;\n  padding: 12px 24px;\n  background-color: ${COLORS.SOLID_WHITE};\n  border: none;\n  border-radius: 4px;\n  margin-top: 8px;\n  cursor: pointer;\n`\n\nexport const Handoff = props => {\n  const { resolveCase } = useContext(WebchatContext)\n  const [state, setState] = useState({ showContinue: true })\n\n  const continueClick = () => {\n    setState({ showContinue: false })\n    resolveCase()\n  }\n\n  const bgColor = state.showContinue\n    ? COLORS.FRINGY_FLOWER_GREEN\n    : COLORS.TASMAN_GRAY\n  const fontColor = state.showContinue\n    ? COLORS.APPLE_GREEN\n    : COLORS.CACTUS_GREEN\n  return (\n    <Container\n      style={{\n        color: fontColor,\n        backgroundColor: bgColor,\n      }}\n    >\n      {state.showContinue ? (\n        <TransferredContainer>\n          Conversation transferred to a human agent...\n        </TransferredContainer>\n      ) : (\n        <EndedContainer>Human handoff ended</EndedContainer>\n      )}\n      {state.showContinue && (\n        <StyledButton onClick={continueClick}>Continue</StyledButton>\n      )}\n    </Container>\n  )\n}\n"],"file":"handoff.js"}

package/lib/components/image.js

@@ -1,91 +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.Image = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-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; }
-
-var StyledImage = _styledComponents["default"].img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 8px;\n  max-width: 150px;\n  max-height: 150px;\n  margin: -3px -6px;\n  cursor: ", ";\n"])), function (_ref) {
-  var hasPreviewer = _ref.hasPreviewer;
-  return hasPreviewer ? 'pointer' : 'auto';
-});
-
-var serialize = function serialize(imageProps) {
-  return {
-    image: imageProps.src
-  };
-};
-
-var Image = function Image(props) {
-  var content = props.children;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isPreviewerOpened = _useState2[0],
-      setIsPreviewerOpened = _useState2[1];
-
-  var openPreviewer = function openPreviewer() {
-    return setIsPreviewerOpened(true);
-  };
-
-  var closePreviewer = function closePreviewer() {
-    return setIsPreviewerOpened(false);
-  };
-
-  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
-      getThemeProperty = _useContext.getThemeProperty;
-
-  var ImagePreviewer = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer, null);
-
-  if ((0, _core.isBrowser)()) {
-    content = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledImage, {
-      src: props.src,
-      onClick: openPreviewer,
-      hasPreviewer: Boolean(ImagePreviewer)
-    }), ImagePreviewer && /*#__PURE__*/_react["default"].createElement(ImagePreviewer, {
-      src: props.src,
-      isPreviewerOpened: isPreviewerOpened,
-      openPreviewer: openPreviewer,
-      closePreviewer: closePreviewer
-    }));
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(_message.Message, (0, _extends2["default"])({
-    role: _constants.ROLES.IMAGE_MESSAGE,
-    json: serialize(props)
-  }, props, {
-    type: _core.INPUT.IMAGE
-  }), content);
-};
-
-exports.Image = Image;
-Image.serialize = serialize;
-//# sourceMappingURL=image.js.map

package/lib/components/image.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/image.jsx"],"names":["StyledImage","styled","img","hasPreviewer","serialize","imageProps","image","src","Image","props","content","children","isPreviewerOpened","setIsPreviewerOpened","openPreviewer","closePreviewer","WebchatContext","getThemeProperty","ImagePreviewer","WEBCHAT","CUSTOM_PROPERTIES","imagePreviewer","Boolean","ROLES","IMAGE_MESSAGE","INPUT","IMAGE"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,WAAW,GAAGC,6BAAOC,GAAV,kMAKL;AAAA,MAAGC,YAAH,QAAGA,YAAH;AAAA,SAAuBA,YAAY,GAAG,SAAH,GAAe,MAAlD;AAAA,CALK,CAAjB;;AAQA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,UAAU,EAAI;AAC9B,SAAO;AAAEC,IAAAA,KAAK,EAAED,UAAU,CAACE;AAApB,GAAP;AACD,CAFD;;AAIO,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK,EAAI;AAC5B,MAAIC,OAAO,GAAGD,KAAK,CAACE,QAApB;;AAEA,kBAAkD,qBAAS,KAAT,CAAlD;AAAA;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB;AAAA,WAAMD,oBAAoB,CAAC,IAAD,CAA1B;AAAA,GAAtB;;AACA,MAAME,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAMF,oBAAoB,CAAC,KAAD,CAA1B;AAAA,GAAvB;;AAEA,oBAA6B,uBAAWG,wBAAX,CAA7B;AAAA,MAAQC,gBAAR,eAAQA,gBAAR;;AACA,MAAMC,cAAc,GAAGD,gBAAgB,CACrCE,mBAAQC,iBAAR,CAA0BC,cADW,EAErC,IAFqC,CAAvC;;AAIA,MAAI,sBAAJ,EAAiB;AACfX,IAAAA,OAAO,gBACL,+EACE,gCAAC,WAAD;AACE,MAAA,GAAG,EAAED,KAAK,CAACF,GADb;AAEE,MAAA,OAAO,EAAEO,aAFX;AAGE,MAAA,YAAY,EAAEQ,OAAO,CAACJ,cAAD;AAHvB,MADF,EAMGA,cAAc,iBACb,gCAAC,cAAD;AACE,MAAA,GAAG,EAAET,KAAK,CAACF,GADb;AAEE,MAAA,iBAAiB,EAAEK,iBAFrB;AAGE,MAAA,aAAa,EAAEE,aAHjB;AAIE,MAAA,cAAc,EAAEC;AAJlB,MAPJ,CADF;AAiBD;;AACD,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAEQ,iBAAMC,aADd;AAEE,IAAA,IAAI,EAAEpB,SAAS,CAACK,KAAD;AAFjB,KAGMA,KAHN;AAIE,IAAA,IAAI,EAAEgB,YAAMC;AAJd,MAMGhB,OANH,CADF;AAUD,CAzCM;;;AA2CPF,KAAK,CAACJ,SAAN,GAAkBA,SAAlB","sourcesContent":["import { INPUT, isBrowser } from '@botonic/core'\nimport React, { useContext, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { Message } from './message'\n\nconst StyledImage = styled.img`\n  border-radius: 8px;\n  max-width: 150px;\n  max-height: 150px;\n  margin: -3px -6px;\n  cursor: ${({ hasPreviewer }) => (hasPreviewer ? 'pointer' : 'auto')};\n`\n\nconst serialize = imageProps => {\n  return { image: imageProps.src }\n}\n\nexport const Image = props => {\n  let content = props.children\n\n  const [isPreviewerOpened, setIsPreviewerOpened] = useState(false)\n  const openPreviewer = () => setIsPreviewerOpened(true)\n  const closePreviewer = () => setIsPreviewerOpened(false)\n\n  const { getThemeProperty } = useContext(WebchatContext)\n  const ImagePreviewer = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.imagePreviewer,\n    null\n  )\n  if (isBrowser()) {\n    content = (\n      <>\n        <StyledImage\n          src={props.src}\n          onClick={openPreviewer}\n          hasPreviewer={Boolean(ImagePreviewer)}\n        />\n        {ImagePreviewer && (\n          <ImagePreviewer\n            src={props.src}\n            isPreviewerOpened={isPreviewerOpened}\n            openPreviewer={openPreviewer}\n            closePreviewer={closePreviewer}\n          />\n        )}\n      </>\n    )\n  }\n  return (\n    <Message\n      role={ROLES.IMAGE_MESSAGE}\n      json={serialize(props)}\n      {...props}\n      type={INPUT.IMAGE}\n    >\n      {content}\n    </Message>\n  )\n}\n\nImage.serialize = serialize\n"],"file":"image.js"}

package/lib/components/index.d.ts

@@ -1,228 +0,0 @@
-import * as React from 'react'
-import { ErrorInfo } from 'react'
-
-import { CoverComponentProps } from '../webchat'
-
-export type MessageType =
-  | 'audio'
-  | 'buttonmessage'
-  | 'carousel'
-  | 'custom'
-  | 'document'
-  | 'image'
-  | 'location'
-  | 'text'
-  | 'video'
-
-export interface MessageProps {
-  blob?: boolean
-  children: React.ReactNode
-  delay?: number
-  enabletimestamps?: boolean
-  from?: 'user' | 'bot'
-  json?: Record<string, unknown>
-  style?: Record<string, unknown>
-  type?: MessageType
-  typing?: number
-}
-
-export const Audio: React.FunctionComponent<MessageProps>
-export const Document: React.FunctionComponent<MessageProps>
-
-export const Message: React.FunctionComponent<MessageProps>
-export type Message = React.FunctionComponent<MessageProps>
-export const Video: React.FunctionComponent<MessageProps>
-
-export interface TextProps extends MessageProps {
-  // converts markdown syntax to HTML
-  markdown?: boolean
-}
-export const Text: React.FunctionComponent<TextProps>
-
-export interface Webview {
-  name: string
-}
-
-export interface ButtonProps {
-  params?: any
-  path?: string
-  payload?: string
-  target?: string
-  url?: string
-  webview?: Webview
-  onClick?: () => void
-  autodisable?: boolean
-  disabled?: boolean
-  disabledstyle?: boolean
-}
-
-export const Button: React.FunctionComponent<ButtonProps>
-
-export interface ReplyProps {
-  path?: string
-  payload?: string
-  children: string
-}
-export const Reply: React.FunctionComponent<ReplyProps>
-export type Reply = React.FunctionComponent<ReplyProps>
-
-export interface PicProps {
-  src: string
-}
-
-export const Carousel: React.FunctionComponent<MessageProps>
-export const Image: React.FunctionComponent<ImageProps>
-export const Pic: React.FunctionComponent<PicProps>
-export type ImageProps = PicProps
-
-export interface TitleProps {
-  children: React.ReactNode
-  style: string
-}
-
-export const Element: React.FunctionComponent<MessageProps>
-export const Subtitle: React.FunctionComponent<SubtitleProps>
-export const Title: React.FunctionComponent<TitleProps>
-export type SubtitleProps = TitleProps
-
-type CustomProp = { custom?: React.ComponentType }
-type EnableProp = { enable?: boolean }
-type ImageProp = { image?: string } // https URL or imported Image asset
-type PersistentMenuCloseOption = { closeLabel: string }
-type PersistentMenuOption = { label: string } & ButtonProps
-type StyleProp = { style?: any }
-
-export type PersistentMenuTheme = (
-  | PersistentMenuCloseOption
-  | PersistentMenuOption
-)[]
-
-export interface PersistentMenuProps {
-  onClick: () => void
-  options: any
-}
-
-export type BlockInputOption = {
-  preprocess?: (message: string) => string
-  match: RegExp[]
-  message: string
-}
-
-export interface BlobProps {
-  blobTick?: boolean
-  blobTickStyle?: any
-  blobWidth?: string
-  imageStyle?: any
-}
-
-export interface ScrollbarProps {
-  autoHide?: boolean
-  thumb?: {
-    bgcolor?: string
-    border?: string
-    color?: string
-    opacity?: string
-  }
-  track?: {
-    bgcolor?: string
-    border?: string
-    color?: string
-  }
-}
-
-export interface ThemeProps extends StyleProp {
-  mobileBreakpoint?: number
-  mobileStyle?: any
-  webview?: StyleProp & { header?: StyleProp }
-  animations?: EnableProp
-  intro?: StyleProp & ImageProp & CustomProp
-  brand?: { color?: string } & ImageProp
-  header?: { title?: string; subtitle?: string } & ImageProp &
-    StyleProp &
-    CustomProp
-  message?: {
-    bot?: BlobProps & ImageProp & StyleProp
-    user?: BlobProps & StyleProp
-    customTypes?: React.ComponentType[]
-  } & StyleProp & {
-      timestamps?: {
-        enable?: boolean
-        format(): string
-      } & StyleProp
-    }
-  button?: {
-    autodisable?: boolean
-    disabledstyle?: any
-    hoverBackground?: string
-    hoverTextColor?: string
-    messageType?: 'text' | 'payload'
-  } & StyleProp &
-    CustomProp
-  replies?: {
-    align?: 'left' | 'center' | 'right'
-    wrap?: 'wrap' | 'nowrap'
-  }
-  carousel?: {
-    arrow?: {
-      left: CustomProp
-      right: CustomProp
-    }
-    enableArrows?: boolean
-  }
-  reply?: StyleProp & CustomProp
-  triggerButton?: ImageProp & StyleProp & CustomProp
-  markdownStyle?: string // string template with css styles
-  scrollbar?: ScrollbarProps & EnableProp
-  userInput?: {
-    attachments?: EnableProp & CustomProp
-    blockInputs?: BlockInputOption[]
-    box?: { placeholder: string } & StyleProp
-    emojiPicker?: EnableProp & CustomProp
-    menu?: { darkBackground?: boolean } & {
-      custom?: React.ComponentType<PersistentMenuProps>
-    }
-    menuButton?: CustomProp
-    persistentMenu?: PersistentMenuTheme
-    sendButton?: EnableProp & CustomProp
-  } & EnableProp &
-    StyleProp
-}
-
-export interface CoverComponentOptions {
-  component: React.ComponentType<CoverComponentProps>
-  props?: any
-}
-
-export interface WebchatSettingsProps {
-  blockInputs?: BlockInputOption[]
-  enableAnimations?: boolean
-  enableAttachments?: boolean
-  enableEmojiPicker?: boolean
-  enableUserInput?: boolean
-  persistentMenu?: PersistentMenuTheme
-  theme?: ThemeProps
-}
-export const WebchatSettings: React.FunctionComponent<WebchatSettingsProps>
-
-export type WrappedComponent<Props> = React.FunctionComponent<Props> & {
-  customTypeName: string
-}
-
-export class ErrorBoundary<Props> extends React.Component<Props> {
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void
-}
-
-export function createErrorBoundary<Props>(_?: {
-  errorComponent: React.ComponentType
-}): ErrorBoundary<Props>
-
-export function customMessage<Props>(_: {
-  name: string
-  component: React.ComponentType<Props>
-  defaultProps?: Record<string, unknown>
-  errorBoundary?: ErrorBoundary<Props>
-}): WrappedComponent<Props>
-
-export function getDisplayName(component: React.ComponentType): string
-
-export * from './multichannel'

package/lib/components/index.js

@@ -1,193 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  Audio: true,
-  Button: true,
-  Carousel: true,
-  customMessage: true,
-  Document: true,
-  Element: true,
-  Image: true,
-  Location: true,
-  MessageTemplate: true,
-  Pic: true,
-  Raw: true,
-  Reply: true,
-  ShareButton: true,
-  Subtitle: true,
-  Text: true,
-  Title: true,
-  Video: true,
-  WebchatSettings: true,
-  WhatsappTemplate: true
-};
-Object.defineProperty(exports, "Audio", {
-  enumerable: true,
-  get: function get() {
-    return _audio.Audio;
-  }
-});
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function get() {
-    return _button.Button;
-  }
-});
-Object.defineProperty(exports, "Carousel", {
-  enumerable: true,
-  get: function get() {
-    return _carousel.Carousel;
-  }
-});
-Object.defineProperty(exports, "Document", {
-  enumerable: true,
-  get: function get() {
-    return _document.Document;
-  }
-});
-Object.defineProperty(exports, "Element", {
-  enumerable: true,
-  get: function get() {
-    return _element.Element;
-  }
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function get() {
-    return _image.Image;
-  }
-});
-Object.defineProperty(exports, "Location", {
-  enumerable: true,
-  get: function get() {
-    return _location.Location;
-  }
-});
-Object.defineProperty(exports, "MessageTemplate", {
-  enumerable: true,
-  get: function get() {
-    return _messageTemplate.MessageTemplate;
-  }
-});
-Object.defineProperty(exports, "Pic", {
-  enumerable: true,
-  get: function get() {
-    return _pic.Pic;
-  }
-});
-Object.defineProperty(exports, "Raw", {
-  enumerable: true,
-  get: function get() {
-    return _raw.Raw;
-  }
-});
-Object.defineProperty(exports, "Reply", {
-  enumerable: true,
-  get: function get() {
-    return _reply.Reply;
-  }
-});
-Object.defineProperty(exports, "ShareButton", {
-  enumerable: true,
-  get: function get() {
-    return _shareButton.ShareButton;
-  }
-});
-Object.defineProperty(exports, "Subtitle", {
-  enumerable: true,
-  get: function get() {
-    return _subtitle.Subtitle;
-  }
-});
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function get() {
-    return _text.Text;
-  }
-});
-Object.defineProperty(exports, "Title", {
-  enumerable: true,
-  get: function get() {
-    return _title.Title;
-  }
-});
-Object.defineProperty(exports, "Video", {
-  enumerable: true,
-  get: function get() {
-    return _video.Video;
-  }
-});
-Object.defineProperty(exports, "WebchatSettings", {
-  enumerable: true,
-  get: function get() {
-    return _webchatSettings.WebchatSettings;
-  }
-});
-Object.defineProperty(exports, "WhatsappTemplate", {
-  enumerable: true,
-  get: function get() {
-    return _whatsappTemplate.WhatsappTemplate;
-  }
-});
-Object.defineProperty(exports, "customMessage", {
-  enumerable: true,
-  get: function get() {
-    return _customMessage.customMessage;
-  }
-});
-
-var _audio = require("./audio");
-
-var _button = require("./button");
-
-var _carousel = require("./carousel");
-
-var _customMessage = require("./custom-message");
-
-var _document = require("./document");
-
-var _element = require("./element");
-
-var _image = require("./image");
-
-var _location = require("./location");
-
-var _messageTemplate = require("./message-template");
-
-var _multichannel = require("./multichannel");
-
-Object.keys(_multichannel).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _multichannel[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _multichannel[key];
-    }
-  });
-});
-
-var _pic = require("./pic");
-
-var _raw = require("./raw");
-
-var _reply = require("./reply");
-
-var _shareButton = require("./share-button");
-
-var _subtitle = require("./subtitle");
-
-var _text = require("./text");
-
-var _title = require("./title");
-
-var _video = require("./video");
-
-var _webchatSettings = require("./webchat-settings");
-
-var _whatsappTemplate = require("./whatsapp-template");
-//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { Audio } from './audio'\nexport { Button } from './button'\nexport { Carousel } from './carousel'\nexport { customMessage } from './custom-message'\nexport { Document } from './document'\nexport { Element } from './element'\nexport { Image } from './image'\nexport { Location } from './location'\nexport { MessageTemplate } from './message-template'\nexport * from './multichannel'\nexport { Pic } from './pic'\nexport { Raw } from './raw'\nexport { Reply } from './reply'\nexport { ShareButton } from './share-button'\nexport { Subtitle } from './subtitle'\nexport { Text } from './text'\nexport { Title } from './title'\nexport { Video } from './video'\nexport { WebchatSettings } from './webchat-settings'\nexport { WhatsappTemplate } from './whatsapp-template'\n"],"file":"index.js"}