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/MessageInput.js
+++ b/easy-dataset-main/components/playground/MessageInput.js
@@ -0,0 +1,104 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Box, TextField, Button, IconButton, Badge, Tooltip } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import ImageIcon from '@mui/icons-material/Image';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { useTheme } from '@mui/material/styles';
+import { playgroundStyles } from '@/styles/playground';
+import { useTranslation } from 'react-i18next';
+
+const MessageInput = ({
+  userInput,
+  handleInputChange,
+  handleSendMessage,
+  loading,
+  selectedModels,
+  uploadedImage,
+  handleImageUpload,
+  handleRemoveImage,
+  availableModels
+}) => {
+  const theme = useTheme();
+  const styles = playgroundStyles(theme);
+  const { t } = useTranslation();
+
+  const isDisabled = Object.values(loading).some(value => value) || selectedModels.length === 0;
+  const isSendDisabled = isDisabled || (!userInput.trim() && !uploadedImage);
+
+  // 检查是否有视觉模型被选中
+  const hasVisionModel = selectedModels.some(modelId => {
+    const model = availableModels.find(m => m.id === modelId);
+    return model && model.type === 'vision';
+  });
+
+  return (
+    <Box sx={styles.inputContainer}>
+      {uploadedImage && (
+        <Box sx={{ position: 'relative', mb: 1, display: 'inline-block', maxWidth: '100%' }}>
+          <Badge
+            badgeContent={
+              <IconButton
+                size="small"
+                onClick={handleRemoveImage}
+                sx={{ bgcolor: 'rgba(0, 0, 0, 0.4)', '&:hover': { bgcolor: 'rgba(0, 0, 0, 0.6)' } }}
+              >
+                <CancelIcon fontSize="small" sx={{ color: '#fff' }} />
+              </IconButton>
+            }
+            sx={{ width: '100%' }}
+            overlap="rectangular"
+            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+          >
+            <img
+              src={uploadedImage}
+              alt="上传图片"
+              style={{ maxWidth: '100%', maxHeight: '200px', borderRadius: '4px' }}
+            />
+          </Badge>
+        </Box>
+      )}
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
+        <TextField
+          fullWidth
+          variant="outlined"
+          placeholder={t('playground.inputMessage')}
+          value={userInput}
+          onChange={handleInputChange}
+          disabled={isDisabled}
+          onKeyPress={e => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              handleSendMessage();
+            }
+          }}
+          multiline
+          maxRows={4}
+        />
+        {hasVisionModel && (
+          <Tooltip title={t('playground.uploadImage')}>
+            <span>
+              <IconButton color="primary" component="label" disabled={isDisabled} sx={{ ml: 1, mr: 1 }}>
+                <input hidden accept="image/*" type="file" onChange={handleImageUpload} />
+                <ImageIcon />
+              </IconButton>
+            </span>
+          </Tooltip>
+        )}
+        <Button
+          variant="contained"
+          color="primary"
+          endIcon={<SendIcon />}
+          onClick={handleSendMessage}
+          disabled={isSendDisabled}
+          sx={styles.sendButton}
+        >
+          {t('playground.send')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default MessageInput;