67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Grid, Button, Divider, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import ModelSelector from './ModelSelector';
|
|
import { playgroundStyles } from '@/styles/playground';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const PlaygroundHeader = ({
|
|
availableModels,
|
|
selectedModels,
|
|
handleModelSelection,
|
|
handleClearConversations,
|
|
conversations,
|
|
outputMode,
|
|
handleOutputModeChange
|
|
}) => {
|
|
const theme = useTheme();
|
|
const styles = playgroundStyles(theme);
|
|
const { t } = useTranslation();
|
|
|
|
const isClearDisabled = selectedModels.length === 0 || Object.values(conversations).every(conv => conv.length === 0);
|
|
|
|
return (
|
|
<>
|
|
<Grid container spacing={2} sx={styles.controlsContainer}>
|
|
<Grid item xs={12} md={6}>
|
|
<ModelSelector models={availableModels} selectedModels={selectedModels} onChange={handleModelSelection} />
|
|
</Grid>
|
|
<Grid item xs={12} md={3}>
|
|
<FormControl fullWidth>
|
|
<InputLabel id="output-mode-label">{t('playground.outputMode')}</InputLabel>
|
|
<Select
|
|
labelId="output-mode-label"
|
|
id="output-mode-select"
|
|
value={outputMode}
|
|
label={t('playground.outputMode')}
|
|
onChange={handleOutputModeChange}
|
|
>
|
|
<MenuItem value="normal">{t('playground.normalOutput')}</MenuItem>
|
|
<MenuItem value="streaming">{t('playground.streamingOutput')}</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
<Grid item xs={12} md={3}>
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
startIcon={<DeleteIcon />}
|
|
onClick={handleClearConversations}
|
|
disabled={isClearDisabled}
|
|
sx={styles.clearButton}
|
|
>
|
|
{t('playground.clearConversation')}
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Divider sx={styles.divider} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PlaygroundHeader;
|