@plteam/chat-ui/dist/views/message/MessagePagination.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 usePagination from '@mui/material/usePagination';
import { ArrowBackIosIcon, ArrowForwardIosIcon } from '../../icons';
import { useThreadContext } from '../thread/ThreadContext';
import { useObserverValue } from '../hooks/useObserverValue';
import { useChatSlots } from '../core/ChatSlotsContext';
import { useChatContext } from '../core/ChatGlobalContext';
const messagePaginationHeight = 30;
const MessagePagination = ({ message, classes, disabled }) => {
    const { apiRef } = useThreadContext();
    const { handleBranchPagination } = useChatContext();
    const { slots, slotProps } = useChatSlots();
    const messages = useObserverValue(apiRef.current?.getListener('allMessages'), []);
    const makeBranch = (currentMessage, messages) => {
        const filteredMessages = messages.filter(m => (m.role === message.role) && (m.parentId === currentMessage.parentId));
        return filteredMessages;
    };
    const branches = handleBranchPagination?.(message, messages || []) ?? makeBranch(message, messages || []) ?? [];
    const { items } = usePagination({
        count: branches.length,
        boundaryCount: 0,
        siblingCount: 0,
        defaultPage: branches.findIndex(v => v.id === message.id) + 1,
        onChange: (_event, page) => apiRef.current?.handleChangeBranch(branches[page - 1]),
    });
    if (branches.length <= 1)
        return null;
    return (React.createElement(slots.messagePaginationRoot, { direction: "row", sx: {
            position: 'absolute',
            right: 4,
            bottom: -messagePaginationHeight - 4
        }, gap: 0.5, alignItems: "center", height: messagePaginationHeight, className: classes.paginationClassName, ...slotProps?.messagePaginationRoot }, items.map(({ page, type, selected, ...item }) => {
        let children = null;
        if (type === 'page' && selected) {
            children = (React.createElement(slots.messagePaginationText, { ...slotProps?.messagePaginationText, key: `page${page}` }, `${page}/${branches.length}`));
        }
        else if (type === 'next' || type === 'previous') {
            children = (React.createElement(slots.messagePaginationButton, { size: "small", sx: {
                    color: (theme) => theme.palette.grey[600],
                }, ...slotProps?.messagePaginationButton, ...item, key: type, disabled: item.disabled || disabled }, type === 'next' ? React.createElement(ArrowForwardIosIcon, { fontSize: "inherit" }) : React.createElement(ArrowBackIosIcon, { fontSize: "inherit" })));
        }
        return children;
    })));
};
export default MessagePagination;