Merge branch 'V2' into Automation_changes

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/ToolPanel.tsx

@@ -8,6 +8,7 @@ import ToolRenderer from './ToolRenderer';
 import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
+import { Stack, ScrollArea } from '@mantine/core';
 
 // No props needed - component uses context
 
@@ -91,15 +92,17 @@ export default function ToolPanel() {
           </div>
         ) : (
           // Selected Tool Content View
-          <div className="flex-1 flex flex-col">
+          <div className="flex-1 flex flex-col overflow-hidden">
             {/* Tool content */}
-            <div className="flex-1 min-h-0">
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <ScrollArea h="100%">
                 {selectedToolKey && (
                   <ToolRenderer
                     selectedToolKey={selectedToolKey}
                     onPreviewFile={setPreviewFile}
                   />
                 )}
+              </ScrollArea>
             </div>
           </div>
         )}

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,42 +17,111 @@ 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) {
+    // If no recent files, show upload button
+    if (!hasRecentFiles) {
+      return (
+        <Text size="sm" c="dimmed">
+          <Anchor
+            size="sm"
+            onClick={handleNativeUpload}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            {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: '4px' }}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-          <FolderIcon style={{ fontSize: '14px' }} />
+            <FolderIcon style={{ fontSize: '0.875rem' }} />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
       );
     }
+  }
 
   // Show selection status when there are files in workbench
   if (selectedFiles.length === 0) {
+    // If no recent files, show upload option
+    if (!hasRecentFiles) {
+      return (
+        <Text size="sm" c="dimmed">
+          {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+          <Anchor
+            size="sm"
+            onClick={handleNativeUpload}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            {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: '4px' }}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
           >
-          <FolderIcon style={{ fontSize: '14px' }} />
+            <FolderIcon style={{ fontSize: '0.875rem' }} />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
       );
     }
+  }
 
   return (
    <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>

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

@@ -65,7 +65,8 @@ export function createToolFlow(config: ToolFlowConfig) {
   const steps = createToolSteps();
 
   return (
-    <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
+    <Stack gap="sm" p="sm" >
+    {/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
         {config.title && <ToolWorkflowTitle {...config.title} />}