@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
47 lines (46 loc) • 2.74 kB
JavaScript
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,
color: (theme) => theme.palette.text.primary,
}, 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;