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

Build Chatbots using React

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Reply = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
const react_2 = require("../util/react");
const context_1 = require("../webchat/context");
const constants_2 = require("./constants");
const StyledButton = styled_components_1.default.button `
  width: 100%;
  padding: 4px 8px;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid ${props => props.theme.brand?.color};
  color: ${props => props.theme.brand?.color};
  cursor: pointer;
  outline: 0;
`;
const Reply = (props) => {
    const { sendText, getThemeProperty } = (0, react_1.useContext)(context_1.WebchatContext);
    const handleClick = (event) => {
        event.preventDefault();
        if (props.children) {
            let payload = props.payload;
            if (props.path) {
                payload = `__PATH_PAYLOAD__${props.path}`;
            }
            sendText(props.children, payload);
        }
    };
    const renderBrowser = () => {
        const replyStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.replyStyle);
        const CustomReply = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customReply);
        if (CustomReply) {
            return ((0, jsx_runtime_1.jsx)("div", { onClick: e => handleClick(e), children: (0, jsx_runtime_1.jsx)(CustomReply, { children: props.children }) }));
        }
        return ((0, jsx_runtime_1.jsx)(StyledButton, { style: {
                ...replyStyle,
            }, onClick: e => handleClick(e), children: props.children }));
    };
    const renderNode = () => {
        if (props.path) {
            const payload = `__PATH_PAYLOAD__${props.path}`;
            // @ts-expect-error
            // eslint-disable-next-line react/no-unknown-property
            return (0, jsx_runtime_1.jsx)("reply", { payload: payload, children: props.children });
        }
        // @ts-expect-error
        // eslint-disable-next-line react/no-unknown-property
        return (0, jsx_runtime_1.jsx)("reply", { payload: props.payload, children: props.children });
    };
    return (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Reply = Reply;
exports.Reply.displayName = constants_2.COMPONENT_DISPLAY_NAMES.Reply;
exports.Reply.serialize = (replyProps) => {
    let payload = replyProps.payload;
    if (replyProps.path) {
        payload = `__PATH_PAYLOAD__${replyProps.path}`;
    }
    return { reply: { title: replyProps.children, payload } };
};
//# sourceMappingURL=reply.js.map