@botonic/react 0.56.0-alpha.0 → 0.57.0-rslib-esm.0

package/lib/esm/webchat/message-list/styles.js

@@ -1,22 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollableMessageList = exports.ContainerUnreadMessagesBanner = exports.ContainerScrollButton = exports.DefaultIntroImage = exports.MessageContainer = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.MessageContainer = styled_components_1.default.div `
+import styled_components from "styled-components";
+
+
+
+const MessageContainer = styled_components.div`
   display: flex;
   overflow-x: hidden;
   flex-direction: column;
   flex: none;
   white-space: pre;
   word-wrap: break-word;
-  margin-bottom: ${({ $isLastSystemMessage }) => $isLastSystemMessage ? '8px' : '0'};
+  margin-bottom: ${({ $isLastSystemMessage })=>$isLastSystemMessage ? '8px' : '0'};
 `;
-exports.DefaultIntroImage = styled_components_1.default.img `
+const DefaultIntroImage = styled_components.img`
   max-height: 50%;
   width: 100%;
 `;
-exports.ContainerScrollButton = styled_components_1.default.div `
+const ContainerScrollButton = styled_components.div`
   position: sticky;
   left: 85%;
   bottom: 15px;
@@ -31,7 +30,7 @@ exports.ContainerScrollButton = styled_components_1.default.div `
   height: 37px;
   border-radius: 50%;
 `;
-exports.ContainerUnreadMessagesBanner = styled_components_1.default.div `
+const ContainerUnreadMessagesBanner = styled_components.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -48,7 +47,7 @@ exports.ContainerUnreadMessagesBanner = styled_components_1.default.div `
     width: 10px;
   }
 `;
-exports.ScrollableMessageList = styled_components_1.default.div `
+const ScrollableMessageList = styled_components.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -58,4 +57,7 @@ exports.ScrollableMessageList = styled_components_1.default.div `
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
 `;
+
+export { ContainerScrollButton, ContainerUnreadMessagesBanner, DefaultIntroImage, MessageContainer, ScrollableMessageList };
+
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAMzB,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAuB;;;;;;;mBAO9C,CAAC,EAAE,oBAAoB,EAAE,EAAE,EAAE,CAC5C,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;CACrC,CAAA;AAEY,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAc9C,CAAA;AAEY,QAAA,6BAA6B,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBtD,CAAA;AAEY,QAAA,qBAAqB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS9C,CAAA"}
+{"version":3,"file":"webchat/message-list/styles.js","sources":["../../../../src/webchat/message-list/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\ninterface MessageContainerProps {\n  $isLastSystemMessage?: boolean\n}\n\nexport const MessageContainer = styled.div<MessageContainerProps>`\n  display: flex;\n  overflow-x: hidden;\n  flex-direction: column;\n  flex: none;\n  white-space: pre;\n  word-wrap: break-word;\n  margin-bottom: ${({ $isLastSystemMessage }) =>\n    $isLastSystemMessage ? '8px' : '0'};\n`\n\nexport const DefaultIntroImage = styled.img`\n  max-height: 50%;\n  width: 100%;\n`\n\nexport const ContainerScrollButton = styled.div`\n  position: sticky;\n  left: 85%;\n  bottom: 15px;\n\n  background-color: #6d6a78;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 37px;\n  height: 37px;\n  border-radius: 50%;\n`\n\nexport const ContainerUnreadMessagesBanner = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n\n  border-top: 1px solid #e8e8ea;\n  padding: 8px;\n  color: #6d6a78;\n  font-size: 14px;\n  font-weight: 400;\n  width: 100%;\n\n  img {\n    width: 10px;\n  }\n`\n\nexport const ScrollableMessageList = styled.div`\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/\n  scroll-behavior: smooth;\n  -webkit-overflow-scrolling: touch;\n`\n"],"names":["styled","MessageContainer","$isLastSystemMessage","DefaultIntroImage","ContainerScrollButton","ContainerUnreadMessagesBanner","ScrollableMessageList"],"mappings":";;;AAAsC;AAM/B,MAAMC,gBAAgBA,GAAGD,qBAAiC,CAAC;;;;;;;iBAOjD,EAAE,CAAC,EAAEE,oBAAoB,EAAE,GACxCA,uBAAuB,QAAQ,IAAI;AACvC,CAAC;AAEM,MAAMC,iBAAiBA,GAAGH,qBAAU,CAAC;;;AAG5C,CAAC;AAEM,MAAMI,qBAAqBA,GAAGJ,qBAAU,CAAC;;;;;;;;;;;;;;AAchD,CAAC;AAEM,MAAMK,6BAA6BA,GAAGL,qBAAU,CAAC;;;;;;;;;;;;;;;;AAgBxD,CAAC;AAEM,MAAMM,qBAAqBA,GAAGN,qBAAU,CAAC;;;;;;;;;AAShD,CAAC"}

package/lib/esm/webchat/message-list/unread-messages-banner.js

@@ -1,18 +1,45 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnreadMessagesBanner = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const arrow_down_svg_1 = tslib_1.__importDefault(require("../../assets/arrow-down.svg"));
-const environment_1 = require("../../util/environment");
-const context_1 = require("../../webchat/context");
-const styles_1 = require("./styles");
-const use_notifications_1 = require("./use-notifications");
-const UnreadMessagesBanner = ({ unreadMessagesBannerRef, }) => {
-    const { webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
-    const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } = (0, use_notifications_1.useNotifications)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: notificationsEnabled ? ((0, jsx_runtime_1.jsx)("div", { ref: unreadMessagesBannerRef, children: CustomUnreadMessagesBanner ? ((0, jsx_runtime_1.jsx)(CustomUnreadMessagesBanner, {})) : ((0, jsx_runtime_1.jsxs)(styles_1.ContainerUnreadMessagesBanner, { children: [(0, jsx_runtime_1.jsx)("img", { src: (0, environment_1.resolveImage)(arrow_down_svg_1.default) }), webchatState.numUnreadMessages, " ", bannerText] })) })) : null }));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import arrow_down from "../../assets/arrow-down.svg";
+import { resolveImage } from "../../util/environment.js";
+import { WebchatContext } from "../context/index.js";
+import { ContainerUnreadMessagesBanner } from "./styles.js";
+import { useNotifications } from "./use-notifications.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/useAltText: we need to use alt text for the unread messages banner */ 
+
+
+
+
+
+
+const UnreadMessagesBanner = ({ unreadMessagesBannerRef })=>{
+    const { webchatState } = useContext(WebchatContext);
+    const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } = useNotifications();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: notificationsEnabled ? /*#__PURE__*/ jsx("div", {
+            ref: unreadMessagesBannerRef,
+            children: CustomUnreadMessagesBanner ? /*#__PURE__*/ jsx(CustomUnreadMessagesBanner, {}) : /*#__PURE__*/ jsxs(ContainerUnreadMessagesBanner, {
+                children: [
+                    /*#__PURE__*/ jsx("img", {
+                        src: resolveImage(arrow_down)
+                    }),
+                    webchatState.numUnreadMessages,
+                    " ",
+                    bannerText
+                ]
+            })
+        }) : null
+    });
 };
-exports.UnreadMessagesBanner = UnreadMessagesBanner;
+
+export { UnreadMessagesBanner };
+
 //# sourceMappingURL=unread-messages-banner.js.map

package/lib/esm/webchat/message-list/unread-messages-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-messages-banner.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/unread-messages-banner.tsx"],"names":[],"mappings":";;;;;AAEA,iCAAkC;AAElC,yFAAmD;AACnD,wDAAqD;AACrD,mDAAsD;AACtD,qCAAwD;AACxD,2DAAsD;AAM/C,MAAM,oBAAoB,GAAG,CAAC,EACnC,uBAAuB,GACG,EAAe,EAAE;IAC3C,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAEnD,MAAM,EAAE,oBAAoB,EAAE,0BAA0B,EAAE,UAAU,EAAE,GACpE,IAAA,oCAAgB,GAAE,CAAA;IAEpB,OAAO,CACL,2DACG,oBAAoB,CAAC,CAAC,CAAC,CACtB,gCAAK,GAAG,EAAE,uBAAuB,YAC9B,0BAA0B,CAAC,CAAC,CAAC,CAC5B,uBAAC,0BAA0B,KAAG,CAC/B,CAAC,CAAC,CAAC,CACF,wBAAC,sCAA6B,eAC5B,gCAAK,GAAG,EAAE,IAAA,0BAAY,EAAC,wBAAS,CAAC,GAAI,EACpC,YAAY,CAAC,iBAAiB,OAAG,UAAU,IACd,CACjC,GACG,CACP,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAA;AACH,CAAC,CAAA;AAxBY,QAAA,oBAAoB,wBAwBhC"}
+{"version":3,"file":"webchat/message-list/unread-messages-banner.js","sources":["../../../../src/webchat/message-list/unread-messages-banner.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/useAltText: we need to use alt text for the unread messages banner */\nimport type React from 'react'\nimport { useContext } from 'react'\n\nimport ArrowDown from '../../assets/arrow-down.svg'\nimport { resolveImage } from '../../util/environment'\nimport { WebchatContext } from '../../webchat/context'\nimport { ContainerUnreadMessagesBanner } from './styles'\nimport { useNotifications } from './use-notifications'\n\ninterface UnreadMessagesBannerProps {\n  unreadMessagesBannerRef: React.RefObject<HTMLDivElement>\n}\n\nexport const UnreadMessagesBanner = ({\n  unreadMessagesBannerRef,\n}: UnreadMessagesBannerProps): JSX.Element => {\n  const { webchatState } = useContext(WebchatContext)\n\n  const { notificationsEnabled, CustomUnreadMessagesBanner, bannerText } =\n    useNotifications()\n\n  return (\n    <>\n      {notificationsEnabled ? (\n        <div ref={unreadMessagesBannerRef}>\n          {CustomUnreadMessagesBanner ? (\n            <CustomUnreadMessagesBanner />\n          ) : (\n            <ContainerUnreadMessagesBanner>\n              <img src={resolveImage(ArrowDown)} />\n              {webchatState.numUnreadMessages} {bannerText}\n            </ContainerUnreadMessagesBanner>\n          )}\n        </div>\n      ) : null}\n    </>\n  )\n}\n"],"names":["useContext","ArrowDown","resolveImage","WebchatContext","ContainerUnreadMessagesBanner","useNotifications","UnreadMessagesBanner","unreadMessagesBannerRef","webchatState","notificationsEnabled","CustomUnreadMessagesBanner","bannerText"],"mappings":";;;;;;;;;;;;;;;AAAA,kGAAkG;AAEhE;AAEiB;AACE;AACC;AACE;AACF;AAM/C,MAAMM,oBAAoBA,GAAG,CAAC,EACnCC,uBAAuB,EACG;IAC1B,MAAM,EAAEC,YAAY,EAAE,GAAGR,UAAUA,CAACG,cAAcA;IAElD,MAAM,EAAEM,oBAAoB,EAAEC,0BAA0B,EAAEC,UAAU,EAAE,GACpEN,gBAAgBA;IAElB,qBACE;kBACGI,qCACC,IAAC;YAAI,KAAKF;sBACPG,2CACC,IAACA,gDAED,KAACN,6BAA6BA;;kCAC5B,IAAC;wBAAI,KAAKF,YAAYA,CAACD,UAASA;;oBAC/BO,aAAa,iBAAiB;oBAAC;oBAAEG;;;aAItC;;AAGV,EAAC"}

package/lib/esm/webchat/message-list/use-debounce.js

@@ -1,17 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDebounce = useDebounce;
-const react_1 = require("react");
+import { useEffect, useState } from "react";
+
+
+
 function useDebounce(delay) {
-    const [show, setShow] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        const timeoutId = setTimeout(() => {
+    const [show, setShow] = useState(false);
+    useEffect(()=>{
+        const timeoutId = setTimeout(()=>{
             setShow(true);
         }, delay || 500);
-        return () => {
+        return ()=>{
             clearTimeout(timeoutId);
         };
     }, []);
     return show;
 }
+
+export { useDebounce };
+
 //# sourceMappingURL=use-debounce.js.map

package/lib/esm/webchat/message-list/use-debounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-debounce.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/use-debounce.ts"],"names":[],"mappings":";;AAEA,kCAaC;AAfD,iCAA2C;AAE3C,SAAgB,WAAW,CAAC,KAAc;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACvC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,OAAO,CAAC,IAAI,CAAC,CAAA;QACf,CAAC,EAAE,KAAK,IAAI,GAAG,CAAC,CAAA;QAEhB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,SAAS,CAAC,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC"}
+{"version":3,"file":"webchat/message-list/use-debounce.js","sources":["../../../../src/webchat/message-list/use-debounce.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nexport function useDebounce(delay?: number) {\n  const [show, setShow] = useState(false)\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setShow(true)\n    }, delay || 500)\n\n    return () => {\n      clearTimeout(timeoutId)\n    }\n  }, [])\n\n  return show\n}\n"],"names":["useEffect","useState","useDebounce","delay","show","setShow","timeoutId","setTimeout","clearTimeout"],"mappings":";;;AAA2C;AAEpC,SAASE,WAAWA,CAACC,KAAc;IACxC,MAAM,CAACC,MAAMC,QAAQ,GAAGJ,QAAQA,CAAC;IACjCD,SAASA,CAAC;QACR,MAAMM,YAAYC,WAAW;YAC3BF,QAAQ;QACV,GAAGF,SAAS;QAEZ,OAAO;YACLK,aAAaF;QACf;IACF,GAAG,EAAE;IAEL,OAAOF;AACT"}

package/lib/esm/webchat/message-list/use-notifications.js

@@ -1,23 +1,30 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNotifications = useNotifications;
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const context_1 = require("../../webchat/context");
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+
+
+
+
+
+
+
 function useNotifications() {
-    const { getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
-    const CustomUnreadMessagesBanner = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom);
-    const notificationsBannerEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled);
-    const notificationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, CustomUnreadMessagesBanner || notificationsBannerEnabled);
-    const bannerText = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText);
-    const CustomScrollButton = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom);
-    const scrollButtonEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled, CustomScrollButton);
+    const { getThemeProperty } = useContext(WebchatContext);
+    const CustomUnreadMessagesBanner = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom);
+    const notificationsBannerEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled);
+    const notificationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, CustomUnreadMessagesBanner || notificationsBannerEnabled);
+    const bannerText = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText);
+    const CustomScrollButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom);
+    const scrollButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled, CustomScrollButton);
     return {
         notificationsEnabled,
         bannerText,
         CustomUnreadMessagesBanner,
         CustomScrollButton,
-        scrollButtonEnabled,
+        scrollButtonEnabled
     };
 }
+
+export { useNotifications };
+
 //# sourceMappingURL=use-notifications.js.map

package/lib/esm/webchat/message-list/use-notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-notifications.js","sourceRoot":"","sources":["../../../../src/webchat/message-list/use-notifications.ts"],"names":[],"mappings":";;AAKA,4CAoCC;AAzCD,iCAAkC;AAElC,+CAAyC;AACzC,mDAAsD;AAEtD,SAAgB,gBAAgB;IAC9B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAEvD,MAAM,0BAA0B,GAAG,gBAAgB,CACjD,mBAAO,CAAC,iBAAiB,CAAC,yBAAyB,CACpD,CAAA;IAED,MAAM,0BAA0B,GAAG,gBAAgB,CACjD,mBAAO,CAAC,iBAAiB,CAAC,0BAA0B,CACrD,CAAA;IAED,MAAM,oBAAoB,GAAG,gBAAgB,CAC3C,mBAAO,CAAC,iBAAiB,CAAC,oBAAoB,EAC9C,0BAA0B,IAAI,0BAA0B,CACzD,CAAA;IAED,MAAM,UAAU,GAAG,gBAAgB,CACjC,mBAAO,CAAC,iBAAiB,CAAC,uBAAuB,CAClD,CAAA;IAED,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,mBAAO,CAAC,iBAAiB,CAAC,kBAAkB,CAC7C,CAAA;IAED,MAAM,mBAAmB,GAAG,gBAAgB,CAC1C,mBAAO,CAAC,iBAAiB,CAAC,mBAAmB,EAC7C,kBAAkB,CACnB,CAAA;IAED,OAAO;QACL,oBAAoB;QACpB,UAAU;QACV,0BAA0B;QAC1B,kBAAkB;QAClB,mBAAmB;KACpB,CAAA;AACH,CAAC"}
+{"version":3,"file":"webchat/message-list/use-notifications.js","sources":["../../../../src/webchat/message-list/use-notifications.ts"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\n\nexport function useNotifications() {\n  const { getThemeProperty } = useContext(WebchatContext)\n\n  const CustomUnreadMessagesBanner = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerCustom\n  )\n\n  const notificationsBannerEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerEnabled\n  )\n\n  const notificationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,\n    CustomUnreadMessagesBanner || notificationsBannerEnabled\n  )\n\n  const bannerText = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsBannerText\n  )\n\n  const CustomScrollButton = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonCustom\n  )\n\n  const scrollButtonEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.scrollButtonEnabled,\n    CustomScrollButton\n  )\n\n  return {\n    notificationsEnabled,\n    bannerText,\n    CustomUnreadMessagesBanner,\n    CustomScrollButton,\n    scrollButtonEnabled,\n  }\n}\n"],"names":["useContext","WEBCHAT","WebchatContext","useNotifications","getThemeProperty","CustomUnreadMessagesBanner","notificationsBannerEnabled","notificationsEnabled","bannerText","CustomScrollButton","scrollButtonEnabled"],"mappings":";;;;;;;AAAkC;AAEO;AACa;AAE/C,SAASG,gBAAgBA;IAC9B,MAAM,EAAEC,gBAAgB,EAAE,GAAGJ,UAAUA,CAACE,cAAcA;IAEtD,MAAMG,6BAA6BD,iBACjCH,mDAAmD;IAGrD,MAAMK,6BAA6BF,iBACjCH,oDAAoD;IAGtD,MAAMM,uBAAuBH,iBAC3BH,8CAA8C,EAC9CI,8BAA8BC;IAGhC,MAAME,aAAaJ,iBACjBH,iDAAiD;IAGnD,MAAMQ,qBAAqBL,iBACzBH,4CAA4C;IAG9C,MAAMS,sBAAsBN,iBAC1BH,6CAA6C,EAC7CQ;IAGF,OAAO;QACLF;QACAC;QACAH;QACAI;QACAC;IACF;AACF"}

package/lib/esm/webchat/replies/index.js

@@ -1,31 +1,51 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebchatReplies = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const constants_1 = require("../../constants");
-const context_1 = require("../../webchat/context");
-const constants_2 = require("../constants");
-const styles_1 = require("./styles");
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { WEBCHAT } from "../../constants.js";
+import { WebchatContext } from "../context/index.js";
+import { BotonicContainerId } from "../constants.js";
+import { RepliesContainer, ReplyContainer, ScrollableReplies } from "./styles.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
 const options = {
     left: 'flex-start',
     center: 'center',
-    right: 'flex-end',
+    right: 'flex-end'
 };
-const WebchatReplies = () => {
-    const { webchatState, getThemeProperty, repliesRef } = (0, react_1.useContext)(context_1.WebchatContext);
+const WebchatReplies = ()=>{
+    const { webchatState, getThemeProperty, repliesRef } = useContext(WebchatContext);
     let justifyContent = 'center';
-    const flexWrap = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
+    const flexWrap = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.wrapReplies, 'wrap');
     if (flexWrap === 'nowrap') {
         justifyContent = 'flex-start';
+    } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
+        justifyContent = options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
     }
-    else if (getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {
-        justifyContent =
-            options[getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.alignReplies)];
-    }
-    return ((0, jsx_runtime_1.jsx)(styles_1.ScrollableReplies, { children: (0, jsx_runtime_1.jsx)(styles_1.RepliesContainer, { id: constants_2.BotonicContainerId.RepliesContainer, ref: repliesRef, className: 'replies-container', justify: justifyContent, wrap: flexWrap, children: webchatState.replies?.map((reply, i) => (
-            // @ts-expect-error TODO: In this point reply is the the component to render
-            (0, jsx_runtime_1.jsx)(styles_1.ReplyContainer, { children: reply }, `reply-${i}`))) }) }));
+    return /*#__PURE__*/ jsx(ScrollableReplies, {
+        children: /*#__PURE__*/ jsx(RepliesContainer, {
+            id: BotonicContainerId.RepliesContainer,
+            ref: repliesRef,
+            className: "replies-container",
+            justify: justifyContent,
+            wrap: flexWrap,
+            children: webchatState.replies?.map((reply, i)=>// @ts-expect-error TODO: In this point reply is the the component to render
+                /*#__PURE__*/ jsx(ReplyContainer, {
+                    children: reply
+                }, `reply-${i}`))
+        })
+    });
 };
-exports.WebchatReplies = WebchatReplies;
+
+export { WebchatReplies };
+
 //# sourceMappingURL=index.js.map

package/lib/esm/webchat/replies/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/webchat/replies/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAAkC;AAElC,+CAAyC;AACzC,mDAAsD;AACtD,4CAAiD;AACjD,qCAA8E;AAE9E,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,YAAY;IAClB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;CAClB,CAAA;AAEM,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAClD,IAAA,kBAAU,EAAC,wBAAc,CAAC,CAAA;IAE5B,IAAI,cAAc,GAAG,QAAQ,CAAA;IAC7B,MAAM,QAAQ,GAAG,gBAAgB,CAC/B,mBAAO,CAAC,iBAAiB,CAAC,WAAW,EACrC,MAAM,CACP,CAAA;IAED,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC1B,cAAc,GAAG,YAAY,CAAA;IAC/B,CAAC;SAAM,IAAI,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC;QACpE,cAAc;YACZ,OAAO,CAAC,gBAAgB,CAAC,mBAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAA;IACrE,CAAC;IAED,OAAO,CACL,uBAAC,0BAAiB,cAChB,uBAAC,yBAAgB,IACf,EAAE,EAAE,8BAAkB,CAAC,gBAAgB,EACvC,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,QAAQ,YAEb,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,4EAA4E;YAC5E,uBAAC,uBAAc,cAAqB,KAAK,IAApB,SAAS,CAAC,EAAE,CAA0B,CAC5D,CAAC,GACe,GACD,CACrB,CAAA;AACH,CAAC,CAAA;AAjCY,QAAA,cAAc,kBAiC1B"}
+{"version":3,"file":"webchat/replies/index.js","sources":["../../../../src/webchat/replies/index.tsx"],"sourcesContent":["import { useContext } from 'react'\n\nimport { WEBCHAT } from '../../constants'\nimport { WebchatContext } from '../../webchat/context'\nimport { BotonicContainerId } from '../constants'\nimport { RepliesContainer, ReplyContainer, ScrollableReplies } from './styles'\n\nconst options = {\n  left: 'flex-start',\n  center: 'center',\n  right: 'flex-end',\n}\n\nexport const WebchatReplies = () => {\n  const { webchatState, getThemeProperty, repliesRef } =\n    useContext(WebchatContext)\n\n  let justifyContent = 'center'\n  const flexWrap = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,\n    'wrap'\n  )\n\n  if (flexWrap === 'nowrap') {\n    justifyContent = 'flex-start'\n  } else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)) {\n    justifyContent =\n      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]\n  }\n\n  return (\n    <ScrollableReplies>\n      <RepliesContainer\n        id={BotonicContainerId.RepliesContainer}\n        ref={repliesRef}\n        className='replies-container'\n        justify={justifyContent}\n        wrap={flexWrap}\n      >\n        {webchatState.replies?.map((reply, i) => (\n          // @ts-expect-error TODO: In this point reply is the the component to render\n          <ReplyContainer key={`reply-${i}`}>{reply}</ReplyContainer>\n        ))}\n      </RepliesContainer>\n    </ScrollableReplies>\n  )\n}\n"],"names":["useContext","WEBCHAT","WebchatContext","BotonicContainerId","RepliesContainer","ReplyContainer","ScrollableReplies","options","WebchatReplies","webchatState","getThemeProperty","repliesRef","justifyContent","flexWrap","reply","i"],"mappings":";;;;;;;;;;;;;;AAAkC;AAEO;AACa;AACL;AAC6B;AAE9E,MAAMO,OAAOA,GAAG;IACd,MAAM;IACN,QAAQ;IACR,OAAO;AACT;AAEO,MAAMC,cAAcA,GAAG;IAC5B,MAAM,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,UAAU,EAAE,GAClDX,UAAUA,CAACE,cAAcA;IAE3B,IAAIU,iBAAiB;IACrB,MAAMC,WAAWH,iBACfT,qCAAqC,EACrC;IAGF,IAAIY,aAAa,UAAU;QACzBD,iBAAiB;IACnB,OAAO,IAAIF,iBAAiBT,sCAAsC,GAAG;QACnEW,iBACEL,OAAO,CAACG,iBAAiBT,sCAAsC,EAAE;IACrE;IAEA,qBACE,IAACK,iBAAiBA;kBAChB,kBAACF,gBAAgBA;YACf,IAAID,mCAAmC;YACvC,KAAKQ;YACL,WAAU;YACV,SAASC;YACT,MAAMC;sBAELJ,aAAa,OAAO,EAAE,IAAI,CAACK,OAAOC,IACjC,4EAA4E;8BAC5E,IAACV,cAAcA;8BAAqBS;mBAAf,CAAC,MAAM,EAAEC,GAAG;;;AAK3C,EAAC"}

package/lib/esm/webchat/replies/styles.js

@@ -1,25 +1,27 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReplyContainer = exports.RepliesContainer = exports.ScrollableReplies = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-exports.ScrollableReplies = styled_components_1.default.div `
+import styled_components from "styled-components";
+
+
+
+const ScrollableReplies = styled_components.div`
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
 `;
-exports.RepliesContainer = styled_components_1.default.div `
+const RepliesContainer = styled_components.div`
   display: flex;
   text-align: center;
-  justify-content: ${props => props.justify};
-  flex-wrap: ${props => props.wrap};
+  justify-content: ${(props)=>props.justify};
+  flex-wrap: ${(props)=>props.wrap};
   padding-bottom: 10px;
   margin-left: 5px;
   margin-right: 5px;
   overflow-x: auto;
 `;
-exports.ReplyContainer = styled_components_1.default.div `
+const ReplyContainer = styled_components.div`
   flex: none;
   display: inline-block;
   margin: 3px;
 `;
+
+export { RepliesContainer, ReplyContainer, ScrollableReplies };
+
 //# sourceMappingURL=styles.js.map

package/lib/esm/webchat/replies/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/webchat/replies/styles.ts"],"names":[],"mappings":";;;;AAAA,kFAAsC;AAEzB,QAAA,iBAAiB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;CAG1C,CAAA;AAOY,QAAA,gBAAgB,GAAG,2BAAM,CAAC,GAAG,CAAuB;;;qBAG5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO;eAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;CAKjC,CAAA;AAEY,QAAA,cAAc,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAIvC,CAAA"}
+{"version":3,"file":"webchat/replies/styles.js","sources":["../../../../src/webchat/replies/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const ScrollableReplies = styled.div`\n  overscroll-behavior: contain;\n  -webkit-overflow-scrolling: touch;\n`\n\ninterface RepliesContainerProps {\n  justify: string\n  wrap: string\n}\n\nexport const RepliesContainer = styled.div<RepliesContainerProps>`\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  overflow-x: auto;\n`\n\nexport const ReplyContainer = styled.div`\n  flex: none;\n  display: inline-block;\n  margin: 3px;\n`\n"],"names":["styled","ScrollableReplies","RepliesContainer","props","ReplyContainer"],"mappings":";;;AAAsC;AAE/B,MAAMC,iBAAiBA,GAAGD,qBAAU,CAAC;;;AAG5C,CAAC;AAOM,MAAME,gBAAgBA,GAAGF,qBAAiC,CAAC;;;mBAG/C,EAAEG,CAAAA,QAASA,MAAM,OAAO,CAAC;aAC/B,EAAEA,CAAAA,QAASA,MAAM,IAAI,CAAC;;;;;AAKnC,CAAC;AAEM,MAAMC,cAAcA,GAAGJ,qBAAU,CAAC;;;;AAIzC,CAAC"}

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

@@ -1,47 +1,63 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionView = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_json_tree_1 = require("react-json-tree");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const use_webchat_1 = require("./context/use-webchat");
-const AttributeContainer = styled_components_1.default.div `
+import { jsx, jsxs } from "react/jsx-runtime";
+import { JSONTree } from "react-json-tree";
+import styled_components from "styled-components";
+import { COLORS } from "../constants.js";
+import { useWebchat } from "./context/use-webchat.js";
+
+
+
+
+
+
+
+
+
+
+
+const AttributeContainer = styled_components.div`
   display: flex;
   flex: none;
   padding: 12px;
   padding-bottom: 0px;
   font-size: 12px;
   font-weight: 600;
-  color: ${constants_1.COLORS.SOLID_WHITE};
+  color: ${COLORS.SOLID_WHITE};
   align-items: center;
 `;
-const Label = styled_components_1.default.div `
+const Label = styled_components.div`
   flex: none;
 `;
-const Value = styled_components_1.default.div `
+const Value = styled_components.div`
   flex: 1 1 auto;
   max-height: 20px;
   font-size: 16px;
   font-weight: 400;
   margin-left: 6px;
-  color: ${constants_1.COLORS.CURIOUS_BLUE};
+  color: ${COLORS.CURIOUS_BLUE};
   overflow-x: hidden;
 `;
-const SessionViewAttribute = props => ((0, jsx_runtime_1.jsxs)(AttributeContainer, { children: [(0, jsx_runtime_1.jsx)(Label, { children: props.label }), (0, jsx_runtime_1.jsx)(Value, { children: props.value })] }));
-const SessionViewContent = styled_components_1.default.div `
+const SessionViewAttribute = (props)=>/*#__PURE__*/ jsxs(AttributeContainer, {
+        children: [
+            /*#__PURE__*/ jsx(Label, {
+                children: props.label
+            }),
+            /*#__PURE__*/ jsx(Value, {
+                children: props.value
+            })
+        ]
+    });
+const SessionViewContent = styled_components.div`
   position: relative;
-  width: ${props => (props.show ? '100%' : '0%')};
+  width: ${(props)=>props.show ? '100%' : '0%'};
   height: 100%;
   display: flex;
-  background-color: ${constants_1.COLORS.DAINTREE_BLUE};
+  background-color: ${COLORS.DAINTREE_BLUE};
   font-family: Arial, Helvetica, sans-serif;
   flex-direction: column;
   z-index: 100000;
   transition: all 0.2s ease-in-out;
 `;
-const ToggleTab = styled_components_1.default.div `
+const ToggleTab = styled_components.div`
   position: absolute;
   top: 10px;
   right: -32px;
@@ -51,53 +67,102 @@ const ToggleTab = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_8};
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
   font-size: 14px;
   font-weight: 600;
-  background-color: ${constants_1.COLORS.DAINTREE_BLUE};
+  background-color: ${COLORS.DAINTREE_BLUE};
   flex-direction: column;
   z-index: 100000;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 `;
-const ContentContainer = styled_components_1.default.div `
+const ContentContainer = styled_components.div`
   overflow-y: auto;
   overflow-x: auto;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
 `;
-const Title = styled_components_1.default.div `
+const Title = styled_components.div`
   padding: 12px;
   text-align: center;
-  color: ${constants_1.COLORS.SOLID_WHITE};
-  border-bottom: 1px solid ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_2};
+  color: ${COLORS.SOLID_WHITE};
+  border-bottom: 1px solid ${COLORS.SOLID_WHITE_ALPHA_0_2};
 `;
-const SessionContainer = styled_components_1.default.div `
+const SessionContainer = styled_components.div`
   flex: 1 1 auto;
   height: 100%;
   overflow-y: auto;
 `;
-const KeepSessionContainer = styled_components_1.default.div `
+const KeepSessionContainer = styled_components.div`
   flex: none;
   padding: 12px;
-  color: ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_8};
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
   font-size: 12px;
 `;
-const SessionView = props => {
-    const { webchatState, updateDevSettings } = props.webchatHooks || (0, use_webchat_1.useWebchat)();
+const SessionView = (props)=>{
+    const { webchatState, updateDevSettings } = props.webchatHooks || useWebchat();
     const { latestInput: input, session, lastRoutePath } = webchatState;
-    const toggleSessionView = () => updateDevSettings({
-        ...webchatState.devSettings,
-        showSessionView: !webchatState.devSettings.showSessionView,
-    });
-    const toggleKeepSessionOnReload = () => updateDevSettings({
-        ...webchatState.devSettings,
-        keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload,
+    const toggleSessionView = ()=>updateDevSettings({
+            ...webchatState.devSettings,
+            showSessionView: !webchatState.devSettings.showSessionView
+        });
+    const toggleKeepSessionOnReload = ()=>updateDevSettings({
+            ...webchatState.devSettings,
+            keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload
+        });
+    return /*#__PURE__*/ jsxs(SessionViewContent, {
+        show: webchatState.devSettings.showSessionView,
+        children: [
+            /*#__PURE__*/ jsx(ToggleTab, {
+                onClick: toggleSessionView,
+                children: webchatState.devSettings.showSessionView ? '⇤' : '⇥'
+            }),
+            /*#__PURE__*/ jsxs(ContentContainer, {
+                children: [
+                    /*#__PURE__*/ jsx(Title, {
+                        children: "Botonic Dev Console"
+                    }),
+                    /*#__PURE__*/ jsx(SessionViewAttribute, {
+                        label: "INPUT:",
+                        value: input && Object.keys(input).length ? `[${input.type}] ${input.data || ''}` : ''
+                    }),
+                    /*#__PURE__*/ jsx(SessionViewAttribute, {
+                        label: "PAYLOAD:",
+                        value: input.payload
+                    }),
+                    /*#__PURE__*/ jsx(SessionViewAttribute, {
+                        label: "PATH:",
+                        value: lastRoutePath ? `/${lastRoutePath}` : '/'
+                    }),
+                    /*#__PURE__*/ jsx(SessionViewAttribute, {
+                        label: "SESSION:"
+                    }),
+                    /*#__PURE__*/ jsx(SessionContainer, {
+                        children: /*#__PURE__*/ jsx(JSONTree, {
+                            data: session,
+                            hideRoot: true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(KeepSessionContainer, {
+                        children: /*#__PURE__*/ jsxs("label", {
+                            children: [
+                                /*#__PURE__*/ jsx("input", {
+                                    type: "checkbox",
+                                    name: "toggleKeepSessionOnReload",
+                                    checked: Boolean(webchatState.devSettings.keepSessionOnReload),
+                                    onChange: toggleKeepSessionOnReload
+                                }),
+                                "Keep session on reload"
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
     });
-    return ((0, jsx_runtime_1.jsxs)(SessionViewContent, { show: webchatState.devSettings.showSessionView, children: [(0, jsx_runtime_1.jsx)(ToggleTab, { onClick: toggleSessionView, children: webchatState.devSettings.showSessionView ? '⇤' : '⇥' }), (0, jsx_runtime_1.jsxs)(ContentContainer, { children: [(0, jsx_runtime_1.jsx)(Title, { children: "Botonic Dev Console" }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'INPUT:', value: input && Object.keys(input).length
-                            ? `[${input.type}] ${input.data || ''}`
-                            : '' }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'PAYLOAD:', value: input.payload }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'PATH:', value: lastRoutePath ? `/${lastRoutePath}` : '/' }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'SESSION:' }), (0, jsx_runtime_1.jsx)(SessionContainer, { children: (0, jsx_runtime_1.jsx)(react_json_tree_1.JSONTree, { data: session, hideRoot: true }) }), (0, jsx_runtime_1.jsx)(KeepSessionContainer, { children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("input", { type: 'checkbox', name: 'toggleKeepSessionOnReload', checked: Boolean(webchatState.devSettings.keepSessionOnReload), onChange: toggleKeepSessionOnReload }), "Keep session on reload"] }) })] })] }));
 };
-exports.SessionView = SessionView;
+
+export { SessionView };
+
 //# sourceMappingURL=session-view.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"session-view.js","sourceRoot":"","sources":["../../../src/webchat/session-view.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"webchat/session-view.js","sources":["../../../src/webchat/session-view.jsx"],"sourcesContent":["import { JSONTree } from 'react-json-tree'\nimport styled from 'styled-components'\n\nimport { COLORS } from '../constants'\nimport { useWebchat } from './context/use-webchat'\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  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='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"],"names":["JSONTree","styled","COLORS","useWebchat","AttributeContainer","Label","Value","SessionViewAttribute","props","SessionViewContent","ToggleTab","ContentContainer","Title","SessionContainer","KeepSessionContainer","SessionView","webchatState","updateDevSettings","input","session","lastRoutePath","toggleSessionView","toggleKeepSessionOnReload","Object","Boolean"],"mappings":";;;;;;;;;;;;AAA0C;AACJ;AAED;AACa;AAElD,MAAMI,kBAAkBA,GAAGH,qBAAU,CAAC;;;;;;;SAO7B,EAAEC,kBAAkB,CAAC;;AAE9B,CAAC;AAED,MAAMG,KAAKA,GAAGJ,qBAAU,CAAC;;AAEzB,CAAC;AAED,MAAMK,KAAKA,GAAGL,qBAAU,CAAC;;;;;;SAMhB,EAAEC,mBAAmB,CAAC;;AAE/B,CAAC;AAED,MAAMK,oBAAoBA,GAAGC,CAAAA,sBAC3B,KAACJ,kBAAkBA;;0BACjB,IAACC,KAAKA;0BAAEG,MAAM,KAAK;;0BACnB,IAACF,KAAKA;0BAAEE,MAAM,KAAK;;;;AAIvB,MAAMC,kBAAkBA,GAAGR,qBAAU,CAAC;;SAE7B,EAAEO,CAAAA,QAAUA,MAAM,IAAI,GAAG,SAAS,KAAM;;;oBAG7B,EAAEN,oBAAoB,CAAC;;;;;AAK3C,CAAC;AAED,MAAMQ,SAASA,GAAGT,qBAAU,CAAC;;;;;;;;;;SAUpB,EAAEC,4BAA4B,CAAC;;;oBAGpB,EAAEA,oBAAoB,CAAC;;;;;AAK3C,CAAC;AAED,MAAMS,gBAAgBA,GAAGV,qBAAU,CAAC;;;;;;AAMpC,CAAC;AAED,MAAMW,KAAKA,GAAGX,qBAAU,CAAC;;;SAGhB,EAAEC,kBAAkB,CAAC;2BACH,EAAEA,4BAA4B,CAAC;AAC1D,CAAC;AAED,MAAMW,gBAAgBA,GAAGZ,qBAAU,CAAC;;;;AAIpC,CAAC;AAED,MAAMa,oBAAoBA,GAAGb,qBAAU,CAAC;;;SAG/B,EAAEC,4BAA4B,CAAC;;AAExC,CAAC;AAEM,MAAMa,WAAWA,GAAGP,CAAAA;IACzB,MAAM,EAAEQ,YAAY,EAAEC,iBAAiB,EAAE,GAAGT,MAAM,YAAY,IAAIL,UAAUA;IAC5E,MAAM,EAAE,aAAae,KAAK,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGJ;IACvD,MAAMK,oBAAoB,IACxBJ,kBAAkB;YAChB,GAAGD,aAAa,WAAW;YAC3B,iBAAiB,CAACA,aAAa,WAAW,CAAC,eAAe;QAC5D;IACF,MAAMM,4BAA4B,IAChCL,kBAAkB;YAChB,GAAGD,aAAa,WAAW;YAC3B,qBAAqB,CAACA,aAAa,WAAW,CAAC,mBAAmB;QACpE;IACF,qBACE,KAACP,kBAAkBA;QAAC,MAAMO,aAAa,WAAW,CAAC,eAAe;;0BAChE,IAACN,SAASA;gBAAC,SAASW;0BACjBL,aAAa,WAAW,CAAC,eAAe,GAAG,MAAM;;0BAEpD,KAACL,gBAAgBA;;kCACf,IAACC,KAAKA;kCAAC;;kCACP,IAACL,oBAAoBA;wBACnB,OAAM;wBACN,OACEW,SAASK,OAAO,IAAI,CAACL,OAAO,MAAM,GAC9B,CAAC,CAAC,EAAEA,MAAM,IAAI,CAAC,EAAE,EAAEA,MAAM,IAAI,IAAI,IAAI,GACrC;;kCAGR,IAACX,oBAAoBA;wBAAC,OAAM;wBAAW,OAAOW,MAAM,OAAO;;kCAC3D,IAACX,oBAAoBA;wBACnB,OAAM;wBACN,OAAOa,gBAAgB,CAAC,CAAC,EAAEA,eAAe,GAAG;;kCAE/C,IAACb,oBAAoBA;wBAAC,OAAM;;kCAC5B,IAACM,gBAAgBA;kCACf,kBAACb,QAAQA;4BAAC,MAAMmB;4BAAS,UAAU;;;kCAErC,IAACL,oBAAoBA;kCACnB,mBAAC;;8CACC,IAAC;oCACC,MAAK;oCACL,MAAK;oCACL,SAASU,QAAQR,aAAa,WAAW,CAAC,mBAAmB;oCAC7D,UAAUM;;gCACV;;;;;;;;AAOd,EAAC"}