@plteam/chat-ui/dist/views/leftContainer/ThreadListItem.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 { useObserverValue } from '../hooks/useObserverValue';
import { MoreVertIcon } from '../../icons';
import { historyClassNames } from '../core/history/historyClassNames';
import { useHistoryContext } from '../core/history/HistoryContext';
const ThreadListItem = ({ model, thread, selected, setThread, listModel, slots }) => {
    const handleClick = React.useCallback((event) => {
        listModel.menuConfig.value = {
            anchorEl: event.currentTarget,
            thread,
        };
        event.preventDefault();
        event.stopPropagation();
    }, [listModel]);
    const isEmpty = useObserverValue(thread.isEmpty);
    const title = useObserverValue(thread.observableTitle);
    const { threadTypeIcons } = useHistoryContext();
    const threadType = thread.data.type;
    const icon = threadType && threadTypeIcons ? threadTypeIcons[threadType] : undefined;
    if (isEmpty)
        return null;
    const handleClickListItem = () => {
        model.menuDrawerOpen.value = false;
        setThread(thread.data);
    };
    const classes = [historyClassNames.listItem];
    if (selected) {
        classes.push(historyClassNames.listItemSelected);
    }
    return (React.createElement(slots.listItemRoot, { threadId: thread.id, className: classes.join(' '), onClick: handleClickListItem },
        icon,
        React.createElement(slots.baseListItemText, { primary: title ?? 'TITLE', sx: {
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
            } }),
        React.createElement(slots.threadListItemMenuButton, { size: "small", sx: {
                position: 'absolute',
                right: (theme) => theme.spacing(1.5),
                top: '50%',
                transform: 'translateY(-50%)',
            }, threadId: thread.id, onClick: handleClick },
            React.createElement(MoreVertIcon, null))));
};
export default React.memo(ThreadListItem, (prevProps, nextProps) => {
    return prevProps.selected === nextProps.selected && prevProps.thread.id === nextProps.thread.id;
});