first-update

easy-dataset-main/components/distill/QuestionListItem.js

@@ -0,0 +1,121 @@
+'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>
+  );
+}