diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json index 2c9a0a6cd..712441a81 100644 --- a/frontend/public/locales/en-GB/translation.json +++ b/frontend/public/locales/en-GB/translation.json @@ -48,7 +48,11 @@ "filesSelected": "{{count}} files selected", "files": { "title": "Files", - "placeholder": "Select a PDF file in the main view to get started" + "placeholder": "Select a PDF file in the main view to get started", + "upload": "Upload", + "addFiles": "Add files", + "noFiles": "No files uploaded. ", + "selectFromWorkbench": "Select files from the workbench or " }, "noFavourites": "No favourites added", "downloadComplete": "Download Complete", diff --git a/frontend/src/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/components/tools/shared/FileStatusIndicator.tsx index 20e7c4d7a..ca56b3c22 100644 --- a/frontend/src/components/tools/shared/FileStatusIndicator.tsx +++ b/frontend/src/components/tools/shared/FileStatusIndicator.tsx @@ -1,9 +1,11 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Text, Anchor } from "@mantine/core"; import { useTranslation } from "react-i18next"; import FolderIcon from '@mui/icons-material/Folder'; +import UploadIcon from '@mui/icons-material/Upload'; import { useFilesModalContext } from "../../../contexts/FilesModalContext"; import { useAllFiles } from "../../../contexts/FileContext"; +import { useFileManager } from "../../../hooks/useFileManager"; export interface FileStatusIndicatorProps { selectedFiles?: File[]; @@ -15,41 +17,110 @@ const FileStatusIndicator = ({ placeholder, }: FileStatusIndicatorProps) => { const { t } = useTranslation(); - const { openFilesModal } = useFilesModalContext(); + const { openFilesModal, onFilesSelect } = useFilesModalContext(); const { files: workbenchFiles } = useAllFiles(); + const { loadRecentFiles } = useFileManager(); + const [hasRecentFiles, setHasRecentFiles] = useState(null); + + // Check if there are recent files + useEffect(() => { + const checkRecentFiles = async () => { + try { + const recentFiles = await loadRecentFiles(); + setHasRecentFiles(recentFiles.length > 0); + } catch (error) { + setHasRecentFiles(false); + } + }; + checkRecentFiles(); + }, [loadRecentFiles]); + + // Handle native file picker + const handleNativeUpload = () => { + const input = document.createElement('input'); + input.type = 'file'; + input.multiple = true; + input.accept = '.pdf,application/pdf'; + input.onchange = (event) => { + const files = Array.from((event.target as HTMLInputElement).files || []); + if (files.length > 0) { + onFilesSelect(files); + } + }; + input.click(); + }; + + // Don't render until we know if there are recent files + if (hasRecentFiles === null) { + return null; + } // Check if there are no files in the workbench if (workbenchFiles.length === 0) { - return ( - - {t("files.noFiles", "No files uploaded. ")}{" "} - - - {t("files.addFiles", "Add files")} - - - ); + // If no recent files, show upload button + if (!hasRecentFiles) { + return ( + + + + {t("files.upload", "Upload")} + + + ); + } else { + // If there are recent files, show add files button + return ( + + + + {t("files.addFiles", "Add files")} + + + ); + } } // Show selection status when there are files in workbench if (selectedFiles.length === 0) { - return ( - - {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "} - - - {t("files.addFiles", "Add files")} - - - ); + // If no recent files, show upload option + if (!hasRecentFiles) { + return ( + + {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "} + + + {t("files.upload", "Upload")} + + + ); + } else { + // If there are recent files, show add files option + return ( + + {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "} + + + {t("files.addFiles", "Add files")} + + + ); + } } return (