@botonic/react
Version:
Build Chatbots using React
55 lines • 3.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebviewContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = require("react");
const constants_1 = require("../../constants");
const contexts_1 = require("../../contexts");
const context_1 = require("../context");
const header_1 = require("./header");
const styles_1 = require("./styles");
const WebviewContainer = ({ localWebviews, }) => {
const { closeWebview, getThemeProperty, webchatState } = (0, react_1.useContext)(context_1.WebchatContext);
const webviewRequestContext = {
params: webchatState.webviewParams || {},
session: webchatState.session || {},
getUserCountry: () => webchatState.session?.user?.country || '',
getUserLocale: () => webchatState.session?.user?.locale || '',
getSystemLocale: () => webchatState.session?.user?.system_locale || '',
closeWebview: async (options) => await closeWebview(options),
};
const close = async (e) => {
if (e.data === 'botonicCloseWebview') {
console.log('Received close message from webview');
await closeWebview();
}
};
(0, react_1.useEffect)(() => {
window.addEventListener('message', close, false);
return () => window.removeEventListener('message', close, false);
}, []);
if ((0, core_1.isDev)(webchatState.session)) {
// eslint-disable-next-line @typescript-eslint/naming-convention
const Webview = getWebviewInDevMode(localWebviews, webchatState);
return ((0, jsx_runtime_1.jsx)(contexts_1.WebviewRequestContext.Provider, { value: webviewRequestContext, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWebview, { role: constants_1.ROLES.WEBVIEW, style: {
...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
}, children: [(0, jsx_runtime_1.jsx)(header_1.WebviewHeader, {}), (0, jsx_runtime_1.jsx)(styles_1.StyledWebviewContent, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledFrameAsDiv, { children: (0, jsx_runtime_1.jsx)(Webview, {}) }) })] }) }));
}
const webviewUrl = webchatState.webview && typeof webchatState.webview === 'string'
? webchatState.webview
: '';
return ((0, jsx_runtime_1.jsx)(contexts_1.WebviewRequestContext.Provider, { value: webviewRequestContext, children: (0, jsx_runtime_1.jsxs)(styles_1.StyledWebview, { role: constants_1.ROLES.WEBVIEW, style: {
...getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.webviewStyle),
}, children: [(0, jsx_runtime_1.jsx)(header_1.WebviewHeader, {}), (0, jsx_runtime_1.jsx)(styles_1.StyledWebviewContent, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledFrame, { src: webviewUrl }) })] }) }));
};
exports.WebviewContainer = WebviewContainer;
function getWebviewInDevMode(localWebviews, webchatState) {
return (localWebviews?.find(webview => {
if (typeof webchatState.webview === 'string') {
return false;
}
return webview.name === webchatState.webview?.name;
}) ?? webchatState.webview);
}
//# sourceMappingURL=index.js.map