@botonic/react
Version:
Build Chatbots using React
60 lines • 2.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebchatDev = exports.DebugTabPortal = exports.DebugTab = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const lodash_merge_1 = tslib_1.__importDefault(require("lodash.merge"));
const react_1 = tslib_1.__importStar(require("react"));
const react_dom_1 = require("react-dom");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const use_webchat_1 = require("./context/use-webchat");
const session_view_1 = require("./session-view");
const webchat_1 = require("./webchat");
exports.DebugTab = styled_components_1.default.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 = (_a) => {
var { webchatHooks } = _a, props = tslib_1.__rest(_a, ["webchatHooks"]);
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.DebugTab, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(session_view_1.SessionView, { webchatHooks: webchatHooks }) })), document.body);
};
exports.DebugTabPortal = DebugTabPortal;
const initialSession = {
is_first_interaction: true,
last_session: {},
user: {
id: '000001',
username: 'johndoe',
name: 'John Doe',
provider: core_1.PROVIDER.DEV,
provider_id: '0000000',
extra_data: {},
},
organization: '',
bot: {
id: '0000000',
name: 'botName',
},
};
// eslint-disable-next-line react/display-name
exports.WebchatDev = (0, react_1.forwardRef)((props, ref) => {
const webchatHooks = (0, use_webchat_1.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. */
(0, react_1.useEffect)(() => {
updateTheme((0, lodash_merge_1.default)(webchatState.theme, props.theme));
}, [props.theme]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(webchat_1.Webchat, Object.assign({ style: { flex: 1, position: 'relative' } }, props, { ref: ref, webchatHooks: webchatHooks, initialSession: initialSession, initialDevSettings: {
keepSessionOnReload: webchatState.devSettings.keepSessionOnReload,
showSessionView: webchatState.devSettings.showSessionView,
} })), (0, jsx_runtime_1.jsx)(exports.DebugTabPortal, { show: webchatState.devSettings.showSessionView, webchatHooks: webchatHooks })] }));
});
//# sourceMappingURL=webchat-dev.js.map