+ setIsDragging(true)}
+ onDragLeave={() => setIsDragging(false)}
+ accept={["*/*"]}
+ multiple={true}
+ activateOnClick={false}
+ style={{
+ height: '100%',
+ width: '100%',
+ border: 'none',
+ borderRadius: '30px',
+ backgroundColor: 'var(--bg-file-manager)'
+ }}
+ styles={{
+ inner: { pointerEvents: 'all' }
+ }}
+ >
+
+ {isMobile ?
+
+
+
+
-
- {t("storage.storageUsed", "Storage used")}: {formatFileSize(totalUsed)} / {formatFileSize(storageConfig.maxTotalStorage)}
-
-
-
+ {activeSource === 'recent' && (
+
+
+
+ )}
+
+
+ 0 ? modalHeight : '100%',
+ backgroundColor: 'transparent',
+ border: 'none',
+ borderRadius: 0
+ }}
+ />
+
+
+
+
+
+
+ {t('fileManager.dropFilesHere', 'Drop files here to upload')}
+
+
+
+ );
+};
+
+export default DragOverlay;
\ No newline at end of file
diff --git a/frontend/src/components/fileManager/FileDetails.tsx b/frontend/src/components/fileManager/FileDetails.tsx
new file mode 100644
index 000000000..9673d06ad
--- /dev/null
+++ b/frontend/src/components/fileManager/FileDetails.tsx
@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import { Stack, Button } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useIndexedDBThumbnail } from '../../hooks/useIndexedDBThumbnail';
+import { useFileManagerContext } from '../../contexts/FileManagerContext';
+import FilePreview from './FilePreview';
+import FileInfoCard from './FileInfoCard';
+import CompactFileDetails from './CompactFileDetails';
+
+interface FileDetailsProps {
+ compact?: boolean;
+}
+
+const FileDetails: React.FC
@@ -60,8 +58,8 @@ function NavHeader({
variant="subtle"
onClick={() => {
setActiveButton('tools');
- onReaderToggle();
- onToolsClick();
+ handleReaderToggle();
+ handleBackToTools();
}}
style={{
backgroundColor: activeButton === 'tools' ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
@@ -84,12 +82,11 @@ function NavHeader({
);
}
-const QuickAccessBar = forwardRef(({
- onToolsClick,
- onReaderToggle,
+const QuickAccessBar = forwardRef(({
}, ref) => {
const { isRainbowMode } = useRainbowThemeContext();
const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
+ const { handleReaderToggle } = useToolWorkflow();
const [configModalOpen, setConfigModalOpen] = useState(false);
const [activeButton, setActiveButton] = useState('tools');
const scrollableRef = useRef(null);
@@ -110,7 +107,7 @@ const QuickAccessBar = forwardRef(({
type: 'navigation',
onClick: () => {
setActiveButton('read');
- onReaderToggle();
+ handleReaderToggle();
}
},
{
@@ -218,9 +215,7 @@ const QuickAccessBar = forwardRef(({
- setSearch(e.currentTarget.value)}
- mb="md"
- autoComplete="off"
- />
-
+
+
{filteredTools.length === 0 ? (
{t("toolPicker.noToolsFound", "No tools found")}
diff --git a/frontend/src/contexts/ToolWorkflowContext.tsx b/frontend/src/contexts/ToolWorkflowContext.tsx
new file mode 100644
index 000000000..47f42b011
--- /dev/null
+++ b/frontend/src/contexts/ToolWorkflowContext.tsx
@@ -0,0 +1,221 @@
+/**
+ * ToolWorkflowContext - Manages tool selection, UI state, and workflow coordination
+ * Eliminates prop drilling with a single, simple context
+ */
+
+import React, { createContext, useContext, useReducer, useCallback, useMemo } from 'react';
+import { useToolManagement } from '../hooks/useToolManagement';
+import { ToolConfiguration } from '../types/tool';
+import { PageEditorFunctions } from '../types/pageEditor';
+
+// State interface
+interface ToolWorkflowState {
+ // UI State
+ sidebarsVisible: boolean;
+ leftPanelView: 'toolPicker' | 'toolContent';
+ readerMode: boolean;
+
+ // File/Preview State
+ previewFile: File | null;
+ pageEditorFunctions: PageEditorFunctions | null;
+
+ // Search State
+ searchQuery: string;
+}
+
+// Actions
+type ToolWorkflowAction =
+ | { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
+ | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' }
+ | { type: 'SET_READER_MODE'; payload: boolean }
+ | { type: 'SET_PREVIEW_FILE'; payload: File | null }
+ | { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
+ | { type: 'SET_SEARCH_QUERY'; payload: string }
+ | { type: 'RESET_UI_STATE' };
+
+// Initial state
+const initialState: ToolWorkflowState = {
+ sidebarsVisible: true,
+ leftPanelView: 'toolPicker',
+ readerMode: false,
+ previewFile: null,
+ pageEditorFunctions: null,
+ searchQuery: '',
+};
+
+// Reducer
+function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {
+ switch (action.type) {
+ case 'SET_SIDEBARS_VISIBLE':
+ return { ...state, sidebarsVisible: action.payload };
+ case 'SET_LEFT_PANEL_VIEW':
+ return { ...state, leftPanelView: action.payload };
+ case 'SET_READER_MODE':
+ return { ...state, readerMode: action.payload };
+ case 'SET_PREVIEW_FILE':
+ return { ...state, previewFile: action.payload };
+ case 'SET_PAGE_EDITOR_FUNCTIONS':
+ return { ...state, pageEditorFunctions: action.payload };
+ case 'SET_SEARCH_QUERY':
+ return { ...state, searchQuery: action.payload };
+ case 'RESET_UI_STATE':
+ return { ...initialState, searchQuery: state.searchQuery }; // Preserve search
+ default:
+ return state;
+ }
+}
+
+// Context value interface
+interface ToolWorkflowContextValue extends ToolWorkflowState {
+ // Tool management (from hook)
+ selectedToolKey: string | null;
+ selectedTool: ToolConfiguration | null;
+ toolRegistry: any; // From useToolManagement
+
+ // UI Actions
+ setSidebarsVisible: (visible: boolean) => void;
+ setLeftPanelView: (view: 'toolPicker' | 'toolContent') => void;
+ setReaderMode: (mode: boolean) => void;
+ setPreviewFile: (file: File | null) => void;
+ setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
+ setSearchQuery: (query: string) => void;
+
+ // Tool Actions
+ selectTool: (toolId: string) => void;
+ clearToolSelection: () => void;
+
+ // Workflow Actions (compound actions)
+ handleToolSelect: (toolId: string) => void;
+ handleBackToTools: () => void;
+ handleReaderToggle: () => void;
+
+ // Computed values
+ filteredTools: [string, any][]; // Filtered by search
+ isPanelVisible: boolean;
+}
+
+const ToolWorkflowContext = createContext(undefined);
+
+// Provider component
+interface ToolWorkflowProviderProps {
+ children: React.ReactNode;
+ /** Handler for view changes (passed from parent) */
+ onViewChange?: (view: string) => void;
+}
+
+export function ToolWorkflowProvider({ children, onViewChange }: ToolWorkflowProviderProps) {
+ const [state, dispatch] = useReducer(toolWorkflowReducer, initialState);
+
+ // Tool management hook
+ const {
+ selectedToolKey,
+ selectedTool,
+ toolRegistry,
+ selectTool,
+ clearToolSelection,
+ } = useToolManagement();
+
+ // UI Action creators
+ const setSidebarsVisible = useCallback((visible: boolean) => {
+ dispatch({ type: 'SET_SIDEBARS_VISIBLE', payload: visible });
+ }, []);
+
+ const setLeftPanelView = useCallback((view: 'toolPicker' | 'toolContent') => {
+ dispatch({ type: 'SET_LEFT_PANEL_VIEW', payload: view });
+ }, []);
+
+ const setReaderMode = useCallback((mode: boolean) => {
+ dispatch({ type: 'SET_READER_MODE', payload: mode });
+ }, []);
+
+ const setPreviewFile = useCallback((file: File | null) => {
+ dispatch({ type: 'SET_PREVIEW_FILE', payload: file });
+ }, []);
+
+ const setPageEditorFunctions = useCallback((functions: PageEditorFunctions | null) => {
+ dispatch({ type: 'SET_PAGE_EDITOR_FUNCTIONS', payload: functions });
+ }, []);
+
+ const setSearchQuery = useCallback((query: string) => {
+ dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
+ }, []);
+
+ // Workflow actions (compound actions that coordinate multiple state changes)
+ const handleToolSelect = useCallback((toolId: string) => {
+ selectTool(toolId);
+ onViewChange?.('fileEditor');
+ setLeftPanelView('toolContent');
+ setReaderMode(false);
+ }, [selectTool, onViewChange, setLeftPanelView, setReaderMode]);
+
+ const handleBackToTools = useCallback(() => {
+ setLeftPanelView('toolPicker');
+ setReaderMode(false);
+ clearToolSelection();
+ }, [setLeftPanelView, setReaderMode, clearToolSelection]);
+
+ const handleReaderToggle = useCallback(() => {
+ setReaderMode(true);
+ }, [setReaderMode]);
+
+ // Filter tools based on search query
+ const filteredTools = useMemo(() => {
+ if (!toolRegistry) return [];
+ return Object.entries(toolRegistry).filter(([_, { name }]) =>
+ name.toLowerCase().includes(state.searchQuery.toLowerCase())
+ );
+ }, [toolRegistry, state.searchQuery]);
+
+ const isPanelVisible = useMemo(() =>
+ state.sidebarsVisible && !state.readerMode,
+ [state.sidebarsVisible, state.readerMode]
+ );
+
+ // Simple context value with basic memoization
+ const contextValue = useMemo((): ToolWorkflowContextValue => ({
+ // State
+ ...state,
+ selectedToolKey,
+ selectedTool,
+ toolRegistry,
+
+ // Actions
+ setSidebarsVisible,
+ setLeftPanelView,
+ setReaderMode,
+ setPreviewFile,
+ setPageEditorFunctions,
+ setSearchQuery,
+ selectTool,
+ clearToolSelection,
+
+ // Workflow Actions
+ handleToolSelect,
+ handleBackToTools,
+ handleReaderToggle,
+
+ // Computed
+ filteredTools,
+ isPanelVisible,
+ }), [state, selectedToolKey, selectedTool, toolRegistry, filteredTools, isPanelVisible]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Custom hook to use the context
+export function useToolWorkflow(): ToolWorkflowContextValue {
+ const context = useContext(ToolWorkflowContext);
+ if (!context) {
+ throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
+ }
+ return context;
+}
+
+// Convenience exports for specific use cases (optional - components can use useToolWorkflow directly)
+export const useToolSelection = useToolWorkflow;
+export const useToolPanelState = useToolWorkflow;
+export const useWorkbenchState = useToolWorkflow;
\ No newline at end of file
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index b7a352f0f..e9009282e 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,57 +1,26 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { useTranslation } from 'react-i18next';
+import React, { useEffect } from "react";
import { useFileContext } from "../contexts/FileContext";
import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
+import { ToolWorkflowProvider, useToolSelection } from "../contexts/ToolWorkflowContext";
+import { Group } from "@mantine/core";
import { SidebarProvider, useSidebarContext } from "../contexts/SidebarContext";
-import { useToolManagement } from "../hooks/useToolManagement";
-import { useFileHandler } from "../hooks/useFileHandler";
-import { Group, Box, Button } from "@mantine/core";
-import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
-import { PageEditorFunctions } from "../types/pageEditor";
-import { SidebarRefs, SidebarState } from "../types/sidebar";
-import rainbowStyles from '../styles/rainbow.module.css';
-import ToolPicker from "../components/tools/ToolPicker";
-import TopControls from "../components/shared/TopControls";
-import FileEditor from "../components/fileEditor/FileEditor";
-import PageEditor from "../components/pageEditor/PageEditor";
-import PageEditorControls from "../components/pageEditor/PageEditorControls";
-import Viewer from "../components/viewer/Viewer";
-import ToolRenderer from "../components/tools/ToolRenderer";
+import ToolPanel from "../components/tools/ToolPanel";
+import Workbench from "../components/layout/Workbench";
import QuickAccessBar from "../components/shared/QuickAccessBar";
-import LandingPage from "../components/shared/LandingPage";
import FileManager from "../components/FileManager";
function HomePageContent() {
- const { t } = useTranslation();
- const { isRainbowMode } = useRainbowThemeContext();
const {
- sidebarState,
sidebarRefs,
- setSidebarsVisible,
- setLeftPanelView,
- setReaderMode
} = useSidebarContext();
- const { sidebarsVisible, leftPanelView, readerMode } = sidebarState;
- const { quickAccessRef, toolPanelRef } = sidebarRefs;
+ const { quickAccessRef } = sidebarRefs;
- const fileContext = useFileContext();
- const { activeFiles, currentView, setCurrentView } = fileContext;
const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
- const { addToActiveFiles } = useFileHandler();
- const {
- selectedToolKey,
- selectedTool,
- toolRegistry,
- selectTool,
- clearToolSelection,
- } = useToolManagement();
-
- const [pageEditorFunctions, setPageEditorFunctions] = useState(null);
- const [previewFile, setPreviewFile] = useState(null);
+ const { selectedTool } = useToolSelection();
// Update file selection context when tool changes
useEffect(() => {
@@ -65,232 +34,30 @@ function HomePageContent() {
}
}, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
-
-
- const handleToolSelect = useCallback(
- (id: string) => {
- selectTool(id);
- setCurrentView('fileEditor'); // Tools use fileEditor view for file selection
- setLeftPanelView('toolContent');
- setReaderMode(false);
- },
- [selectTool, setCurrentView]
- );
-
- const handleQuickAccessTools = useCallback(() => {
- setLeftPanelView('toolPicker');
- setReaderMode(false);
- clearToolSelection();
- }, [clearToolSelection]);
-
- const handleReaderToggle = useCallback(() => {
- setReaderMode(true);
- }, [readerMode]);
-
- const handleViewChange = useCallback((view: string) => {
- setCurrentView(view as any);
- }, [setCurrentView]);
-
-
-
-
return (
- {/* Quick Access Bar */}
- {/* Top Controls */}
-
- {!activeFiles[0] ? (
- {
- handleViewChange("pageEditor");
- },
- onMergeFiles: (filesToMerge) => {
- filesToMerge.forEach(addToActiveFiles);
- handleViewChange("viewer");
- }
- })}
- />
- ) : currentView === "viewer" ? (
- {
- setPreviewFile(null); // Clear preview file
- const previousMode = sessionStorage.getItem('previousMode');
- if (previousMode === 'split') {
- selectTool('split');
- setCurrentView('split');
- setLeftPanelView('toolContent');
- sessionStorage.removeItem('previousMode');
- } else if (previousMode === 'compress') {
- selectTool('compress');
- setCurrentView('compress');
- setLeftPanelView('toolContent');
- sessionStorage.removeItem('previousMode');
- } else if (previousMode === 'convert') {
- selectTool('convert');
- setCurrentView('convert');
- setLeftPanelView('toolContent');
- sessionStorage.removeItem('previousMode');
- } else {
- setCurrentView('fileEditor');
- }
- }
- })}
- />
- ) : currentView === "pageEditor" ? (
- <>
-
-
-
- {/* Global Modals */}
+ ref={quickAccessRef} />
+
);
}
-// Main HomePage component wrapped with FileSelectionProvider
export default function HomePage() {
+ const { setCurrentView } = useFileContext();
return (
-
-
+
+
+
+
);
}
diff --git a/frontend/src/types/sidebar.ts b/frontend/src/types/sidebar.ts
index 60dcd029d..b286f0b82 100644
--- a/frontend/src/types/sidebar.ts
+++ b/frontend/src/types/sidebar.ts
@@ -28,12 +28,6 @@ export interface SidebarProviderProps {
children: React.ReactNode;
}
-// QuickAccessBar related interfaces
-export interface QuickAccessBarProps {
- onToolsClick: () => void;
- onReaderToggle: () => void;
-}
-
export interface ButtonConfig {
id: string;
name: string;
From 507ad1dc6197a3887c3ec9c051afc8daaf288050 Mon Sep 17 00:00:00 2001
From: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
Date: Fri, 8 Aug 2025 16:01:56 +0100
Subject: [PATCH 4/4] Feature/v2/shared tool hooks (#4134)
# Description of Changes
---
## Checklist
### General
- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings
### Documentation
- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
### UI Changes (if applicable)
- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)
### Testing (if applicable)
- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
---------
Co-authored-by: Reece Browne
---
CLAUDE.md | 80 ++-
.../components/tools/split/SplitSettings.tsx | 17 +-
.../tools/compress/useCompressOperation.ts | 287 ++---------
.../tools/convert/useConvertOperation.ts | 464 ++++--------------
.../src/hooks/tools/ocr/useOCROperation.ts | 443 ++++-------------
.../src/hooks/tools/shared/useToolApiCalls.ts | 86 ++++
.../hooks/tools/shared/useToolOperation.ts | 264 ++++++++++
.../hooks/tools/shared/useToolResources.ts | 114 +++++
.../src/hooks/tools/shared/useToolState.ts | 137 ++++++
.../hooks/tools/split/useSplitOperation.ts | 302 +++---------
.../hooks/tools/split/useSplitParameters.ts | 15 +-
.../services/enhancedPDFProcessingService.ts | 5 +-
.../tests/convert/ConvertIntegration.test.tsx | 2 +-
frontend/src/tools/Split.tsx | 7 +-
frontend/src/types/processing.ts | 1 -
frontend/src/utils/toolErrorHandler.ts | 33 ++
frontend/src/utils/toolOperationTracker.ts | 28 ++
frontend/src/utils/toolResponseProcessor.ts | 25 +
18 files changed, 1068 insertions(+), 1242 deletions(-)
create mode 100644 frontend/src/hooks/tools/shared/useToolApiCalls.ts
create mode 100644 frontend/src/hooks/tools/shared/useToolOperation.ts
create mode 100644 frontend/src/hooks/tools/shared/useToolResources.ts
create mode 100644 frontend/src/hooks/tools/shared/useToolState.ts
create mode 100644 frontend/src/utils/toolErrorHandler.ts
create mode 100644 frontend/src/utils/toolOperationTracker.ts
create mode 100644 frontend/src/utils/toolResponseProcessor.ts
diff --git a/CLAUDE.md b/CLAUDE.md
index 8bdd7c235..be4e92201 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -59,12 +59,73 @@ Frontend designed for **stateful document processing**:
Without cleanup: browser crashes with memory leaks.
#### Tool Development
-- **Pattern**: Follow `src/tools/Split.tsx` as reference implementation
-- **File Access**: Tools receive `selectedFiles` prop (computed from activeFiles based on user selection)
-- **File Selection**: Users select files in FileEditor (tool mode) → stored as IDs → computed to File objects for tools
-- **Integration**: All files are part of FileContext ecosystem - automatic memory management and operation tracking
-- **Parameters**: Tool parameter handling patterns still being standardized
-- **Preview Integration**: Tools can implement preview functionality (see Split tool's thumbnail preview)
+
+**Architecture**: Modular hook-based system with clear separation of concerns:
+
+- **useToolOperation** (`frontend/src/hooks/tools/shared/useToolOperation.ts`): Main orchestrator hook
+ - Coordinates all tool operations with consistent interface
+ - Integrates with FileContext for operation tracking
+ - Handles validation, error handling, and UI state management
+
+- **Supporting Hooks**:
+ - **useToolState**: UI state management (loading, progress, error, files)
+ - **useToolApiCalls**: HTTP requests and file processing
+ - **useToolResources**: Blob URLs, thumbnails, ZIP downloads
+
+- **Utilities**:
+ - **toolErrorHandler**: Standardized error extraction and i18n support
+ - **toolResponseProcessor**: API response handling (single/zip/custom)
+ - **toolOperationTracker**: FileContext integration utilities
+
+**Three Tool Patterns**:
+
+**Pattern 1: Single-File Tools** (Individual processing)
+- Backend processes one file per API call
+- Set `multiFileEndpoint: false`
+- Examples: Compress, Rotate
+```typescript
+return useToolOperation({
+ operationType: 'compress',
+ endpoint: '/api/v1/misc/compress-pdf',
+ buildFormData: (params, file: File) => { /* single file */ },
+ multiFileEndpoint: false,
+ filePrefix: 'compressed_'
+});
+```
+
+**Pattern 2: Multi-File Tools** (Batch processing)
+- Backend accepts `MultipartFile[]` arrays in single API call
+- Set `multiFileEndpoint: true`
+- Examples: Split, Merge, Overlay
+```typescript
+return useToolOperation({
+ operationType: 'split',
+ endpoint: '/api/v1/general/split-pages',
+ buildFormData: (params, files: File[]) => { /* all files */ },
+ multiFileEndpoint: true,
+ filePrefix: 'split_'
+});
+```
+
+**Pattern 3: Complex Tools** (Custom processing)
+- Tools with complex routing logic or non-standard processing
+- Provide `customProcessor` for full control
+- Examples: Convert, OCR
+```typescript
+return useToolOperation({
+ operationType: 'convert',
+ customProcessor: async (params, files) => { /* custom logic */ },
+ filePrefix: 'converted_'
+});
+```
+
+**Benefits**:
+- **No Timeouts**: Operations run until completion (supports 100GB+ files)
+- **Consistent**: All tools follow same pattern and interface
+- **Maintainable**: Single responsibility hooks, easy to test and modify
+- **i18n Ready**: Built-in internationalization support
+- **Type Safe**: Full TypeScript support with generic interfaces
+- **Memory Safe**: Automatic resource cleanup and blob URL management
## Architecture Overview
@@ -126,7 +187,10 @@ Without cleanup: browser crashes with memory leaks.
- **Core Status**: React SPA architecture complete with multi-tool workflow support
- **State Management**: FileContext handles all file operations and tool navigation
- **File Processing**: Production-ready with memory management for large PDF workflows (up to 100GB+)
-- **Tool Integration**: Standardized tool interface - see `src/tools/Split.tsx` as reference
+- **Tool Integration**: Modular hook architecture with `useToolOperation` orchestrator
+ - Individual hooks: `useToolState`, `useToolApiCalls`, `useToolResources`
+ - Utilities: `toolErrorHandler`, `toolResponseProcessor`, `toolOperationTracker`
+ - Pattern: Each tool creates focused operation hook, UI consumes state/actions
- **Preview System**: Tool results can be previewed without polluting file context (Split tool example)
- **Performance**: Web Worker thumbnails, IndexedDB persistence, background processing
@@ -141,7 +205,7 @@ Without cleanup: browser crashes with memory leaks.
- **Security**: When `DOCKER_ENABLE_SECURITY=false`, security-related classes are excluded from compilation
- **FileContext**: All file operations MUST go through FileContext - never bypass with direct File handling
- **Memory Management**: Manual cleanup required for PDF.js documents and blob URLs - don't remove cleanup code
-- **Tool Development**: New tools should follow Split tool pattern (`src/tools/Split.tsx`)
+- **Tool Development**: New tools should follow `useToolOperation` hook pattern (see `useCompressOperation.ts`)
- **Performance Target**: Must handle PDFs up to 100GB+ without browser crashes
- **Preview System**: Tools can preview results without polluting main file context (see Split tool implementation)
diff --git a/frontend/src/components/tools/split/SplitSettings.tsx b/frontend/src/components/tools/split/SplitSettings.tsx
index 50ca49f20..95e972eaf 100644
--- a/frontend/src/components/tools/split/SplitSettings.tsx
+++ b/frontend/src/components/tools/split/SplitSettings.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { SPLIT_MODES, SPLIT_TYPES, type SplitMode, type SplitType } from '../../../constants/splitConstants';
export interface SplitParameters {
+ mode: SplitMode | '';
pages: string;
hDiv: string;
vDiv: string;
@@ -15,16 +16,12 @@ export interface SplitParameters {
}
export interface SplitSettingsProps {
- mode: SplitMode | '';
- onModeChange: (mode: SplitMode | '') => void;
parameters: SplitParameters;
onParameterChange: (parameter: keyof SplitParameters, value: string | boolean) => void;
disabled?: boolean;
}
const SplitSettings = ({
- mode,
- onModeChange,
parameters,
onParameterChange,
disabled = false
@@ -125,8 +122,8 @@ const SplitSettings = ({
);
}
diff --git a/frontend/src/hooks/tools/compress/useCompressOperation.ts b/frontend/src/hooks/tools/compress/useCompressOperation.ts
index e66b3f43f..e254cbe1c 100644
--- a/frontend/src/hooks/tools/compress/useCompressOperation.ts
+++ b/frontend/src/hooks/tools/compress/useCompressOperation.ts
@@ -1,10 +1,6 @@
-import { useCallback, useState } from 'react';
-import axios from 'axios';
import { useTranslation } from 'react-i18next';
-import { useFileContext } from '../../../contexts/FileContext';
-import { FileOperation } from '../../../types/fileContext';
-import { zipFileService } from '../../../services/zipFileService';
-import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
export interface CompressParameters {
compressionLevel: number;
@@ -15,254 +11,39 @@ export interface CompressParameters {
fileSizeUnit: 'KB' | 'MB';
}
-export interface CompressOperationHook {
- executeOperation: (
- parameters: CompressParameters,
- selectedFiles: File[]
- ) => Promise;
+const buildFormData = (parameters: CompressParameters, file: File): FormData => {
+ const formData = new FormData();
+ formData.append("fileInput", file);
- // Flattened result properties for cleaner access
- files: File[];
- thumbnails: string[];
- isGeneratingThumbnails: boolean;
- downloadUrl: string | null;
- downloadFilename: string;
- status: string;
- errorMessage: string | null;
- isLoading: boolean;
-
- // Result management functions
- resetResults: () => void;
- clearError: () => void;
-}
-
-export const useCompressOperation = (): CompressOperationHook => {
- const { t } = useTranslation();
- const {
- recordOperation,
- markOperationApplied,
- markOperationFailed,
- addFiles
- } = useFileContext();
-
- // Internal state management
- const [files, setFiles] = useState([]);
- const [thumbnails, setThumbnails] = useState([]);
- const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
- const [downloadUrl, setDownloadUrl] = useState(null);
- const [downloadFilename, setDownloadFilename] = useState('');
- const [status, setStatus] = useState('');
- const [errorMessage, setErrorMessage] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
-
- // Track blob URLs for cleanup
- const [blobUrls, setBlobUrls] = useState([]);
-
- const cleanupBlobUrls = useCallback(() => {
- blobUrls.forEach(url => {
- try {
- URL.revokeObjectURL(url);
- } catch (error) {
- console.warn('Failed to revoke blob URL:', error);
- }
- });
- setBlobUrls([]);
- }, [blobUrls]);
-
- const buildFormData = useCallback((
- parameters: CompressParameters,
- file: File
- ) => {
- const formData = new FormData();
-
- formData.append("fileInput", file);
-
- if (parameters.compressionMethod === 'quality') {
- formData.append("optimizeLevel", parameters.compressionLevel.toString());
- } else {
- // File size method
- const fileSize = parameters.fileSizeValue ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` : '';
- if (fileSize) {
- formData.append("expectedOutputSize", fileSize);
- }
+ if (parameters.compressionMethod === 'quality') {
+ formData.append("optimizeLevel", parameters.compressionLevel.toString());
+ } else {
+ // File size method
+ const fileSize = parameters.fileSizeValue ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` : '';
+ if (fileSize) {
+ formData.append("expectedOutputSize", fileSize);
}
+ }
- formData.append("grayscale", parameters.grayscale.toString());
-
- const endpoint = "/api/v1/misc/compress-pdf";
-
- return { formData, endpoint };
- }, []);
-
- const createOperation = useCallback((
- parameters: CompressParameters,
- selectedFiles: File[]
- ): { operation: FileOperation; operationId: string; fileId: string } => {
- const operationId = `compress-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const fileId = selectedFiles.map(f => f.name).join(',');
-
- const operation: FileOperation = {
- id: operationId,
- type: 'compress',
- timestamp: Date.now(),
- fileIds: selectedFiles.map(f => f.name),
- status: 'pending',
- metadata: {
- originalFileNames: selectedFiles.map(f => f.name),
- parameters: {
- compressionLevel: parameters.compressionLevel,
- grayscale: parameters.grayscale,
- expectedSize: parameters.expectedSize,
- },
- totalFileSize: selectedFiles.reduce((sum, f) => sum + f.size, 0),
- fileCount: selectedFiles.length
- }
- };
-
- return { operation, operationId, fileId };
- }, []);
-
-
- const executeOperation = useCallback(async (
- parameters: CompressParameters,
- selectedFiles: File[]
- ) => {
- if (selectedFiles.length === 0) {
- setStatus(t("noFileSelected"));
- return;
- }
- const validFiles = selectedFiles.filter(file => file.size > 0);
- if (validFiles.length === 0) {
- setErrorMessage('No valid files to compress. All selected files are empty.');
- return;
- }
-
- if (validFiles.length < selectedFiles.length) {
- console.warn(`Skipping ${selectedFiles.length - validFiles.length} empty files`);
- }
-
- const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
-
- recordOperation(fileId, operation);
-
- setStatus(t("loading"));
- setIsLoading(true);
- setErrorMessage(null);
- setFiles([]);
- setThumbnails([]);
-
- try {
- const compressedFiles: File[] = [];
-
- const failedFiles: string[] = [];
-
- for (let i = 0; i < validFiles.length; i++) {
- const file = validFiles[i];
- setStatus(`Compressing ${file.name} (${i + 1}/${validFiles.length})`);
-
- try {
- const { formData, endpoint } = buildFormData(parameters, file);
- const response = await axios.post(endpoint, formData, { responseType: "blob" });
-
- const contentType = response.headers['content-type'] || 'application/pdf';
- const blob = new Blob([response.data], { type: contentType });
- const compressedFile = new File([blob], `compressed_${file.name}`, { type: contentType });
-
- compressedFiles.push(compressedFile);
- } catch (fileError) {
- console.error(`Failed to compress ${file.name}:`, fileError);
- failedFiles.push(file.name);
- }
- }
-
- if (failedFiles.length > 0 && compressedFiles.length === 0) {
- throw new Error(`Failed to compress all files: ${failedFiles.join(', ')}`);
- }
-
- if (failedFiles.length > 0) {
- setStatus(`Compressed ${compressedFiles.length}/${validFiles.length} files. Failed: ${failedFiles.join(', ')}`);
- }
-
- setFiles(compressedFiles);
- setIsGeneratingThumbnails(true);
-
- await addFiles(compressedFiles);
-
- cleanupBlobUrls();
-
- if (compressedFiles.length === 1) {
- const url = window.URL.createObjectURL(compressedFiles[0]);
- setDownloadUrl(url);
- setBlobUrls([url]);
- setDownloadFilename(`compressed_${selectedFiles[0].name}`);
- } else {
- const { zipFile } = await zipFileService.createZipFromFiles(compressedFiles, 'compressed_files.zip');
- const url = window.URL.createObjectURL(zipFile);
- setDownloadUrl(url);
- setBlobUrls([url]);
- setDownloadFilename(`compressed_${validFiles.length}_files.zip`);
- }
-
- const thumbnails = await Promise.all(
- compressedFiles.map(async (file) => {
- try {
- const thumbnail = await generateThumbnailForFile(file);
- return thumbnail || '';
- } catch (error) {
- console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
- return '';
- }
- })
- );
-
- setThumbnails(thumbnails);
- setIsGeneratingThumbnails(false);
- setStatus(t("downloadComplete"));
- markOperationApplied(fileId, operationId);
- } catch (error: any) {
- console.error(error);
- let errorMsg = t("error.pdfPassword", "An error occurred while compressing the PDF.");
- if (error.response?.data && typeof error.response.data === 'string') {
- errorMsg = error.response.data;
- } else if (error.message) {
- errorMsg = error.message;
- }
- setErrorMessage(errorMsg);
- setStatus(t("error._value", "Compression failed."));
- markOperationFailed(fileId, operationId, errorMsg);
- } finally {
- setIsLoading(false);
- }
- }, [t, createOperation, buildFormData, recordOperation, markOperationApplied, markOperationFailed, addFiles]);
-
- const resetResults = useCallback(() => {
- cleanupBlobUrls();
- setFiles([]);
- setThumbnails([]);
- setIsGeneratingThumbnails(false);
- setDownloadUrl(null);
- setStatus('');
- setErrorMessage(null);
- setIsLoading(false);
- }, [cleanupBlobUrls]);
-
- const clearError = useCallback(() => {
- setErrorMessage(null);
- }, []);
-
- return {
- executeOperation,
- files,
- thumbnails,
- isGeneratingThumbnails,
- downloadUrl,
- downloadFilename,
- status,
- errorMessage,
- isLoading,
-
- // Result management functions
- resetResults,
- clearError,
- };
+ formData.append("grayscale", parameters.grayscale.toString());
+ return formData;
+};
+
+export const useCompressOperation = () => {
+ const { t } = useTranslation();
+
+ return useToolOperation({
+ operationType: 'compress',
+ endpoint: '/api/v1/misc/compress-pdf',
+ buildFormData,
+ filePrefix: 'compressed_',
+ multiFileEndpoint: false, // Individual API calls per file
+ validateParams: (params) => {
+ if (params.compressionMethod === 'filesize' && !params.fileSizeValue) {
+ return { valid: false, errors: [t('compress.validation.fileSizeRequired', 'File size value is required when using filesize method')] };
+ }
+ return { valid: true };
+ },
+ getErrorMessage: createStandardErrorHandler(t('compress.error.failed', 'An error occurred while compressing the PDF.'))
+ });
};
diff --git a/frontend/src/hooks/tools/convert/useConvertOperation.ts b/frontend/src/hooks/tools/convert/useConvertOperation.ts
index ada920e0b..6d8d3971f 100644
--- a/frontend/src/hooks/tools/convert/useConvertOperation.ts
+++ b/frontend/src/hooks/tools/convert/useConvertOperation.ts
@@ -1,36 +1,12 @@
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback } from 'react';
import axios from 'axios';
import { useTranslation } from 'react-i18next';
-import { useFileContext } from '../../../contexts/FileContext';
-import { FileOperation } from '../../../types/fileContext';
-import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
import { ConvertParameters } from './useConvertParameters';
import { detectFileExtension } from '../../../utils/fileUtils';
import { createFileFromApiResponse } from '../../../utils/fileResponseUtils';
-
+import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
import { getEndpointUrl, isImageFormat, isWebFormat } from '../../../utils/convertUtils';
-export interface ConvertOperationHook {
- executeOperation: (
- parameters: ConvertParameters,
- selectedFiles: File[]
- ) => Promise;
-
- // Flattened result properties for cleaner access
- files: File[];
- thumbnails: string[];
- isGeneratingThumbnails: boolean;
- downloadUrl: string | null;
- downloadFilename: string;
- status: string;
- errorMessage: string | null;
- isLoading: boolean;
-
- // Result management functions
- resetResults: () => void;
- clearError: () => void;
-}
-
const shouldProcessFilesSeparately = (
selectedFiles: File[],
parameters: ConvertParameters
@@ -53,6 +29,46 @@ const shouldProcessFilesSeparately = (
);
};
+const buildFormData = (parameters: ConvertParameters, selectedFiles: File[]): FormData => {
+ const formData = new FormData();
+
+ selectedFiles.forEach(file => {
+ formData.append("fileInput", file);
+ });
+
+ const { fromExtension, toExtension, imageOptions, htmlOptions, emailOptions, pdfaOptions } = parameters;
+
+ if (isImageFormat(toExtension)) {
+ formData.append("imageFormat", toExtension);
+ formData.append("colorType", imageOptions.colorType);
+ formData.append("dpi", imageOptions.dpi.toString());
+ formData.append("singleOrMultiple", imageOptions.singleOrMultiple);
+ } else if (fromExtension === 'pdf' && ['docx', 'odt'].includes(toExtension)) {
+ formData.append("outputFormat", toExtension);
+ } else if (fromExtension === 'pdf' && ['pptx', 'odp'].includes(toExtension)) {
+ formData.append("outputFormat", toExtension);
+ } else if (fromExtension === 'pdf' && ['txt', 'rtf'].includes(toExtension)) {
+ formData.append("outputFormat", toExtension);
+ } else if ((isImageFormat(fromExtension) || fromExtension === 'image') && toExtension === 'pdf') {
+ formData.append("fitOption", imageOptions.fitOption);
+ formData.append("colorType", imageOptions.colorType);
+ formData.append("autoRotate", imageOptions.autoRotate.toString());
+ } else if ((fromExtension === 'html' || fromExtension === 'zip') && toExtension === 'pdf') {
+ formData.append("zoom", htmlOptions.zoomLevel.toString());
+ } else if (fromExtension === 'eml' && toExtension === 'pdf') {
+ formData.append("includeAttachments", emailOptions.includeAttachments.toString());
+ formData.append("maxAttachmentSizeMB", emailOptions.maxAttachmentSizeMB.toString());
+ formData.append("downloadHtml", emailOptions.downloadHtml.toString());
+ formData.append("includeAllRecipients", emailOptions.includeAllRecipients.toString());
+ } else if (fromExtension === 'pdf' && toExtension === 'pdfa') {
+ formData.append("outputFormat", pdfaOptions.outputFormat);
+ } else if (fromExtension === 'pdf' && toExtension === 'csv') {
+ formData.append("pageNumbers", "all");
+ }
+
+ return formData;
+};
+
const createFileFromResponse = (
responseData: any,
headers: any,
@@ -65,364 +81,70 @@ const createFileFromResponse = (
return createFileFromApiResponse(responseData, headers, fallbackFilename);
};
-const generateThumbnailsForFiles = async (files: File[]): Promise => {
- const thumbnails: string[] = [];
-
- for (const file of files) {
- try {
- const thumbnail = await generateThumbnailForFile(file);
- thumbnails.push(thumbnail);
- } catch (error) {
- thumbnails.push('');
- }
- }
-
- return thumbnails;
-};
-
-const createDownloadInfo = async (files: File[]): Promise<{ url: string; filename: string }> => {
- if (files.length === 1) {
- const url = window.URL.createObjectURL(files[0]);
- return { url, filename: files[0].name };
- } else {
- const JSZip = (await import('jszip')).default;
- const zip = new JSZip();
-
- files.forEach(file => {
- zip.file(file.name, file);
- });
-
- const zipBlob = await zip.generateAsync({ type: 'blob' });
- const zipUrl = window.URL.createObjectURL(zipBlob);
-
- return { url: zipUrl, filename: 'converted_files.zip' };
- }
-};
-
-export const useConvertOperation = (): ConvertOperationHook => {
+export const useConvertOperation = () => {
const { t } = useTranslation();
- const {
- recordOperation,
- markOperationApplied,
- markOperationFailed,
- addFiles
- } = useFileContext();
- const [files, setFiles] = useState([]);
- const [thumbnails, setThumbnails] = useState([]);
- const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
- const [downloadUrl, setDownloadUrl] = useState(null);
- const [downloadFilename, setDownloadFilename] = useState('');
- const [status, setStatus] = useState('');
- const [errorMessage, setErrorMessage] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
-
- const buildFormData = useCallback((
+ const customConvertProcessor = useCallback(async (
parameters: ConvertParameters,
selectedFiles: File[]
- ) => {
- const formData = new FormData();
+ ): Promise => {
+
+ const processedFiles: File[] = [];
+ const endpoint = getEndpointUrl(parameters.fromExtension, parameters.toExtension);
- selectedFiles.forEach(file => {
- formData.append("fileInput", file);
- });
-
- const { fromExtension, toExtension, imageOptions, htmlOptions, emailOptions, pdfaOptions } = parameters;
-
- if (isImageFormat(toExtension)) {
- formData.append("imageFormat", toExtension);
- formData.append("colorType", imageOptions.colorType);
- formData.append("dpi", imageOptions.dpi.toString());
- formData.append("singleOrMultiple", imageOptions.singleOrMultiple);
- } else if (fromExtension === 'pdf' && ['docx', 'odt'].includes(toExtension)) {
- formData.append("outputFormat", toExtension);
- } else if (fromExtension === 'pdf' && ['pptx', 'odp'].includes(toExtension)) {
- formData.append("outputFormat", toExtension);
- } else if (fromExtension === 'pdf' && ['txt', 'rtf'].includes(toExtension)) {
- formData.append("outputFormat", toExtension);
- } else if ((isImageFormat(fromExtension) || fromExtension === 'image') && toExtension === 'pdf') {
- formData.append("fitOption", imageOptions.fitOption);
- formData.append("colorType", imageOptions.colorType);
- formData.append("autoRotate", imageOptions.autoRotate.toString());
- } else if ((fromExtension === 'html' || fromExtension === 'zip') && toExtension === 'pdf') {
- formData.append("zoom", htmlOptions.zoomLevel.toString());
- } else if (fromExtension === 'eml' && toExtension === 'pdf') {
- formData.append("includeAttachments", emailOptions.includeAttachments.toString());
- formData.append("maxAttachmentSizeMB", emailOptions.maxAttachmentSizeMB.toString());
- formData.append("downloadHtml", emailOptions.downloadHtml.toString());
- formData.append("includeAllRecipients", emailOptions.includeAllRecipients.toString());
- } else if (fromExtension === 'pdf' && toExtension === 'pdfa') {
- formData.append("outputFormat", pdfaOptions.outputFormat);
- } else if (fromExtension === 'pdf' && toExtension === 'csv') {
- formData.append("pageNumbers", "all");
- }
-
- return formData;
- }, []);
-
- const createOperation = useCallback((
- parameters: ConvertParameters,
- selectedFiles: File[]
- ): { operation: FileOperation; operationId: string; fileId: string } => {
- const operationId = `convert-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const fileId = selectedFiles[0].name;
-
- const operation: FileOperation = {
- id: operationId,
- type: 'convert',
- timestamp: Date.now(),
- fileIds: selectedFiles.map(f => f.name),
- status: 'pending',
- metadata: {
- originalFileName: selectedFiles[0].name,
- parameters: {
- fromExtension: parameters.fromExtension,
- toExtension: parameters.toExtension,
- imageOptions: parameters.imageOptions,
- htmlOptions: parameters.htmlOptions,
- emailOptions: parameters.emailOptions,
- pdfaOptions: parameters.pdfaOptions,
- },
- fileSize: selectedFiles[0].size
- }
- };
-
- return { operation, operationId, fileId };
- }, []);
-
- const processResults = useCallback(async (blob: Blob, filename: string) => {
- try {
- // For single file conversions, create a file directly
- const convertedFile = new File([blob], filename, { type: blob.type });
-
- // Set local state for preview
- setFiles([convertedFile]);
- setThumbnails([]);
- setIsGeneratingThumbnails(true);
-
- // Add converted file to FileContext for future use
- await addFiles([convertedFile]);
-
- // Generate thumbnail for preview
- try {
- const thumbnail = await generateThumbnailForFile(convertedFile);
- setThumbnails([thumbnail]);
- } catch (error) {
- console.warn(`Failed to generate thumbnail for ${filename}:`, error);
- setThumbnails(['']);
- }
-
- setIsGeneratingThumbnails(false);
- } catch (error) {
- console.warn('Failed to process conversion result:', error);
- }
- }, [addFiles]);
-
- const executeOperation = useCallback(async (
- parameters: ConvertParameters,
- selectedFiles: File[]
- ) => {
- if (selectedFiles.length === 0) {
- setStatus(t("noFileSelected"));
- return;
+ if (!endpoint) {
+ throw new Error(t('errorNotSupported', 'Unsupported conversion format'));
}
+ // Convert-specific routing logic: decide batch vs individual processing
if (shouldProcessFilesSeparately(selectedFiles, parameters)) {
- await executeMultipleSeparateFiles(parameters, selectedFiles);
+ // Individual processing for complex cases (PDF→image, smart detection, etc.)
+ for (const file of selectedFiles) {
+ try {
+ const formData = buildFormData(parameters, [file]);
+ const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+
+ const convertedFile = createFileFromResponse(response.data, response.headers, file.name, parameters.toExtension);
+
+ processedFiles.push(convertedFile);
+ } catch (error) {
+ console.warn(`Failed to convert file ${file.name}:`, error);
+ }
+ }
} else {
- await executeSingleCombinedOperation(parameters, selectedFiles);
+ // Batch processing for simple cases (image→PDF combine)
+ const formData = buildFormData(parameters, selectedFiles);
+ const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+
+ const baseFilename = selectedFiles.length === 1
+ ? selectedFiles[0].name
+ : 'converted_files';
+
+ const convertedFile = createFileFromResponse(response.data, response.headers, baseFilename, parameters.toExtension);
+ processedFiles.push(convertedFile);
+
}
+
+ return processedFiles;
}, [t]);
- const executeMultipleSeparateFiles = async (
- parameters: ConvertParameters,
- selectedFiles: File[]
- ) => {
- setStatus(t("loading"));
- setIsLoading(true);
- setErrorMessage(null);
-
- const results: File[] = [];
-
- try {
- // Process each file separately
- for (let i = 0; i < selectedFiles.length; i++) {
- const file = selectedFiles[i];
- setStatus(t("convert.processingFile", `Processing file ${i + 1} of ${selectedFiles.length}...`));
-
- const fileExtension = detectFileExtension(file.name);
- let endpoint = getEndpointUrl(fileExtension, parameters.toExtension);
- let fileSpecificParams = { ...parameters, fromExtension: fileExtension };
- if (!endpoint && parameters.toExtension === 'pdf') {
- endpoint = '/api/v1/convert/file/pdf';
- console.log(`Using file-to-pdf fallback for ${fileExtension} file: ${file.name}`);
- }
-
- if (!endpoint) {
- console.error(`No endpoint available for ${fileExtension} to ${parameters.toExtension}`);
- continue;
- }
-
- const { operation, operationId, fileId } = createOperation(fileSpecificParams, [file]);
- const formData = buildFormData(fileSpecificParams, [file]);
-
- recordOperation(fileId, operation);
-
- try {
- const response = await axios.post(endpoint, formData, { responseType: "blob" });
-
- // Use utility function to create file from response
- const convertedFile = createFileFromResponse(
- response.data,
- response.headers,
- file.name,
- parameters.toExtension
- );
- results.push(convertedFile);
-
- markOperationApplied(fileId, operationId);
- } catch (error: any) {
- console.error(`Error converting file ${file.name}:`, error);
- markOperationFailed(fileId, operationId);
- }
- }
-
- if (results.length > 0) {
-
- const generatedThumbnails = await generateThumbnailsForFiles(results);
-
- setFiles(results);
- setThumbnails(generatedThumbnails);
-
- await addFiles(results);
-
- try {
- const { url, filename } = await createDownloadInfo(results);
- setDownloadUrl(url);
- setDownloadFilename(filename);
- } catch (error) {
- console.error('Failed to create download info:', error);
- const url = window.URL.createObjectURL(results[0]);
- setDownloadUrl(url);
- setDownloadFilename(results[0].name);
- }
- setStatus(t("convert.multipleFilesComplete", `Converted ${results.length} files successfully`));
- } else {
- setErrorMessage(t("convert.errorAllFilesFailed", "All files failed to convert"));
- }
- } catch (error) {
- console.error('Error in multiple operations:', error);
- setErrorMessage(t("convert.errorMultipleConversion", "An error occurred while converting multiple files"));
- } finally {
- setIsLoading(false);
- }
- };
-
- const executeSingleCombinedOperation = async (
- parameters: ConvertParameters,
- selectedFiles: File[]
- ) => {
- const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
- const formData = buildFormData(parameters, selectedFiles);
-
- // Get endpoint using utility function
- const endpoint = getEndpointUrl(parameters.fromExtension, parameters.toExtension);
- if (!endpoint) {
- setErrorMessage(t("convert.errorNotSupported", { from: parameters.fromExtension, to: parameters.toExtension }));
- return;
- }
-
- recordOperation(fileId, operation);
-
- setStatus(t("loading"));
- setIsLoading(true);
- setErrorMessage(null);
-
- try {
- const response = await axios.post(endpoint, formData, { responseType: "blob" });
-
- // Use utility function to create file from response
- const originalFileName = selectedFiles.length === 1
- ? selectedFiles[0].name
- : 'combined_files.pdf'; // Default extension for combined files
-
- const convertedFile = createFileFromResponse(
- response.data,
- response.headers,
- originalFileName,
- parameters.toExtension
- );
-
- const url = window.URL.createObjectURL(convertedFile);
- setDownloadUrl(url);
- setDownloadFilename(convertedFile.name);
- setStatus(t("downloadComplete"));
-
- // Update local files state for hook consumers
- setFiles([convertedFile]);
-
- await addFiles([convertedFile]);
- markOperationApplied(fileId, operationId);
- } catch (error: any) {
- console.error(error);
- let errorMsg = t("convert.errorConversion", "An error occurred while converting the file.");
+ return useToolOperation({
+ operationType: 'convert',
+ endpoint: '', // Not used with customProcessor but required
+ buildFormData, // Not used with customProcessor but required
+ filePrefix: 'converted_',
+ customProcessor: customConvertProcessor, // Convert handles its own routing
+ validateParams: (params) => {
+ return { valid: true };
+ },
+ getErrorMessage: (error) => {
if (error.response?.data && typeof error.response.data === 'string') {
- errorMsg = error.response.data;
- } else if (error.message) {
- errorMsg = error.message;
+ return error.response.data;
}
- setErrorMessage(errorMsg);
- markOperationFailed(fileId, operationId, errorMsg);
- } finally {
- setIsLoading(false);
- }
- };
-
-
- const resetResults = useCallback(() => {
- // Clean up blob URLs to prevent memory leaks
- if (downloadUrl) {
- window.URL.revokeObjectURL(downloadUrl);
- }
-
- setFiles([]);
- setThumbnails([]);
- setIsGeneratingThumbnails(false);
- setDownloadUrl(null);
- setDownloadFilename('');
- setStatus('');
- setErrorMessage(null);
- setIsLoading(false);
- }, [downloadUrl]);
-
- const clearError = useCallback(() => {
- setErrorMessage(null);
- }, []);
-
- // Cleanup blob URLs on unmount to prevent memory leaks
- useEffect(() => {
- return () => {
- if (downloadUrl) {
- window.URL.revokeObjectURL(downloadUrl);
+ if (error.message) {
+ return error.message;
}
- };
- }, [downloadUrl]);
-
- return {
- executeOperation,
-
- // Flattened result properties for cleaner access
- files,
- thumbnails,
- isGeneratingThumbnails,
- downloadUrl,
- downloadFilename,
- status,
- errorMessage,
- isLoading,
-
- // Result management functions
- resetResults,
- clearError,
- };
+ return t("convert.errorConversion", "An error occurred while converting the file.");
+ }
+ });
};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/ocr/useOCROperation.ts b/frontend/src/hooks/tools/ocr/useOCROperation.ts
index 8608ebbdf..316b867d8 100644
--- a/frontend/src/hooks/tools/ocr/useOCROperation.ts
+++ b/frontend/src/hooks/tools/ocr/useOCROperation.ts
@@ -1,372 +1,117 @@
-import { useState, useCallback } from 'react';
-import axios from 'axios';
+import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
-import { useFileContext } from '../../../contexts/FileContext';
-import { FileOperation } from '../../../types/fileContext';
import { OCRParameters } from '../../../components/tools/ocr/OCRSettings';
+import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+import { useToolResources } from '../shared/useToolResources';
-//Extract files from a ZIP blob
-async function extractZipFile(zipBlob: Blob): Promise {
- const JSZip = await import('jszip');
- const zip = new JSZip.default();
-
- const arrayBuffer = await zipBlob.arrayBuffer();
- const zipContent = await zip.loadAsync(arrayBuffer);
-
- const extractedFiles: File[] = [];
-
- for (const [filename, file] of Object.entries(zipContent.files)) {
- if (!file.dir) {
- const content = await file.async('blob');
- const extractedFile = new File([content], filename, { type: getMimeType(filename) });
- extractedFiles.push(extractedFile);
- }
- }
-
- return extractedFiles;
-}
-
-//Get MIME type based on file extension
+// Helper: get MIME type based on file extension
function getMimeType(filename: string): string {
const ext = filename.toLowerCase().split('.').pop();
switch (ext) {
- case 'pdf':
- return 'application/pdf';
- case 'txt':
- return 'text/plain';
- case 'zip':
- return 'application/zip';
- default:
- return 'application/octet-stream';
+ case 'pdf': return 'application/pdf';
+ case 'txt': return 'text/plain';
+ case 'zip': return 'application/zip';
+ default: return 'application/octet-stream';
}
}
-export interface OCROperationHook {
- files: File[];
- thumbnails: string[];
- downloadUrl: string | null;
- downloadFilename: string | null;
- isLoading: boolean;
- isGeneratingThumbnails: boolean;
- status: string;
- errorMessage: string | null;
- executeOperation: (parameters: OCRParameters, selectedFiles: File[]) => Promise;
- resetResults: () => void;
- clearError: () => void;
+// Lightweight ZIP extractor (keep or replace with a shared util if you have one)
+async function extractZipFile(zipBlob: Blob): Promise {
+ const JSZip = await import('jszip');
+ const zip = new JSZip.default();
+ const zipContent = await zip.loadAsync(await zipBlob.arrayBuffer());
+ const out: File[] = [];
+ for (const [filename, file] of Object.entries(zipContent.files)) {
+ if (!file.dir) {
+ const content = await file.async('blob');
+ out.push(new File([content], filename, { type: getMimeType(filename) }));
+ }
+ }
+ return out;
}
-export const useOCROperation = (): OCROperationHook => {
+// Helper: strip extension
+function stripExt(name: string): string {
+ const i = name.lastIndexOf('.');
+ return i > 0 ? name.slice(0, i) : name;
+}
+
+// Signature must be (file, params)
+const buildFormData = (file: File, parameters: OCRParameters): FormData => {
+ const formData = new FormData();
+ formData.append('fileInput', file);
+ parameters.languages.forEach((lang) => formData.append('languages', lang));
+ formData.append('ocrType', parameters.ocrType);
+ formData.append('ocrRenderType', parameters.ocrRenderType);
+ formData.append('sidecar', parameters.additionalOptions.includes('sidecar').toString());
+ formData.append('deskew', parameters.additionalOptions.includes('deskew').toString());
+ formData.append('clean', parameters.additionalOptions.includes('clean').toString());
+ formData.append('cleanFinal', parameters.additionalOptions.includes('cleanFinal').toString());
+ formData.append('removeImagesAfter', parameters.additionalOptions.includes('removeImagesAfter').toString());
+ return formData;
+};
+
+export const useOCROperation = () => {
const { t } = useTranslation();
- const {
- recordOperation,
- markOperationApplied,
- markOperationFailed,
- addFiles
- } = useFileContext();
+ const { extractZipFiles } = useToolResources();
- // Internal state management
- const [files, setFiles] = useState([]);
- const [thumbnails, setThumbnails] = useState([]);
- const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
- const [downloadUrl, setDownloadUrl] = useState(null);
- const [downloadFilename, setDownloadFilename] = useState('');
- const [status, setStatus] = useState('');
- const [errorMessage, setErrorMessage] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
+ // OCR-specific parsing: ZIP (sidecar) vs PDF vs HTML error
+ const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise => {
+ const headBuf = await blob.slice(0, 8).arrayBuffer();
+ const head = new TextDecoder().decode(new Uint8Array(headBuf));
- // Track blob URLs for cleanup
- const [blobUrls, setBlobUrls] = useState([]);
-
- const cleanupBlobUrls = useCallback(() => {
- blobUrls.forEach(url => {
+ // ZIP: sidecar or multi-asset output
+ if (head.startsWith('PK')) {
+ const base = stripExt(originalFiles[0].name);
try {
- URL.revokeObjectURL(url);
- } catch (error) {
- console.warn('Failed to revoke blob URL:', error);
- }
- });
- setBlobUrls([]);
- }, [blobUrls]);
-
- const buildFormData = useCallback((
- parameters: OCRParameters,
- file: File
- ) => {
- const formData = new FormData();
-
- // Add the file
- formData.append('fileInput', file);
-
- // Add languages as multiple parameters with same name (like checkboxes)
- parameters.languages.forEach(lang => {
- formData.append('languages', lang);
- });
-
- // Add other parameters
- formData.append('ocrType', parameters.ocrType);
- formData.append('ocrRenderType', parameters.ocrRenderType);
-
- // Handle additional options - convert array to individual boolean parameters
- formData.append('sidecar', parameters.additionalOptions.includes('sidecar').toString());
- formData.append('deskew', parameters.additionalOptions.includes('deskew').toString());
- formData.append('clean', parameters.additionalOptions.includes('clean').toString());
- formData.append('cleanFinal', parameters.additionalOptions.includes('cleanFinal').toString());
- formData.append('removeImagesAfter', parameters.additionalOptions.includes('removeImagesAfter').toString());
-
- const endpoint = '/api/v1/misc/ocr-pdf';
-
- return { formData, endpoint };
- }, []);
-
- const createOperation = useCallback((
- parameters: OCRParameters,
- selectedFiles: File[]
- ): { operation: FileOperation; operationId: string; fileId: string } => {
- const operationId = `ocr-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const fileId = selectedFiles.map(f => f.name).join(',');
-
- const operation: FileOperation = {
- id: operationId,
- type: 'ocr',
- timestamp: Date.now(),
- fileIds: selectedFiles.map(f => f.name),
- status: 'pending',
- metadata: {
- originalFileName: selectedFiles[0]?.name,
- parameters: {
- languages: parameters.languages,
- ocrType: parameters.ocrType,
- ocrRenderType: parameters.ocrRenderType,
- additionalOptions: parameters.additionalOptions,
- },
- fileSize: selectedFiles.reduce((sum, f) => sum + f.size, 0)
- }
- };
-
- return { operation, operationId, fileId };
- }, []);
-
- const executeOperation = useCallback(async (
- parameters: OCRParameters,
- selectedFiles: File[]
- ) => {
- if (selectedFiles.length === 0) {
- setStatus(t("noFileSelected") || "No file selected");
- return;
- }
-
- if (parameters.languages.length === 0) {
- setErrorMessage('Please select at least one language for OCR processing.');
- return;
+ const extracted = await extractZipFiles(blob);
+ if (extracted.length > 0) return extracted;
+ } catch { /* ignore and try local extractor */ }
+ try {
+ const local = await extractZipFile(blob); // local fallback
+ if (local.length > 0) return local;
+ } catch { /* fall through */ }
+ return [new File([blob], `ocr_${base}.zip`, { type: 'application/zip' })];
}
- const validFiles = selectedFiles.filter(file => file.size > 0);
- if (validFiles.length === 0) {
- setErrorMessage('No valid files to process. All selected files are empty.');
- return;
- }
-
- if (validFiles.length < selectedFiles.length) {
- console.warn(`Skipping ${selectedFiles.length - validFiles.length} empty files`);
- }
-
- const { operation, operationId, fileId } = createOperation(parameters, selectedFiles);
-
- recordOperation(fileId, operation);
-
- setStatus(t("loading") || "Loading...");
- setIsLoading(true);
- setErrorMessage(null);
- setFiles([]);
- setThumbnails([]);
-
- try {
- const processedFiles: File[] = [];
- const failedFiles: string[] = [];
-
- // OCR typically processes one file at a time
- for (let i = 0; i < validFiles.length; i++) {
- const file = validFiles[i];
- setStatus(`Processing OCR for ${file.name} (${i + 1}/${validFiles.length})`);
-
- try {
- const { formData, endpoint } = buildFormData(parameters, file);
- const response = await axios.post(endpoint, formData, {
- responseType: "blob",
- timeout: 300000 // 5 minute timeout for OCR
- });
-
- // Check for HTTP errors
- if (response.status >= 400) {
- // Try to read error response as text
- const errorText = await response.data.text();
- throw new Error(`OCR service HTTP error ${response.status}: ${errorText.substring(0, 300)}`);
- }
-
- // Validate response
- if (!response.data || response.data.size === 0) {
- throw new Error('Empty response from OCR service');
- }
-
- const contentType = response.headers['content-type'] || 'application/pdf';
-
- // Check if response is actually a PDF by examining the first few bytes
- const arrayBuffer = await response.data.arrayBuffer();
- const uint8Array = new Uint8Array(arrayBuffer);
- const header = new TextDecoder().decode(uint8Array.slice(0, 4));
-
- // Check if it's a ZIP file (OCR service returns ZIP when sidecar is enabled or for multi-file results)
- if (header.startsWith('PK')) {
- try {
- // Extract ZIP file contents
- const zipFiles = await extractZipFile(response.data);
-
- // Add extracted files to processed files
- processedFiles.push(...zipFiles);
- } catch (extractError) {
- // Fallback to treating as single ZIP file
- const blob = new Blob([response.data], { type: 'application/zip' });
- const processedFile = new File([blob], `ocr_${file.name}.zip`, { type: 'application/zip' });
- processedFiles.push(processedFile);
- }
- continue; // Skip the PDF validation for ZIP files
- }
-
- if (!header.startsWith('%PDF')) {
- // Check if it's an error response
- const text = new TextDecoder().decode(uint8Array.slice(0, 500));
-
- if (text.includes('error') || text.includes('Error') || text.includes('exception') || text.includes('html')) {
- // Check for specific OCR tool unavailable error
- if (text.includes('OCR tools') && text.includes('not installed')) {
- throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
- }
- throw new Error(`OCR service error: ${text.substring(0, 300)}`);
- }
-
- // Check if it's an HTML error page
- if (text.includes(']*>([^<]+)<\/title>/i) ||
- text.match(/]*>([^<]+)<\/h1>/i) ||
- text.match(/]*>([^<]+)<\/body>/i);
- const errorMessage = errorMatch ? errorMatch[1].trim() : 'Unknown error';
- throw new Error(`OCR service error: ${errorMessage}`);
- }
-
- throw new Error(`Response is not a valid PDF file. Header: "${header}"`);
- }
-
- const blob = new Blob([response.data], { type: contentType });
- const processedFile = new File([blob], `ocr_${file.name}`, { type: contentType });
-
- processedFiles.push(processedFile);
- } catch (fileError) {
- const errorMessage = fileError instanceof Error ? fileError.message : 'Unknown error';
- failedFiles.push(`${file.name} (${errorMessage})`);
+ // Not a PDF: surface error details if present
+ if (!head.startsWith('%PDF')) {
+ const textBuf = await blob.slice(0, 1024).arrayBuffer();
+ const text = new TextDecoder().decode(new Uint8Array(textBuf));
+ if (/error|exception|html/i.test(text)) {
+ if (text.includes('OCR tools') && text.includes('not installed')) {
+ throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
}
+ const title =
+ text.match(/]*>([^<]+)<\/title>/i)?.[1] ||
+ text.match(/]*>([^<]+)<\/h1>/i)?.[1] ||
+ t('ocr.error.unknown', 'Unknown error');
+ throw new Error(`OCR service error: ${title}`);
}
-
- if (failedFiles.length > 0 && processedFiles.length === 0) {
- throw new Error(`Failed to process OCR for all files: ${failedFiles.join(', ')}`);
- }
-
- if (failedFiles.length > 0) {
- setStatus(`Processed ${processedFiles.length}/${validFiles.length} files. Failed: ${failedFiles.join(', ')}`);
- } else {
- const hasPdfFiles = processedFiles.some(file => file.name.endsWith('.pdf'));
- const hasTxtFiles = processedFiles.some(file => file.name.endsWith('.txt'));
- let statusMessage = `OCR completed successfully for ${processedFiles.length} file(s)`;
-
- if (hasPdfFiles && hasTxtFiles) {
- statusMessage += ' (Extracted PDF and text files)';
- } else if (hasPdfFiles) {
- statusMessage += ' (Extracted PDF files)';
- } else if (hasTxtFiles) {
- statusMessage += ' (Extracted text files)';
- }
-
- setStatus(statusMessage);
- }
-
- setFiles(processedFiles);
- setIsGeneratingThumbnails(true);
-
- await addFiles(processedFiles);
-
- // Cleanup old blob URLs
- cleanupBlobUrls();
-
- // Create download URL - for multiple files, we'll create a new ZIP
- if (processedFiles.length === 1) {
- const url = window.URL.createObjectURL(processedFiles[0]);
- setDownloadUrl(url);
- setBlobUrls([url]);
- setDownloadFilename(processedFiles[0].name);
- } else {
- // For multiple files, create a new ZIP containing all extracted files
- try {
- const JSZip = await import('jszip');
- const zip = new JSZip.default();
-
- for (const file of processedFiles) {
- zip.file(file.name, file);
- }
-
- const zipBlob = await zip.generateAsync({ type: 'blob' });
- const url = window.URL.createObjectURL(zipBlob);
- setDownloadUrl(url);
- setBlobUrls([url]);
- setDownloadFilename(`ocr_extracted_files.zip`);
- } catch (zipError) {
- // Fallback to first file
- const url = window.URL.createObjectURL(processedFiles[0]);
- setDownloadUrl(url);
- setBlobUrls([url]);
- setDownloadFilename(processedFiles[0].name);
- }
- }
-
- markOperationApplied(fileId, operationId);
- setIsGeneratingThumbnails(false);
- } catch (error) {
- console.error('OCR operation error:', error);
- const errorMessage = error instanceof Error ? error.message : 'OCR operation failed';
- setErrorMessage(errorMessage);
- setStatus('');
- markOperationFailed(fileId, operationId, errorMessage);
- } finally {
- setIsLoading(false);
+ throw new Error(`Response is not a valid PDF. Header: "${head}"`);
}
- }, [buildFormData, createOperation, recordOperation, addFiles, cleanupBlobUrls, markOperationApplied, markOperationFailed, t]);
- const resetResults = useCallback(() => {
- setFiles([]);
- setThumbnails([]);
- setDownloadUrl(null);
- setDownloadFilename('');
- setStatus('');
- setErrorMessage(null);
- setIsLoading(false);
- setIsGeneratingThumbnails(false);
- cleanupBlobUrls();
- }, [cleanupBlobUrls]);
+ const base = stripExt(originalFiles[0].name);
+ return [new File([blob], `ocr_${base}.pdf`, { type: 'application/pdf' })];
+ }, [t, extractZipFiles]);
- const clearError = useCallback(() => {
- setErrorMessage(null);
- }, []);
-
- return {
- files,
- thumbnails,
- downloadUrl,
- downloadFilename,
- isLoading,
- isGeneratingThumbnails,
- status,
- errorMessage,
- executeOperation,
- resetResults,
- clearError,
+ const ocrConfig: ToolOperationConfig = {
+ operationType: 'ocr',
+ endpoint: '/api/v1/misc/ocr-pdf',
+ buildFormData,
+ filePrefix: 'ocr_',
+ multiFileEndpoint: false, // Process files individually
+ responseHandler, // use shared flow
+ validateParams: (params) =>
+ params.languages.length === 0
+ ? { valid: false, errors: [t('ocr.validation.languageRequired', 'Please select at least one language for OCR processing.')] }
+ : { valid: true },
+ getErrorMessage: (error) =>
+ error.message?.includes('OCR tools') && error.message?.includes('not installed')
+ ? 'OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.'
+ : createStandardErrorHandler(t('ocr.error.failed', 'OCR operation failed'))(error),
};
-};
\ No newline at end of file
+
+ return useToolOperation(ocrConfig);
+};
diff --git a/frontend/src/hooks/tools/shared/useToolApiCalls.ts b/frontend/src/hooks/tools/shared/useToolApiCalls.ts
new file mode 100644
index 000000000..88f1f4d31
--- /dev/null
+++ b/frontend/src/hooks/tools/shared/useToolApiCalls.ts
@@ -0,0 +1,86 @@
+import { useCallback, useRef } from 'react';
+import axios, { CancelTokenSource } from 'axios';
+import { processResponse } from '../../../utils/toolResponseProcessor';
+import type { ResponseHandler, ProcessingProgress } from './useToolState';
+
+export interface ApiCallsConfig {
+ endpoint: string | ((params: TParams) => string);
+ buildFormData: (file: File, params: TParams) => FormData;
+ filePrefix: string;
+ responseHandler?: ResponseHandler;
+}
+
+export const useToolApiCalls = () => {
+ const cancelTokenRef = useRef(null);
+
+ const processFiles = useCallback(async (
+ params: TParams,
+ validFiles: File[],
+ config: ApiCallsConfig,
+ onProgress: (progress: ProcessingProgress) => void,
+ onStatus: (status: string) => void
+ ): Promise => {
+ const processedFiles: File[] = [];
+ const failedFiles: string[] = [];
+ const total = validFiles.length;
+
+ // Create cancel token for this operation
+ cancelTokenRef.current = axios.CancelToken.source();
+
+ for (let i = 0; i < validFiles.length; i++) {
+ const file = validFiles[i];
+
+ onProgress({ current: i + 1, total, currentFileName: file.name });
+ onStatus(`Processing ${file.name} (${i + 1}/${total})`);
+
+ try {
+ const formData = config.buildFormData(file, params);
+ const endpoint = typeof config.endpoint === 'function' ? config.endpoint(params) : config.endpoint;
+ const response = await axios.post(endpoint, formData, {
+ responseType: 'blob',
+ cancelToken: cancelTokenRef.current.token,
+ });
+
+ // Forward to shared response processor (uses tool-specific responseHandler if provided)
+ const responseFiles = await processResponse(
+ response.data,
+ [file],
+ config.filePrefix,
+ config.responseHandler
+ );
+ processedFiles.push(...responseFiles);
+
+ } catch (error) {
+ if (axios.isCancel(error)) {
+ throw new Error('Operation was cancelled');
+ }
+ console.error(`Failed to process ${file.name}:`, error);
+ failedFiles.push(file.name);
+ }
+ }
+
+ if (failedFiles.length > 0 && processedFiles.length === 0) {
+ throw new Error(`Failed to process all files: ${failedFiles.join(', ')}`);
+ }
+
+ if (failedFiles.length > 0) {
+ onStatus(`Processed ${processedFiles.length}/${total} files. Failed: ${failedFiles.join(', ')}`);
+ } else {
+ onStatus(`Successfully processed ${processedFiles.length} file${processedFiles.length === 1 ? '' : 's'}`);
+ }
+
+ return processedFiles;
+ }, []);
+
+ const cancelOperation = useCallback(() => {
+ if (cancelTokenRef.current) {
+ cancelTokenRef.current.cancel('Operation cancelled by user');
+ cancelTokenRef.current = null;
+ }
+ }, []);
+
+ return {
+ processFiles,
+ cancelOperation,
+ };
+};
diff --git a/frontend/src/hooks/tools/shared/useToolOperation.ts b/frontend/src/hooks/tools/shared/useToolOperation.ts
new file mode 100644
index 000000000..7251d1fd2
--- /dev/null
+++ b/frontend/src/hooks/tools/shared/useToolOperation.ts
@@ -0,0 +1,264 @@
+import { useCallback } from 'react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import { useFileContext } from '../../../contexts/FileContext';
+import { useToolState, type ProcessingProgress } from './useToolState';
+import { useToolApiCalls, type ApiCallsConfig } from './useToolApiCalls';
+import { useToolResources } from './useToolResources';
+import { extractErrorMessage } from '../../../utils/toolErrorHandler';
+import { createOperation } from '../../../utils/toolOperationTracker';
+import { type ResponseHandler, processResponse } from '../../../utils/toolResponseProcessor';
+
+export interface ValidationResult {
+ valid: boolean;
+ errors?: string[];
+}
+
+// Re-export for backwards compatibility
+export type { ProcessingProgress, ResponseHandler };
+
+/**
+ * Configuration for tool operations defining processing behavior and API integration.
+ *
+ * Supports three patterns:
+ * 1. Single-file tools: multiFileEndpoint: false, processes files individually
+ * 2. Multi-file tools: multiFileEndpoint: true, single API call with all files
+ * 3. Complex tools: customProcessor handles all processing logic
+ */
+export interface ToolOperationConfig {
+ /** Operation identifier for tracking and logging */
+ operationType: string;
+
+ /**
+ * API endpoint for the operation. Can be static string or function for dynamic routing.
+ * Not used when customProcessor is provided.
+ */
+ endpoint: string | ((params: TParams) => string);
+
+ /**
+ * Builds FormData for API request. Signature determines processing approach:
+ * - (params, file: File) => FormData: Single-file processing
+ * - (params, files: File[]) => FormData: Multi-file processing
+ * Not used when customProcessor is provided.
+ */
+ buildFormData: ((params: TParams, file: File) => FormData) | ((params: TParams, files: File[]) => FormData);
+
+ /** Prefix added to processed filenames (e.g., 'compressed_', 'split_') */
+ filePrefix: string;
+
+ /**
+ * Whether this tool uses backends that accept MultipartFile[] arrays.
+ * - true: Single API call with all files (backend uses MultipartFile[])
+ * - false/undefined: Individual API calls per file (backend uses single MultipartFile)
+ * Ignored when customProcessor is provided.
+ */
+ multiFileEndpoint?: boolean;
+
+ /** How to handle API responses (e.g., ZIP extraction, single file response) */
+ responseHandler?: ResponseHandler;
+
+ /**
+ * Custom processing logic that completely bypasses standard file processing.
+ * When provided, tool handles all API calls, response processing, and file creation.
+ * Use for tools with complex routing logic or non-standard processing requirements.
+ */
+ customProcessor?: (params: TParams, files: File[]) => Promise;
+
+ /** Validate parameters before execution. Return validation errors if invalid. */
+ validateParams?: (params: TParams) => ValidationResult;
+
+ /** Extract user-friendly error messages from API errors */
+ getErrorMessage?: (error: any) => string;
+}
+
+/**
+ * Complete tool operation interface with execution capability
+ */
+export interface ToolOperationHook {
+ // State
+ files: File[];
+ thumbnails: string[];
+ isGeneratingThumbnails: boolean;
+ downloadUrl: string | null;
+ downloadFilename: string;
+ isLoading: boolean;
+ status: string;
+ errorMessage: string | null;
+ progress: ProcessingProgress | null;
+
+ // Actions
+ executeOperation: (params: TParams, selectedFiles: File[]) => Promise;
+ resetResults: () => void;
+ clearError: () => void;
+ cancelOperation: () => void;
+}
+
+// Re-export for backwards compatibility
+export { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
+
+/**
+ * Shared hook for tool operations providing consistent error handling, progress tracking,
+ * and FileContext integration. Eliminates boilerplate while maintaining flexibility.
+ *
+ * Supports three tool patterns:
+ * 1. Single-file tools: Set multiFileEndpoint: false, processes files individually
+ * 2. Multi-file tools: Set multiFileEndpoint: true, single API call with all files
+ * 3. Complex tools: Provide customProcessor for full control over processing logic
+ *
+ * @param config - Tool operation configuration
+ * @returns Hook interface with state and execution methods
+ */
+export const useToolOperation = (
+ config: ToolOperationConfig
+): ToolOperationHook => {
+ const { t } = useTranslation();
+ const { recordOperation, markOperationApplied, markOperationFailed, addFiles } = useFileContext();
+
+ // Composed hooks
+ const { state, actions } = useToolState();
+ const { processFiles, cancelOperation: cancelApiCalls } = useToolApiCalls();
+ const { generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles } = useToolResources();
+
+ const executeOperation = useCallback(async (
+ params: TParams,
+ selectedFiles: File[]
+ ): Promise => {
+ // Validation
+ if (selectedFiles.length === 0) {
+ actions.setError(t('noFileSelected', 'No files selected'));
+ return;
+ }
+
+ if (config.validateParams) {
+ const validation = config.validateParams(params);
+ if (!validation.valid) {
+ actions.setError(validation.errors?.join(', ') || 'Invalid parameters');
+ return;
+ }
+ }
+
+ const validFiles = selectedFiles.filter(file => file.size > 0);
+ if (validFiles.length === 0) {
+ actions.setError(t('noValidFiles', 'No valid files to process'));
+ return;
+ }
+
+ // Setup operation tracking
+ const { operation, operationId, fileId } = createOperation(config.operationType, params, selectedFiles);
+ recordOperation(fileId, operation);
+
+ // Reset state
+ actions.setLoading(true);
+ actions.setError(null);
+ actions.resetResults();
+ cleanupBlobUrls();
+
+ try {
+ let processedFiles: File[];
+
+ if (config.customProcessor) {
+ actions.setStatus('Processing files...');
+ processedFiles = await config.customProcessor(params, validFiles);
+ } else {
+ // Use explicit multiFileEndpoint flag to determine processing approach
+ if (config.multiFileEndpoint) {
+ // Multi-file processing - single API call with all files
+ actions.setStatus('Processing files...');
+ const formData = (config.buildFormData as (params: TParams, files: File[]) => FormData)(params, validFiles);
+ const endpoint = typeof config.endpoint === 'function' ? config.endpoint(params) : config.endpoint;
+
+ const response = await axios.post(endpoint, formData, { responseType: 'blob' });
+
+ // Multi-file responses are typically ZIP files that need extraction
+ if (config.responseHandler) {
+ // Use custom responseHandler for multi-file (handles ZIP extraction)
+ processedFiles = await config.responseHandler(response.data, validFiles);
+ } else {
+ // Default: assume ZIP response for multi-file endpoints
+ processedFiles = await extractZipFiles(response.data);
+
+ if (processedFiles.length === 0) {
+ // Try the generic extraction as fallback
+ processedFiles = await extractAllZipFiles(response.data);
+ }
+ }
+ } else {
+ // Individual file processing - separate API call per file
+ const apiCallsConfig: ApiCallsConfig = {
+ endpoint: config.endpoint,
+ buildFormData: (file: File, params: TParams) => (config.buildFormData as (file: File, params: TParams) => FormData)(file, params),
+ filePrefix: config.filePrefix,
+ responseHandler: config.responseHandler
+ };
+ processedFiles = await processFiles(
+ params,
+ validFiles,
+ apiCallsConfig,
+ actions.setProgress,
+ actions.setStatus
+ );
+ }
+ }
+
+ if (processedFiles.length > 0) {
+ actions.setFiles(processedFiles);
+
+ // Generate thumbnails and download URL concurrently
+ actions.setGeneratingThumbnails(true);
+ const [thumbnails, downloadInfo] = await Promise.all([
+ generateThumbnails(processedFiles),
+ createDownloadInfo(processedFiles, config.operationType)
+ ]);
+ actions.setGeneratingThumbnails(false);
+
+ actions.setThumbnails(thumbnails);
+ actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename);
+
+ // Add to file context
+ await addFiles(processedFiles);
+
+ markOperationApplied(fileId, operationId);
+ }
+
+ } catch (error: any) {
+ const errorMessage = config.getErrorMessage?.(error) || extractErrorMessage(error);
+ actions.setError(errorMessage);
+ actions.setStatus('');
+ markOperationFailed(fileId, operationId, errorMessage);
+ } finally {
+ actions.setLoading(false);
+ actions.setProgress(null);
+ }
+ }, [t, config, actions, recordOperation, markOperationApplied, markOperationFailed, addFiles, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, extractAllZipFiles]);
+
+ const cancelOperation = useCallback(() => {
+ cancelApiCalls();
+ actions.setLoading(false);
+ actions.setProgress(null);
+ actions.setStatus('Operation cancelled');
+ }, [cancelApiCalls, actions]);
+
+ const resetResults = useCallback(() => {
+ cleanupBlobUrls();
+ actions.resetResults();
+ }, [cleanupBlobUrls, actions]);
+
+ return {
+ // State
+ files: state.files,
+ thumbnails: state.thumbnails,
+ isGeneratingThumbnails: state.isGeneratingThumbnails,
+ downloadUrl: state.downloadUrl,
+ downloadFilename: state.downloadFilename,
+ isLoading: state.isLoading,
+ status: state.status,
+ errorMessage: state.errorMessage,
+ progress: state.progress,
+
+ // Actions
+ executeOperation,
+ resetResults,
+ clearError: actions.clearError,
+ cancelOperation
+ };
+};
diff --git a/frontend/src/hooks/tools/shared/useToolResources.ts b/frontend/src/hooks/tools/shared/useToolResources.ts
new file mode 100644
index 000000000..69f48fe20
--- /dev/null
+++ b/frontend/src/hooks/tools/shared/useToolResources.ts
@@ -0,0 +1,114 @@
+import { useState, useCallback, useEffect } from 'react';
+import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+import { zipFileService } from '../../../services/zipFileService';
+
+
+export const useToolResources = () => {
+ const [blobUrls, setBlobUrls] = useState([]);
+
+ const addBlobUrl = useCallback((url: string) => {
+ setBlobUrls(prev => [...prev, url]);
+ }, []);
+
+ const cleanupBlobUrls = useCallback(() => {
+ blobUrls.forEach(url => {
+ try {
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ console.warn('Failed to revoke blob URL:', error);
+ }
+ });
+ setBlobUrls([]);
+ }, [blobUrls]);
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ blobUrls.forEach(url => {
+ try {
+ URL.revokeObjectURL(url);
+ } catch (error) {
+ console.warn('Failed to revoke blob URL during cleanup:', error);
+ }
+ });
+ };
+ }, [blobUrls]);
+
+ const generateThumbnails = useCallback(async (files: File[]): Promise => {
+ const thumbnails: string[] = [];
+
+ for (const file of files) {
+ try {
+ const thumbnail = await generateThumbnailForFile(file);
+ thumbnails.push(thumbnail);
+ } catch (error) {
+ console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
+ thumbnails.push('');
+ }
+ }
+
+ return thumbnails;
+ }, []);
+
+ const extractZipFiles = useCallback(async (zipBlob: Blob): Promise => {
+ try {
+ const zipFile = new File([zipBlob], 'temp.zip', { type: 'application/zip' });
+ const extractionResult = await zipFileService.extractPdfFiles(zipFile);
+ return extractionResult.success ? extractionResult.extractedFiles : [];
+ } catch (error) {
+ console.error('useToolResources.extractZipFiles - Error:', error);
+ return [];
+ }
+ }, []);
+
+ const extractAllZipFiles = useCallback(async (zipBlob: Blob): Promise => {
+ try {
+ const JSZip = (await import('jszip')).default;
+ const zip = new JSZip();
+
+ const arrayBuffer = await zipBlob.arrayBuffer();
+ const zipContent = await zip.loadAsync(arrayBuffer);
+
+ const extractedFiles: File[] = [];
+
+ for (const [filename, file] of Object.entries(zipContent.files)) {
+ if (!file.dir) {
+ const content = await file.async('blob');
+ const extractedFile = new File([content], filename, { type: 'application/pdf' });
+ extractedFiles.push(extractedFile);
+ }
+ }
+
+ return extractedFiles;
+ } catch (error) {
+ console.error('Error in extractAllZipFiles:', error);
+ return [];
+ }
+ }, []);
+
+ const createDownloadInfo = useCallback(async (
+ files: File[],
+ operationType: string
+ ): Promise<{ url: string; filename: string }> => {
+ if (files.length === 1) {
+ const url = URL.createObjectURL(files[0]);
+ addBlobUrl(url);
+ return { url, filename: files[0].name };
+ }
+
+ // Multiple files - create zip using shared service
+ const { zipFile } = await zipFileService.createZipFromFiles(files, `${operationType}_results.zip`);
+ const url = URL.createObjectURL(zipFile);
+ addBlobUrl(url);
+
+ return { url, filename: zipFile.name };
+ }, [addBlobUrl]);
+
+ return {
+ generateThumbnails,
+ createDownloadInfo,
+ extractZipFiles,
+ extractAllZipFiles,
+ cleanupBlobUrls,
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/shared/useToolState.ts b/frontend/src/hooks/tools/shared/useToolState.ts
new file mode 100644
index 000000000..196a05e72
--- /dev/null
+++ b/frontend/src/hooks/tools/shared/useToolState.ts
@@ -0,0 +1,137 @@
+import { useReducer, useCallback } from 'react';
+
+export interface ProcessingProgress {
+ current: number;
+ total: number;
+ currentFileName?: string;
+}
+
+export interface OperationState {
+ files: File[];
+ thumbnails: string[];
+ isGeneratingThumbnails: boolean;
+ downloadUrl: string | null;
+ downloadFilename: string;
+ isLoading: boolean;
+ status: string;
+ errorMessage: string | null;
+ progress: ProcessingProgress | null;
+}
+
+type OperationAction =
+ | { type: 'SET_LOADING'; payload: boolean }
+ | { type: 'SET_FILES'; payload: File[] }
+ | { type: 'SET_THUMBNAILS'; payload: string[] }
+ | { type: 'SET_GENERATING_THUMBNAILS'; payload: boolean }
+ | { type: 'SET_DOWNLOAD_INFO'; payload: { url: string | null; filename: string } }
+ | { type: 'SET_STATUS'; payload: string }
+ | { type: 'SET_ERROR'; payload: string | null }
+ | { type: 'SET_PROGRESS'; payload: ProcessingProgress | null }
+ | { type: 'RESET_RESULTS' }
+ | { type: 'CLEAR_ERROR' };
+
+const initialState: OperationState = {
+ files: [],
+ thumbnails: [],
+ isGeneratingThumbnails: false,
+ downloadUrl: null,
+ downloadFilename: '',
+ isLoading: false,
+ status: '',
+ errorMessage: null,
+ progress: null,
+};
+
+const operationReducer = (state: OperationState, action: OperationAction): OperationState => {
+ switch (action.type) {
+ case 'SET_LOADING':
+ return { ...state, isLoading: action.payload };
+ case 'SET_FILES':
+ return { ...state, files: action.payload };
+ case 'SET_THUMBNAILS':
+ return { ...state, thumbnails: action.payload };
+ case 'SET_GENERATING_THUMBNAILS':
+ return { ...state, isGeneratingThumbnails: action.payload };
+ case 'SET_DOWNLOAD_INFO':
+ return {
+ ...state,
+ downloadUrl: action.payload.url,
+ downloadFilename: action.payload.filename
+ };
+ case 'SET_STATUS':
+ return { ...state, status: action.payload };
+ case 'SET_ERROR':
+ return { ...state, errorMessage: action.payload };
+ case 'SET_PROGRESS':
+ return { ...state, progress: action.payload };
+ case 'RESET_RESULTS':
+ return {
+ ...initialState,
+ isLoading: state.isLoading, // Preserve loading state during reset
+ };
+ case 'CLEAR_ERROR':
+ return { ...state, errorMessage: null };
+ default:
+ return state;
+ }
+};
+
+export const useToolState = () => {
+ const [state, dispatch] = useReducer(operationReducer, initialState);
+
+ const setLoading = useCallback((loading: boolean) => {
+ dispatch({ type: 'SET_LOADING', payload: loading });
+ }, []);
+
+ const setFiles = useCallback((files: File[]) => {
+ dispatch({ type: 'SET_FILES', payload: files });
+ }, []);
+
+ const setThumbnails = useCallback((thumbnails: string[]) => {
+ dispatch({ type: 'SET_THUMBNAILS', payload: thumbnails });
+ }, []);
+
+ const setGeneratingThumbnails = useCallback((generating: boolean) => {
+ dispatch({ type: 'SET_GENERATING_THUMBNAILS', payload: generating });
+ }, []);
+
+ const setDownloadInfo = useCallback((url: string | null, filename: string) => {
+ dispatch({ type: 'SET_DOWNLOAD_INFO', payload: { url, filename } });
+ }, []);
+
+ const setStatus = useCallback((status: string) => {
+ dispatch({ type: 'SET_STATUS', payload: status });
+ }, []);
+
+ const setError = useCallback((error: string | null) => {
+ dispatch({ type: 'SET_ERROR', payload: error });
+ }, []);
+
+ const setProgress = useCallback((progress: ProcessingProgress | null) => {
+ dispatch({ type: 'SET_PROGRESS', payload: progress });
+ }, []);
+
+ const resetResults = useCallback(() => {
+ dispatch({ type: 'RESET_RESULTS' });
+ }, []);
+
+ const clearError = useCallback(() => {
+ dispatch({ type: 'CLEAR_ERROR' });
+ }, []);
+
+ return {
+ state,
+ actions: {
+ setLoading,
+ setFiles,
+ setThumbnails,
+ setGeneratingThumbnails,
+ setDownloadInfo,
+ setStatus,
+ setError,
+ setProgress,
+ resetResults,
+ clearError,
+ },
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/tools/split/useSplitOperation.ts b/frontend/src/hooks/tools/split/useSplitOperation.ts
index 3abf2981e..4979d0ea0 100644
--- a/frontend/src/hooks/tools/split/useSplitOperation.ts
+++ b/frontend/src/hooks/tools/split/useSplitOperation.ts
@@ -1,242 +1,82 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
import axios from 'axios';
import { useTranslation } from 'react-i18next';
-import { useFileContext } from '../../../contexts/FileContext';
-import { FileOperation } from '../../../types/fileContext';
-import { zipFileService } from '../../../services/zipFileService';
-import { generateThumbnailForFile } from '../../../utils/thumbnailUtils';
+import { useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
+import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
import { SplitParameters } from '../../../components/tools/split/SplitSettings';
-import { SPLIT_MODES, ENDPOINTS, type SplitMode } from '../../../constants/splitConstants';
+import { SPLIT_MODES } from '../../../constants/splitConstants';
-export interface SplitOperationHook {
- executeOperation: (
- mode: SplitMode | '',
- parameters: SplitParameters,
- selectedFiles: File[]
- ) => Promise;
-
- // Flattened result properties for cleaner access
- files: File[];
- thumbnails: string[];
- isGeneratingThumbnails: boolean;
- downloadUrl: string | null;
- status: string;
- errorMessage: string | null;
- isLoading: boolean;
-
- // Result management functions
- resetResults: () => void;
- clearError: () => void;
-}
-export const useSplitOperation = (): SplitOperationHook => {
+const buildFormData = (parameters: SplitParameters, selectedFiles: File[]): FormData => {
+ const formData = new FormData();
+
+ selectedFiles.forEach(file => {
+ formData.append("fileInput", file);
+ });
+
+ switch (parameters.mode) {
+ case SPLIT_MODES.BY_PAGES:
+ formData.append("pageNumbers", parameters.pages);
+ break;
+ case SPLIT_MODES.BY_SECTIONS:
+ formData.append("horizontalDivisions", parameters.hDiv);
+ formData.append("verticalDivisions", parameters.vDiv);
+ formData.append("merge", parameters.merge.toString());
+ break;
+ case SPLIT_MODES.BY_SIZE_OR_COUNT:
+ formData.append(
+ "splitType",
+ parameters.splitType === "size" ? "0" : parameters.splitType === "pages" ? "1" : "2"
+ );
+ formData.append("splitValue", parameters.splitValue);
+ break;
+ case SPLIT_MODES.BY_CHAPTERS:
+ formData.append("bookmarkLevel", parameters.bookmarkLevel);
+ formData.append("includeMetadata", parameters.includeMetadata.toString());
+ formData.append("allowDuplicates", parameters.allowDuplicates.toString());
+ break;
+ default:
+ throw new Error(`Unknown split mode: ${parameters.mode}`);
+ }
+
+ return formData;
+};
+
+const getEndpoint = (parameters: SplitParameters): string => {
+ switch (parameters.mode) {
+ case SPLIT_MODES.BY_PAGES:
+ return "/api/v1/general/split-pages";
+ case SPLIT_MODES.BY_SECTIONS:
+ return "/api/v1/general/split-pdf-by-sections";
+ case SPLIT_MODES.BY_SIZE_OR_COUNT:
+ return "/api/v1/general/split-by-size-or-count";
+ case SPLIT_MODES.BY_CHAPTERS:
+ return "/api/v1/general/split-pdf-by-chapters";
+ default:
+ throw new Error(`Unknown split mode: ${parameters.mode}`);
+ }
+};
+
+export const useSplitOperation = () => {
const { t } = useTranslation();
- const {
- recordOperation,
- markOperationApplied,
- markOperationFailed,
- addFiles
- } = useFileContext();
-
- // Internal state management (replacing useOperationResults)
- const [files, setFiles] = useState([]);
- const [thumbnails, setThumbnails] = useState([]);
- const [isGeneratingThumbnails, setIsGeneratingThumbnails] = useState(false);
- const [downloadUrl, setDownloadUrl] = useState(null);
- const [status, setStatus] = useState('');
- const [errorMessage, setErrorMessage] = useState(null);
- const [isLoading, setIsLoading] = useState(false);
- const buildFormData = useCallback((
- mode: SplitMode | '',
- parameters: SplitParameters,
- selectedFiles: File[]
- ) => {
- const formData = new FormData();
-
- selectedFiles.forEach(file => {
- formData.append("fileInput", file);
- });
-
- if (!mode) {
- throw new Error('Split mode is required');
- }
-
- let endpoint = "";
-
- switch (mode) {
- case SPLIT_MODES.BY_PAGES:
- formData.append("pageNumbers", parameters.pages);
- endpoint = "/api/v1/general/split-pages";
- break;
- case SPLIT_MODES.BY_SECTIONS:
- formData.append("horizontalDivisions", parameters.hDiv);
- formData.append("verticalDivisions", parameters.vDiv);
- formData.append("merge", parameters.merge.toString());
- endpoint = "/api/v1/general/split-pdf-by-sections";
- break;
- case SPLIT_MODES.BY_SIZE_OR_COUNT:
- formData.append(
- "splitType",
- parameters.splitType === "size" ? "0" : parameters.splitType === "pages" ? "1" : "2"
- );
- formData.append("splitValue", parameters.splitValue);
- endpoint = "/api/v1/general/split-by-size-or-count";
- break;
- case SPLIT_MODES.BY_CHAPTERS:
- formData.append("bookmarkLevel", parameters.bookmarkLevel);
- formData.append("includeMetadata", parameters.includeMetadata.toString());
- formData.append("allowDuplicates", parameters.allowDuplicates.toString());
- endpoint = "/api/v1/general/split-pdf-by-chapters";
- break;
- default:
- throw new Error(`Unknown split mode: ${mode}`);
- }
-
- return { formData, endpoint };
- }, []);
-
- const createOperation = useCallback((
- mode: SplitMode | '',
- parameters: SplitParameters,
- selectedFiles: File[]
- ): { operation: FileOperation; operationId: string; fileId: string } => {
- const operationId = `split-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
- const fileId = selectedFiles[0].name;
-
- const operation: FileOperation = {
- id: operationId,
- type: 'split',
- timestamp: Date.now(),
- fileIds: selectedFiles.map(f => f.name),
- status: 'pending',
- metadata: {
- originalFileName: selectedFiles[0].name,
- parameters: {
- mode,
- pages: mode === SPLIT_MODES.BY_PAGES ? parameters.pages : undefined,
- hDiv: mode === SPLIT_MODES.BY_SECTIONS ? parameters.hDiv : undefined,
- vDiv: mode === SPLIT_MODES.BY_SECTIONS ? parameters.vDiv : undefined,
- merge: mode === SPLIT_MODES.BY_SECTIONS ? parameters.merge : undefined,
- splitType: mode === SPLIT_MODES.BY_SIZE_OR_COUNT ? parameters.splitType : undefined,
- splitValue: mode === SPLIT_MODES.BY_SIZE_OR_COUNT ? parameters.splitValue : undefined,
- bookmarkLevel: mode === SPLIT_MODES.BY_CHAPTERS ? parameters.bookmarkLevel : undefined,
- includeMetadata: mode === SPLIT_MODES.BY_CHAPTERS ? parameters.includeMetadata : undefined,
- allowDuplicates: mode === SPLIT_MODES.BY_CHAPTERS ? parameters.allowDuplicates : undefined,
- },
- fileSize: selectedFiles[0].size
+ return useToolOperation({
+ operationType: 'split',
+ endpoint: (params) => getEndpoint(params),
+ buildFormData: buildFormData, // Multi-file signature: (params, selectedFiles) => FormData
+ filePrefix: 'split_',
+ multiFileEndpoint: true, // Single API call with all files
+ validateParams: (params) => {
+ if (!params.mode) {
+ return { valid: false, errors: [t('split.validation.modeRequired', 'Split mode is required')] };
}
- };
- return { operation, operationId, fileId };
- }, []);
-
- const processResults = useCallback(async (blob: Blob) => {
- try {
- const zipFile = new File([blob], "split_result.zip", { type: "application/zip" });
- const extractionResult = await zipFileService.extractPdfFiles(zipFile);
-
- if (extractionResult.success && extractionResult.extractedFiles.length > 0) {
- // Set local state for preview
- setFiles(extractionResult.extractedFiles);
- setThumbnails([]);
- setIsGeneratingThumbnails(true);
-
- // Add extracted files to FileContext for future use
- await addFiles(extractionResult.extractedFiles);
-
- const thumbnails = await Promise.all(
- extractionResult.extractedFiles.map(async (file) => {
- try {
- return await generateThumbnailForFile(file);
- } catch (error) {
- console.warn(`Failed to generate thumbnail for ${file.name}:`, error);
- return '';
- }
- })
- );
-
- setThumbnails(thumbnails);
- setIsGeneratingThumbnails(false);
+ if (params.mode === SPLIT_MODES.BY_PAGES && !params.pages) {
+ return { valid: false, errors: [t('split.validation.pagesRequired', 'Page numbers are required for split by pages')] };
}
- } catch (extractError) {
- console.warn('Failed to extract files for preview:', extractError);
- }
- }, [addFiles]);
- const executeOperation = useCallback(async (
- mode: SplitMode | '',
- parameters: SplitParameters,
- selectedFiles: File[]
- ) => {
- if (selectedFiles.length === 0) {
- setStatus(t("noFileSelected"));
- return;
- }
-
- const { operation, operationId, fileId } = createOperation(mode, parameters, selectedFiles);
- const { formData, endpoint } = buildFormData(mode, parameters, selectedFiles);
-
- recordOperation(fileId, operation);
-
- setStatus(t("loading"));
- setIsLoading(true);
- setErrorMessage(null);
-
- try {
- const response = await axios.post(endpoint, formData, { responseType: "blob" });
- const blob = new Blob([response.data], { type: "application/zip" });
- const url = window.URL.createObjectURL(blob);
-
- setDownloadUrl(url);
- setStatus(t("downloadComplete"));
-
- await processResults(blob);
- markOperationApplied(fileId, operationId);
- } catch (error: any) {
- console.error(error);
- let errorMsg = t("error.pdfPassword", "An error occurred while splitting the PDF.");
- if (error.response?.data && typeof error.response.data === 'string') {
- errorMsg = error.response.data;
- } else if (error.message) {
- errorMsg = error.message;
- }
- setErrorMessage(errorMsg);
- setStatus(t("error._value", "Split failed."));
- markOperationFailed(fileId, operationId, errorMsg);
- } finally {
- setIsLoading(false);
- }
- }, [t, createOperation, buildFormData, recordOperation, markOperationApplied, markOperationFailed, processResults]);
-
- const resetResults = useCallback(() => {
- setFiles([]);
- setThumbnails([]);
- setIsGeneratingThumbnails(false);
- setDownloadUrl(null);
- setStatus('');
- setErrorMessage(null);
- setIsLoading(false);
- }, []);
-
- const clearError = useCallback(() => {
- setErrorMessage(null);
- }, []);
-
- return {
- executeOperation,
-
- // Flattened result properties for cleaner access
- files,
- thumbnails,
- isGeneratingThumbnails,
- downloadUrl,
- status,
- errorMessage,
- isLoading,
-
- // Result management functions
- resetResults,
- clearError,
- };
-};
\ No newline at end of file
+ return { valid: true };
+ },
+ getErrorMessage: createStandardErrorHandler(t('split.error.failed', 'An error occurred while splitting the PDF.'))
+ });
+};
diff --git a/frontend/src/hooks/tools/split/useSplitParameters.ts b/frontend/src/hooks/tools/split/useSplitParameters.ts
index 4fac0b9d1..72d479311 100644
--- a/frontend/src/hooks/tools/split/useSplitParameters.ts
+++ b/frontend/src/hooks/tools/split/useSplitParameters.ts
@@ -3,9 +3,7 @@ import { SPLIT_MODES, SPLIT_TYPES, ENDPOINTS, type SplitMode, type SplitType } f
import { SplitParameters } from '../../../components/tools/split/SplitSettings';
export interface SplitParametersHook {
- mode: SplitMode | '';
parameters: SplitParameters;
- setMode: (mode: SplitMode | '') => void;
updateParameter: (parameter: keyof SplitParameters, value: string | boolean) => void;
resetParameters: () => void;
validateParameters: () => boolean;
@@ -13,6 +11,7 @@ export interface SplitParametersHook {
}
const initialParameters: SplitParameters = {
+ mode: '',
pages: '',
hDiv: '2',
vDiv: '2',
@@ -25,7 +24,6 @@ const initialParameters: SplitParameters = {
};
export const useSplitParameters = (): SplitParametersHook => {
- const [mode, setMode] = useState('');
const [parameters, setParameters] = useState(initialParameters);
const updateParameter = (parameter: keyof SplitParameters, value: string | boolean) => {
@@ -34,13 +32,12 @@ export const useSplitParameters = (): SplitParametersHook => {
const resetParameters = () => {
setParameters(initialParameters);
- setMode('');
};
const validateParameters = () => {
- if (!mode) return false;
+ if (!parameters.mode) return false;
- switch (mode) {
+ switch (parameters.mode) {
case SPLIT_MODES.BY_PAGES:
return parameters.pages.trim() !== "";
case SPLIT_MODES.BY_SECTIONS:
@@ -55,14 +52,12 @@ export const useSplitParameters = (): SplitParametersHook => {
};
const getEndpointName = () => {
- if (!mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES];
- return ENDPOINTS[mode as SplitMode];
+ if (!parameters.mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES];
+ return ENDPOINTS[parameters.mode as SplitMode];
};
return {
- mode,
parameters,
- setMode,
updateParameter,
resetParameters,
validateParameters,
diff --git a/frontend/src/services/enhancedPDFProcessingService.ts b/frontend/src/services/enhancedPDFProcessingService.ts
index ea825e353..984d106e4 100644
--- a/frontend/src/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/services/enhancedPDFProcessingService.ts
@@ -28,8 +28,7 @@ export class EnhancedPDFProcessingService {
thumbnailQuality: 'medium',
priorityPageCount: 10,
useWebWorker: false,
- maxRetries: 3,
- timeoutMs: 300000 // 5 minutes
+ maxRetries: 3
};
private constructor() {}
@@ -87,7 +86,7 @@ export class EnhancedPDFProcessingService {
estimatedTime: number
): Promise {
// Create cancellation token
- const cancellationToken = ProcessingErrorHandler.createTimeoutController(config.timeoutMs);
+ const cancellationToken = new AbortController();
// Set initial state
const state: ProcessingState = {
diff --git a/frontend/src/tests/convert/ConvertIntegration.test.tsx b/frontend/src/tests/convert/ConvertIntegration.test.tsx
index 5ac978810..4e6b7cc68 100644
--- a/frontend/src/tests/convert/ConvertIntegration.test.tsx
+++ b/frontend/src/tests/convert/ConvertIntegration.test.tsx
@@ -414,7 +414,7 @@ describe('Convert Tool Integration Tests', () => {
});
expect(mockedAxios.post).not.toHaveBeenCalled();
- expect(result.current.status).toContain('noFileSelected');
+ expect(result.current.errorMessage).toContain('noFileSelected');
});
});
diff --git a/frontend/src/tools/Split.tsx b/frontend/src/tools/Split.tsx
index 191bd0b3f..bc516c754 100644
--- a/frontend/src/tools/Split.tsx
+++ b/frontend/src/tools/Split.tsx
@@ -33,12 +33,11 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
useEffect(() => {
splitOperation.resetResults();
onPreviewFile?.(null);
- }, [splitParams.mode, splitParams.parameters, selectedFiles]);
+ }, [splitParams.parameters, selectedFiles]);
const handleSplit = async () => {
try {
await splitOperation.executeOperation(
- splitParams.mode,
splitParams.parameters,
selectedFiles
);
@@ -105,14 +104,12 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
>
{
+ if (error.response?.data && typeof error.response.data === 'string') {
+ return error.response.data;
+ }
+ if (error.message) {
+ return error.message;
+ }
+ return 'Operation failed';
+};
+
+/**
+ * Creates a standardized error handler for tool operations
+ * @param fallbackMessage - Message to show when no specific error can be extracted
+ * @returns Error handler function that follows the standard pattern
+ */
+export const createStandardErrorHandler = (fallbackMessage: string) => {
+ return (error: any): string => {
+ if (error.response?.data && typeof error.response.data === 'string') {
+ return error.response.data;
+ }
+ if (error.message) {
+ return error.message;
+ }
+ return fallbackMessage;
+ };
+};
\ No newline at end of file
diff --git a/frontend/src/utils/toolOperationTracker.ts b/frontend/src/utils/toolOperationTracker.ts
new file mode 100644
index 000000000..091ef1872
--- /dev/null
+++ b/frontend/src/utils/toolOperationTracker.ts
@@ -0,0 +1,28 @@
+import { FileOperation } from '../types/fileContext';
+
+/**
+ * Creates operation tracking data for FileContext integration
+ */
+export const createOperation = (
+ operationType: string,
+ params: TParams,
+ selectedFiles: File[]
+): { operation: FileOperation; operationId: string; fileId: string } => {
+ const operationId = `${operationType}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+ const fileId = selectedFiles.map(f => f.name).join(',');
+
+ const operation: FileOperation = {
+ id: operationId,
+ type: operationType,
+ timestamp: Date.now(),
+ fileIds: selectedFiles.map(f => f.name),
+ status: 'pending',
+ metadata: {
+ originalFileName: selectedFiles[0]?.name,
+ parameters: params,
+ fileSize: selectedFiles.reduce((sum, f) => sum + f.size, 0)
+ }
+ };
+
+ return { operation, operationId, fileId };
+};
\ No newline at end of file
diff --git a/frontend/src/utils/toolResponseProcessor.ts b/frontend/src/utils/toolResponseProcessor.ts
new file mode 100644
index 000000000..fe2f11242
--- /dev/null
+++ b/frontend/src/utils/toolResponseProcessor.ts
@@ -0,0 +1,25 @@
+// Note: This utility should be used with useToolResources for ZIP operations
+
+export type ResponseHandler = (blob: Blob, originalFiles: File[]) => Promise | File[];
+
+/**
+ * Processes a blob response into File(s).
+ * - If a tool-specific responseHandler is provided, it is used.
+ * - Otherwise, create a single file using the filePrefix + original name.
+ */
+export async function processResponse(
+ blob: Blob,
+ originalFiles: File[],
+ filePrefix: string,
+ responseHandler?: ResponseHandler
+): Promise {
+ if (responseHandler) {
+ const out = await responseHandler(blob, originalFiles);
+ return Array.isArray(out) ? out : [out as unknown as File];
+ }
+
+ const original = originalFiles[0]?.name ?? 'result.pdf';
+ const name = `${filePrefix}${original}`;
+ const type = blob.type || 'application/octet-stream';
+ return [new File([blob], name, { type })];
+}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index 7b678de98..d392f21b6 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -1,32 +1,21 @@
-import React, { useState } from "react";
-import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
+import React from "react";
+import { Box, Text, Stack, Button } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { ToolRegistry } from "../../types/tool";
interface ToolPickerProps {
selectedToolKey: string | null;
onSelect: (id: string) => void;
- toolRegistry: ToolRegistry;
+ /** Pre-filtered tools to display */
+ filteredTools: [string, ToolRegistry[string]][];
}
-const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps) => {
+const ToolPicker = ({ selectedToolKey, onSelect, filteredTools }: ToolPickerProps) => {
const { t } = useTranslation();
- const [search, setSearch] = useState("");
-
- const filteredTools = Object.entries(toolRegistry).filter(([_, { name }]) =>
- name.toLowerCase().includes(search.toLowerCase())
- );
return (
-
+ {/* Search Bar - Always visible at the top */}
+
+
+ setSearchQuery(e.currentTarget.value)}
+ autoComplete="off"
+ size="sm"
+ />
+
+
+ {leftPanelView === 'toolPicker' ? (
+ // Tool Picker View
+
+
+ ) : (
+ // Selected Tool Content View
+
+ {/* Tool content */}
+
+ )}
+
+
+
-
-
- {/* Main View */}
-
- {leftPanelView === 'toolPicker' ? (
- // Tool Picker View
-
-
-
- ) : (
- // Selected Tool Content View
-
- {/* Back button */}
-
- )}
-
-
-
-
- {/* Tool title */}
-
-
-
- {/* Tool content */}
- {selectedTool?.name}
-
-
-