first-update

easy-dataset-main/components/playground/PlaygroundHeader.js

@@ -0,0 +1,66 @@
+'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;