@uimkit/uikit-react
Version:
<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>
88 lines (85 loc) • 6.48 kB
JavaScript
import { __awaiter, __generator } from 'tslib';
import React__default, { useState } from 'react';
import '../../types/models.js';
import '../../types/events.js';
import '../../context/TranslationContext.js';
import '../../context/UIKitContext.js';
import { useComponentContext } from '../../context/ComponentContext.js';
import { useChatActionContext } from '../../context/ChatActionContext.js';
import '../../context/MessageInputContext.js';
import '../../context/UIMessageContext.js';
import { useChatStateContext } from '../../context/ChatStateContext.js';
import { useMessageListElements } from './hooks/useMessageListElements.js';
import { InfiniteScroll } from '../InfiniteScrollPaginator/InfiniteScroll.js';
import { EmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator.js';
import { MessageListNotifications } from './MessageListNotifications.js';
import { useScrollLocationLogic } from './hooks/useScrollLocationLogic.js';
import '../Loading/LoadingErrorIndicator.js';
import { LoadingIndicator } from '../Loading/LoadingIndicator.js';
import { MessageNotification } from './MessageNotification.js';
var UIMessageList = function (props) {
var propsMessageList = props.messageList, propsHighlightedMessageId = props.highlightedMessageId, propsLoadMore = props.loadMore; props.loadMoreNewer; var _a = props.hasMoreNewer, hasMoreNewer = _a === void 0 ? false : _a, suppressAutoscroll = props.suppressAutoscroll, propsIntervalsTimer = props.intervalsTimer;
var _b = useState(null), ulElement = _b[0], setUlElement = _b[1];
var jumpToLatestMessage = useChatActionContext().jumpToLatestMessage;
var _c = useChatStateContext(), contextHighlightedMessageId = _c.highlightedMessageId, messageListRef = _c.messageListRef, UIMessageListConfig = _c.UIMessageListConfig;
var _d = useComponentContext('UIMessageList'), UIMessage = _d.UIMessage, _e = _d.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator : _e, _f = _d.LoadingIndicator, LoadingIndicator$1 = _f === void 0 ? LoadingIndicator : _f, _g = _d.MessageListNotifications, MessageListNotifications$1 = _g === void 0 ? MessageListNotifications : _g, _h = _d.MessageNotification, MessageNotification$1 = _h === void 0 ? MessageNotification : _h;
var _j = useChatStateContext('UIMessageList'), contextMessageList = _j.messages, hasMore = _j.hasMore, loadingMore = _j.loadingMore;
var contextLoadMore = useChatActionContext('UIMessageList').loadMore;
var highlightedMessageId = propsHighlightedMessageId
|| (UIMessageListConfig === null || UIMessageListConfig === void 0 ? void 0 : UIMessageListConfig.highlightedMessageId)
|| contextHighlightedMessageId;
var intervalsTimer = (propsIntervalsTimer || (UIMessageListConfig === null || UIMessageListConfig === void 0 ? void 0 : UIMessageListConfig.intervalsTimer) || 30) * 60;
var messages = propsMessageList || contextMessageList;
/*
const { messageList: enrichedMessageList } = useEnrichedMessageList({
messageList: propsMessageList || UIMessageListConfig?.messageList || contextMessageList,
});*/
var enrichedMessageList = messages;
var loadMore = propsLoadMore || (UIMessageListConfig === null || UIMessageListConfig === void 0 ? void 0 : UIMessageListConfig.loadMore) || contextLoadMore;
var _k = useScrollLocationLogic({
hasMoreNewer: hasMoreNewer,
messageListRef: messageListRef,
messages: messages,
scrolledUpThreshold: props.scrolledUpThreshold,
suppressAutoscroll: suppressAutoscroll,
}), hasNewMessages = _k.hasNewMessages, isMessageListScrolledToBottom = _k.isMessageListScrolledToBottom, onMessageLoadCaptured = _k.onMessageLoadCaptured, onScroll = _k.onScroll, scrollToBottom = _k.scrollToBottom, wrapperRect = _k.wrapperRect;
var scrollToBottomFromNotification = React__default.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (!hasMoreNewer) return [3 /*break*/, 2];
return [4 /*yield*/, jumpToLatestMessage()];
case 1:
_a.sent();
return [3 /*break*/, 3];
case 2:
scrollToBottom();
_a.label = 3;
case 3: return [2 /*return*/];
}
});
}); }, [scrollToBottom, hasMoreNewer]);
React__default.useLayoutEffect(function () {
if (highlightedMessageId) {
var element = ulElement === null || ulElement === void 0 ? void 0 : ulElement.querySelector("[data-message-id='".concat(highlightedMessageId, "']"));
element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
}
}, [highlightedMessageId]);
var elements = useMessageListElements({
enrichedMessageList: enrichedMessageList,
UIMessage: UIMessage,
intervalsTimer: intervalsTimer,
internalMessageProps: {
messageListRect: wrapperRect,
},
onMessageLoadCaptured: onMessageLoadCaptured,
});
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("div", { className: "uim-message-list", onScroll: onScroll, ref: messageListRef, tabIndex: 0 },
!hasMore && React__default.createElement("p", { className: "no-more" }, "\u6CA1\u6709\u66F4\u591A"),
React__default.createElement(InfiniteScroll, { className: "message-list-infinite-scroll", hasMore: true, loader: React__default.createElement("div", { className: 'uim__list__loading', key: 'loading-indicator' }, loadingMore && React__default.createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, threshold: 1 },
React__default.createElement("ul", { ref: setUlElement }, (elements === null || elements === void 0 ? void 0 : elements.length) > 0 ? elements : React__default.createElement(EmptyStateIndicator$1, { listType: "message" })))),
React__default.createElement(MessageListNotifications$1, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, scrollToBottom: scrollToBottomFromNotification })));
};
export { UIMessageList };
//# sourceMappingURL=UIMessageList.js.map