first-update

2026-03-17 14:36:31 +08:00
parent 72f08aee7c
commit 4eddf05e79
516 changed files with 115270 additions and 1 deletions
--- a/easy-dataset-main/components/playground/ChatArea.js
+++ b/easy-dataset-main/components/playground/ChatArea.js
@@ -0,0 +1,83 @@
+'use client';
+
+import React, { useRef, useEffect } from 'react';
+import { Box, Typography, Paper, Grid, CircularProgress } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import ChatMessage from './ChatMessage';
+import { playgroundStyles } from '@/styles/playground';
+import { useTranslation } from 'react-i18next';
+
+const ChatArea = ({ selectedModels, conversations, loading, getModelName }) => {
+  const theme = useTheme();
+  const styles = playgroundStyles(theme);
+  const { t } = useTranslation();
+
+  // 为每个模型创建独立的引用
+  const chatContainerRefs = {
+    model1: useRef(null),
+    model2: useRef(null),
+    model3: useRef(null)
+  };
+
+  // 为每个模型的聊天容器自动滚动到底部
+  useEffect(() => {
+    Object.values(chatContainerRefs).forEach(ref => {
+      if (ref.current) {
+        ref.current.scrollTop = ref.current.scrollHeight;
+      }
+    });
+  }, [conversations]);
+
+  if (selectedModels.length === 0) {
+    return (
+      <Box sx={styles.emptyStateBox}>
+        <Typography color="textSecondary">{t('playground.selectModelFirst')}</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Grid container spacing={2} sx={styles.chatContainer}>
+      {selectedModels.map((modelId, index) => {
+        const modelConversation = conversations[modelId] || [];
+        const isLoading = loading[modelId];
+        const refKey = `model${index + 1}`;
+
+        return (
+          <Grid
+            item
+            xs={12}
+            md={selectedModels.length > 1 ? 12 / selectedModels.length : 12}
+            key={modelId}
+            style={{ maxHeight: 'calc(100vh - 300px)' }}
+          >
+            <Paper elevation={1} sx={styles.modelPaper}>
+              <Box sx={styles.modelHeader}>
+                <Typography variant="subtitle2">{getModelName(modelId)}</Typography>
+                {isLoading && <CircularProgress size={16} sx={{ ml: 1 }} color="inherit" />}
+              </Box>
+
+              <Box ref={chatContainerRefs[refKey]} sx={styles.modelChatBox}>
+                {modelConversation.length === 0 ? (
+                  <Box sx={styles.emptyChatBox}>
+                    <Typography color="textSecondary" variant="body2">
+                      {t('playground.sendFirstMessage')}
+                    </Typography>
+                  </Box>
+                ) : (
+                  modelConversation.map((message, msgIndex) => (
+                    <React.Fragment key={msgIndex}>
+                      <ChatMessage message={message} modelName={null} />
+                    </React.Fragment>
+                  ))
+                )}
+              </Box>
+            </Paper>
+          </Grid>
+        );
+      })}
+    </Grid>
+  );
+};
+
+export default ChatArea;