@uimkit/uikit-react/dist/cjs/components/UIMessageList/UIMessageList.js

<img style="width:64px" src="https://mgmt.uimkit.chat/media/img/avatar.png"/>

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
require('../../types/models.js');
require('../../types/events.js');
require('../../context/TranslationContext.js');
require('../../context/UIKitContext.js');
var ComponentContext = require('../../context/ComponentContext.js');
var ChatActionContext = require('../../context/ChatActionContext.js');
require('../../context/MessageInputContext.js');
require('../../context/UIMessageContext.js');
var ChatStateContext = require('../../context/ChatStateContext.js');
var useMessageListElements = require('./hooks/useMessageListElements.js');
var InfiniteScroll = require('../InfiniteScrollPaginator/InfiniteScroll.js');
var EmptyStateIndicator = require('../EmptyStateIndicator/EmptyStateIndicator.js');
var MessageListNotifications = require('./MessageListNotifications.js');
var useScrollLocationLogic = require('./hooks/useScrollLocationLogic.js');
require('../Loading/LoadingErrorIndicator.js');
var LoadingIndicator = require('../Loading/LoadingIndicator.js');
var MessageNotification = require('./MessageNotification.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

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 = React.useState(null), ulElement = _b[0], setUlElement = _b[1];
    var jumpToLatestMessage = ChatActionContext.useChatActionContext().jumpToLatestMessage;
    var _c = ChatStateContext.useChatStateContext(), contextHighlightedMessageId = _c.highlightedMessageId, messageListRef = _c.messageListRef, UIMessageListConfig = _c.UIMessageListConfig;
    var _d = ComponentContext.useComponentContext('UIMessageList'), UIMessage = _d.UIMessage, _e = _d.EmptyStateIndicator, EmptyStateIndicator$1 = _e === void 0 ? EmptyStateIndicator.EmptyStateIndicator : _e, _f = _d.LoadingIndicator, LoadingIndicator$1 = _f === void 0 ? LoadingIndicator.LoadingIndicator : _f, _g = _d.MessageListNotifications, MessageListNotifications$1 = _g === void 0 ? MessageListNotifications.MessageListNotifications : _g, _h = _d.MessageNotification, MessageNotification$1 = _h === void 0 ? MessageNotification.MessageNotification : _h;
    var _j = ChatStateContext.useChatStateContext('UIMessageList'), contextMessageList = _j.messages, hasMore = _j.hasMore, loadingMore = _j.loadingMore;
    var contextLoadMore = ChatActionContext.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.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["default"].useCallback(function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
        return tslib.__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["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.useMessageListElements({
        enrichedMessageList: enrichedMessageList,
        UIMessage: UIMessage,
        intervalsTimer: intervalsTimer,
        internalMessageProps: {
            messageListRect: wrapperRect,
        },
        onMessageLoadCaptured: onMessageLoadCaptured,
    });
    return (React__default["default"].createElement(React__default["default"].Fragment, null,
        React__default["default"].createElement("div", { className: "uim-message-list", onScroll: onScroll, ref: messageListRef, tabIndex: 0 },
            !hasMore && React__default["default"].createElement("p", { className: "no-more" }, "\u6CA1\u6709\u66F4\u591A"),
            React__default["default"].createElement(InfiniteScroll.InfiniteScroll, { className: "message-list-infinite-scroll", hasMore: true, loader: React__default["default"].createElement("div", { className: 'uim__list__loading', key: 'loading-indicator' }, loadingMore && React__default["default"].createElement(LoadingIndicator$1, { size: 20 })), loadMore: loadMore, threshold: 1 },
                React__default["default"].createElement("ul", { ref: setUlElement }, (elements === null || elements === void 0 ? void 0 : elements.length) > 0 ? elements : React__default["default"].createElement(EmptyStateIndicator$1, { listType: "message" })))),
        React__default["default"].createElement(MessageListNotifications$1, { hasNewMessages: hasNewMessages, isMessageListScrolledToBottom: isMessageListScrolledToBottom, isNotAtLatestMessageSet: hasMoreNewer, MessageNotification: MessageNotification$1, scrollToBottom: scrollToBottomFromNotification })));
};

exports.UIMessageList = UIMessageList;
//# sourceMappingURL=UIMessageList.js.map