@botonic/react/lib/cjs/webchat/session-view.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SessionView = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_json_tree_1 = require("react-json-tree");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const use_webchat_1 = require("./context/use-webchat");
const AttributeContainer = styled_components_1.default.div `
  display: flex;
  flex: none;
  padding: 12px;
  padding-bottom: 0px;
  font-size: 12px;
  font-weight: 600;
  color: ${constants_1.COLORS.SOLID_WHITE};
  align-items: center;
`;
const Label = styled_components_1.default.div `
  flex: none;
`;
const Value = styled_components_1.default.div `
  flex: 1 1 auto;
  max-height: 20px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 6px;
  color: ${constants_1.COLORS.CURIOUS_BLUE};
  overflow-x: hidden;
`;
const SessionViewAttribute = props => ((0, jsx_runtime_1.jsxs)(AttributeContainer, { children: [(0, jsx_runtime_1.jsx)(Label, { children: props.label }), (0, jsx_runtime_1.jsx)(Value, { children: props.value })] }));
const SessionViewContent = styled_components_1.default.div `
  position: relative;
  width: ${props => (props.show ? '100%' : '0%')};
  height: 100%;
  display: flex;
  background-color: ${constants_1.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_1.default.div `
  position: absolute;
  top: 10px;
  right: -32px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_8};
  font-size: 14px;
  font-weight: 600;
  background-color: ${constants_1.COLORS.DAINTREE_BLUE};
  flex-direction: column;
  z-index: 100000;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
`;
const ContentContainer = styled_components_1.default.div `
  overflow-y: auto;
  overflow-x: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
`;
const Title = styled_components_1.default.div `
  padding: 12px;
  text-align: center;
  color: ${constants_1.COLORS.SOLID_WHITE};
  border-bottom: 1px solid ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_2};
`;
const SessionContainer = styled_components_1.default.div `
  flex: 1 1 auto;
  height: 100%;
  overflow-y: auto;
`;
const KeepSessionContainer = styled_components_1.default.div `
  flex: none;
  padding: 12px;
  color: ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_8};
  font-size: 12px;
`;
const SessionView = props => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const { webchatState, updateDevSettings } = props.webchatHooks || (0, use_webchat_1.useWebchat)();
    const { latestInput: input, session, lastRoutePath } = webchatState;
    const toggleSessionView = () => updateDevSettings(Object.assign(Object.assign({}, webchatState.devSettings), { showSessionView: !webchatState.devSettings.showSessionView }));
    const toggleKeepSessionOnReload = () => updateDevSettings(Object.assign(Object.assign({}, webchatState.devSettings), { keepSessionOnReload: !webchatState.devSettings.keepSessionOnReload }));
    return ((0, jsx_runtime_1.jsxs)(SessionViewContent, Object.assign({ show: webchatState.devSettings.showSessionView }, { children: [(0, jsx_runtime_1.jsx)(ToggleTab, Object.assign({ onClick: toggleSessionView }, { children: webchatState.devSettings.showSessionView ? '⇤' : '⇥' })), (0, jsx_runtime_1.jsxs)(ContentContainer, { children: [(0, jsx_runtime_1.jsx)(Title, { children: "Botonic Dev Console" }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'INPUT:', value: input && Object.keys(input).length
                            ? `[${input.type}] ${input.data || ''}`
                            : '' }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'PAYLOAD:', value: input.payload }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'INTENT:', value: input.intent
                            ? `${input.intent} (${(input.confidence * 100).toFixed(1)}%)`
                            : '' }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'PATH:', value: lastRoutePath ? `/${lastRoutePath}` : '/' }), (0, jsx_runtime_1.jsx)(SessionViewAttribute, { label: 'SESSION:' }), (0, jsx_runtime_1.jsx)(SessionContainer, { children: (0, jsx_runtime_1.jsx)(react_json_tree_1.JSONTree, { data: session, hideRoot: true }) }), (0, jsx_runtime_1.jsx)(KeepSessionContainer, { children: (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("input", { type: 'checkbox', name: 'toggleKeepSessionOnReload', checked: Boolean(webchatState.devSettings.keepSessionOnReload), onChange: toggleKeepSessionOnReload }), "Keep session on reload"] }) })] })] })));
};
exports.SessionView = SessionView;
//# sourceMappingURL=session-view.js.map