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

Build Chatbots using React

import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import styled from 'styled-components';
import { WEBCHAT } from '../constants';
import { renderComponent } from '../util/react';
import { WebchatContext } from '../webchat/context';
const StyledButton = styled.button `
  width: 100%;
  padding: 4px 8px;
  font-family: inherit;
  border-radius: 8px;
  border: 1px solid ${props => { var _a; return (_a = props.theme.brand) === null || _a === void 0 ? void 0 : _a.color; }};
  color: ${props => { var _a; return (_a = props.theme.brand) === null || _a === void 0 ? void 0 : _a.color; }};
  cursor: pointer;
  outline: 0;
`;
export const Reply = (props) => {
    const { sendText, getThemeProperty } = useContext(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(WEBCHAT.CUSTOM_PROPERTIES.replyStyle);
        const CustomReply = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customReply);
        if (CustomReply) {
            return (_jsx("div", Object.assign({ onClick: e => handleClick(e) }, { children: _jsx(CustomReply, { children: props.children }) })));
        }
        return (_jsx(StyledButton, Object.assign({ style: Object.assign({}, replyStyle), onClick: e => handleClick(e) }, { children: props.children })));
    };
    const renderNode = () => {
        if (props.path) {
            const payload = `__PATH_PAYLOAD__${props.path}`;
            // @ts-ignore
            // eslint-disable-next-line react/no-unknown-property
            return _jsx("reply", Object.assign({ payload: payload }, { children: props.children }));
        }
        // @ts-ignore
        // eslint-disable-next-line react/no-unknown-property
        return _jsx("reply", Object.assign({ payload: props.payload }, { children: props.children }));
    };
    return renderComponent({ renderBrowser, renderNode });
};
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