@botonic/react/lib/cjs/components/raw.js

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Raw = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@botonic/core");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const message_1 = require("./message");
const RawDataButton = styled_components_1.default.div `
  align-self: flex-start;
  background-color: ${constants_1.COLORS.CURIOUS_BLUE};
  padding: 4px;
  margin: 4px 0px;
  cursor: pointer;
  color: ${constants_1.COLORS.SOLID_WHITE_ALPHA_0_8};
  font-size: 10px;
  border-radius: 2px;
`;
const Popover = styled_components_1.default.div `
  max-width: 100%;
  max-height: 500px;
  overflow: auto;
  background-color: ${constants_1.COLORS.LIGHT_GRAY};
  padding: 10px;
  pre {
    margin: 0px;
  }
`;
const serialize = rawProps => {
    return { data: rawProps.data, alt: rawProps.alt };
};
const Raw = props => {
    let content = props.children;
    const data = JSON.stringify(props.data, null, ' ');
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    if ((0, core_1.isBrowser)())
        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: props.alt }), (0, jsx_runtime_1.jsxs)(RawDataButton, Object.assign({ onClick: () => setIsOpen(!isOpen) }, { children: ["RAW DATA ", (0, jsx_runtime_1.jsx)("small", { children: isOpen ? '▲' : '▼' })] })), isOpen && ((0, jsx_runtime_1.jsx)(Popover, { children: (0, jsx_runtime_1.jsx)("pre", { children: data }) }))] }));
    return ((0, jsx_runtime_1.jsx)(message_1.Message, Object.assign({ role: constants_1.ROLES.RAW_MESSAGE, json: serialize(props) }, props, { data: data, type: core_1.INPUT.RAW }, { children: content })));
};
exports.Raw = Raw;
exports.Raw.serialize = serialize;
//# sourceMappingURL=raw.js.map