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

package/lib/webchat/tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/tracking.js","sources":["../../src/webchat/tracking.ts"],"sourcesContent":["import type { EventCustom, EventFeedback } from '@botonic/core'\nimport { useContext } from 'react'\n\nimport type { ActionRequest } from '../index-types'\nimport { WebchatContext } from './context'\n\ninterface UseTracking {\n  trackCustomEvent: (event: EventCustom) => Promise<void>\n  trackFeedbackEvent: (event: EventFeedback) => Promise<void>\n}\n\nexport function useTracking(): UseTracking {\n  const { webchatState, trackEvent } = useContext(WebchatContext)\n\n  const getRequest = () => {\n    const request = {\n      session: {\n        ...webchatState.session,\n      },\n      getUserCountry: () => webchatState.session.user?.country || '',\n      getUserLocale: () => webchatState.session.user?.locale || '',\n      getSystemLocale: () => {\n        return webchatState.session.user?.system_locale || ''\n      },\n    } as unknown as ActionRequest\n\n    return request\n  }\n\n  const trackCustomEvent = async (event: EventCustom) => {\n    if (!trackEvent) {\n      return\n    }\n\n    const request = getRequest()\n    const { action, ...eventArgs } = event\n    await trackEvent(request, action, eventArgs)\n  }\n\n  const trackFeedbackEvent = async (event: EventFeedback) => {\n    if (!trackEvent) {\n      return\n    }\n\n    const request = getRequest()\n    const { action, ...eventArgs } = event\n    await trackEvent(request, action, eventArgs)\n  }\n\n  return { trackCustomEvent, trackFeedbackEvent }\n}\n"],"names":["useContext","WebchatContext","useTracking","webchatState","trackEvent","getRequest","request","trackCustomEvent","event","action","eventArgs","trackFeedbackEvent"],"mappings":";;;;;AACkC;AAGQ;AAOnC,SAASE,WAAWA;IACzB,MAAM,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ,UAAUA,CAACC,cAAcA;IAE9D,MAAMI,aAAa;QACjB,MAAMC,UAAU;YACd,SAAS;gBACP,GAAGH,aAAa,OAAO;YACzB;YACA,gBAAgB,IAAMA,aAAa,OAAO,CAAC,IAAI,EAAE,WAAW;YAC5D,eAAe,IAAMA,aAAa,OAAO,CAAC,IAAI,EAAE,UAAU;YAC1D,iBAAiB;gBACf,OAAOA,aAAa,OAAO,CAAC,IAAI,EAAE,iBAAiB;YACrD;QACF;QAEA,OAAOG;IACT;IAEA,MAAMC,mBAAmB,OAAOC;QAC9B,IAAI,CAACJ,YAAY;YACf;QACF;QAEA,MAAME,UAAUD;QAChB,MAAM,EAAEI,MAAM,EAAE,GAAGC,WAAW,GAAGF;QACjC,MAAMJ,WAAWE,SAASG,QAAQC;IACpC;IAEA,MAAMC,qBAAqB,OAAOH;QAChC,IAAI,CAACJ,YAAY;YACf;QACF;QAEA,MAAME,UAAUD;QAChB,MAAM,EAAEI,MAAM,EAAE,GAAGC,WAAW,GAAGF;QACjC,MAAMJ,WAAWE,SAASG,QAAQC;IACpC;IAEA,OAAO;QAAEH;QAAkBI;IAAmB;AAChD"}

package/lib/webchat/trigger-button/index.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ROLES, WEBCHAT } from "../../constants.js";
+import { resolveImage } from "../../util/environment.js";
+import { WebchatContext } from "../context/index.js";
+import { StyledTriggerButton, TriggerImage, UnreadMessagesCounter } from "./styles.js";
+
+
+
+
+
+
+
+
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */ 
+
+
+
+
+const TriggerButton = ()=>{
+    const { webchatState, getThemeProperty, toggleWebchat } = useContext(WebchatContext);
+    const getTriggerImage = ()=>{
+        const image = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage, undefined);
+        if (!image) {
+            webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO;
+            return null;
+        }
+        return image;
+    };
+    const triggerButtonImage = getTriggerImage();
+    const triggerButtonStyle = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle);
+    const notificationsTriggerButtonEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled);
+    const notificationsEnabled = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled, notificationsTriggerButtonEnabled);
+    const CustomTriggerButton = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customTrigger);
+    const handleClick = (event)=>{
+        toggleWebchat(true);
+        event.preventDefault();
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        onClick: handleClick,
+        children: [
+            webchatState.numUnreadMessages !== 0 && notificationsEnabled && /*#__PURE__*/ jsx(UnreadMessagesCounter, {
+                className: "trigger-notifications",
+                children: webchatState.numUnreadMessages
+            }),
+            CustomTriggerButton ? /*#__PURE__*/ jsx(CustomTriggerButton, {}) : /*#__PURE__*/ jsx(StyledTriggerButton, {
+                role: ROLES.TRIGGER_BUTTON,
+                style: triggerButtonStyle,
+                children: triggerButtonImage && /*#__PURE__*/ jsx(TriggerImage, {
+                    src: resolveImage(triggerButtonImage)
+                })
+            })
+        ]
+    });
+};
+
+export { TriggerButton };
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/trigger-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/trigger-button/index.js","sources":["../../../src/webchat/trigger-button/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/a11y/noStaticElementInteractions: we need to use static elements for the trigger button */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: we need to use key with click events for the trigger button */\nimport { useContext } from 'react'\n\nimport { ROLES, WEBCHAT } from '../../constants'\nimport { resolveImage } from '../../util/environment'\nimport { WebchatContext } from '../../webchat/context'\nimport {\n  StyledTriggerButton,\n  TriggerImage,\n  UnreadMessagesCounter,\n} from './styles'\n\nexport const TriggerButton = (): JSX.Element => {\n  const { webchatState, getThemeProperty, toggleWebchat } =\n    useContext(WebchatContext)\n\n  const getTriggerImage = () => {\n    const image = getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,\n      undefined\n    )\n\n    if (!image) {\n      webchatState.theme.triggerButton.image = WEBCHAT.DEFAULTS.LOGO\n      return null\n    }\n    return image\n  }\n\n  const triggerButtonImage = getTriggerImage()\n\n  const triggerButtonStyle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.triggerButtonStyle\n  )\n\n  const notificationsTriggerButtonEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsTriggerButtonEnabled\n  )\n\n  const notificationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.notificationsEnabled,\n    notificationsTriggerButtonEnabled\n  )\n\n  const CustomTriggerButton = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.customTrigger\n  )\n\n  const handleClick = (event: any) => {\n    toggleWebchat(true)\n    event.preventDefault()\n  }\n\n  return (\n    <div onClick={handleClick}>\n      {webchatState.numUnreadMessages !== 0 && notificationsEnabled && (\n        <UnreadMessagesCounter className='trigger-notifications'>\n          {webchatState.numUnreadMessages}\n        </UnreadMessagesCounter>\n      )}\n      {CustomTriggerButton ? (\n        <CustomTriggerButton />\n      ) : (\n        <StyledTriggerButton\n          role={ROLES.TRIGGER_BUTTON}\n          style={triggerButtonStyle}\n        >\n          {triggerButtonImage && (\n            <TriggerImage src={resolveImage(triggerButtonImage)} />\n          )}\n        </StyledTriggerButton>\n      )}\n    </div>\n  )\n}\n"],"names":["useContext","ROLES","WEBCHAT","resolveImage","WebchatContext","StyledTriggerButton","TriggerImage","UnreadMessagesCounter","TriggerButton","webchatState","getThemeProperty","toggleWebchat","getTriggerImage","image","undefined","triggerButtonImage","triggerButtonStyle","notificationsTriggerButtonEnabled","notificationsEnabled","CustomTriggerButton","handleClick","event"],"mappings":";;;;;;;;;;;;;;AAAA,kHAAkH,GAClH,kHAAkH,GAChF;AAEc;AACK;AACC;AAKrC;AAEV,MAAMQ,aAAaA,GAAG;IAC3B,MAAM,EAAEC,YAAY,EAAEC,gBAAgB,EAAEC,aAAa,EAAE,GACrDX,UAAUA,CAACI,cAAcA;IAE3B,MAAMQ,kBAAkB;QACtB,MAAMC,QAAQH,iBACZR,4CAA4C,EAC5CY;QAGF,IAAI,CAACD,OAAO;YACVJ,aAAa,KAAK,CAAC,aAAa,CAAC,KAAK,GAAGP,qBAAqB;YAC9D,OAAO;QACT;QACA,OAAOW;IACT;IAEA,MAAME,qBAAqBH;IAE3B,MAAMI,qBAAqBN,iBACzBR,4CAA4C;IAG9C,MAAMe,oCAAoCP,iBACxCR,2DAA2D;IAG7D,MAAMgB,uBAAuBR,iBAC3BR,8CAA8C,EAC9Ce;IAGF,MAAME,sBAAsBT,iBAC1BR,uCAAuC;IAGzC,MAAMkB,cAAc,CAACC;QACnBV,cAAc;QACdU,MAAM,cAAc;IACtB;IAEA,qBACE,KAAC;QAAI,SAASD;;YACXX,aAAa,iBAAiB,KAAK,KAAKS,sCACvC,IAACX,qBAAqBA;gBAAC,WAAU;0BAC9BE,aAAa,iBAAiB;;YAGlCU,oCACC,IAACA,yCAED,IAACd,mBAAmBA;gBAClB,MAAMJ,oBAAoB;gBAC1B,OAAOe;0BAEND,oCACC,IAACT,YAAYA;oBAAC,KAAKH,YAAYA,CAACY;;;;;AAM5C,EAAC"}

package/lib/webchat/trigger-button/styles.js

@@ -0,0 +1,44 @@
+import styled_components from "styled-components";
+import { COLORS } from "../../constants.js";
+
+
+
+
+
+const StyledTriggerButton = styled_components.div`
+  cursor: pointer;
+  position: fixed;
+  background: ${COLORS.SOLID_WHITE};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: 65px;
+  height: 65px;
+  bottom: 20px;
+  right: 10px;
+  padding: 8px;
+`;
+const UnreadMessagesCounter = styled_components.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: fixed;
+  right: 20px;
+  bottom: 80px;
+  width: 24px;
+  height: 24px;
+  background-color: ${COLORS.RED_NOTIFICATIONS};
+  color: white;
+  z-index: 10;
+`;
+const TriggerImage = styled_components.img`
+  max-width: 100%;
+  max-height: 100%;
+`;
+
+export { StyledTriggerButton, TriggerImage, UnreadMessagesCounter };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/trigger-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/trigger-button/styles.js","sources":["../../../src/webchat/trigger-button/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../../constants'\n\nexport const StyledTriggerButton = styled.div`\n  cursor: pointer;\n  position: fixed;\n  background: ${COLORS.SOLID_WHITE};\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  width: 65px;\n  height: 65px;\n  bottom: 20px;\n  right: 10px;\n  padding: 8px;\n`\n\nexport const UnreadMessagesCounter = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  position: fixed;\n  right: 20px;\n  bottom: 80px;\n  width: 24px;\n  height: 24px;\n  background-color: ${COLORS.RED_NOTIFICATIONS};\n  color: white;\n  z-index: 10;\n`\n\nexport const TriggerImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n`\n"],"names":["styled","COLORS","StyledTriggerButton","UnreadMessagesCounter","TriggerImage"],"mappings":";;;;;AAAsC;AAEE;AAEjC,MAAME,mBAAmBA,GAAGF,qBAAU,CAAC;;;cAGhC,EAAEC,kBAAkB,CAAC;;;;;;;;;;;AAWnC,CAAC;AAEM,MAAME,qBAAqBA,GAAGH,qBAAU,CAAC;;;;;;;;;;oBAU5B,EAAEC,wBAAwB,CAAC;;;AAG/C,CAAC;AAEM,MAAMG,YAAYA,GAAGJ,qBAAU,CAAC;;;AAGvC,CAAC"}

package/lib/webchat/typing-indicator/index.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { COLORS, ROLES } from "../../constants.js";
+import { Dot, TypingContainer, TypingMsgWrapper } from "./styles.js";
+
+
+
+
+
+
+
+
+
+const TypingIndicator = /*#__PURE__*/ forwardRef((_props, ref)=>/*#__PURE__*/ jsx(TypingContainer, {
+        ref: ref,
+        children: /*#__PURE__*/ jsxs(TypingMsgWrapper, {
+            role: ROLES.TYPING_INDICATOR,
+            className: "typing-indicator",
+            backgroundColor: COLORS.SEASHELL_WHITE,
+            children: [
+                /*#__PURE__*/ jsx(Dot, {}),
+                /*#__PURE__*/ jsx(Dot, {}),
+                /*#__PURE__*/ jsx(Dot, {})
+            ]
+        })
+    }));
+TypingIndicator.displayName = 'TypingIndicator';
+/* export default */ const typing_indicator = (TypingIndicator);
+
+export default typing_indicator;
+
+//# sourceMappingURL=index.js.map

package/lib/webchat/typing-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/typing-indicator/index.js","sources":["../../../src/webchat/typing-indicator/index.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from 'react'\n\nimport { COLORS, ROLES } from '../../constants'\nimport { Dot, TypingContainer, TypingMsgWrapper } from './styles'\n\nconst TypingIndicator = forwardRef<HTMLDivElement, any>(\n  (_props, ref: ForwardedRef<HTMLDivElement>) => (\n    <TypingContainer ref={ref}>\n      <TypingMsgWrapper\n        role={ROLES.TYPING_INDICATOR}\n        className='typing-indicator'\n        backgroundColor={COLORS.SEASHELL_WHITE}\n      >\n        <Dot />\n        <Dot />\n        <Dot />\n      </TypingMsgWrapper>\n    </TypingContainer>\n  )\n)\n\nTypingIndicator.displayName = 'TypingIndicator'\n\nexport default TypingIndicator\n"],"names":["forwardRef","COLORS","ROLES","Dot","TypingContainer","TypingMsgWrapper","TypingIndicator","_props","ref"],"mappings":";;;;;;;;;;AAAqD;AAEN;AACkB;AAEjE,MAAMM,eAAeA,iBAAGN,UAAUA,CAChC,CAACO,QAAQC,oBACP,IAACJ,eAAeA;QAAC,KAAKI;kBACpB,mBAACH,gBAAgBA;YACf,MAAMH,sBAAsB;YAC5B,WAAU;YACV,iBAAiBD,qBAAqB;;8BAEtC,IAACE,GAAGA;8BACJ,IAACA,GAAGA;8BACJ,IAACA,GAAGA;;;;AAMZG,eAAeA,CAAC,WAAW,GAAG;AAE9B,+CAAeA,eAAeA,EAAA"}

package/lib/webchat/typing-indicator/styles.js

@@ -0,0 +1,52 @@
+import styled_components, { keyframes } from "styled-components";
+
+
+
+const blink = keyframes`
+  50% {
+    opacity: 1;
+  }
+`;
+const bulge = keyframes`
+  50% {
+    transform: scale(1.05);
+  }
+`;
+const TypingContainer = styled_components.div`
+  padding: 0px 8px 8px 8px;
+`;
+const TypingMsgWrapper = styled_components.div`
+  will-change: transform;
+  width: 44px;
+  line-height: 0px;
+  border-radius: 20px;
+  padding: 8px 2px;
+  text-align: center;
+  display: block;
+  margin: 8px;
+  position: relative;
+  animation: 2s ${bulge} infinite ease-out;
+  background-color: ${(props)=>props.backgroundColor};
+`;
+const Dot = styled_components.span`
+  height: 6px;
+  width: 6px;
+  margin: 0 1px;
+  background-color: #9e9ea1;
+  display: inline-block;
+  border-radius: 50%;
+  opacity: 0.4;
+  &:nth-of-type(1) {
+    animation: 1s ${blink} infinite 0.3333s;
+  }
+  &:nth-of-type(2) {
+    animation: 1s ${blink} infinite 0.6666s;
+  }
+  &:nth-of-type(3) {
+    animation: 1s ${blink} infinite 1s;
+  }
+`;
+
+export { Dot, TypingContainer, TypingMsgWrapper };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/typing-indicator/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/typing-indicator/styles.js","sources":["../../../src/webchat/typing-indicator/styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\nconst blink = keyframes`\n  50% {\n    opacity: 1;\n  }\n`\n\nconst bulge = keyframes`\n  50% {\n    transform: scale(1.05);\n  }\n`\n\nexport const TypingContainer = styled.div`\n  padding: 0px 8px 8px 8px;\n`\n\ninterface TypingMsgWrapperProps {\n  backgroundColor: string\n}\n\nexport const TypingMsgWrapper = styled.div<TypingMsgWrapperProps>`\n  will-change: transform;\n  width: 44px;\n  line-height: 0px;\n  border-radius: 20px;\n  padding: 8px 2px;\n  text-align: center;\n  display: block;\n  margin: 8px;\n  position: relative;\n  animation: 2s ${bulge} infinite ease-out;\n  background-color: ${props => props.backgroundColor};\n`\n\nexport const Dot = styled.span`\n  height: 6px;\n  width: 6px;\n  margin: 0 1px;\n  background-color: #9e9ea1;\n  display: inline-block;\n  border-radius: 50%;\n  opacity: 0.4;\n  &:nth-of-type(1) {\n    animation: 1s ${blink} infinite 0.3333s;\n  }\n  &:nth-of-type(2) {\n    animation: 1s ${blink} infinite 0.6666s;\n  }\n  &:nth-of-type(3) {\n    animation: 1s ${blink} infinite 1s;\n  }\n`\n"],"names":["styled","keyframes","blink","bulge","TypingContainer","TypingMsgWrapper","props","Dot"],"mappings":";;;AAAqD;AAErD,MAAME,KAAKA,GAAGD,SAAS,CAAC;;;;AAIxB,CAAC;AAED,MAAME,KAAKA,GAAGF,SAAS,CAAC;;;;AAIxB,CAAC;AAEM,MAAMG,eAAeA,GAAGJ,qBAAU,CAAC;;AAE1C,CAAC;AAMM,MAAMK,gBAAgBA,GAAGL,qBAAiC,CAAC;;;;;;;;;;gBAUlD,EAAEG,KAAKA,CAAC;oBACJ,EAAEG,CAAAA,QAASA,MAAM,eAAe,CAAC;AACrD,CAAC;AAEM,MAAMC,GAAGA,GAAGP,sBAAW,CAAC;;;;;;;;;kBASb,EAAEE,KAAKA,CAAC;;;kBAGR,EAAEA,KAAKA,CAAC;;;kBAGR,EAAEA,KAAKA,CAAC;;AAE1B,CAAC"}

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

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useState } from "react";
+
+
+
+// Code taken from https://github.com/leny/react-use-storage/blob/master/src/index.js
+const IS_BROWSER = typeof window !== 'undefined' && typeof navigator !== 'undefined' && typeof document !== 'undefined';
+function useStorageState(storage, key, defaultValue) {
+    let evtTarget;
+    try {
+        evtTarget = new EventTarget();
+    } catch  {
+        evtTarget = (IS_BROWSER ? document : {})?.createElement?.('phony');
+    }
+    const raw = storage?.getItem(key);
+    const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue);
+    const updater = useCallback((updatedValue, remove = false)=>{
+        setValue(updatedValue);
+        storage[remove ? 'removeItem' : 'setItem'](key, JSON.stringify(updatedValue));
+        evtTarget.dispatchEvent(new CustomEvent('storage_change', {
+            detail: {
+                key
+            }
+        }));
+    }, [
+        key
+    ]);
+    defaultValue != null && !raw && updater(defaultValue);
+    useEffect(()=>{
+        const listener = ({ detail })=>{
+            if (detail.key === key) {
+                const lraw = storage?.getItem(key);
+                lraw !== raw && setValue(JSON.parse(lraw));
+            }
+        };
+        evtTarget.addEventListener('storage_change', listener);
+        return ()=>evtTarget.removeEventListener('storage_change', listener);
+    });
+    if (storage === null) {
+        return [
+            undefined,
+            undefined
+        ];
+    }
+    return [
+        value,
+        updater,
+        ()=>updater(null, true)
+    ];
+}
+
+export { useStorageState };
+
+//# sourceMappingURL=use-storage-state-hook.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/use-storage-state-hook.js","sources":["../../src/webchat/use-storage-state-hook.js"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\n\n// Code taken from https://github.com/leny/react-use-storage/blob/master/src/index.js\nconst IS_BROWSER =\n  typeof window !== 'undefined' &&\n  typeof navigator !== 'undefined' &&\n  typeof document !== 'undefined'\n\nexport function useStorageState(storage, key, defaultValue) {\n  let evtTarget\n\n  try {\n    evtTarget = new EventTarget()\n  } catch {\n    evtTarget = (IS_BROWSER ? document : {})?.createElement?.('phony')\n  }\n\n  const raw = storage?.getItem(key)\n\n  const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)\n\n  const updater = useCallback(\n    (updatedValue, remove = false) => {\n      setValue(updatedValue)\n      storage[remove ? 'removeItem' : 'setItem'](\n        key,\n        JSON.stringify(updatedValue)\n      )\n      evtTarget.dispatchEvent(\n        new CustomEvent('storage_change', { detail: { key } })\n      )\n    },\n    [key]\n  )\n\n  defaultValue != null && !raw && updater(defaultValue)\n\n  useEffect(() => {\n    const listener = ({ detail }) => {\n      if (detail.key === key) {\n        const lraw = storage?.getItem(key)\n\n        lraw !== raw && setValue(JSON.parse(lraw))\n      }\n    }\n\n    evtTarget.addEventListener('storage_change', listener)\n    return () => evtTarget.removeEventListener('storage_change', listener)\n  })\n\n  if (storage === null) {\n    return [undefined, undefined]\n  }\n  return [value, updater, () => updater(null, true)]\n}\n"],"names":["useCallback","useEffect","useState","IS_BROWSER","window","navigator","document","useStorageState","storage","key","defaultValue","evtTarget","EventTarget","raw","value","setValue","JSON","updater","updatedValue","remove","CustomEvent","listener","detail","lraw","undefined"],"mappings":";;;AAAwD;AAExD,qFAAqF;AACrF,MAAMG,UAAUA,GACd,OAAOC,WAAW,eAClB,OAAOC,cAAc,eACrB,OAAOC,aAAa;AAEf,SAASC,eAAeA,CAACC,OAAO,EAAEC,GAAG,EAAEC,YAAY;IACxD,IAAIC;IAEJ,IAAI;QACFA,YAAY,IAAIC;IAClB,EAAE,OAAM;QACND,YAAaR,CAAAA,UAAUA,GAAGG,WAAW,CAAC,IAAI,gBAAgB;IAC5D;IAEA,MAAMO,MAAML,SAAS,QAAQC;IAE7B,MAAM,CAACK,OAAOC,SAAS,GAAGb,QAAQA,CAACW,MAAMG,KAAK,KAAK,CAACH,OAAOH;IAE3D,MAAMO,UAAUjB,WAAWA,CACzB,CAACkB,cAAcC,SAAS,KAAK;QAC3BJ,SAASG;QACTV,OAAO,CAACW,SAAS,eAAe,UAAU,CACxCV,KACAO,KAAK,SAAS,CAACE;QAEjBP,UAAU,aAAa,CACrB,IAAIS,YAAY,kBAAkB;YAAE,QAAQ;gBAAEX;YAAI;QAAE;IAExD,GACA;QAACA;KAAI;IAGPC,gBAAgB,QAAQ,CAACG,OAAOI,QAAQP;IAExCT,SAASA,CAAC;QACR,MAAMoB,WAAW,CAAC,EAAEC,MAAM,EAAE;YAC1B,IAAIA,OAAO,GAAG,KAAKb,KAAK;gBACtB,MAAMc,OAAOf,SAAS,QAAQC;gBAE9Bc,SAASV,OAAOE,SAASC,KAAK,KAAK,CAACO;YACtC;QACF;QAEAZ,UAAU,gBAAgB,CAAC,kBAAkBU;QAC7C,OAAO,IAAMV,UAAU,mBAAmB,CAAC,kBAAkBU;IAC/D;IAEA,IAAIb,YAAY,MAAM;QACpB,OAAO;YAACgB;YAAWA;SAAU;IAC/B;IACA,OAAO;QAACV;QAAOG;QAAS,IAAMA,QAAQ,MAAM;KAAM;AACpD"}

package/lib/webchat/utils.js

@@ -0,0 +1,15 @@
+import { BotonicAction } from "@botonic/core";
+
+
+
+const getParsedAction = (botonicAction)=>{
+    const splittedAction = botonicAction.split(`${BotonicAction.CreateCase}:`);
+    if (splittedAction.length <= 1) {
+        return undefined;
+    }
+    return JSON.parse(splittedAction[1]);
+};
+
+export { getParsedAction };
+
+//# sourceMappingURL=utils.js.map

package/lib/webchat/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/utils.js","sources":["../../src/webchat/utils.ts"],"sourcesContent":["import { BotonicAction, type BotonicActionType } from '@botonic/core'\n\nexport const getParsedAction = (botonicAction: BotonicActionType) => {\n  const splittedAction = botonicAction.split(`${BotonicAction.CreateCase}:`)\n  if (splittedAction.length <= 1) {\n    return undefined\n  }\n  return JSON.parse(splittedAction[1])\n}\n"],"names":["BotonicAction","getParsedAction","botonicAction","splittedAction","undefined","JSON"],"mappings":";;;AAAqE;AAE9D,MAAMC,eAAeA,GAAG,CAACC;IAC9B,MAAMC,iBAAiBD,cAAc,KAAK,CAAC,GAAGF,wBAAwB,CAAC,CAAC,CAAC;IACzE,IAAIG,eAAe,MAAM,IAAI,GAAG;QAC9B,OAAOC;IACT;IACA,OAAOC,KAAK,KAAK,CAACF,cAAc,CAAC,EAAE;AACrC,EAAC"}

package/lib/webchat/webchat-dev.js

@@ -0,0 +1,98 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PROVIDER } from "@botonic/core";
+import lodash_merge from "lodash.merge";
+import { forwardRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import styled_components from "styled-components";
+import { useWebchat } from "./context/use-webchat.js";
+import { SessionView } from "./session-view.js";
+import { Webchat } from "./webchat.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const DebugTab = styled_components.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: ${(props)=>props.show ? '350px' : '32px'};
+  height: ${(props)=>props.show ? '100%' : '42px'};
+`;
+// We want the debug tab to be rendered in the <body> even if the
+// webchat is being rendered in a shadowDOM, that's why we need a portal
+const DebugTabPortal = ({ webchatHooks, ...props })=>/*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(DebugTab, {
+        ...props,
+        children: /*#__PURE__*/ jsx(SessionView, {
+            webchatHooks: webchatHooks
+        })
+    }), document.body);
+const initialSession = {
+    is_first_interaction: true,
+    last_session: {},
+    user: {
+        id: '000001',
+        username: 'johndoe',
+        name: 'John Doe',
+        provider: PROVIDER.DEV,
+        provider_id: '0000000',
+        extra_data: {}
+    },
+    organization: '',
+    bot: {
+        id: '0000000',
+        name: 'botName'
+    }
+};
+const WebchatDev = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const webchatHooks = useWebchat();
+    const { webchatState, updateTheme } = webchatHooks;
+    /* TODO: webchatState.theme should be included in the dependencies array
+  together with props.theme. The problem is that this effect modifies webchatState
+  so we enter an infinite rerender loop. */ useEffect(()=>{
+        updateTheme(lodash_merge(webchatState.theme, props.theme));
+    }, [
+        props.theme
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Webchat, {
+                style: {
+                    flex: 1,
+                    position: 'relative'
+                },
+                ...props,
+                ref: ref,
+                webchatHooks: webchatHooks,
+                initialSession: initialSession,
+                initialDevSettings: {
+                    keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,
+                    showSessionView: webchatState.devSettings.showSessionView
+                },
+                localWebviews: props.webviews
+            }),
+            /*#__PURE__*/ jsx(DebugTabPortal, {
+                show: webchatState.devSettings.showSessionView,
+                webchatHooks: webchatHooks
+            })
+        ]
+    });
+});
+
+export { DebugTab, DebugTabPortal, WebchatDev };
+
+//# sourceMappingURL=webchat-dev.js.map

package/lib/webchat/webchat-dev.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/webchat-dev.js","sources":["../../src/webchat/webchat-dev.jsx"],"sourcesContent":["import { PROVIDER } from '@botonic/core'\nimport merge from 'lodash.merge'\nimport { forwardRef, useEffect } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled from 'styled-components'\n\nimport { useWebchat } from './context/use-webchat'\nimport { SessionView } from './session-view'\nimport { Webchat } from './webchat'\n\nexport const DebugTab = styled.div`\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: ${props => (props.show ? '350px' : '32px')};\n  height: ${props => (props.show ? '100%' : '42px')};\n`\n\n// We want the debug tab to be rendered in the <body> even if the\n// webchat is being rendered in a shadowDOM, that's why we need a portal\nexport const DebugTabPortal = ({ webchatHooks, ...props }) =>\n  createPortal(\n    <DebugTab {...props}>\n      <SessionView webchatHooks={webchatHooks} />\n    </DebugTab>,\n    document.body\n  )\n\nconst initialSession = {\n  is_first_interaction: true,\n  last_session: {},\n  user: {\n    id: '000001',\n    username: 'johndoe',\n    name: 'John Doe',\n    provider: PROVIDER.DEV,\n    provider_id: '0000000',\n    extra_data: {},\n  },\n  organization: '',\n  bot: {\n    id: '0000000',\n    name: 'botName',\n  },\n}\n\nexport const WebchatDev = forwardRef((props, ref) => {\n  const webchatHooks = useWebchat()\n  const { webchatState, updateTheme } = webchatHooks\n\n  /* TODO: webchatState.theme should be included in the dependencies array\n  together with props.theme. The problem is that this effect modifies webchatState\n  so we enter an infinite rerender loop. */\n  useEffect(() => {\n    updateTheme(merge(webchatState.theme, props.theme))\n  }, [props.theme])\n\n  return (\n    <>\n      <Webchat\n        style={{ flex: 1, position: 'relative' }}\n        {...props}\n        ref={ref}\n        webchatHooks={webchatHooks}\n        initialSession={initialSession}\n        initialDevSettings={{\n          keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,\n          showSessionView: webchatState.devSettings.showSessionView,\n        }}\n        localWebviews={props.webviews}\n      />\n      <DebugTabPortal\n        show={webchatState.devSettings.showSessionView}\n        webchatHooks={webchatHooks}\n      />\n    </>\n  )\n})\n"],"names":["PROVIDER","merge","forwardRef","useEffect","createPortal","styled","useWebchat","SessionView","Webchat","DebugTab","props","DebugTabPortal","webchatHooks","document","initialSession","WebchatDev","ref","webchatState","updateTheme"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAwC;AACR;AACa;AACL;AACF;AAEY;AACN;AACT;AAE5B,MAAMS,QAAQA,GAAGJ,qBAAU,CAAC;;;;SAI1B,EAAEK,CAAAA,QAAUA,MAAM,IAAI,GAAG,UAAU,OAAQ;UAC1C,EAAEA,CAAAA,QAAUA,MAAM,IAAI,GAAG,SAAS,OAAQ;AACpD,CAAC;AAED,iEAAiE;AACjE,wEAAwE;AACjE,MAAMC,cAAcA,GAAG,CAAC,EAAEC,YAAY,EAAE,GAAGF,OAAO,iBACvDN,YAAYA,eACV,IAACK,QAAQA;QAAE,GAAGC,KAAK;kBACjB,kBAACH,WAAWA;YAAC,cAAcK;;QAE7BC,SAAS,IAAI,EACd;AAEH,MAAMC,cAAcA,GAAG;IACrB,sBAAsB;IACtB,cAAc,CAAC;IACf,MAAM;QACJ,IAAI;QACJ,UAAU;QACV,MAAM;QACN,UAAUd,YAAY;QACtB,aAAa;QACb,YAAY,CAAC;IACf;IACA,cAAc;IACd,KAAK;QACH,IAAI;QACJ,MAAM;IACR;AACF;AAEO,MAAMe,UAAUA,iBAAGb,UAAUA,CAAC,CAACQ,OAAOM;IAC3C,MAAMJ,eAAeN,UAAUA;IAC/B,MAAM,EAAEW,YAAY,EAAEC,WAAW,EAAE,GAAGN;IAEtC;;yCAEuC,GACvCT,SAASA,CAAC;QACRe,YAAYjB,YAAKA,CAACgB,aAAa,KAAK,EAAEP,MAAM,KAAK;IACnD,GAAG;QAACA,MAAM,KAAK;KAAC;IAEhB,qBACE;;0BACE,IAACF,OAAOA;gBACN,OAAO;oBAAE,MAAM;oBAAG,UAAU;gBAAW;gBACtC,GAAGE,KAAK;gBACT,KAAKM;gBACL,cAAcJ;gBACd,gBAAgBE,cAAcA;gBAC9B,oBAAoB;oBAClB,qBAAqBG,aAAa,WAAW,CAAC,mBAAmB;oBACjE,iBAAiBA,aAAa,WAAW,CAAC,eAAe;gBAC3D;gBACA,eAAeP,MAAM,QAAQ;;0BAE/B,IAACC,cAAcA;gBACb,MAAMM,aAAa,WAAW,CAAC,eAAe;gBAC9C,cAAcL;;;;AAItB,GAAE"}

package/lib/webchat/webchat.d.ts

@@ -0,0 +1,3 @@
+import { type WebchatProps, type WebchatRef } from '../index-types.js';
+declare const Webchat: import("react").ForwardRefExoticComponent<WebchatProps & import("react").RefAttributes<WebchatRef | null>>;
+export { Webchat };