@botonic/react
Version:
Build Chatbots using React
112 lines • 5.74 kB
JavaScript
;
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 constants_1 = require("../../constants");
const context_1 = require("../../webchat/context");
const constants_2 = require("../constants");
const typing_indicator_1 = tslib_1.__importDefault(require("../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 SCROLL_TIMEOUT = 200;
const scrollOptionsEnd = {
block: 'end',
};
const scrollOptionsCenter = {
block: 'center',
};
const WebchatMessageList = () => {
const { webchatState, resetUnreadMessages, setLastMessageVisible, scrollableMessagesListRef, } = (0, react_1.useContext)(context_1.WebchatContext);
const { notificationsEnabled } = (0, use_notifications_1.useNotifications)();
const [firstUnreadMessageId, setFirstUnreadMessageId] = (0, react_1.useState)();
const lastMessageRef = (0, react_1.useRef)(null);
const typingRef = (0, react_1.useRef)(null);
const unreadMessagesBannerRef = (0, react_1.useRef)(null);
const scrollToTyping = () => {
setTimeout(() => {
var _a;
(_a = typingRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(scrollOptionsEnd);
}, SCROLL_TIMEOUT);
};
const scrollToLastMessage = () => {
setTimeout(() => {
var _a;
(_a = lastMessageRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(scrollOptionsEnd);
}, SCROLL_TIMEOUT);
};
const scrollToBanner = () => {
setTimeout(() => {
var _a;
(_a = unreadMessagesBannerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(scrollOptionsCenter);
}, SCROLL_TIMEOUT);
};
const handleScrollToBottom = () => {
resetUnreadMessages();
if (webchatState.typing) {
scrollToTyping();
return;
}
scrollToLastMessage();
};
const showUnreadMessagesBanner = (messageComponentId) => {
return (!webchatState.isInputFocused &&
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 && lastMessageRef.current) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
setLastMessageVisible(entry.isIntersecting);
});
});
observer.observe(lastMessageRef.current);
}
}, [webchatState.messagesComponents]);
(0, react_1.useEffect)(() => {
if (!notificationsEnabled) {
if (webchatState.typing) {
scrollToTyping();
return;
}
scrollToLastMessage();
}
}, [webchatState.typing, webchatState.messagesComponents]);
(0, react_1.useEffect)(() => {
if (webchatState.isWebchatOpen && notificationsEnabled) {
if (unreadMessagesBannerRef.current) {
scrollToBanner();
return;
}
if (webchatState.typing) {
scrollToTyping();
return;
}
scrollToLastMessage();
}
}, [
firstUnreadMessageId,
webchatState.isWebchatOpen,
webchatState.typing,
webchatState.messagesComponents,
]);
const showScrollButton = webchatState.numUnreadMessages > 0 && !webchatState.isLastMessageVisible;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.ScrollableMessageList, Object.assign({ id: constants_2.BotonicContainerId.ScrollableMessagesList, ref: scrollableMessagesListRef, role: constants_1.ROLES.MESSAGE_LIST }, { children: [(0, jsx_runtime_1.jsx)(intro_message_1.IntroMessage, {}), webchatState.messagesComponents.map((messageComponent, index) => {
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(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: lastMessageRef, style: {
content: '',
} }))] }, messageComponent.props.id));
}), webchatState.typing && (0, jsx_runtime_1.jsx)(typing_indicator_1.default, { ref: typingRef })] })), showScrollButton && (0, jsx_runtime_1.jsx)(scroll_button_1.ScrollButton, { handleClick: handleScrollToBottom })] }));
};
exports.WebchatMessageList = WebchatMessageList;
//# sourceMappingURL=index.js.map