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

package/lib/webchat/session-view.js

@@ -0,0 +1,168 @@
+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: ${COLORS.SOLID_WHITE};
+  align-items: center;
+`;
+const Label = styled_components.div`
+  flex: none;
+`;
+const Value = styled_components.div`
+  flex: 1 1 auto;
+  max-height: 20px;
+  font-size: 16px;
+  font-weight: 400;
+  margin-left: 6px;
+  color: ${COLORS.CURIOUS_BLUE};
+  overflow-x: hidden;
+`;
+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%'};
+  height: 100%;
+  display: flex;
+  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.div`
+  position: absolute;
+  top: 10px;
+  right: -32px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
+  font-size: 14px;
+  font-weight: 600;
+  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.div`
+  overflow-y: auto;
+  overflow-x: auto;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+`;
+const Title = styled_components.div`
+  padding: 12px;
+  text-align: center;
+  color: ${COLORS.SOLID_WHITE};
+  border-bottom: 1px solid ${COLORS.SOLID_WHITE_ALPHA_0_2};
+`;
+const SessionContainer = styled_components.div`
+  flex: 1 1 auto;
+  height: 100%;
+  overflow-y: auto;
+`;
+const KeepSessionContainer = styled_components.div`
+  flex: none;
+  padding: 12px;
+  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
+  font-size: 12px;
+`;
+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
+        });
+    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"
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { SessionView };
+
+//# sourceMappingURL=session-view.js.map

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

@@ -0,0 +1 @@
+{"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"}

package/lib/webchat/styles.js

@@ -0,0 +1,69 @@
+import styled_components from "styled-components";
+import { COLORS } from "../constants.js";
+
+
+
+
+
+const StyledWebchat = styled_components.div`
+  position: fixed;
+  right: ${(props)=>props.theme.style.right};
+  bottom: ${(props)=>props.theme.style.bottom};
+  width: ${(props)=>props.theme.style.width};
+  height: ${(props)=>props.theme.style.height};
+  margin: auto;
+  background-color: ${(props)=>props.theme.style.backgroundColor};
+  border-radius: 10px;
+  box-shadow: ${(props)=>props.theme.style.boxShadow};
+  font-family: ${(props)=>props.theme.style.fontFamily};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+
+  @media (max-width: ${(props)=>props.theme.mobileBreakpoint}px) {
+    position: ${(props)=>props.theme.mobileStyle.position};
+    right: ${(props)=>props.theme.mobileStyle.right};
+    bottom: ${(props)=>props.theme.mobileStyle.bottom};
+    width: ${(props)=>props.theme.mobileStyle.width};
+    height: ${(props)=>props.theme.mobileStyle.height};
+    border-radius: ${(props)=>props.theme.mobileStyle.borderRadius};
+    font-size: ${(props)=>props.theme.mobileStyle.fontSize};
+  }
+`;
+const ErrorMessageContainer = styled_components.div`
+  position: relative;
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  width: 100%;
+`;
+const ErrorMessage = styled_components.div`
+  position: absolute;
+  top: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 11px;
+  display: flex;
+  background-color: ${COLORS.ERROR_RED};
+  color: ${COLORS.CONCRETE_WHITE};
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  font-family: ${(props)=>props.theme.style.fontFamily};
+`;
+const DarkBackgroundMenu = styled_components.div`
+  background: ${COLORS.SOLID_BLACK};
+  opacity: 0.3;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  border-radius: 10px;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+
+export { DarkBackgroundMenu, ErrorMessage, ErrorMessageContainer, StyledWebchat };
+
+//# sourceMappingURL=styles.js.map

package/lib/webchat/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/styles.js","sources":["../../src/webchat/styles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nimport { COLORS } from '../constants'\n\nexport const StyledWebchat = styled.div`\n  position: fixed;\n  right: ${props => props.theme.style.right};\n  bottom: ${props => props.theme.style.bottom};\n  width: ${props => props.theme.style.width};\n  height: ${props => props.theme.style.height};\n  margin: auto;\n  background-color: ${props => props.theme.style.backgroundColor};\n  border-radius: 10px;\n  box-shadow: ${props => props.theme.style.boxShadow};\n  font-family: ${props => props.theme.style.fontFamily};\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n\n  @media (max-width: ${props => props.theme.mobileBreakpoint}px) {\n    position: ${props => props.theme.mobileStyle.position};\n    right: ${props => props.theme.mobileStyle.right};\n    bottom: ${props => props.theme.mobileStyle.bottom};\n    width: ${props => props.theme.mobileStyle.width};\n    height: ${props => props.theme.mobileStyle.height};\n    border-radius: ${props => props.theme.mobileStyle.borderRadius};\n    font-size: ${props => props.theme.mobileStyle.fontSize};\n  }\n`\n\nexport const ErrorMessageContainer = styled.div`\n  position: relative;\n  display: flex;\n  z-index: 1;\n  justify-content: center;\n  width: 100%;\n`\n\nexport const ErrorMessage = styled.div`\n  position: absolute;\n  top: 10px;\n  font-size: 14px;\n  line-height: 20px;\n  padding: 4px 11px;\n  display: flex;\n  background-color: ${COLORS.ERROR_RED};\n  color: ${COLORS.CONCRETE_WHITE};\n  border-radius: 5px;\n  align-items: center;\n  justify-content: center;\n  font-family: ${props => props.theme.style.fontFamily};\n`\n\nexport const DarkBackgroundMenu = styled.div`\n  background: ${COLORS.SOLID_BLACK};\n  opacity: 0.3;\n  z-index: 1;\n  right: 0;\n  bottom: 0;\n  border-radius: 10px;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n`\n"],"names":["styled","COLORS","StyledWebchat","props","ErrorMessageContainer","ErrorMessage","DarkBackgroundMenu"],"mappings":";;;;;AAAsC;AAED;AAE9B,MAAME,aAAaA,GAAGF,qBAAU,CAAC;;SAE/B,EAAEG,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;UAClC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;SACrC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;UAClC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;;oBAE1B,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC;;cAEnD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC;eACtC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC;;;;;;qBAMlC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,gBAAgB,CAAC;cAC/C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC;WAC/C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;YACxC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;WAC3C,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;YACxC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;mBACnC,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC;eACpD,EAAEA,CAAAA,QAASA,MAAM,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC;;AAE3D,CAAC;AAEM,MAAMC,qBAAqBA,GAAGJ,qBAAU,CAAC;;;;;;AAMhD,CAAC;AAEM,MAAMK,YAAYA,GAAGL,qBAAU,CAAC;;;;;;;oBAOnB,EAAEC,gBAAgB,CAAC;SAC9B,EAAEA,qBAAqB,CAAC;;;;eAIlB,EAAEE,CAAAA,QAASA,MAAM,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC;AACvD,CAAC;AAEM,MAAMG,kBAAkBA,GAAGN,qBAAU,CAAC;cAC/B,EAAEC,kBAAkB,CAAC;;;;;;;;;AASnC,CAAC"}

package/lib/webchat/theme/default-theme.d.ts

@@ -0,0 +1,2 @@
+import type { WebchatTheme } from './types.js';
+export declare const defaultTheme: WebchatTheme;

package/lib/webchat/theme/default-theme.js

@@ -0,0 +1,119 @@
+import { COLORS, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from "../../constants.js";
+
+
+
+const defaultTheme = {
+    style: {
+        width: '300px',
+        height: '450px',
+        borderRadius: '10px',
+        fontFamily: "'Noto Sans JP', sans-serif",
+        fontSize: '16px',
+        position: 'fixed',
+        right: '20px',
+        bottom: '20px',
+        backgroundColor: COLORS.SOLID_WHITE,
+        boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`
+    },
+    mobileBreakpoint: 768,
+    mobileStyle: {
+        width: '100%',
+        height: '100%',
+        borderRadius: '0px',
+        fontSize: '16px',
+        position: 'absolute',
+        right: '0px',
+        bottom: '0px'
+    },
+    header: {
+        title: 'Botonic',
+        subtitle: '',
+        image: WEBCHAT.DEFAULTS.LOGO,
+        style: {
+            borderRadius: '10px 10px 0px 0px'
+        },
+        mobileStyle: {
+            borderRadius: '0px'
+        }
+    },
+    brand: {
+        color: COLORS.BOTONIC_BLUE,
+        image: WEBCHAT.DEFAULTS.LOGO
+    },
+    button: {
+        autodisable: false,
+        disabledstyle: {
+            opacity: 0.5,
+            cursor: 'auto',
+            pointerEvents: 'none'
+        },
+        messageType: 'text',
+        hoverBackground: COLORS.CONCRETE_WHITE,
+        hoverTextColor: COLORS.SOLID_BLACK,
+        style: {
+            width: '100%',
+            maxHeight: '80px',
+            height: 'auto',
+            fontFamily: 'inherit',
+            fontSize: '14px',
+            fontWeight: 'normal',
+            background: COLORS.SOLID_WHITE,
+            color: COLORS.SOLID_BLACK,
+            outline: '0',
+            border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,
+            borderRadius: '0px',
+            padding: '12px 32px',
+            overflow: 'hidden'
+        },
+        urlIcon: {
+            enable: false,
+            image: WEBCHAT.DEFAULTS.URL_ICON
+        }
+    },
+    message: {
+        user: {
+            blobTick: true
+        },
+        bot: {
+            blobTick: true
+        }
+    },
+    triggerButton: {
+        image: WEBCHAT.DEFAULTS.LOGO
+    },
+    userInput: {
+        attachments: {
+            enable: undefined
+        },
+        box: {
+            placeholder: WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER
+        },
+        emojiPicker: {
+            enable: undefined
+        },
+        sendButton: {
+            enable: true
+        },
+        enable: true
+    },
+    carousel: {
+        enableArrows: true
+    },
+    animations: {
+        enable: true
+    },
+    notifications: {
+        enable: false,
+        banner: {
+            enable: false,
+            text: 'unread messages'
+        },
+        triggerButton: {
+            enable: false
+        }
+    }
+};
+
+export { defaultTheme };
+
+//# sourceMappingURL=default-theme.js.map

package/lib/webchat/theme/default-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/theme/default-theme.js","sources":["../../../src/webchat/theme/default-theme.ts"],"sourcesContent":["import { COLORS, WEBCHAT, WEBCHAT_DEFAULT_CONTENTS } from '../../constants'\nimport type { WebchatTheme } from './types'\n\nexport const defaultTheme: WebchatTheme = {\n  style: {\n    width: '300px',\n    height: '450px',\n    borderRadius: '10px',\n    fontFamily: \"'Noto Sans JP', sans-serif\",\n    fontSize: '16px',\n    position: 'fixed',\n    right: '20px',\n    bottom: '20px',\n    backgroundColor: COLORS.SOLID_WHITE,\n    boxShadow: `${COLORS.SOLID_BLACK_ALPHA_0_2} 0px 0px 12px`,\n  },\n  mobileBreakpoint: 768,\n  mobileStyle: {\n    width: '100%',\n    height: '100%',\n    borderRadius: '0px',\n    fontSize: '16px',\n    position: 'absolute',\n    right: '0px',\n    bottom: '0px',\n  },\n  header: {\n    title: 'Botonic',\n    subtitle: '',\n    image: WEBCHAT.DEFAULTS.LOGO,\n    style: {\n      borderRadius: '10px 10px 0px 0px',\n    },\n    mobileStyle: {\n      borderRadius: '0px',\n    },\n  },\n  brand: {\n    color: COLORS.BOTONIC_BLUE,\n    image: WEBCHAT.DEFAULTS.LOGO,\n  },\n  button: {\n    autodisable: false,\n    disabledstyle: {\n      opacity: 0.5,\n      cursor: 'auto',\n      pointerEvents: 'none',\n    },\n    messageType: 'text',\n    hoverBackground: COLORS.CONCRETE_WHITE,\n    hoverTextColor: COLORS.SOLID_BLACK,\n    style: {\n      width: '100%',\n      maxHeight: '80px',\n      height: 'auto',\n      fontFamily: 'inherit',\n      fontSize: '14px',\n      fontWeight: 'normal',\n      background: COLORS.SOLID_WHITE,\n      color: COLORS.SOLID_BLACK,\n      outline: '0',\n      border: ` 1px solid ${COLORS.SEASHELL_WHITE}`,\n      borderRadius: '0px',\n      padding: '12px 32px',\n      overflow: 'hidden',\n    },\n    urlIcon: {\n      enable: false,\n      image: WEBCHAT.DEFAULTS.URL_ICON,\n    },\n  },\n  message: {\n    user: {\n      blobTick: true,\n    },\n    bot: {\n      blobTick: true,\n    },\n  },\n  triggerButton: { image: WEBCHAT.DEFAULTS.LOGO },\n  userInput: {\n    attachments: { enable: undefined },\n    box: {\n      placeholder: WEBCHAT_DEFAULT_CONTENTS.INPUT_PLACEHOLDER,\n    },\n    emojiPicker: { enable: undefined },\n    sendButton: { enable: true },\n    enable: true,\n  },\n  carousel: {\n    enableArrows: true,\n  },\n  animations: { enable: true },\n  notifications: {\n    enable: false,\n    banner: {\n      enable: false,\n      text: 'unread messages',\n    },\n    triggerButton: { enable: false },\n  },\n}\n"],"names":["COLORS","WEBCHAT","WEBCHAT_DEFAULT_CONTENTS","defaultTheme","undefined"],"mappings":";;;AAA2E;AAGpE,MAAMG,YAAYA,GAAiB;IACxC,OAAO;QACL,OAAO;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,UAAU;QACV,UAAU;QACV,OAAO;QACP,QAAQ;QACR,iBAAiBH,kBAAkB;QACnC,WAAW,GAAGA,4BAA4B,CAAC,aAAa,CAAC;IAC3D;IACA,kBAAkB;IAClB,aAAa;QACX,OAAO;QACP,QAAQ;QACR,cAAc;QACd,UAAU;QACV,UAAU;QACV,OAAO;QACP,QAAQ;IACV;IACA,QAAQ;QACN,OAAO;QACP,UAAU;QACV,OAAOC,qBAAqB;QAC5B,OAAO;YACL,cAAc;QAChB;QACA,aAAa;YACX,cAAc;QAChB;IACF;IACA,OAAO;QACL,OAAOD,mBAAmB;QAC1B,OAAOC,qBAAqB;IAC9B;IACA,QAAQ;QACN,aAAa;QACb,eAAe;YACb,SAAS;YACT,QAAQ;YACR,eAAe;QACjB;QACA,aAAa;QACb,iBAAiBD,qBAAqB;QACtC,gBAAgBA,kBAAkB;QAClC,OAAO;YACL,OAAO;YACP,WAAW;YACX,QAAQ;YACR,YAAY;YACZ,UAAU;YACV,YAAY;YACZ,YAAYA,kBAAkB;YAC9B,OAAOA,kBAAkB;YACzB,SAAS;YACT,QAAQ,CAAC,WAAW,EAAEA,qBAAqB,EAAE;YAC7C,cAAc;YACd,SAAS;YACT,UAAU;QACZ;QACA,SAAS;YACP,QAAQ;YACR,OAAOC,yBAAyB;QAClC;IACF;IACA,SAAS;QACP,MAAM;YACJ,UAAU;QACZ;QACA,KAAK;YACH,UAAU;QACZ;IACF;IACA,eAAe;QAAE,OAAOA,qBAAqB;IAAC;IAC9C,WAAW;QACT,aAAa;YAAE,QAAQG;QAAU;QACjC,KAAK;YACH,aAAaF,0CAA0C;QACzD;QACA,aAAa;YAAE,QAAQE;QAAU;QACjC,YAAY;YAAE,QAAQ;QAAK;QAC3B,QAAQ;IACV;IACA,UAAU;QACR,cAAc;IAChB;IACA,YAAY;QAAE,QAAQ;IAAK;IAC3B,eAAe;QACb,QAAQ;QACR,QAAQ;YACN,QAAQ;YACR,MAAM;QACR;QACA,eAAe;YAAE,QAAQ;QAAM;IACjC;AACF,EAAC"}

package/lib/webchat/theme/theme.d.ts

@@ -0,0 +1,8 @@
+import 'styled-components'
+
+import { WebchatTheme } from './types.js'
+
+// With this declaration, we can use the theme prop in styled components with TypeScript defined in WebchatTheme
+declare module 'styled-components' {
+  export interface DefaultTheme extends WebchatTheme {}
+}

package/lib/webchat/theme/types.d.ts

@@ -0,0 +1,213 @@
+import type { BlockInputOption, ButtonProps, CustomMessageType } from '../../components/index-types.js';
+export interface ImagePreviewerProps {
+    src: string;
+    isPreviewerOpened: boolean;
+    closePreviewer: () => void;
+}
+export interface CoverComponentProps {
+    closeComponent: () => void;
+}
+export interface CoverComponentOptions {
+    component: React.ComponentType<CoverComponentProps>;
+    props?: any;
+}
+export type PersistentMenuCloseOption = {
+    closeLabel: string;
+};
+export type PersistentMenuOption = {
+    label: string;
+} & ButtonProps;
+export type PersistentMenuOptionsTheme = (PersistentMenuCloseOption | PersistentMenuOption)[];
+export interface PersistentMenuOptionsProps {
+    onClick: () => void;
+    options: any;
+}
+export interface BlobProps {
+    blobTick?: boolean;
+    blobTickStyle?: any;
+    blobWidth?: string;
+    imageStyle?: any;
+}
+export interface CustomButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+interface ButtonStyle {
+    width?: string;
+    maxHeight?: string;
+    height?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    background?: string;
+    color?: string;
+    outline?: string;
+    border?: string;
+    borderRadius?: string;
+    padding?: string;
+    overflow?: string;
+}
+export interface WebchatTheme {
+    style: {
+        width?: string;
+        height?: string;
+        borderRadius?: string;
+        fontFamily?: string;
+        fontSize?: string;
+        position?: 'fixed' | 'absolute';
+        right?: string;
+        bottom?: string;
+        backgroundColor?: string;
+        boxShadow?: string;
+    };
+    mobileBreakpoint: number;
+    mobileStyle: {
+        width?: string;
+        height?: string;
+        borderRadius?: string;
+        fontSize?: string;
+        position?: 'fixed' | 'absolute';
+        right?: string;
+        bottom?: string;
+    };
+    coverComponent?: CoverComponentOptions;
+    webview?: {
+        style?: any;
+        header?: {
+            style?: any;
+        };
+    };
+    animations?: {
+        enable?: boolean;
+    };
+    intro?: {
+        style?: any;
+        image?: string;
+        custom?: React.ComponentType;
+    };
+    brand?: {
+        color?: string;
+        image?: string;
+    };
+    header?: {
+        title?: string;
+        subtitle?: string;
+        image?: string;
+        style?: {
+            borderRadius?: string;
+        };
+        mobileStyle?: {
+            borderRadius?: string;
+        };
+        custom?: React.ComponentType;
+    };
+    message?: {
+        bot?: BlobProps & {
+            image?: string;
+            style?: any;
+        };
+        agent?: {
+            image?: string;
+        };
+        user?: BlobProps & {
+            style?: any;
+        };
+        customTypes?: CustomMessageType[];
+        style?: any;
+        timestamps?: {
+            withImage?: boolean;
+            format: () => string;
+            style?: any;
+            enable?: boolean;
+        };
+    };
+    button?: {
+        autodisable?: boolean;
+        disabledstyle?: {
+            opacity?: number;
+            cursor?: string;
+            pointerEvents?: string;
+            backgroundColor?: string;
+        };
+        hoverBackground?: string;
+        hoverTextColor?: string;
+        messageType?: 'text' | 'postback';
+        urlIcon?: {
+            image?: string;
+            enable?: boolean;
+        };
+        style?: ButtonStyle;
+        custom?: React.ComponentType<CustomButtonProps>;
+    };
+    replies?: {
+        align?: 'left' | 'center' | 'right';
+        wrap?: 'wrap' | 'nowrap';
+    };
+    carousel?: {
+        arrow?: {
+            left: {
+                custom?: React.ComponentType;
+            };
+            right: {
+                custom?: React.ComponentType;
+            };
+        };
+        enableArrows?: boolean;
+    };
+    reply?: {
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    triggerButton: {
+        image?: string;
+        style?: any;
+        custom?: React.ComponentType;
+    };
+    notifications?: {
+        enable?: boolean;
+        banner?: {
+            custom?: React.ComponentType;
+            enable?: boolean;
+            text?: string;
+        };
+        triggerButton?: {
+            enable?: boolean;
+        };
+    };
+    scrollButton?: {
+        enable?: boolean;
+        custom?: React.ComponentType;
+    };
+    markdownStyle?: string;
+    userInput?: {
+        attachments?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        blockInputs?: BlockInputOption[];
+        box?: {
+            placeholder: string;
+            style?: any;
+        };
+        emojiPicker?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        menu?: {
+            darkBackground?: boolean;
+            custom?: React.ComponentType<PersistentMenuOptionsProps>;
+        };
+        menuButton?: {
+            custom?: React.ComponentType;
+        };
+        persistentMenu?: PersistentMenuOptionsTheme;
+        sendButton?: {
+            enable?: boolean;
+            custom?: React.ComponentType;
+        };
+        enable?: boolean;
+        style?: any;
+    };
+    imagePreviewer?: React.ComponentType<ImagePreviewerProps>;
+}
+export {};

package/lib/webchat/theme/types.js

@@ -0,0 +1,4 @@
+
+
+
+//# sourceMappingURL=types.js.map

package/lib/webchat/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webchat/theme/types.js","sources":["../../../src/webchat/theme/types.ts"],"sourcesContent":["import type {\n  BlockInputOption,\n  ButtonProps,\n  CustomMessageType,\n} from '../../components/index-types'\n\nexport interface ImagePreviewerProps {\n  src: string\n  isPreviewerOpened: boolean\n  closePreviewer: () => void\n}\nexport interface CoverComponentProps {\n  closeComponent: () => void\n}\n\nexport interface CoverComponentOptions {\n  component: React.ComponentType<CoverComponentProps>\n  props?: any\n}\n\nexport type PersistentMenuCloseOption = { closeLabel: string }\nexport type PersistentMenuOption = { label: string } & ButtonProps\n\nexport type PersistentMenuOptionsTheme = (\n  | PersistentMenuCloseOption\n  | PersistentMenuOption\n)[]\n\nexport interface PersistentMenuOptionsProps {\n  onClick: () => void\n  options: any\n}\n\nexport interface BlobProps {\n  blobTick?: boolean\n  blobTickStyle?: any\n  blobWidth?: string\n  imageStyle?: any\n}\n\nexport interface CustomButtonProps {\n  children: React.ReactNode\n  onClick?: () => void\n}\n\ninterface ButtonStyle {\n  width?: string\n  maxHeight?: string\n  height?: string\n  fontFamily?: string\n  fontSize?: string\n  fontWeight?: string\n  background?: string\n  color?: string\n  outline?: string\n  border?: string\n  borderRadius?: string\n  padding?: string\n  overflow?: string\n}\n\nexport interface WebchatTheme {\n  style: {\n    width?: string\n    height?: string\n    borderRadius?: string\n    fontFamily?: string\n    fontSize?: string\n    position?: 'fixed' | 'absolute'\n    right?: string\n    bottom?: string\n    backgroundColor?: string\n    boxShadow?: string\n  }\n  mobileBreakpoint: number\n  mobileStyle: {\n    width?: string\n    height?: string\n    borderRadius?: string\n    fontSize?: string\n    position?: 'fixed' | 'absolute'\n    right?: string\n    bottom?: string\n  }\n\n  coverComponent?: CoverComponentOptions\n  webview?: {\n    style?: any\n    header?: {\n      style?: any\n    }\n  }\n  animations?: { enable?: boolean }\n  intro?: {\n    style?: any\n    image?: string\n    custom?: React.ComponentType\n  }\n  brand?: { color?: string; image?: string }\n  header?: {\n    title?: string\n    subtitle?: string\n    image?: string\n    style?: {\n      borderRadius?: string\n    }\n    mobileStyle?: {\n      borderRadius?: string\n    }\n    custom?: React.ComponentType\n  }\n  message?: {\n    bot?: BlobProps & { image?: string; style?: any }\n    agent?: { image?: string }\n    user?: BlobProps & { style?: any }\n    // TODO: Review type used in customTypes should be a component exported by default with customMessage function\n    customTypes?: CustomMessageType[]\n    style?: any\n    timestamps?: {\n      withImage?: boolean\n      format: () => string\n      style?: any\n      enable?: boolean\n    }\n  }\n  button?: {\n    autodisable?: boolean\n    disabledstyle?: {\n      opacity?: number\n      cursor?: string\n      pointerEvents?: string\n      backgroundColor?: string\n    }\n    hoverBackground?: string\n    hoverTextColor?: string\n    messageType?: 'text' | 'postback'\n    urlIcon?: {\n      image?: string\n      enable?: boolean\n    }\n    style?: ButtonStyle\n    custom?: React.ComponentType<CustomButtonProps>\n  }\n  replies?: {\n    align?: 'left' | 'center' | 'right'\n    wrap?: 'wrap' | 'nowrap'\n  }\n  carousel?: {\n    arrow?: {\n      left: { custom?: React.ComponentType }\n      right: { custom?: React.ComponentType }\n    }\n    enableArrows?: boolean\n  }\n  reply?: {\n    style?: any\n    custom?: React.ComponentType\n  }\n  triggerButton: {\n    image?: string\n    style?: any\n    custom?: React.ComponentType\n  }\n  notifications?: {\n    enable?: boolean\n    banner?: {\n      custom?: React.ComponentType\n      enable?: boolean\n      text?: string\n    }\n    triggerButton?: { enable?: boolean }\n  }\n  scrollButton?: {\n    enable?: boolean\n    custom?: React.ComponentType\n  }\n  markdownStyle?: string // string template with css styles\n  userInput?: {\n    attachments?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    blockInputs?: BlockInputOption[]\n    box?: {\n      placeholder: string\n      style?: any\n    }\n    emojiPicker?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    menu?: {\n      darkBackground?: boolean\n      custom?: React.ComponentType<PersistentMenuOptionsProps>\n    }\n    menuButton?: { custom?: React.ComponentType }\n    persistentMenu?: PersistentMenuOptionsTheme\n    sendButton?: {\n      enable?: boolean\n      custom?: React.ComponentType\n    }\n    enable?: boolean\n    style?: any\n  }\n  imagePreviewer?: React.ComponentType<ImagePreviewerProps>\n}\n"],"names":[],"mappings":"AA6MC"}

package/lib/webchat/tracking.js

@@ -0,0 +1,47 @@
+import { useContext } from "react";
+import { WebchatContext } from "./context/index.js";
+
+
+
+
+
+function useTracking() {
+    const { webchatState, trackEvent } = useContext(WebchatContext);
+    const getRequest = ()=>{
+        const request = {
+            session: {
+                ...webchatState.session
+            },
+            getUserCountry: ()=>webchatState.session.user?.country || '',
+            getUserLocale: ()=>webchatState.session.user?.locale || '',
+            getSystemLocale: ()=>{
+                return webchatState.session.user?.system_locale || '';
+            }
+        };
+        return request;
+    };
+    const trackCustomEvent = async (event)=>{
+        if (!trackEvent) {
+            return;
+        }
+        const request = getRequest();
+        const { action, ...eventArgs } = event;
+        await trackEvent(request, action, eventArgs);
+    };
+    const trackFeedbackEvent = async (event)=>{
+        if (!trackEvent) {
+            return;
+        }
+        const request = getRequest();
+        const { action, ...eventArgs } = event;
+        await trackEvent(request, action, eventArgs);
+    };
+    return {
+        trackCustomEvent,
+        trackFeedbackEvent
+    };
+}
+
+export { useTracking };
+
+//# sourceMappingURL=tracking.js.map