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

Build Chatbots using React

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { INPUT, isBrowser } from '@botonic/core';
import React, { useState } from 'react';
import styled from 'styled-components';
import { COLORS, ROLES } from '../constants';
import { Message } from './message';
const RawDataButton = styled.div `
  align-self: flex-start;
  background-color: ${COLORS.CURIOUS_BLUE};
  padding: 4px;
  margin: 4px 0px;
  cursor: pointer;
  color: ${COLORS.SOLID_WHITE_ALPHA_0_8};
  font-size: 10px;
  border-radius: 2px;
`;
const Popover = styled.div `
  max-width: 100%;
  max-height: 500px;
  overflow: auto;
  background-color: ${COLORS.LIGHT_GRAY};
  padding: 10px;
  pre {
    margin: 0px;
  }
`;
const serialize = rawProps => {
    return { data: rawProps.data, alt: rawProps.alt };
};
export const Raw = props => {
    let content = props.children;
    const data = JSON.stringify(props.data, null, ' ');
    const [isOpen, setIsOpen] = useState(false);
    if (isBrowser())
        content = (_jsxs(_Fragment, { children: [_jsx("div", { children: props.alt }), _jsxs(RawDataButton, Object.assign({ onClick: () => setIsOpen(!isOpen) }, { children: ["RAW DATA ", _jsx("small", { children: isOpen ? '▲' : '▼' })] })), isOpen && (_jsx(Popover, { children: _jsx("pre", { children: data }) }))] }));
    return (_jsx(Message, Object.assign({ role: ROLES.RAW_MESSAGE, json: serialize(props) }, props, { data: data, type: INPUT.RAW }, { children: content })));
};
Raw.serialize = serialize;
//# sourceMappingURL=raw.js.map