first-update

easy-dataset-main/components/conversations/ConversationContent.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { Box, Typography, Card, CardContent, Chip, TextField } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * 多轮对话内容展示和编辑组件
+ */
+export default function ConversationContent({ messages, editMode, onMessageChange, conversation }) {
+  const { t } = useTranslation();
+
+  // 获取角色显示信息
+  const getRoleDisplay = role => {
+    switch (role) {
+      case 'system':
+        return { name: t('datasets.system'), color: 'default' };
+      case 'user':
+        return { name: conversation?.roleA || t('datasets.user'), color: 'primary' };
+      case 'assistant':
+        return { name: conversation?.roleB || t('datasets.assistant'), color: 'secondary' };
+      default:
+        return { name: role, color: 'default' };
+    }
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        {t('datasets.conversationContent')}
+      </Typography>
+
+      <Box sx={{ maxHeight: editMode ? 'none' : '70vh', overflowY: 'auto' }}>
+        {messages.map((message, index) => {
+          const roleInfo = getRoleDisplay(message.role);
+          return (
+            <Box key={index} sx={{ mb: 2 }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                <Chip label={roleInfo.name} color={roleInfo.color} size="small" sx={{ fontSize: '0.75rem' }} />
+                {message.role !== 'system' && (
+                  <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
+                    {t('datasets.round', { round: Math.floor((index + 1) / 2) + 1 })}
+                  </Typography>
+                )}
+              </Box>
+              <Card variant="outlined" sx={{ mb: 1 }}>
+                <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
+                  {editMode ? (
+                    <TextField
+                      fullWidth
+                      multiline
+                      minRows={3}
+                      maxRows={10}
+                      value={message.content}
+                      onChange={e => onMessageChange && onMessageChange(index, e.target.value)}
+                      variant="outlined"
+                      size="small"
+                      sx={{
+                        '& .MuiInputBase-input': {
+                          fontFamily: 'inherit',
+                          fontSize: '0.875rem',
+                          lineHeight: 1.5
+                        }
+                      }}
+                    />
+                  ) : (
+                    <Typography
+                      variant="body2"
+                      component="pre"
+                      sx={{
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        fontFamily: 'inherit',
+                        lineHeight: 1.6,
+                        margin: 0
+                      }}
+                    >
+                      {message.content}
+                    </Typography>
+                  )}
+                </CardContent>
+              </Card>
+            </Box>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}