@botonic/react/lib/esm/webchat/webview/index.js

Build Chatbots using React

import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect } from 'react';
import { ROLES, WEBCHAT } from '../../constants';
import { WebviewRequestContext } from '../../contexts';
import { WebchatContext } from '../context';
import { WebviewHeader } from './header';
import { StyledFrame, StyledFrameAsDiv, StyledWebview, StyledWebviewContent, } from './styles';
export const WebviewContainer = () => {
    const { closeWebview, getThemeProperty, webchatState } = useContext(WebchatContext);
    const webviewRequestContext = {
        closeWebview: (options) => __awaiter(void 0, void 0, void 0, function* () { return yield closeWebview(options); }),
        params: webchatState.webviewParams || {},
        session: webchatState.session || {},
    };
    const Webview = webchatState.webview;
    const close = (e) => __awaiter(void 0, void 0, void 0, function* () {
        if (e.data === 'botonicCloseWebview') {
            console.log('Received close message from webview');
            yield closeWebview();
        }
    });
    useEffect(() => {
        window.addEventListener('message', close, false);
        return () => window.removeEventListener('message', close, false);
    }, []);
    // TODO: Review how to split the logic of rendering a webview in local development and production
    // In local development, Webview is a component. In production it is the URL of the webview
    const isUrlToWebview = typeof Webview === 'string';
    return (_jsx(WebviewRequestContext.Provider, Object.assign({ value: webviewRequestContext }, { children: _jsxs(StyledWebview, Object.assign({ role: ROLES.WEBVIEW, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewStyle)) }, { children: [_jsx(WebviewHeader, {}), _jsx(StyledWebviewContent, { children: isUrlToWebview ? (_jsx(StyledFrame, { src: Webview })) : (_jsx(StyledFrameAsDiv, { children: _jsx(Webview, {}) })) })] })) })));
};
//# sourceMappingURL=index.js.map