Merge pull request #584 from UniversityOfHelsinkiCS/feat-advancedParsing-per-file

Feat advanced parsing per file

Author: tfhuhtal

.gitignore

@@ -20,3 +20,4 @@ minio-data/*
 *.s3cfg
 # Sentry Config File
 .env.sentry-build-plugin
+*/copilot-instructions.md

src/client/components/Rag/RagCreator.tsx

@@ -7,11 +7,9 @@ import {
   DialogContentText,
   DialogTitle,
   FormControl,
-  FormControlLabel,
   InputLabel,
   MenuItem,
   Select,
-  Switch,
   TextField,
 } from '@mui/material'
 import { OutlineButtonBlack } from '../ChatV2/general/Buttons'
@@ -26,7 +24,6 @@ export const RagCreator = ({ chatInstance }: { chatInstance: Course }) => {
   const createIndexMutation = useCreateRagIndexMutation()
   const [indexName, setIndexName] = useState('')
   const [language, setLanguage] = useState<'Finnish' | 'English' | 'Swedish'>('English')
-  const [advancedParsing, setAdvancedParsing] = useState(false)
   const [open, setOpen] = useState(false)
 
   return (
@@ -46,7 +43,6 @@ export const RagCreator = ({ chatInstance }: { chatInstance: Course }) => {
                 chatInstanceId: chatInstance?.id,
                 name: indexName,
                 language,
-                advancedParsing,
               })
               setIndexName('')
               navigate(`?index=${newIndex.id}`)
@@ -87,11 +83,6 @@ export const RagCreator = ({ chatInstance }: { chatInstance: Course }) => {
               <MenuItem value={RAG_LANGUAGES[2]}>{t('rag:english')}</MenuItem>
             </Select>
           </FormControl>
-          <DialogContentText>{t('rag:advancedParsingGuide')}</DialogContentText>
-          <FormControlLabel
-            control={<Switch checked={advancedParsing} onChange={(e) => setAdvancedParsing(e.target.checked)} />}
-            label={t('rag:advancedParsing')}
-          />
         </DialogContent>
         <DialogActions>
           <OutlineButtonBlack color="primary" type="submit" data-testid="ragIndexCreateSubmit">

src/client/components/Rag/RagFileDetails.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, Link, Paper, styled, Table, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
+import { Box, Divider, Link, styled, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
 import { IngestionJobStatus, IngestionPipelineStageKey } from '@shared/ingestion'
 import { Link as RouterLink } from 'react-router-dom'
 import type { RagFileAttributes } from '@shared/types'
@@ -7,6 +7,7 @@ import DownloadDone from '@mui/icons-material/DownloadDone'
 import ErrorOutline from '@mui/icons-material/ErrorOutline'
 import PendingOutlined from '@mui/icons-material/PendingOutlined'
 import SettingsOutlined from '@mui/icons-material/SettingsOutlined'
+import AutoFixHigh from '@mui/icons-material/AutoFixHigh'
 import { locales } from '../../locales/locales'
 import { useTranslation } from 'react-i18next'
 import { formatDistanceStrict } from 'date-fns'
@@ -36,13 +37,44 @@ const ProgressIcon: Record<FileStage, React.ReactNode> = {
   queued: <PendingOutlined />,
 }
 
+const HideOnSmall = styled(TableCell)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    display: 'none',
+  },
+}))
+
+const HideOnSmallHead = styled(TableCell)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    display: 'none',
+  },
+})) as typeof TableCell
+
+export const RagFileTableHead: React.FC = () => {
+  const { t } = useTranslation()
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell><strong>{t('rag:fileName')}</strong></TableCell>
+        <HideOnSmallHead><strong>{t('common:fileType')}</strong></HideOnSmallHead>
+        <TableCell><strong>{t('rag:fileSizeKb')}</strong></TableCell>
+        <TableCell><strong>{t('rag:parsing')}</strong></TableCell>
+        <HideOnSmallHead><strong>{t('common:added')}</strong></HideOnSmallHead>
+        <TableCell><strong>{t('rag:fileStatus')}</strong></TableCell>
+        <TableCell />
+      </TableRow>
+    </TableHead>
+  )
+}
+
 export const RagFileInfo: React.FC<{
   file: RagFileAttributes
   index: number
   status?: IngestionJobStatus
   uploadProgress?: number
 }> = ({ file, index, status, uploadProgress }) => {
   const { t, i18n } = useTranslation()
+  const usedAdvancedParsing = !!(file.metadata as Record<string, unknown> | null)?.advancedParsing
+  const isPdf = file.fileType === 'application/pdf'
 
   const pipelineStage = status?.pipelineStage ?? file.pipelineStage
 
@@ -60,55 +92,52 @@ export const RagFileInfo: React.FC<{
   const progressIcon = ProgressIcon[fileStage]
 
   return (
-    <>
-      <Box display="flex" alignItems="center" gap={2}>
-        <Box sx={{ flex: 3 }}>
-          <Box display="flex" width="100%" alignItems="center">
-            <Link to={`?index=${index}&file=${file.id}`} component={RouterLink}>
-              <Typography variant="subtitle1">{file.filename}</Typography>
-            </Link>
-            <Typography variant="body2" color="text.secondary" sx={{ marginLeft: 'auto' }}>
-              {t('common:added')} {new Date(file.createdAt).toLocaleString(locales[i18n.language].code)}
+    <TableRow>
+      <TableCell sx={{ maxWidth: 200, wordBreak: 'break-word' }}>
+        <Link to={`?index=${index}&file=${file.id}`} component={RouterLink}>
+          {file.filename}
+        </Link>
+      </TableCell>
+      <HideOnSmall>{file.fileType}</HideOnSmall>
+      <TableCell>{(file.fileSize / 1024).toFixed()} kB</TableCell>
+      <TableCell>
+        {isPdf && (
+          <Box display="flex" alignItems="center" gap={0.5}>
+            {usedAdvancedParsing && <AutoFixHigh sx={{ fontSize: 16, color: 'primary.main' }} />}
+            <Typography variant="body2" color={usedAdvancedParsing ? 'primary.main' : 'text.secondary'}>
+              {usedAdvancedParsing ? t('rag:advancedParsing') : t('rag:standardParsing')}
             </Typography>
           </Box>
-          <Table size="small">
-            <TableHead>
-              <TableRow>
-                <TableCell>{t('common:fileType')}</TableCell>
-                <TableCell>{t('rag:fileSize')}</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>{file.fileType}</TableCell>
-                <TableCell>{(file.fileSize / 1024).toFixed()} kB</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </Box>
-        <Box sx={{ ml: '2rem', flex: 1, display: 'flex', alignItems: 'center', gap: 2 }}>
-          <Box display="flex" alignItems="center" gap={1} color={`${accentColor}.main`}>
-            {progressIcon}
-            <div>
-              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                {message}
+        )}
+      </TableCell>
+      <HideOnSmall>
+        <Typography variant="body2" color="text.secondary">
+          {new Date(file.createdAt).toLocaleString(locales[i18n.language].code)}
+        </Typography>
+      </HideOnSmall>
+      <TableCell>
+        <Box display="flex" alignItems="center" gap={1} color={`${accentColor}.main`}>
+          {progressIcon}
+          <div>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              {message}
+            </Typography>
+            {status?.eta && (
+              <Typography variant="body2" component="div" sx={{ color: 'text.secondary' }}>
+                {formatDistanceStrict(0, status?.eta)} left
               </Typography>
-              {status?.eta && (
-                <Typography variant="body2" component="div" sx={{ color: 'text.secondary' }}>
-                  {formatDistanceStrict(0, status?.eta)} left
-                </Typography>
-              )}
-              {error?.length && (
-                <Typography variant="body2" color="error">
-                  {t('error:errorMessage')}: {status?.error ?? file.error}
-                </Typography>
-              )}
-            </div>
-          </Box>
+            )}
+            {error?.length && (
+              <Typography variant="body2" color="error">
+                {t('error:errorMessage')}: {status?.error ?? file.error}
+              </Typography>
+            )}
+          </div>
         </Box>
+      </TableCell>
+      <TableCell>
         <CircularProgressWithLabel progress={progress} accentColor={accentColor} />
-      </Box>
-      <Divider sx={{ my: 2 }} />
-    </>
+      </TableCell>
+    </TableRow>
   )
 }

src/client/components/Rag/RagIndex.tsx

@@ -8,19 +8,28 @@ import {
   Container,
   DialogTitle,
   DialogContent,
+  DialogActions,
   Dialog,
   Link,
   CircularProgress,
   Breadcrumbs,
   Divider,
+  FormControlLabel,
+  Switch,
+  List,
+  ListItem,
+  ListItemText,
+  Table,
+  TableBody,
+  TableContainer,
 } from '@mui/material'
 import { useNavigate, useParams, Link as RouterLink, useSearchParams } from 'react-router-dom'
 import Autorenew from '@mui/icons-material/Autorenew'
 import CloudUpload from '@mui/icons-material/CloudUpload'
 import DeleteOutline from '@mui/icons-material/DeleteOutline'
 import FindInPage from '@mui/icons-material/FindInPage'
 import { orderBy } from 'lodash'
-import { RagFileInfo } from './RagFileDetails'
+import { RagFileInfo, RagFileTableHead } from './RagFileDetails'
 import { RagIndexDetails, useDeleteRagIndexMutation, useRagIndexDetails, useRagIndexJobs, useUploadMutation } from './api'
 import { Search } from './Search'
 import { useTranslation } from 'react-i18next'
@@ -59,6 +68,8 @@ export const RagIndex: React.FC = () => {
   const deleteIndexMutation = useDeleteRagIndexMutation(id)
   const [refetchInterval, setRefetchInterval] = React.useState(60 * 1000)
   const [uploadProgress, setUploadProgress] = React.useState(0)
+  const [stagedFiles, setStagedFiles] = React.useState<File[]>([])
+  const [advancedParsing, setAdvancedParsing] = React.useState<boolean[]>([])
   const { data: ragDetails, isSuccess, refetch } = useRagIndexDetails(id)
   const { data: ragFileStatuses, refetch: refetchStatuses } = useRagIndexJobs(id, refetchInterval)
   const uploadMutation = useUploadMutation({ index: ragDetails, onUploadProgress: setUploadProgress })
@@ -78,7 +89,12 @@ export const RagIndex: React.FC = () => {
     return <LinearProgress />
   }
 
-  const handleUpload = async (files: File[]) => {
+  const handleStageFiles = (files: File[]) => {
+    setStagedFiles(files)
+    setAdvancedParsing(files.map(() => false))
+  }
+
+  const handleUpload = async (files: File[], perFileAdvancedParsing: boolean[]) => {
     setUploadProgress(0)
     queryClient.setQueryData<RagIndexDetails>(['ragIndex', id], (old) => {
       if (!old) return old
@@ -105,7 +121,9 @@ export const RagIndex: React.FC = () => {
         ],
       }
     })
-    await uploadMutation.mutateAsync(Array.from(files))
+    await uploadMutation.mutateAsync({ files: Array.from(files), advancedParsing: perFileAdvancedParsing })
+    setStagedFiles([])
+    setAdvancedParsing([])
     refetch()
     refetchStatuses()
   }
@@ -137,8 +155,9 @@ export const RagIndex: React.FC = () => {
               onChange={async (e) => {
                 const files = e.target.files
                 if (files && files.length > 0) {
-                  await handleUpload(Array.from(files))
+                  handleStageFiles(Array.from(files))
                 }
+                e.target.value = ''
               }}
               multiple
             />
@@ -190,24 +209,74 @@ export const RagIndex: React.FC = () => {
               <OutlineButtonBlack
                 startIcon={<Autorenew />}
                 onClick={async () => {
-                  await handleUpload([])
+                  await handleUpload([], [])
                 }}
               >
                 {t('rag:retryFailedFiles')}
               </OutlineButtonBlack>
             )}
           </Box>
-          {orderBy(ragDetails.ragFiles, [(f) => Date.parse(f.createdAt as unknown as string)], ['desc']).map((file) => (
-            <RagFileInfo
-              key={file.id}
-              file={file}
-              index={id}
-              status={ragFileStatuses?.find((rfs) => rfs.ragFileId === file.id)}
-              uploadProgress={uploadMutation.isPending ? uploadProgress : undefined}
-            />
-          ))}
+          <TableContainer sx={{ overflowX: 'hidden' }}>
+            <Table size="small">
+              <RagFileTableHead />
+              <TableBody>
+                {orderBy(ragDetails.ragFiles, [(f) => Date.parse(f.createdAt as unknown as string)], ['desc']).map((file) => (
+                  <RagFileInfo
+                    key={file.id}
+                    file={file}
+                    index={id}
+                    status={ragFileStatuses?.find((rfs) => rfs.ragFileId === file.id)}
+                    uploadProgress={uploadMutation.isPending ? uploadProgress : undefined}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
         </Box>
       </Box>
+      <Dialog open={stagedFiles.length > 0} onClose={() => setStagedFiles([])} fullWidth maxWidth="sm">
+        <DialogTitle>{t('rag:uploadFiles')}</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2" color="text.secondary" mb={1}>
+            {t('rag:advancedParsingGuide')}
+          </Typography>
+          <List dense>
+            {stagedFiles.map((file, idx) => (
+              <ListItem key={file.name} disableGutters>
+                <ListItemText primary={file.name} secondary={`${(file.size / 1024).toFixed(0)} KB`} />
+                <FormControlLabel
+                  control={
+                    <Switch
+                      checked={advancedParsing[idx] ?? false}
+                      onChange={(e) => {
+                        setAdvancedParsing((prev) => {
+                          const next = [...prev]
+                          next[idx] = e.target.checked
+                          return next
+                        })
+                      }}
+                    />
+                  }
+                  label={t('rag:advancedParsing')}
+                  labelPlacement="start"
+                />
+              </ListItem>
+            ))}
+          </List>
+        </DialogContent>
+        <DialogActions>
+          <OutlineButtonBlack onClick={() => setStagedFiles([])}>{t('common:cancel')}</OutlineButtonBlack>
+          <BlueButton
+            variant="contained"
+            onClick={async () => {
+              await handleUpload(stagedFiles, advancedParsing)
+            }}
+            disabled={uploadMutation.isPending}
+          >
+            {uploadMutation.isPending ? t('rag:uploading') : t('rag:uploadFiles')}
+          </BlueButton>
+        </DialogActions>
+      </Dialog>
     </Box>
   )
 }

src/client/components/Rag/api.ts

@@ -6,12 +6,11 @@ import queryClient from '../../util/queryClient'
 
 export const useCreateRagIndexMutation = () => {
   const mutation = useMutation({
-    mutationFn: async ({ chatInstanceId, name, language, advancedParsing }: RagIndexMetadata & { chatInstanceId: string }) => {
+    mutationFn: async ({ chatInstanceId, name, language }: RagIndexMetadata & { chatInstanceId: string }) => {
       const response = await apiClient.post('/rag/indices', {
         name,
         chatInstanceId,
         language,
-        advancedParsing,
       })
       return response.data
     },
@@ -78,14 +77,14 @@ export const useUpdateRagIndexMutation = (indexId: number) => {
 
 export const useUploadMutation = ({ index, onUploadProgress = () => {} }: { index?: RagIndexAttributes; onUploadProgress?: (progress: number) => void }) => {
   const mutation = useMutation({
-    mutationFn: async (files: File[]) => {
+    mutationFn: async ({ files, advancedParsing }: { files: File[]; advancedParsing: boolean[] }) => {
       if (!index) {
         throw new Error('Index is required')
       }
       const formData = new FormData()
-      // Append each file individually
-      files.forEach((file) => {
+      files.forEach((file, idx) => {
         formData.append('files', file)
+        formData.append('advancedParsing', String(advancedParsing[idx] ?? false))
       })
 
       const res = await apiClient.post(`/rag/indices/${index.id}/upload`, formData, {