@botonic/react
Version:
Build Chatbots using React
188 lines • 11.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Message = 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 Fade_1 = tslib_1.__importDefault(require("react-reveal/Fade"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const uuid_1 = require("uuid");
const constants_1 = require("../constants");
const contexts_1 = require("../contexts");
const environment_1 = require("../util/environment");
const react_2 = require("../util/react");
const button_1 = require("./button");
const buttons_disabler_1 = require("./buttons-disabler");
const markdown_1 = require("./markdown");
const reply_1 = require("./reply");
const timestamps_1 = require("./timestamps");
const MessageContainer = styled_components_1.default.div `
display: flex;
justify-content: ${props => (props.isfromuser ? 'flex-end' : 'flex-start')};
position: relative;
padding: 0px 6px;
`;
const BotMessageImageContainer = styled_components_1.default.div `
width: 28px;
padding: 12px 4px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
`;
const Blob = styled_components_1.default.div `
position: relative;
margin: 8px;
border-radius: 8px;
background-color: ${props => props.bgcolor};
color: ${props => props.color};
max-width: ${props => props.blob
? props.blobwidth
? props.blobwidth
: '60%'
: 'calc(100% - 16px)'};
`;
const BlobText = styled_components_1.default.div `
padding: ${props => (props.blob ? '8px 12px' : '0px')};
display: flex;
flex-direction: column;
white-space: pre-line;
${props => props.markdownstyle}
`;
const BlobTickContainer = styled_components_1.default.div `
position: absolute;
box-sizing: border-box;
height: 100%;
padding: 18px 0px 18px 0px;
display: flex;
top: 0;
align-items: center;
`;
const BlobTick = styled_components_1.default.div `
position: relative;
margin: -${props => props.pointerSize}px 0px;
border: ${props => props.pointerSize}px solid ${constants_1.COLORS.TRANSPARENT};
`;
const Message = props => {
const { defaultTyping, defaultDelay } = (0, react_1.useContext)(contexts_1.RequestContext);
let { type = '', blob = true, from = constants_1.SENDERS.bot, delay = defaultDelay, typing = defaultTyping, children, enabletimestamps = props.enabletimestamps || props.enableTimestamps, json, style, imagestyle = props.imagestyle || props.imageStyle } = props, otherProps = tslib_1.__rest(props, ["type", "blob", "from", "delay", "typing", "children", "enabletimestamps", "json", "style", "imagestyle"]);
const isFromUser = from === constants_1.SENDERS.user;
const isFromBot = from === constants_1.SENDERS.bot;
const markdown = props.markdown;
const { webchatState, addMessage, updateReplies, getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
const [state, setState] = (0, react_1.useState)({
id: props.id || (0, uuid_1.v4)(),
});
const [disabled, setDisabled] = (0, react_1.useState)(false);
children = buttons_disabler_1.ButtonsDisabler.updateChildrenButtons(children, {
parentId: state.id,
disabled,
setDisabled,
});
const replies = react_1.default.Children.toArray(children).filter(e => e.type === reply_1.Reply);
const buttons = react_1.default.Children.toArray(children).filter(e => e.type === button_1.Button);
let textChildren = react_1.default.Children.toArray(children).filter(e => ![button_1.Button, reply_1.Reply].includes(e.type));
if (isFromUser)
textChildren = textChildren.map(e => typeof e === 'string' ? (0, markdown_1.renderLinks)(e) : e);
const { timestampsEnabled, getFormattedTimestamp, timestampStyle } = (0, timestamps_1.resolveMessageTimestamps)(getThemeProperty, enabletimestamps);
const getEnvAck = () => {
if (environment_1.isDev)
return 1;
if (!isFromUser)
return 1;
if (props.ack !== undefined)
return props.ack;
return 0;
};
const ack = getEnvAck();
(0, react_1.useEffect)(() => {
if ((0, core_1.isBrowser)()) {
const decomposedChildren = json;
const message = {
id: state.id,
type,
data: decomposedChildren ? decomposedChildren : textChildren,
timestamp: props.timestamp || getFormattedTimestamp,
markdown,
from,
buttons: buttons.map(b => (Object.assign({ parentId: b.props.parentId, payload: b.props.payload, path: b.props.path, url: b.props.url, target: b.props.target, webview: b.props.webview && String(b.props.webview), title: b.props.children }, buttons_disabler_1.ButtonsDisabler.withDisabledProps(b.props)))),
delay,
typing,
replies: replies.map(r => ({
payload: r.props.payload,
path: r.props.path,
url: r.props.url,
text: r.props.children,
})),
display: delay + typing == 0,
customTypeName: decomposedChildren.customTypeName,
ack: ack,
};
addMessage(message);
}
}, []);
(0, react_1.useEffect)(() => {
if ((0, core_1.isBrowser)()) {
const msg = webchatState.messagesJSON.find(m => m.id === state.id);
if (msg &&
msg.display &&
webchatState.messagesJSON.filter(m => !m.display).length == 0) {
updateReplies(replies);
}
}
}, [webchatState.messagesJSON]);
const brandColor = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandColor, constants_1.COLORS.BOTONIC_BLUE);
const getBgColor = () => {
if (!blob)
return constants_1.COLORS.TRANSPARENT;
if (isFromUser) {
return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userMessageBackground, brandColor);
}
return getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageBackground, constants_1.COLORS.SEASHELL_WHITE);
};
const getMessageStyle = () => isFromBot
? getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageStyle)
: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.userMessageStyle);
const hasBlobTick = () => getThemeProperty(`message.${from}.blobTick`, true);
const renderBrowser = () => {
const m = webchatState.messagesJSON.find(m => m.id === state.id);
if (!m || !m.display)
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
const getBlobTick = pointerSize => {
// to add a border to the blobTick we need to create two triangles and overlap them
// that is why the color depends on the pointerSize
// https://developpaper.com/realization-code-of-css-drawing-triangle-border-method/
const color = pointerSize == 5
? getBgColor()
: getThemeProperty(`message.${from}.style.borderColor`, constants_1.COLORS.TRANSPARENT);
const containerStyle = Object.assign({}, getThemeProperty(`message.${from}.blobTickStyle`));
const blobTickStyle = {};
if (isFromUser) {
containerStyle.right = 0;
containerStyle.marginRight = -pointerSize;
blobTickStyle.borderRight = 0;
blobTickStyle.borderLeftColor = color;
}
else {
containerStyle.left = 0;
containerStyle.marginLeft = -pointerSize;
blobTickStyle.borderLeft = 0;
blobTickStyle.borderRightColor = color;
}
return ((0, jsx_runtime_1.jsx)(BlobTickContainer, Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)(BlobTick, { pointerSize: pointerSize, style: blobTickStyle }) })));
};
const BotMessageImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageImage, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.brandImage, constants_1.WEBCHAT.DEFAULTS.LOGO));
const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
const resolveCustomTypeName = () => isFromBot && type === core_1.INPUT.CUSTOM ? ` ${m.customTypeName}` : '';
const className = `${type}-${from}${resolveCustomTypeName()}`;
return ((0, jsx_runtime_1.jsx)(react_2.ConditionalWrapper, Object.assign({ condition: animationsEnabled, wrapper: children => (0, jsx_runtime_1.jsx)(Fade_1.default, { children: children }) }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(MessageContainer, Object.assign({ isfromuser: isFromUser, style: Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.messageStyle)) }, { children: [isFromBot && BotMessageImage && ((0, jsx_runtime_1.jsx)(BotMessageImageContainer, Object.assign({ style: Object.assign(Object.assign({}, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageImageStyle)), imagestyle) }, { children: (0, jsx_runtime_1.jsx)("img", { style: { width: '100%' }, src: (0, environment_1.resolveImage)(BotMessageImage) }) }))), (0, jsx_runtime_1.jsxs)(Blob, Object.assign({ className: className, bgcolor: getBgColor(), color: isFromUser ? constants_1.COLORS.SOLID_WHITE : constants_1.COLORS.SOLID_BLACK, blobwidth: getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.botMessageBlobWidth), blob: blob, style: Object.assign(Object.assign(Object.assign({}, getMessageStyle()), style), { opacity: ack === 0 ? 0.6 : 1 }) }, otherProps, { children: [markdown ? ((0, jsx_runtime_1.jsx)(BlobText, { blob: blob, dangerouslySetInnerHTML: {
__html: (0, markdown_1.renderMarkdown)(textChildren),
}, markdownstyle: (0, markdown_1.getMarkdownStyle)(getThemeProperty, isFromUser ? constants_1.COLORS.SEASHELL_WHITE : brandColor) })) : ((0, jsx_runtime_1.jsx)(BlobText, Object.assign({ blob: blob }, { children: textChildren }))), !!buttons.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'message-buttons-container' }, { children: buttons }))), Boolean(blob) && hasBlobTick() && getBlobTick(6), Boolean(blob) && hasBlobTick() && getBlobTick(5)] }))] })), timestampsEnabled && ((0, jsx_runtime_1.jsx)(timestamps_1.MessageTimestamp, { timestamp: m.timestamp, style: timestampStyle, isfromuser: isFromUser }))] }) })));
};
const { blob: _blob, json: _json } = props, nodeProps = tslib_1.__rest(props, ["blob", "json"]);
const renderNode = () => type === core_1.INPUT.CUSTOM ? ((0, jsx_runtime_1.jsx)("message", Object.assign({ json: JSON.stringify(_json), typing: typing, delay: delay }, nodeProps))) : ((0, jsx_runtime_1.jsx)("message", Object.assign({ typing: typing, delay: delay }, nodeProps, { children: children })));
return (0, react_2.renderComponent)({ renderBrowser, renderNode });
};
exports.Message = Message;
//# sourceMappingURL=message.js.map