@botonic/react
Version:
Build Chatbots using React
39 lines • 2.79 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebchatMessageList = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
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 constants_1 = require("../constants");
const contexts_1 = require("../contexts");
const environment_1 = require("../util/environment");
const react_2 = require("../util/react");
const styled_scrollbar_1 = require("./components/styled-scrollbar");
const StyledMessages = styled_components_1.default.div `
display: flex;
overflow-x: hidden;
flex-direction: column;
flex: none;
white-space: pre;
word-wrap: break-word;
`;
const DefaultIntroImage = styled_components_1.default.img `
max-height: 50%;
width: 100%;
`;
const WebchatMessageList = props => {
const { webchatState, getThemeProperty } = (0, react_1.useContext)(contexts_1.WebchatContext);
const animationsEnabled = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
const CustomIntro = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.customIntro);
const introImage = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introImage);
const introStyle = getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.introStyle);
const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
const DefaultIntro = introImage && ((0, jsx_runtime_1.jsx)(DefaultIntroImage, { style: Object.assign({}, introStyle), src: (0, environment_1.resolveImage)(introImage) }));
return ((0, jsx_runtime_1.jsxs)(styled_scrollbar_1.StyledScrollbar, Object.assign({ role: constants_1.ROLES.MESSAGE_LIST,
// TODO: Distinguis between multiple instances of webchat, e.g. `${uniqueId}-botonic-scrollable`
id: 'botonic-scrollable-content', scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide, ismessagescontainer: 'true', style: Object.assign({}, props.style) }, { children: [(CustomIntro || DefaultIntro) && ((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: CustomIntro ? (0, jsx_runtime_1.jsx)(CustomIntro, {}) : DefaultIntro }))), webchatState.messagesComponents.map((e, i) => ((0, jsx_runtime_1.jsx)(StyledMessages, Object.assign({ role: constants_1.ROLES.MESSAGE }, { children: e }), i))), props.children] })));
};
exports.WebchatMessageList = WebchatMessageList;
//# sourceMappingURL=message-list.js.map