@botonic/react 0.20.1-alpha.1 → 0.20.1

package/lib/webchat/index.d.ts

@@ -0,0 +1,62 @@
+import * as core from '@botonic/core'
+import * as React from 'react'
+import { RefObject } from 'react'
+
+import { Reply, Webview } from '../components/index'
+import { Message, WebchatApp, WebchatArgs } from '../index'
+
+export interface WebchatStateTheme {
+  headerTitle: string
+  brandColor: string
+  brandImage: string
+  triggerButtonImage: undefined
+  textPlaceholder: string
+  style: {
+    fontFamily: string
+  }
+}
+
+export interface WebchatState {
+  width: number
+  height: number
+  messagesJSON: any[]
+  messagesComponents: Message[]
+  replies: Reply[]
+  latestInput: Partial<core.Input>
+  typing: boolean
+  webview: Webview | null
+  webviewParams: null
+  session: Partial<core.Session>
+  lastRoutePath: string | null
+  handoff: boolean
+  theme: WebchatStateTheme
+  themeUpdates: Partial<WebchatStateTheme>
+  error: { message?: string }
+  devSettings: { keepSessionOnReload?: boolean; showSessionView?: boolean }
+  isWebchatOpen: boolean
+  isEmojiPickerOpen: boolean
+  isPersistentMenuOpen: boolean
+  isCoverComponentOpen: boolean
+  lastMessageUpdate: string
+  currentAttachment: File | undefined
+}
+
+export interface WebchatProps extends WebchatArgs {
+  ref: RefObject<any>
+  onConnectionRegained?: () => Promise<void>
+}
+export const WebChat: React.ForwardRefExoticComponent<WebchatProps>
+
+export interface WebchatDevProps extends WebchatProps {
+  initialDevSettings?: {
+    keepSessionOnReload?: boolean
+    showSessionView?: boolean
+  }
+}
+export const WebChatDev: React.ForwardRefExoticComponent<WebchatDevProps>
+
+export function getBotonicApp(): WebchatApp
+
+export interface CoverComponentProps {
+  closeComponent: () => void
+}

package/lib/webchat/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Webchat", {
+  enumerable: true,
+  get: function get() {
+    return _webchat.Webchat;
+  }
+});
+Object.defineProperty(exports, "WebchatDev", {
+  enumerable: true,
+  get: function get() {
+    return _webchatDev.WebchatDev;
+  }
+});
+exports.getBotonicApp = getBotonicApp;
+
+var _webchat = require("./webchat");
+
+var _webchatDev = require("./webchat-dev");
+
+/**
+ * @returns {WebChatApp}
+ */
+function getBotonicApp() {
+  // Botonic is exported from your bot
+  // eslint-disable-next-line no-undef
+  return Botonic;
+}
+//# sourceMappingURL=index.js.map

package/lib/webchat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/index.js"],"names":["getBotonicApp","Botonic"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;AACA;AACA;AACO,SAASA,aAAT,GAAyB;AAC9B;AACA;AACA,SAAOC,OAAP;AACD","sourcesContent":["export { Webchat } from './webchat'\nexport { WebchatDev } from './webchat-dev'\n\n/**\n * @returns {WebChatApp}\n */\nexport function getBotonicApp() {\n  // Botonic is exported from your bot\n  // eslint-disable-next-line no-undef\n  return Botonic\n}\n"],"file":"index.js"}

package/lib/webchat/message-list.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebchatMessageList = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Fade = _interopRequireDefault(require("react-reveal/Fade"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _contexts = require("../contexts");
+
+var _environment = require("../util/environment");
+
+var _react2 = require("../util/react");
+
+var _styledScrollbar = require("./components/styled-scrollbar");
+
+var _templateObject, _templateObject2;
+
+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 StyledMessages = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  overflow-x: hidden;\n  flex-direction: column;\n  flex: none;\n  white-space: pre;\n  word-wrap: break-word;\n"])));
+
+var DefaultIntroImage = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 50%;\n  width: 100%;\n"])));
+
+var WebchatMessageList = function WebchatMessageList(props) {
+  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
+      webchatState = _useContext.webchatState,
+      getThemeProperty = _useContext.getThemeProperty;
+
+  var animationsEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
+  var CustomIntro = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customIntro);
+  var introImage = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.introImage);
+  var introStyle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.introStyle);
+
+  var scrollbarOptions = _objectSpread(_objectSpread({}, {
+    enable: true,
+    autoHide: true
+  }), getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+
+  var DefaultIntro = introImage && /*#__PURE__*/_react["default"].createElement(DefaultIntroImage, {
+    style: _objectSpread({}, introStyle),
+    src: (0, _environment.resolveImage)(introImage)
+  });
+
+  return /*#__PURE__*/_react["default"].createElement(_styledScrollbar.StyledScrollbar, {
+    role: _constants.ROLES.MESSAGE_LIST // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
+    ,
+    id: "botonic-scrollable-content",
+    scrollbar: scrollbarOptions,
+    autoHide: scrollbarOptions.autoHide,
+    ismessagescontainer: "true",
+    style: _objectSpread({}, props.style)
+  }, (CustomIntro || DefaultIntro) && /*#__PURE__*/_react["default"].createElement(_react2.ConditionalWrapper, {
+    condition: animationsEnabled,
+    wrapper: function wrapper(children) {
+      return /*#__PURE__*/_react["default"].createElement(_Fade["default"], null, children);
+    }
+  }, CustomIntro ? /*#__PURE__*/_react["default"].createElement(CustomIntro, null) : DefaultIntro), webchatState.messagesComponents.map(function (e, i) {
+    return /*#__PURE__*/_react["default"].createElement(StyledMessages, {
+      role: _constants.ROLES.MESSAGE,
+      key: i
+    }, e);
+  }), props.children);
+};
+
+exports.WebchatMessageList = WebchatMessageList;
+//# sourceMappingURL=message-list.js.map

package/lib/webchat/message-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/message-list.jsx"],"names":["StyledMessages","styled","div","DefaultIntroImage","img","WebchatMessageList","props","WebchatContext","webchatState","getThemeProperty","animationsEnabled","WEBCHAT","CUSTOM_PROPERTIES","enableAnimations","CustomIntro","customIntro","introImage","introStyle","scrollbarOptions","enable","autoHide","scrollbar","DefaultIntro","ROLES","MESSAGE_LIST","style","children","messagesComponents","map","e","i","MESSAGE"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,6BAAOC,GAAV,0NAApB;;AASA,IAAMC,iBAAiB,GAAGF,6BAAOG,GAAV,8HAAvB;;AAKO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAAAC,KAAK,EAAI;AACzC,oBAA2C,uBAAWC,wBAAX,CAA3C;AAAA,MAAQC,YAAR,eAAQA,YAAR;AAAA,MAAsBC,gBAAtB,eAAsBA,gBAAtB;;AACA,MAAMC,iBAAiB,GAAGD,gBAAgB,CACxCE,mBAAQC,iBAAR,CAA0BC,gBADc,EAExC,IAFwC,CAA1C;AAIA,MAAMC,WAAW,GAAGL,gBAAgB,CAACE,mBAAQC,iBAAR,CAA0BG,WAA3B,CAApC;AACA,MAAMC,UAAU,GAAGP,gBAAgB,CAACE,mBAAQC,iBAAR,CAA0BI,UAA3B,CAAnC;AACA,MAAMC,UAAU,GAAGR,gBAAgB,CAACE,mBAAQC,iBAAR,CAA0BK,UAA3B,CAAnC;;AAEA,MAAMC,gBAAgB,mCACjB;AAAEC,IAAAA,MAAM,EAAE,IAAV;AAAgBC,IAAAA,QAAQ,EAAE;AAA1B,GADiB,GAEjBX,gBAAgB,CAACE,mBAAQC,iBAAR,CAA0BS,SAA3B,CAFC,CAAtB;;AAKA,MAAMC,YAAY,GAAGN,UAAU,iBAC7B,gCAAC,iBAAD;AACE,IAAA,KAAK,oBACAC,UADA,CADP;AAIE,IAAA,GAAG,EAAE,+BAAaD,UAAb;AAJP,IADF;;AASA,sBACE,gCAAC,gCAAD;AACE,IAAA,IAAI,EAAEO,iBAAMC,YADd,CAEE;AAFF;AAGE,IAAA,EAAE,EAAC,4BAHL;AAIE,IAAA,SAAS,EAAEN,gBAJb;AAKE,IAAA,QAAQ,EAAEA,gBAAgB,CAACE,QAL7B;AAME,IAAA,mBAAmB,EAAC,MANtB;AAOE,IAAA,KAAK,oBACAd,KAAK,CAACmB,KADN;AAPP,KAWG,CAACX,WAAW,IAAIQ,YAAhB,kBACC,gCAAC,0BAAD;AACE,IAAA,SAAS,EAAEZ,iBADb;AAEE,IAAA,OAAO,EAAE,iBAAAgB,QAAQ;AAAA,0BAAI,gCAAC,gBAAD,QAAOA,QAAP,CAAJ;AAAA;AAFnB,KAIGZ,WAAW,gBAAG,gCAAC,WAAD,OAAH,GAAqBQ,YAJnC,CAZJ,EAmBGd,YAAY,CAACmB,kBAAb,CAAgCC,GAAhC,CAAoC,UAACC,CAAD,EAAIC,CAAJ;AAAA,wBACnC,gCAAC,cAAD;AAAgB,MAAA,IAAI,EAAEP,iBAAMQ,OAA5B;AAAqC,MAAA,GAAG,EAAED;AAA1C,OACGD,CADH,CADmC;AAAA,GAApC,CAnBH,EAwBGvB,KAAK,CAACoB,QAxBT,CADF;AA4BD,CApDM","sourcesContent":["import React, { useContext } from 'react'\nimport Fade from 'react-reveal/Fade'\nimport styled from 'styled-components'\n\nimport { ROLES, WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { resolveImage } from '../util/environment'\nimport { ConditionalWrapper } from '../util/react'\nimport { StyledScrollbar } from './components/styled-scrollbar'\n\nconst StyledMessages = styled.div`\n  display: flex;\n  overflow-x: hidden;\n  flex-direction: column;\n  flex: none;\n  white-space: pre;\n  word-wrap: break-word;\n`\n\nconst DefaultIntroImage = styled.img`\n  max-height: 50%;\n  width: 100%;\n`\n\nexport const WebchatMessageList = props => {\n  const { webchatState, getThemeProperty } = useContext(WebchatContext)\n  const animationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,\n    true\n  )\n  const CustomIntro = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customIntro)\n  const introImage = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introImage)\n  const introStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.introStyle)\n\n  const scrollbarOptions = {\n    ...{ enable: true, autoHide: true },\n    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),\n  }\n\n  const DefaultIntro = introImage && (\n    <DefaultIntroImage\n      style={{\n        ...introStyle,\n      }}\n      src={resolveImage(introImage)}\n    />\n  )\n\n  return (\n    <StyledScrollbar\n      role={ROLES.MESSAGE_LIST}\n      // TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`\n      id='botonic-scrollable-content'\n      scrollbar={scrollbarOptions}\n      autoHide={scrollbarOptions.autoHide}\n      ismessagescontainer='true'\n      style={{\n        ...props.style,\n      }}\n    >\n      {(CustomIntro || DefaultIntro) && (\n        <ConditionalWrapper\n          condition={animationsEnabled}\n          wrapper={children => <Fade>{children}</Fade>}\n        >\n          {CustomIntro ? <CustomIntro /> : DefaultIntro}\n        </ConditionalWrapper>\n      )}\n      {webchatState.messagesComponents.map((e, i) => (\n        <StyledMessages role={ROLES.MESSAGE} key={i}>\n          {e}\n        </StyledMessages>\n      ))}\n      {props.children}\n    </StyledScrollbar>\n  )\n}\n"],"file":"message-list.js"}

package/lib/webchat/messages-reducer.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messagesReducer = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _actions = require("./actions");
+
+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 messagesReducer = function messagesReducer(state, action) {
+  switch (action.type) {
+    case _actions.ADD_MESSAGE:
+      return addMessageReducer(state, action);
+
+    case _actions.ADD_MESSAGE_COMPONENT:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        messagesComponents: [].concat((0, _toConsumableArray2["default"])(state.messagesComponents || []), [action.payload])
+      });
+
+    case _actions.UPDATE_MESSAGE:
+      return updateMessageReducer(state, action);
+
+    case _actions.UPDATE_REPLIES:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        replies: action.payload
+      });
+
+    case _actions.CLEAR_MESSAGES:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        messagesJSON: [],
+        messagesComponents: []
+      });
+
+    case _actions.UPDATE_LAST_MESSAGE_DATE:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        lastMessageUpdate: action.payload
+      });
+
+    default:
+      throw new Error();
+  }
+};
+
+exports.messagesReducer = messagesReducer;
+
+function updateMessageReducer(state, action) {
+  var msgIndex = state.messagesJSON.map(function (m) {
+    return m.id;
+  }).indexOf(action.payload.id);
+
+  if (msgIndex > -1) {
+    var msgComponent = state.messagesComponents[msgIndex];
+    var updatedMessageComponents = {};
+
+    if (msgComponent) {
+      var updatedMsgComponent = _objectSpread(_objectSpread({}, msgComponent), {
+        props: _objectSpread(_objectSpread({}, msgComponent.props), {}, {
+          ack: action.payload.ack
+        })
+      });
+
+      updatedMessageComponents = {
+        messagesComponents: [].concat((0, _toConsumableArray2["default"])(state.messagesComponents.slice(0, msgIndex)), [_objectSpread({}, updatedMsgComponent)], (0, _toConsumableArray2["default"])(state.messagesComponents.slice(msgIndex + 1)))
+      };
+    }
+
+    return _objectSpread(_objectSpread({}, state), {}, {
+      messagesJSON: [].concat((0, _toConsumableArray2["default"])(state.messagesJSON.slice(0, msgIndex)), [_objectSpread({}, action.payload)], (0, _toConsumableArray2["default"])(state.messagesJSON.slice(msgIndex + 1)))
+    }, updatedMessageComponents);
+  }
+
+  return state;
+}
+
+function addMessageReducer(state, action) {
+  if (state.messagesJSON && state.messagesJSON.find(function (m) {
+    return m.id === action.payload.id;
+  })) return state;
+  return _objectSpread(_objectSpread({}, state), {}, {
+    messagesJSON: [].concat((0, _toConsumableArray2["default"])(state.messagesJSON || []), [action.payload])
+  });
+}
+//# sourceMappingURL=messages-reducer.js.map

package/lib/webchat/messages-reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/messages-reducer.js"],"names":["messagesReducer","state","action","type","ADD_MESSAGE","addMessageReducer","ADD_MESSAGE_COMPONENT","messagesComponents","payload","UPDATE_MESSAGE","updateMessageReducer","UPDATE_REPLIES","replies","CLEAR_MESSAGES","messagesJSON","UPDATE_LAST_MESSAGE_DATE","lastMessageUpdate","Error","msgIndex","map","m","id","indexOf","msgComponent","updatedMessageComponents","updatedMsgComponent","props","ack","slice","find"],"mappings":";;;;;;;;;;;;;AAAA;;;;;;AASO,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAQC,MAAR,EAAmB;AAChD,UAAQA,MAAM,CAACC,IAAf;AACE,SAAKC,oBAAL;AACE,aAAOC,iBAAiB,CAACJ,KAAD,EAAQC,MAAR,CAAxB;;AACF,SAAKI,8BAAL;AACE,6CACKL,KADL;AAEEM,QAAAA,kBAAkB,gDACZN,KAAK,CAACM,kBAAN,IAA4B,EADhB,IAEhBL,MAAM,CAACM,OAFS;AAFpB;;AAOF,SAAKC,uBAAL;AACE,aAAOC,oBAAoB,CAACT,KAAD,EAAQC,MAAR,CAA3B;;AACF,SAAKS,uBAAL;AACE,6CAAYV,KAAZ;AAAmBW,QAAAA,OAAO,EAAEV,MAAM,CAACM;AAAnC;;AACF,SAAKK,uBAAL;AACE,6CACKZ,KADL;AAEEa,QAAAA,YAAY,EAAE,EAFhB;AAGEP,QAAAA,kBAAkB,EAAE;AAHtB;;AAKF,SAAKQ,iCAAL;AACE,6CACKd,KADL;AAEEe,QAAAA,iBAAiB,EAAEd,MAAM,CAACM;AAF5B;;AAIF;AACE,YAAM,IAAIS,KAAJ,EAAN;AA3BJ;AA6BD,CA9BM;;;;AAgCP,SAASP,oBAAT,CAA8BT,KAA9B,EAAqCC,MAArC,EAA6C;AAC3C,MAAMgB,QAAQ,GAAGjB,KAAK,CAACa,YAAN,CAAmBK,GAAnB,CAAuB,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACC,EAAN;AAAA,GAAxB,EAAkCC,OAAlC,CAA0CpB,MAAM,CAACM,OAAP,CAAea,EAAzD,CAAjB;;AACA,MAAIH,QAAQ,GAAG,CAAC,CAAhB,EAAmB;AACjB,QAAMK,YAAY,GAAGtB,KAAK,CAACM,kBAAN,CAAyBW,QAAzB,CAArB;AACA,QAAIM,wBAAwB,GAAG,EAA/B;;AACA,QAAID,YAAJ,EAAkB;AAChB,UAAME,mBAAmB,mCACpBF,YADoB,GAEpB;AACDG,QAAAA,KAAK,kCAAOH,YAAY,CAACG,KAApB;AAA2BC,UAAAA,GAAG,EAAEzB,MAAM,CAACM,OAAP,CAAemB;AAA/C;AADJ,OAFoB,CAAzB;;AAMAH,MAAAA,wBAAwB,GAAG;AACzBjB,QAAAA,kBAAkB,gDACbN,KAAK,CAACM,kBAAN,CAAyBqB,KAAzB,CAA+B,CAA/B,EAAkCV,QAAlC,CADa,sBAEXO,mBAFW,wCAGbxB,KAAK,CAACM,kBAAN,CAAyBqB,KAAzB,CAA+BV,QAAQ,GAAG,CAA1C,CAHa;AADO,OAA3B;AAOD;;AACD,2CACKjB,KADL;AAEEa,MAAAA,YAAY,gDACPb,KAAK,CAACa,YAAN,CAAmBc,KAAnB,CAAyB,CAAzB,EAA4BV,QAA5B,CADO,sBAELhB,MAAM,CAACM,OAFF,wCAGPP,KAAK,CAACa,YAAN,CAAmBc,KAAnB,CAAyBV,QAAQ,GAAG,CAApC,CAHO;AAFd,OAOKM,wBAPL;AASD;;AAED,SAAOvB,KAAP;AACD;;AAED,SAASI,iBAAT,CAA2BJ,KAA3B,EAAkCC,MAAlC,EAA0C;AACxC,MACED,KAAK,CAACa,YAAN,IACAb,KAAK,CAACa,YAAN,CAAmBe,IAAnB,CAAwB,UAAAT,CAAC;AAAA,WAAIA,CAAC,CAACC,EAAF,KAASnB,MAAM,CAACM,OAAP,CAAea,EAA5B;AAAA,GAAzB,CAFF,EAIE,OAAOpB,KAAP;AACF,yCACKA,KADL;AAEEa,IAAAA,YAAY,gDAAOb,KAAK,CAACa,YAAN,IAAsB,EAA7B,IAAkCZ,MAAM,CAACM,OAAzC;AAFd;AAID","sourcesContent":["import {\n  ADD_MESSAGE,\n  ADD_MESSAGE_COMPONENT,\n  CLEAR_MESSAGES,\n  UPDATE_LAST_MESSAGE_DATE,\n  UPDATE_MESSAGE,\n  UPDATE_REPLIES,\n} from './actions'\n\nexport const messagesReducer = (state, action) => {\n  switch (action.type) {\n    case ADD_MESSAGE:\n      return addMessageReducer(state, action)\n    case ADD_MESSAGE_COMPONENT:\n      return {\n        ...state,\n        messagesComponents: [\n          ...(state.messagesComponents || []),\n          action.payload,\n        ],\n      }\n    case UPDATE_MESSAGE:\n      return updateMessageReducer(state, action)\n    case UPDATE_REPLIES:\n      return { ...state, replies: action.payload }\n    case CLEAR_MESSAGES:\n      return {\n        ...state,\n        messagesJSON: [],\n        messagesComponents: [],\n      }\n    case UPDATE_LAST_MESSAGE_DATE:\n      return {\n        ...state,\n        lastMessageUpdate: action.payload,\n      }\n    default:\n      throw new Error()\n  }\n}\n\nfunction updateMessageReducer(state, action) {\n  const msgIndex = state.messagesJSON.map(m => m.id).indexOf(action.payload.id)\n  if (msgIndex > -1) {\n    const msgComponent = state.messagesComponents[msgIndex]\n    let updatedMessageComponents = {}\n    if (msgComponent) {\n      const updatedMsgComponent = {\n        ...msgComponent,\n        ...{\n          props: { ...msgComponent.props, ack: action.payload.ack },\n        },\n      }\n      updatedMessageComponents = {\n        messagesComponents: [\n          ...state.messagesComponents.slice(0, msgIndex),\n          { ...updatedMsgComponent },\n          ...state.messagesComponents.slice(msgIndex + 1),\n        ],\n      }\n    }\n    return {\n      ...state,\n      messagesJSON: [\n        ...state.messagesJSON.slice(0, msgIndex),\n        { ...action.payload },\n        ...state.messagesJSON.slice(msgIndex + 1),\n      ],\n      ...updatedMessageComponents,\n    }\n  }\n\n  return state\n}\n\nfunction addMessageReducer(state, action) {\n  if (\n    state.messagesJSON &&\n    state.messagesJSON.find(m => m.id === action.payload.id)\n  )\n    return state\n  return {\n    ...state,\n    messagesJSON: [...(state.messagesJSON || []), action.payload],\n  }\n}\n"],"file":"messages-reducer.js"}

package/lib/webchat/replies.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebchatReplies = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _styledScrollbar = require("../webchat/components/styled-scrollbar");
+
+var _templateObject, _templateObject2;
+
+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 RepliesContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  text-align: center;\n  justify-content: ", ";\n  flex-wrap: ", ";\n  padding-bottom: 10px;\n  margin-left: 5px;\n  margin-right: 5px;\n"])), function (props) {
+  return props.justify;
+}, function (props) {
+  return props.wrap;
+});
+
+var ReplyContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: none;\n  display: inline-block;\n  margin: 3px;\n"])));
+
+var options = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+
+var WebchatReplies = function WebchatReplies(props) {
+  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
+      webchatState = _useContext.webchatState,
+      getThemeProperty = _useContext.getThemeProperty;
+
+  var scrollbarOptions = _objectSpread(_objectSpread({}, {
+    enable: true,
+    autoHide: true
+  }), getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
+
+  var justifyContent = 'center';
+  var flexWrap = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
+  if (flexWrap == 'nowrap') justifyContent = 'flex-start';else if (getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) justifyContent = options[getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
+  return /*#__PURE__*/_react["default"].createElement(_styledScrollbar.StyledScrollbar, {
+    scrollbar: scrollbarOptions,
+    autoHide: scrollbarOptions.autoHide
+  }, /*#__PURE__*/_react["default"].createElement(RepliesContainer, {
+    justify: justifyContent,
+    wrap: flexWrap,
+    style: _objectSpread({}, props.style)
+  }, webchatState.replies.map(function (r, i) {
+    return /*#__PURE__*/_react["default"].createElement(ReplyContainer, {
+      key: i
+    }, r);
+  })));
+};
+
+exports.WebchatReplies = WebchatReplies;
+//# sourceMappingURL=replies.js.map

package/lib/webchat/replies.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/replies.jsx"],"names":["RepliesContainer","styled","div","props","justify","wrap","ReplyContainer","options","left","center","right","WebchatReplies","WebchatContext","webchatState","getThemeProperty","scrollbarOptions","enable","autoHide","WEBCHAT","CUSTOM_PROPERTIES","scrollbar","justifyContent","flexWrap","wrapReplies","alignReplies","style","replies","map","r","i"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,gBAAgB,GAAGC,6BAAOC,GAAV,oPAGD,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACC,OAAV;AAAA,CAHJ,EAIP,UAAAD,KAAK;AAAA,SAAIA,KAAK,CAACE,IAAV;AAAA,CAJE,CAAtB;;AAUA,IAAMC,cAAc,GAAGL,6BAAOC,GAAV,mJAApB;;AAMA,IAAMK,OAAO,GAAG;AACdC,EAAAA,IAAI,EAAE,YADQ;AAEdC,EAAAA,MAAM,EAAE,QAFM;AAGdC,EAAAA,KAAK,EAAE;AAHO,CAAhB;;AAMO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAAR,KAAK,EAAI;AACrC,oBAA2C,uBAAWS,wBAAX,CAA3C;AAAA,MAAQC,YAAR,eAAQA,YAAR;AAAA,MAAsBC,gBAAtB,eAAsBA,gBAAtB;;AACA,MAAMC,gBAAgB,mCACjB;AAAEC,IAAAA,MAAM,EAAE,IAAV;AAAgBC,IAAAA,QAAQ,EAAE;AAA1B,GADiB,GAEjBH,gBAAgB,CAACI,mBAAQC,iBAAR,CAA0BC,SAA3B,CAFC,CAAtB;;AAIA,MAAIC,cAAc,GAAG,QAArB;AACA,MAAMC,QAAQ,GAAGR,gBAAgB,CAC/BI,mBAAQC,iBAAR,CAA0BI,WADK,EAE/B,MAF+B,CAAjC;AAIA,MAAID,QAAQ,IAAI,QAAhB,EAA0BD,cAAc,GAAG,YAAjB,CAA1B,KACK,IAAIP,gBAAgB,CAACI,mBAAQC,iBAAR,CAA0BK,YAA3B,CAApB,EACHH,cAAc,GACZd,OAAO,CAACO,gBAAgB,CAACI,mBAAQC,iBAAR,CAA0BK,YAA3B,CAAjB,CADT;AAGF,sBACE,gCAAC,gCAAD;AACE,IAAA,SAAS,EAAET,gBADb;AAEE,IAAA,QAAQ,EAAEA,gBAAgB,CAACE;AAF7B,kBAIE,gCAAC,gBAAD;AACE,IAAA,OAAO,EAAEI,cADX;AAEE,IAAA,IAAI,EAAEC,QAFR;AAGE,IAAA,KAAK,oBACAnB,KAAK,CAACsB,KADN;AAHP,KAOGZ,YAAY,CAACa,OAAb,CAAqBC,GAArB,CAAyB,UAACC,CAAD,EAAIC,CAAJ;AAAA,wBACxB,gCAAC,cAAD;AAAgB,MAAA,GAAG,EAAEA;AAArB,OAAyBD,CAAzB,CADwB;AAAA,GAAzB,CAPH,CAJF,CADF;AAkBD,CAlCM","sourcesContent":["import React, { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport { WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { StyledScrollbar } from '../webchat/components/styled-scrollbar'\n\nconst RepliesContainer = styled.div`\n  display: flex;\n  text-align: center;\n  justify-content: ${props => props.justify};\n  flex-wrap: ${props => props.wrap};\n  padding-bottom: 10px;\n  margin-left: 5px;\n  margin-right: 5px;\n`\n\nconst ReplyContainer = styled.div`\n  flex: none;\n  display: inline-block;\n  margin: 3px;\n`\n\nconst options = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n}\n\nexport const WebchatReplies = props => {\n  const { webchatState, getThemeProperty } = useContext(WebchatContext)\n  const scrollbarOptions = {\n    ...{ enable: true, autoHide: true },\n    ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollbar),\n  }\n  let justifyContent = 'center'\n  const flexWrap = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,\n    'wrap'\n  )\n  if (flexWrap == 'nowrap') justifyContent = 'flex-start'\n  else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies))\n    justifyContent =\n      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]\n\n  return (\n    <StyledScrollbar\n      scrollbar={scrollbarOptions}\n      autoHide={scrollbarOptions.autoHide}\n    >\n      <RepliesContainer\n        justify={justifyContent}\n        wrap={flexWrap}\n        style={{\n          ...props.style,\n        }}\n      >\n        {webchatState.replies.map((r, i) => (\n          <ReplyContainer key={i}>{r}</ReplyContainer>\n        ))}\n      </RepliesContainer>\n    </StyledScrollbar>\n  )\n}\n"],"file":"replies.js"}

package/lib/webchat/session-view.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SessionView = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactJsonTree = _interopRequireDefault(require("react-json-tree"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _hooks = require("./hooks");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+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 AttributeContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex: none;\n  padding: 12px;\n  padding-bottom: 0px;\n  font-size: 12px;\n  font-weight: 600;\n  color: ", ";\n  align-items: center;\n"])), _constants.COLORS.SOLID_WHITE);
+
+var Label = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: none;\n"])));
+
+var Value = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  max-height: 20px;\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: 6px;\n  color: ", ";\n  overflow-x: hidden;\n"])), _constants.COLORS.CURIOUS_BLUE);
+
+var SessionViewAttribute = function SessionViewAttribute(props) {
+  return /*#__PURE__*/_react["default"].createElement(AttributeContainer, null, /*#__PURE__*/_react["default"].createElement(Label, null, props.label), /*#__PURE__*/_react["default"].createElement(Value, null, props.value));
+};
+
+var SessionViewContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: ", ";\n  height: 100%;\n  display: flex;\n  background-color: ", ";\n  font-family: Arial, Helvetica, sans-serif;\n  flex-direction: column;\n  z-index: 100000;\n  transition: all 0.2s ease-in-out;\n"])), function (props) {
+  return props.show ? '100%' : '0%';
+}, _constants.COLORS.DAINTREE_BLUE);
+
+var ToggleTab = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  top: 10px;\n  right: -32px;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  font-size: 14px;\n  font-weight: 600;\n  background-color: ", ";\n  flex-direction: column;\n  z-index: 100000;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n"])), _constants.COLORS.SOLID_WHITE_ALPHA_0_8, _constants.COLORS.DAINTREE_BLUE);
+
+var ContentContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow-y: auto;\n  overflow-x: auto;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n"])));
+
+var Title = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 12px;\n  text-align: center;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n"])), _constants.COLORS.SOLID_WHITE, _constants.COLORS.SOLID_WHITE_ALPHA_0_2);
+
+var SessionContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  height: 100%;\n  overflow-y: auto;\n"])));
+
+var KeepSessionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: none;\n  padding: 12px;\n  color: ", ";\n  font-size: 12px;\n"])), _constants.COLORS.SOLID_WHITE_ALPHA_0_8);
+
+var SessionView = function SessionView(props) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  var _ref = props.webchatHooks || (0, _hooks.useWebchat)(),
+      webchatState = _ref.webchatState,
+      updateDevSettings = _ref.updateDevSettings;
+
+  var input = webchatState.latestInput,
+      session = webchatState.session,
+      lastRoutePath = webchatState.lastRoutePath;
+
+  var toggleSessionView = function toggleSessionView() {
+    return updateDevSettings(_objectSpread(_objectSpread({}, webchatState.devSettings), {}, {
+      showSessionView: !webchatState.devSettings.showSessionView
+    }));
+  };
+
+  var toggleKeepSessionOnReload = function toggleKeepSessionOnReload() {
+    return updateDevSettings(_objectSpread(_objectSpread({}, webchatState.devSettings), {}, {
+      keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(SessionViewContent, {
+    show: webchatState.devSettings.showSessionView
+  }, /*#__PURE__*/_react["default"].createElement(ToggleTab, {
+    onClick: toggleSessionView
+  }, webchatState.devSettings.showSessionView ? '⇤' : '⇥'), /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(Title, null, "Botonic Dev Console"), /*#__PURE__*/_react["default"].createElement(SessionViewAttribute, {
+    label: "INPUT:",
+    value: input && Object.keys(input).length ? "[".concat(input.type, "] ").concat(input.data || '') : ''
+  }), /*#__PURE__*/_react["default"].createElement(SessionViewAttribute, {
+    label: "PAYLOAD:",
+    value: input.payload
+  }), /*#__PURE__*/_react["default"].createElement(SessionViewAttribute, {
+    label: "INTENT:",
+    value: input.intent ? "".concat(input.intent, " (").concat((input.confidence * 100).toFixed(1), "%)") : ''
+  }), /*#__PURE__*/_react["default"].createElement(SessionViewAttribute, {
+    label: "PATH:",
+    value: lastRoutePath ? "/".concat(lastRoutePath) : '/'
+  }), /*#__PURE__*/_react["default"].createElement(SessionViewAttribute, {
+    label: "SESSION:"
+  }), /*#__PURE__*/_react["default"].createElement(SessionContainer, null, /*#__PURE__*/_react["default"].createElement(_reactJsonTree["default"], {
+    data: session,
+    hideRoot: true
+  })), /*#__PURE__*/_react["default"].createElement(KeepSessionContainer, null, /*#__PURE__*/_react["default"].createElement("label", null, /*#__PURE__*/_react["default"].createElement("input", {
+    type: "checkbox",
+    name: "toggleKeepSessionOnReload",
+    checked: Boolean(webchatState.devSettings.keepSessionOnReload),
+    onChange: toggleKeepSessionOnReload
+  }), "Keep session on reload"))));
+};
+
+exports.SessionView = SessionView;
+//# sourceMappingURL=session-view.js.map

package/lib/webchat/session-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/session-view.jsx"],"names":["AttributeContainer","styled","div","COLORS","SOLID_WHITE","Label","Value","CURIOUS_BLUE","SessionViewAttribute","props","label","value","SessionViewContent","show","DAINTREE_BLUE","ToggleTab","SOLID_WHITE_ALPHA_0_8","ContentContainer","Title","SOLID_WHITE_ALPHA_0_2","SessionContainer","KeepSessionContainer","SessionView","webchatHooks","webchatState","updateDevSettings","input","latestInput","session","lastRoutePath","toggleSessionView","devSettings","showSessionView","toggleKeepSessionOnReload","keepSessionOnReload","Object","keys","length","type","data","payload","intent","confidence","toFixed","Boolean"],"mappings":"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","sourcesContent":["import React from 'react'\nimport JSONTree from 'react-json-tree'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\nimport { useWebchat } from './hooks'\n\nconst AttributeContainer = styled.div`\n  display: flex;\n  flex: none;\n  padding: 12px;\n  padding-bottom: 0px;\n  font-size: 12px;\n  font-weight: 600;\n  color: ${COLORS.SOLID_WHITE};\n  align-items: center;\n`\n\nconst Label = styled.div`\n  flex: none;\n`\n\nconst Value = styled.div`\n  flex: 1 1 auto;\n  max-height: 20px;\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: 6px;\n  color: ${COLORS.CURIOUS_BLUE};\n  overflow-x: hidden;\n`\n\nconst SessionViewAttribute = props => (\n  <AttributeContainer>\n    <Label>{props.label}</Label>\n    <Value>{props.value}</Value>\n  </AttributeContainer>\n)\n\nconst SessionViewContent = styled.div`\n  position: relative;\n  width: ${props => (props.show ? '100%' : '0%')};\n  height: 100%;\n  display: flex;\n  background-color: ${COLORS.DAINTREE_BLUE};\n  font-family: Arial, Helvetica, sans-serif;\n  flex-direction: column;\n  z-index: 100000;\n  transition: all 0.2s ease-in-out;\n`\n\nconst ToggleTab = styled.div`\n  position: absolute;\n  top: 10px;\n  right: -32px;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};\n  font-size: 14px;\n  font-weight: 600;\n  background-color: ${COLORS.DAINTREE_BLUE};\n  flex-direction: column;\n  z-index: 100000;\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n`\n\nconst ContentContainer = styled.div`\n  overflow-y: auto;\n  overflow-x: auto;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n`\n\nconst Title = styled.div`\n  padding: 12px;\n  text-align: center;\n  color: ${COLORS.SOLID_WHITE};\n  border-bottom: 1px solid ${COLORS.SOLID_WHITE_ALPHA_0_2};\n`\n\nconst SessionContainer = styled.div`\n  flex: 1 1 auto;\n  height: 100%;\n  overflow-y: auto;\n`\n\nconst KeepSessionContainer = styled.div`\n  flex: none;\n  padding: 12px;\n  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};\n  font-size: 12px;\n`\n\nexport const SessionView = props => {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const { webchatState, updateDevSettings } = props.webchatHooks || useWebchat()\n  const { latestInput: input, session, lastRoutePath } = webchatState\n  const toggleSessionView = () =>\n    updateDevSettings({\n      ...webchatState.devSettings,\n      showSessionView: !webchatState.devSettings.showSessionView,\n    })\n  const toggleKeepSessionOnReload = () =>\n    updateDevSettings({\n      ...webchatState.devSettings,\n      keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload,\n    })\n  return (\n    <SessionViewContent show={webchatState.devSettings.showSessionView}>\n      <ToggleTab onClick={toggleSessionView}>\n        {webchatState.devSettings.showSessionView ? '⇤' : '⇥'}\n      </ToggleTab>\n      <ContentContainer>\n        <Title>Botonic Dev Console</Title>\n        <SessionViewAttribute\n          label='INPUT:'\n          value={\n            input && Object.keys(input).length\n              ? `[${input.type}] ${input.data || ''}`\n              : ''\n          }\n        />\n        <SessionViewAttribute label='PAYLOAD:' value={input.payload} />\n        <SessionViewAttribute\n          label='INTENT:'\n          value={\n            input.intent\n              ? `${input.intent} (${(input.confidence * 100).toFixed(1)}%)`\n              : ''\n          }\n        />\n        <SessionViewAttribute\n          label='PATH:'\n          value={lastRoutePath ? `/${lastRoutePath}` : '/'}\n        />\n        <SessionViewAttribute label='SESSION:' />\n        <SessionContainer>\n          <JSONTree data={session} hideRoot={true} />\n        </SessionContainer>\n        <KeepSessionContainer>\n          <label>\n            <input\n              type='checkbox'\n              name='toggleKeepSessionOnReload'\n              checked={Boolean(webchatState.devSettings.keepSessionOnReload)}\n              onChange={toggleKeepSessionOnReload}\n            />\n            Keep session on reload\n          </label>\n        </KeepSessionContainer>\n      </ContentContainer>\n    </SessionViewContent>\n  )\n}\n"],"file":"session-view.js"}

package/lib/webchat/use-storage-state-hook.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStorageState = useStorageState;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _reactUseStorage = require("react-use-storage");
+
+function useStorageState(storage, storageKey) {
+  var _useLocalStorage = (0, _reactUseStorage.useLocalStorage)(storageKey),
+      _useLocalStorage2 = (0, _slicedToArray2["default"])(_useLocalStorage, 2),
+      botonicLocalState = _useLocalStorage2[0],
+      saveLocalState = _useLocalStorage2[1];
+
+  var _useSessionStorage = (0, _reactUseStorage.useSessionStorage)(storageKey),
+      _useSessionStorage2 = (0, _slicedToArray2["default"])(_useSessionStorage, 2),
+      botonicSessionState = _useSessionStorage2[0],
+      saveSessionState = _useSessionStorage2[1];
+
+  if (storage === null) return [undefined, undefined];
+  if (storage === sessionStorage) return [botonicSessionState, saveSessionState];
+  return [botonicLocalState, saveLocalState];
+}
+//# sourceMappingURL=use-storage-state-hook.js.map

package/lib/webchat/use-storage-state-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/webchat/use-storage-state-hook.js"],"names":["useStorageState","storage","storageKey","botonicLocalState","saveLocalState","botonicSessionState","saveSessionState","undefined","sessionStorage"],"mappings":";;;;;;;;;;;AAAA;;AAEO,SAASA,eAAT,CAAyBC,OAAzB,EAAkCC,UAAlC,EAA8C;AACnD,yBAA4C,sCAAgBA,UAAhB,CAA5C;AAAA;AAAA,MAAOC,iBAAP;AAAA,MAA0BC,cAA1B;;AACA,2BAAgD,wCAAkBF,UAAlB,CAAhD;AAAA;AAAA,MAAOG,mBAAP;AAAA,MAA4BC,gBAA5B;;AACA,MAAIL,OAAO,KAAK,IAAhB,EAAsB,OAAO,CAACM,SAAD,EAAYA,SAAZ,CAAP;AACtB,MAAIN,OAAO,KAAKO,cAAhB,EAAgC,OAAO,CAACH,mBAAD,EAAsBC,gBAAtB,CAAP;AAChC,SAAO,CAACH,iBAAD,EAAoBC,cAApB,CAAP;AACD","sourcesContent":["import { useLocalStorage, useSessionStorage } from 'react-use-storage'\n\nexport function useStorageState(storage, storageKey) {\n  const [botonicLocalState, saveLocalState] = useLocalStorage(storageKey)\n  const [botonicSessionState, saveSessionState] = useSessionStorage(storageKey)\n  if (storage === null) return [undefined, undefined]\n  if (storage === sessionStorage) return [botonicSessionState, saveSessionState]\n  return [botonicLocalState, saveLocalState]\n}\n"],"file":"use-storage-state-hook.js"}