105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
'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;
|