Dynamic upload/add files button for toolstep

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",

frontend/src/components/tools/shared/FileStatusIndicator.tsx

@@ -1,9 +1,12 @@
-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 AddIcon from '@mui/icons-material/Add';
 import { useFilesModalContext } from "../../../contexts/FilesModalContext";
 import { useAllFiles } from "../../../contexts/FileContext";
+import { useFileManager } from "../../../hooks/useFileManager";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: File[];
@@ -15,41 +18,112 @@ 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<boolean | null>(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 (
+    // If no recent files, show upload button
-      <Text size="sm" c="dimmed">
+    if (!hasRecentFiles) {
-        {t("files.noFiles", "No files uploaded. ")}{" "}
+      return (
-        <Anchor
+        <Text size="sm" c="dimmed">
-          size="sm"
+          {t("files.noFiles", "No files uploaded. ")}{" "}
-          onClick={openFilesModal}
+          <Anchor
-          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+            size="sm"
-        >
+            onClick={handleNativeUpload}
-          <FolderIcon style={{ fontSize: '14px' }} />
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
-          {t("files.addFiles", "Add files")}
+          >
-        </Anchor>
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
-      </Text>
+            {t("files.upload", "Upload")}
-    );
+          </Anchor>
+        </Text>
+      );
+    } else {
+      // If there are recent files, show add files button
+      return (
+        <Text size="sm" c="dimmed">
+          {t("files.noFiles", "No files uploaded. ")}{" "}
+          <Anchor
+            size="sm"
+            onClick={openFilesModal}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <AddIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.addFiles", "Add files")}
+          </Anchor>
+        </Text>
+      );
+    }
   }
 
   // Show selection status when there are files in workbench
   if (selectedFiles.length === 0) {
-    return (
+    // If no recent files, show upload option
-      <Text size="sm" c="dimmed">
+    if (!hasRecentFiles) {
-        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+      return (
-        <Anchor
+        <Text size="sm" c="dimmed">
-          size="sm"
+          {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
-          onClick={openFilesModal}
+          <Anchor
-          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+            size="sm"
-        >
+            onClick={handleNativeUpload}
-          <FolderIcon style={{ fontSize: '14px' }} />
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
-          {t("files.addFiles", "Add files")}
+          >
-        </Anchor>
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
-      </Text>
+            {t("files.upload", "Upload")}
-    );
+          </Anchor>
+        </Text>
+      );
+    } else {
+      // If there are recent files, show add files option
+      return (
+        <Text size="sm" c="dimmed">
+          {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+          <Anchor
+            size="sm"
+            onClick={openFilesModal}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <AddIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.addFiles", "Add files")}
+          </Anchor>
+        </Text>
+      );
+    }
   }
 
   return (