Added optional title for tool workflow (#4256)

- Added optional title for tool workflow - Not added to any tool. Just
there for when we need it
- Added add files button to files step
- renamed Local files button in filemanager to Upload Files
-

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
Co-authored-by: James Brunton <jbrunton96@gmail.com>

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

@@ -1,6 +1,9 @@
 import React from "react";
-import { Text } from "@mantine/core";
+import { Text, Anchor } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import FolderIcon from '@mui/icons-material/Folder';
+import { useFilesModalContext } from "../../../contexts/FilesModalContext";
+import { useAllFiles } from "../../../contexts/FileContext";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: File[];
@@ -12,13 +15,39 @@ const FileStatusIndicator = ({
   placeholder,
 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
-  const defaultPlaceholder = placeholder || t("files.placeholder", "Select a PDF file in the main view to get started");
-  
-  // Only show content when no files are selected
+  const { openFilesModal } = useFilesModalContext();
+  const { files: workbenchFiles } = useAllFiles();
+
+  // Check if there are no files in the workbench
+  if (workbenchFiles.length === 0) {
+    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' }}
+        >
+          <FolderIcon style={{ fontSize: '14px' }} />
+          {t("files.addFiles", "Add files")}
+        </Anchor>
+      </Text>
+    );
+  }
+
+  // Show selection status when there are files in workbench
   if (selectedFiles.length === 0) {
     return (
       <Text size="sm" c="dimmed">
-        {defaultPlaceholder}
+        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+        <Anchor
+          size="sm"
+          onClick={openFilesModal}
+          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+        >
+          <FolderIcon style={{ fontSize: '14px' }} />
+          {t("files.addFiles", "Add files")}
+        </Anchor>
       </Text>
     );
   }

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

@@ -25,6 +25,7 @@ export interface ToolStepProps {
   _stepNumber?: number; // Internal prop set by ToolStepContainer
   _excludeFromCount?: boolean; // Internal prop to exclude from visible count calculation
   _noPadding?: boolean; // Internal prop to exclude from default left padding
+  alwaysShowTooltip?: boolean; // Force tooltip to show even when collapsed
   tooltip?: {
     content?: React.ReactNode;
     tips?: TooltipTip[];
@@ -38,9 +39,10 @@ export interface ToolStepProps {
 const renderTooltipTitle = (
   title: string,
   tooltip: ToolStepProps['tooltip'],
-  isCollapsed: boolean
+  isCollapsed: boolean,
+  alwaysShowTooltip: boolean = false
 ) => {
-  if (tooltip && !isCollapsed) {
+  if (tooltip && (!isCollapsed || alwaysShowTooltip)) {
     return (
       <Tooltip
         content={tooltip.content}
@@ -77,6 +79,7 @@ const ToolStep = ({
   showNumber,
   _stepNumber,
   _noPadding,
+  alwaysShowTooltip = false,
   tooltip
 }: ToolStepProps) => {
   if (!isVisible) return null;
@@ -118,7 +121,7 @@ const ToolStep = ({
               {stepNumber}
             </Text>
           )}
-          {renderTooltipTitle(title, tooltip, isCollapsed)}
+          {renderTooltipTitle(title, tooltip, isCollapsed, alwaysShowTooltip)}
         </Flex>
 
         {isCollapsed ? (

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Flex, Text, Divider } from '@mantine/core';
+import { Tooltip } from '../../shared/Tooltip';
+
+export interface ToolWorkflowTitleProps {
+  title: string;
+  tooltip?: {
+    content?: React.ReactNode;
+    tips?: any[];
+    header?: {
+      title: string;
+      logo?: React.ReactNode;
+    };
+  };
+}
+
+export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
+  if (tooltip) {
+    return (
+      <>
+        <Flex justify="center" w="100%">
+          <Tooltip
+            content={tooltip.content}
+            tips={tooltip.tips}
+            header={tooltip.header}
+            sidebarTooltip={true}
+          >
+            <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
+              <Text fw={500} size="xl" p="md">
+                {title}
+              </Text>
+              <span className="material-symbols-rounded" style={{ fontSize: '1.2rem', color: 'var(--icon-files-color)' }}>
+                gpp_maybe
+              </span>
+            </Flex>
+          </Tooltip>
+        </Flex>
+        <Divider />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Flex justify="center" w="100%">
+        <Text fw={500} size="xl" p="md">
+          {title}
+        </Text>
+      </Flex>
+      <Divider />
+    </>
+  );
+}

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

@@ -3,6 +3,7 @@ import { Stack } from '@mantine/core';
 import { createToolSteps, ToolStepProvider } from './ToolStep';
 import OperationButton from './OperationButton';
 import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';
+import { ToolWorkflowTitle, ToolWorkflowTitleProps } from './ToolWorkflowTitle';
 
 export interface FilesStepConfig {
   selectedFiles: File[];
@@ -45,7 +46,10 @@ export interface ReviewStepConfig {
   testId?: string;
 }
 
+export interface TitleConfig extends ToolWorkflowTitleProps {}
+
 export interface ToolFlowConfig {
+  title?: TitleConfig;
   files: FilesStepConfig;
   steps: MiddleStepConfig[];
   executeButton?: ExecuteButtonConfig;
@@ -63,6 +67,8 @@ export function createToolFlow(config: ToolFlowConfig) {
   return (
     <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
+        {config.title && <ToolWorkflowTitle {...config.title} />}
+
         {/* Files Step */}
         {config.files.isVisible !== false && steps.createFilesStep({
           selectedFiles: config.files.selectedFiles,