122 lines
3.7 KiB
JavaScript
122 lines
3.7 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import {
|
|
ListItem,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Box,
|
|
Typography,
|
|
Chip,
|
|
IconButton,
|
|
Tooltip,
|
|
CircularProgress
|
|
} from '@mui/material';
|
|
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
|
|
import ChatIcon from '@mui/icons-material/Chat';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
/**
|
|
* 问题列表项组件
|
|
* @param {Object} props
|
|
* @param {Object} props.question - 问题对象
|
|
* @param {number} props.level - 缩进级别
|
|
* @param {Function} props.onDelete - 删除问题的回调
|
|
* @param {Function} props.onGenerateDataset - 生成数据集的回调
|
|
* @param {Function} props.onGenerateMultiTurnDataset - 生成多轮对话数据集的回调
|
|
* @param {boolean} props.processing - 是否正在处理
|
|
* @param {boolean} props.processingMultiTurn - 是否正在生成多轮对话
|
|
*/
|
|
export default function QuestionListItem({
|
|
question,
|
|
level,
|
|
onDelete,
|
|
onGenerateDataset,
|
|
onGenerateMultiTurnDataset,
|
|
processing = false,
|
|
processingMultiTurn = false
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<ListItem
|
|
sx={{
|
|
pl: (level + 1) * 2,
|
|
py: 0.75,
|
|
borderLeft: '1px dashed rgba(0, 0, 0, 0.1)',
|
|
ml: 2,
|
|
borderBottom: '1px solid',
|
|
borderColor: 'divider',
|
|
'&:hover': {
|
|
bgcolor: 'action.hover'
|
|
}
|
|
}}
|
|
secondaryAction={
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<Tooltip title={t('datasets.generateDataset')}>
|
|
<IconButton
|
|
size="small"
|
|
color="primary"
|
|
onClick={e => onGenerateDataset(e)}
|
|
disabled={processing || processingMultiTurn}
|
|
>
|
|
{processing ? <CircularProgress size={16} /> : <AutoFixHighIcon fontSize="small" />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={t('questions.generateMultiTurnDataset', { defaultValue: '生成多轮对话数据集' })}>
|
|
<IconButton
|
|
size="small"
|
|
color="secondary"
|
|
onClick={e => onGenerateMultiTurnDataset && onGenerateMultiTurnDataset(e)}
|
|
disabled={processing || processingMultiTurn || !onGenerateMultiTurnDataset}
|
|
>
|
|
{processingMultiTurn ? <CircularProgress size={16} /> : <ChatIcon fontSize="small" />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title={t('common.delete')}>
|
|
<IconButton
|
|
size="small"
|
|
color="error"
|
|
onClick={e => onDelete(e)}
|
|
disabled={processing || processingMultiTurn}
|
|
>
|
|
<DeleteIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 32, color: 'secondary.main' }}>
|
|
<HelpOutlineIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
whiteSpace: 'normal',
|
|
wordBreak: 'break-word',
|
|
paddingRight: '28px' // 留出删除按钮的空间
|
|
}}
|
|
>
|
|
{question.question}
|
|
</Typography>
|
|
{question.answered && (
|
|
<Chip
|
|
size="small"
|
|
label={t('datasets.answered')}
|
|
color="success"
|
|
variant="outlined"
|
|
sx={{ height: 20, fontSize: '0.7rem' }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
}
|
|
/>
|
|
</ListItem>
|
|
);
|
|
}
|