@botonic/react
Version:
Build Chatbots using React
91 lines • 5.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WebchatMessageList = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const constants_1 = require("../../constants");
const contexts_1 = require("../../contexts");
const styled_scrollbar_1 = require("../components/styled-scrollbar");
const typing_indicator_1 = require("../components/typing-indicator");
const intro_message_1 = require("./intro-message");
const scroll_button_1 = require("./scroll-button");
const styles_1 = require("./styles");
const unread_messages_banner_1 = require("./unread-messages-banner");
const use_notifications_1 = require("./use-notifications");
const WebchatMessageList = () => {
const { webchatState, getThemeProperty, resetUnreadMessages, setLastMessageVisible, } = (0, react_1.useContext)(contexts_1.WebchatContext);
const scrollbarOptions = Object.assign({ enable: true, autoHide: true }, getThemeProperty(constants_1.WEBCHAT.CUSTOM_PROPERTIES.scrollbar));
const [firstUnreadMessageId, setFirstUnreadMessageId] = (0, react_1.useState)();
const lastMessageBottomRef = (0, react_1.useRef)(null);
const scrollToBottom = () => {
setTimeout(() => {
var _a;
(_a = lastMessageBottomRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
behavior: 'smooth',
block: 'end',
});
}, 100);
};
const handleScrollToBottom = () => {
resetUnreadMessages();
scrollToBottom();
};
const unreadMessagesBannerRef = (0, react_1.useRef)(null);
const scrollToBanner = () => {
setTimeout(() => {
var _a;
(_a = unreadMessagesBannerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
behavior: 'smooth',
block: 'center',
});
}, 100);
};
const showUnreadMessagesBanner = (messageComponentId) => firstUnreadMessageId &&
messageComponentId === firstUnreadMessageId &&
webchatState.numUnreadMessages > 0;
(0, react_1.useEffect)(() => {
var _a;
const firstUnreadMessage = webchatState.messagesComponents.find(message => message.props.isUnread);
setFirstUnreadMessageId((_a = firstUnreadMessage === null || firstUnreadMessage === void 0 ? void 0 : firstUnreadMessage.props) === null || _a === void 0 ? void 0 : _a.id);
}, [webchatState.messagesComponents]);
(0, react_1.useEffect)(() => {
if (webchatState.messagesComponents.length > 0 &&
lastMessageBottomRef.current) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
setLastMessageVisible(entry.isIntersecting);
});
});
observer.observe(lastMessageBottomRef.current);
}
}, [webchatState.messagesComponents]);
const { notificationsEnabled } = (0, use_notifications_1.useNotifications)();
(0, react_1.useEffect)(() => {
if (!notificationsEnabled) {
scrollToBottom();
return;
}
}, [webchatState.typing]);
(0, react_1.useEffect)(() => {
if (notificationsEnabled) {
if (webchatState.isWebchatOpen && unreadMessagesBannerRef.current) {
scrollToBanner();
return;
}
scrollToBottom();
return;
}
}, [firstUnreadMessageId, webchatState.isWebchatOpen, webchatState.typing]);
const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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',
// @ts-ignore
scrollbar: scrollbarOptions, autoHide: scrollbarOptions.autoHide, ismessagescontainer: true.toString(), style: { flex: 1 } }, { children: [(0, jsx_runtime_1.jsx)(intro_message_1.IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
return ((0, jsx_runtime_1.jsxs)(styles_1.ContainerMessage, Object.assign({ role: constants_1.ROLES.MESSAGE }, { children: [showUnreadMessagesBanner(messageComponent.props.id) && ((0, jsx_runtime_1.jsx)(unread_messages_banner_1.UnreadMessagesBanner, { unreadMessagesBannerRef: unreadMessagesBannerRef })), messageComponent, index === webchatState.messagesComponents.length - 1 && ((0, jsx_runtime_1.jsx)("div", { ref: lastMessageBottomRef, style: {
content: '',
} }))] }), index));
}), webchatState.typing && (0, jsx_runtime_1.jsx)(typing_indicator_1.TypingIndicator, {})] })), showScrollButton && (0, jsx_runtime_1.jsx)(scroll_button_1.ScrollButton, { handleClick: handleScrollToBottom })] }));
};
exports.WebchatMessageList = WebchatMessageList;
//# sourceMappingURL=index.js.map