first-update

easy-dataset-main/components/text-split/ChunkViewDialog.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import { useTranslation } from 'react-i18next';
+import 'github-markdown-css/github-markdown-light.css';
+
+export default function ChunkViewDialog({ open, chunk, onClose }) {
+  const { t } = useTranslation();
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>{t('textSplit.chunkDetails', { chunkId: chunk?.name })}</DialogTitle>
+      <DialogContent dividers>
+        {chunk ? (
+          <Box sx={{ maxHeight: '60vh', overflow: 'auto' }}>
+            <div className="markdown-body">
+              <ReactMarkdown>{chunk.content}</ReactMarkdown>
+            </div>
+          </Box>
+        ) : (
+          <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
+            <CircularProgress />
+          </Box>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{t('common.close')}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}