@plteam/chat-ui/dist/views/message/MessagesList.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import { useChatSlots } from '../core/ChatSlotsContext';
import { useGroupedMessages } from './hooks/useGroupedMessages';
import MessagesInGroup from './MessagesInGroup';
import { arrayPluckAndJoin } from '../../utils/arrayUtils/arrayPluckAndJoin';
import { useObserverValue } from '../hooks/useObserverValue';
import MessageComponentSkeleton from './MessageComponentSkeleton';
const MessagesList = ({ messages, thread, gap }) => {
    const { slots } = useChatSlots();
    const groupedMessages = useGroupedMessages(messages);
    const isFullDataLoading = useObserverValue(thread.isLoadingFullData);
    return (React.createElement(React.Fragment, null,
        React.createElement(slots.firstMessage, { thread: thread }),
        groupedMessages.map((groupMessages, key) => (React.createElement(MessagesInGroup, { key: arrayPluckAndJoin(groupMessages, 'viewerUniqueKey', '-'), messages: groupMessages, gap: gap, isLatestGroup: key === groupedMessages.length - 1, thread: thread }))),
        !!isFullDataLoading && (React.createElement(MessageComponentSkeleton, { gap: gap }))));
};
export default React.memo(MessagesList, (prevProps, nextProps) => {
    return prevProps.thread.viewerUniqueKey === nextProps.thread.viewerUniqueKey
        && arrayPluckAndJoin(prevProps.messages, 'viewerUniqueKey') === arrayPluckAndJoin(nextProps.messages, 'viewerUniqueKey');
});