saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 14:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Toolstep factory and generic files and results steps

Browse Source
This commit is contained in:
Connor Yoh 2025-08-12 16:29:17 +01:00
parent 1bf9da08af
commit 9d2ca3c8c8
10 changed files with 331 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/tools/ToolPanel.tsx
View File

@ -39,7 +39,7 @@ export default function ToolPanel() {
}`}
style={{
width: isPanelVisible ? '20rem' : '0',
padding: isPanelVisible ? '0.5rem' : '0'
padding: '0'
}}
>
<div

7
frontend/src/components/tools/compress/CompressSettings.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Button, Stack, Text, NumberInput, Select } from "@mantine/core";
import { Button, Stack, Text, NumberInput, Select, Divider } from "@mantine/core";
import { useTranslation } from "react-i18next";
interface CompressParameters {
@ -22,6 +22,8 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
return (
<Stack gap="md">
<Divider ml='-md'></Divider>
{/* Compression Method */}
<Stack gap="sm">
<Text size="sm" fw={500}>Compression Method</Text>
@ -54,6 +56,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
{/* Quality Adjustment */}
{parameters.compressionMethod === 'quality' && (
<Stack gap="sm">
<Divider />
<Text size="sm" fw={500}>Compression Level</Text>
<div style={{ position: 'relative' }}>
<input
@ -107,6 +110,8 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
</Stack>
)}
<Divider/>
{/* File Size Input */}
{parameters.compressionMethod === 'filesize' && (
<Stack gap="sm">

4
frontend/src/components/tools/shared/OperationButton.tsx
View File

@ -24,7 +24,7 @@ const OperationButton = ({
submitText,
variant = 'filled',
color = 'blue',
fullWidth = true,
fullWidth = false,
mt = 'md',
type = 'button',
'data-testid': dataTestId
@ -36,6 +36,8 @@ const OperationButton = ({
type={type}
onClick={onClick}
fullWidth={fullWidth}
mr='md'
ml='md'
mt={mt}
loading={isLoading}
disabled={disabled}

93
frontend/src/components/tools/shared/ToolStep.tsx
View File

@ -1,9 +1,11 @@
import React, { createContext, useContext, useMemo, useRef } from 'react';
import { Paper, Text, Stack, Box, Flex } from '@mantine/core';
import { Text, Stack, Box, Flex, Divider } from '@mantine/core';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { Tooltip } from '../../shared/Tooltip';
import { TooltipTip } from '../../shared/tooltip/TooltipContent';
import { createFilesToolStep, FilesToolStepProps } from './createFilesToolStep';
import { createResultsToolStep, ResultsToolStepProps } from './createResultsToolStep';
interface ToolStepContextType {
visibleStepCount: number;
@ -87,15 +89,16 @@ const ToolStep = ({
return parent ? parent.visibleStepCount >= 3 : false;
}, [showNumber, parent]);
const stepNumber = _stepNumber || 1;
const stepNumber = _stepNumber;
return (
<Paper
p="md"
withBorder
<div>
<div
style={{
padding: '1rem',
opacity: isCollapsed ? 0.8 : 1,
transition: 'opacity 0.2s ease'
color: isCollapsed ? 'var(--mantine-color-dimmed)' : 'inherit',
transition: 'opacity 0.2s ease, color 0.2s ease'
}}
>
{/* Chevron icon to collapse/expand the step */}
@ -133,7 +136,7 @@ const ToolStep = ({
</Flex>
{isCollapsed ? (
<Box>
<div>
{isCompleted && completedMessage && (
<Text size="sm" c="green">
✓ {completedMessage}
@ -144,9 +147,9 @@ const ToolStep = ({
)}
</Text>
)}
</Box>
</div>
) : (
<Stack gap="md">
<Stack gap="md" pl="md">
{helpText && (
<Text size="sm" c="dimmed">
{helpText}
@ -155,33 +158,57 @@ const ToolStep = ({
{children}
</Stack>
)}
</Paper>
</div>
<Divider style={{ marginLeft: '1rem', marginRight: '-1rem' }} />
</div>
);
}
export interface ToolStepContainerProps {
children: React.ReactNode;
// ToolStepFactory for creating numbered steps
export function createToolSteps() {
let stepNumber = 1;
const steps: React.ReactElement[] = [];
const create = (
title: string,
props: Omit<ToolStepProps, 'title' | '_stepNumber'> = {},
children?: React.ReactNode
): React.ReactElement => {
const isVisible = props.isVisible !== false;
const currentStepNumber = isVisible ? stepNumber++ : undefined;
const step = React.createElement(ToolStep, {
...props,
title,
_stepNumber: currentStepNumber,
children,
key: `step-${title.toLowerCase().replace(/\s+/g, '-')}`
});
steps.push(step);
return step;
};
const createFilesStep = (props: FilesToolStepProps): React.ReactElement => {
return createFilesToolStep(create, props);
};
const createResultsStep = <TParams = any>(props: ResultsToolStepProps<TParams>): React.ReactElement => {
return createResultsToolStep(create, props);
};
const getVisibleCount = () => {
return steps.filter(step =>
(step.props as ToolStepProps).isVisible !== false
).length;
};
return { create, createFilesStep, createResultsStep, getVisibleCount, steps };
}
export const ToolStepContainer = ({ children }: ToolStepContainerProps) => {
// Process children and inject step numbers for visible ToolSteps
const processedChildren = useMemo(() => {
let visibleStepNumber = 1;
return React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === ToolStep) {
const isVisible = (child.props as ToolStepProps).isVisible !== false;
if (isVisible) {
return React.cloneElement(child, {
...child.props,
_stepNumber: visibleStepNumber++
} as ToolStepProps);
}
}
return child;
});
}, [children]);
// Context provider wrapper for tools using the factory
export function ToolStepProvider({ children }: { children: React.ReactNode }) {
// Count visible steps from children that are ToolStep elements
const visibleStepCount = useMemo(() => {
let count = 0;
React.Children.forEach(children, (child) => {
@ -199,9 +226,11 @@ export const ToolStepContainer = ({ children }: ToolStepContainerProps) => {
return (
<ToolStepContext.Provider value={contextValue}>
{processedChildren}
{children}
</ToolStepContext.Provider>
);
}
export type { FilesToolStepProps } from './createFilesToolStep';
export type { ResultsToolStepProps } from './createResultsToolStep';
export default ToolStep;

31
frontend/src/components/tools/shared/createFilesToolStep.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import FileStatusIndicator from './FileStatusIndicator';
export interface FilesToolStepProps {
selectedFiles: File[];
isCollapsed?: boolean;
onCollapsedClick?: () => void;
placeholder?: string;
}
export function createFilesToolStep(
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
props: FilesToolStepProps
): React.ReactElement {
const { t } = useTranslation();
const hasFiles = props.selectedFiles.length > 0;
return createStep("Files", {
isVisible: true,
isCollapsed: props.isCollapsed,
isCompleted: hasFiles,
onCollapsedClick: props.onCollapsedClick,
completedMessage: undefined
}, (
<FileStatusIndicator
selectedFiles={props.selectedFiles}
placeholder={props.placeholder || t("files.placeholder", "Select a PDF file in the main view to get started")}
/>
));
}

65
frontend/src/components/tools/shared/createResultsToolStep.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from 'react';
import { Button, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import DownloadIcon from '@mui/icons-material/Download';
import ErrorNotification from './ErrorNotification';
import ResultsPreview from './ResultsPreview';
import { ToolOperationHook } from '../../../hooks/tools/shared/useToolOperation';
export interface ResultsToolStepProps<TParams = any> {
isVisible: boolean;
operation: ToolOperationHook<TParams>;
title?: string;
onFileClick?: (file: File) => void;
}
export function createResultsToolStep<TParams = any>(
createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
props: ResultsToolStepProps<TParams>
): React.ReactElement {
const { t } = useTranslation();
const { operation } = props;
const previewFiles = operation.files?.map((file, index) => ({
file,
thumbnail: operation.thumbnails[index]
})) || [];
return createStep("Results", {
isVisible: props.isVisible
}, (
<Stack gap="sm">
{operation.status && (
<Text size="sm" c="dimmed">{operation.status}</Text>
)}
<ErrorNotification
error={operation.errorMessage}
onClose={operation.clearError}
/>
{operation.downloadUrl && (
<Button
component="a"
href={operation.downloadUrl}
download={operation.downloadFilename}
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
>
{t("download", "Download")}
</Button>
)}
{previewFiles.length > 0 && (
<ResultsPreview
files={previewFiles}
onFileClick={props.onFileClick}
isGeneratingThumbnails={operation.isGeneratingThumbnails}
title={props.title || "Results"}
/>
)}
</Stack>
));
}

113
frontend/src/tools/Compress.tsx
View File

@ -1,16 +1,12 @@
import React, { useEffect, useMemo } from "react";
import { Button, Stack, Text } from "@mantine/core";
import { Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useFileContext } from "../contexts/FileContext";
import { useToolFileSelection } from "../contexts/FileSelectionContext";
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
import { createToolSteps, ToolStepProvider } from "../components/tools/shared/ToolStep";
import OperationButton from "../components/tools/shared/OperationButton";
import ErrorNotification from "../components/tools/shared/ErrorNotification";
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
import ResultsPreview from "../components/tools/shared/ResultsPreview";
import CompressSettings from "../components/tools/compress/CompressSettings";
@ -67,103 +63,52 @@ const Compress = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const hasFiles = selectedFiles.length > 0;
const hasResults = compressOperation.files.length > 0 || compressOperation.downloadUrl !== null;
const filesCollapsed = hasFiles;
const settingsCollapsed = hasResults;
const settingsCollapsed = !hasFiles || hasResults;
const previewResults = useMemo(() =>
compressOperation.files?.map((file, index) => ({
file,
thumbnail: compressOperation.thumbnails[index]
})) || [],
[compressOperation.files, compressOperation.thumbnails]
);
const steps = createToolSteps();
return (
<ToolStepContainer>
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
<Stack gap="md" h="100%" p="sm" style={{ overflow: 'auto' }}>
<ToolStepProvider>
{/* Files Step */}
<ToolStep
title="Files"
isVisible={true}
isCollapsed={filesCollapsed}
isCompleted={filesCollapsed}
completedMessage={hasFiles ?
selectedFiles.length === 1
? `Selected: ${selectedFiles[0].name}`
: `Selected: ${selectedFiles.length} files`
: undefined}
>
<FileStatusIndicator
selectedFiles={selectedFiles}
placeholder="Select a PDF file in the main view to get started"
/>
</ToolStep>
{steps.createFilesStep({
selectedFiles,
isCollapsed: filesCollapsed
})}
{/* Settings Step */}
<ToolStep
title="Settings"
isVisible={hasFiles}
isCollapsed={settingsCollapsed}
isCompleted={settingsCollapsed}
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
completedMessage={settingsCollapsed ? "Compression completed" : undefined}
tooltip={compressTips}
>
<Stack gap="sm">
{steps.create("Settings", {
isCollapsed: settingsCollapsed,
isCompleted: hasResults,
onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
completedMessage: t("compress.header", "Compression completed"),
tooltip: compressTips
}, (
<Stack gap="md">
<CompressSettings
parameters={compressParams.parameters}
onParameterChange={compressParams.updateParameter}
disabled={endpointLoading}
/>
</Stack>
))}
<OperationButton
onClick={handleCompress}
isLoading={compressOperation.isLoading}
disabled={!compressParams.validateParameters() || !hasFiles || !endpointEnabled}
loadingText={t("loading")}
submitText="Compress and Review"
submitText={t("compress.submit", "Compress")}
/>
</Stack>
</ToolStep>
{/* Results Step */}
<ToolStep
title="Results"
isVisible={hasResults}
>
<Stack gap="sm">
{compressOperation.status && (
<Text size="sm" c="dimmed">{compressOperation.status}</Text>
)}
<ErrorNotification
error={compressOperation.errorMessage}
onClose={compressOperation.clearError}
/>
{compressOperation.downloadUrl && (
<Button
component="a"
href={compressOperation.downloadUrl}
download={compressOperation.downloadFilename}
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
>
{t("download", "Download")}
</Button>
)}
<ResultsPreview
files={previewResults}
onFileClick={handleThumbnailClick}
isGeneratingThumbnails={compressOperation.isGeneratingThumbnails}
title="Compression Results"
/>
{steps.createResultsStep({
isVisible: hasResults,
operation: compressOperation,
title: t("compress.title", "Compression Results"),
onFileClick: handleThumbnailClick
})}
</ToolStepProvider>
</Stack>
</ToolStep>
</Stack>
</ToolStepContainer>
);
}

108
frontend/src/tools/Convert.tsx
View File

@ -1,16 +1,12 @@
import React, { useEffect, useMemo, useRef } from "react";
import { Button, Stack, Text } from "@mantine/core";
import React, { useEffect, useRef } from "react";
import { Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useFileContext } from "../contexts/FileContext";
import { useToolFileSelection } from "../contexts/FileSelectionContext";
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
import { createToolSteps, ToolStepProvider } from "../components/tools/shared/ToolStep";
import OperationButton from "../components/tools/shared/OperationButton";
import ErrorNotification from "../components/tools/shared/ErrorNotification";
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
import ResultsPreview from "../components/tools/shared/ResultsPreview";
import ConvertSettings from "../components/tools/convert/ConvertSettings";
@ -105,39 +101,25 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
setCurrentMode('convert');
};
const previewResults = useMemo(() =>
convertOperation.files?.map((file, index) => ({
file,
thumbnail: convertOperation.thumbnails[index]
})) || [],
[convertOperation.files, convertOperation.thumbnails]
);
const steps = createToolSteps();
return (
<div className="h-full max-h-screen overflow-y-auto" ref={scrollContainerRef}>
<ToolStepContainer>
<Stack gap="sm" p="sm">
<ToolStep
title={t("convert.files", "Files")}
isVisible={true}
isCollapsed={filesCollapsed}
isCompleted={filesCollapsed}
completedMessage={hasFiles ? `${selectedFiles.length} ${t("filesSelected", "files selected")}` : undefined}
>
<FileStatusIndicator
selectedFiles={selectedFiles}
placeholder={t("convert.selectFilesPlaceholder", "Select files in the main view to get started")}
/>
</ToolStep>
<ToolStepProvider>
{/* Files Step */}
{steps.createFilesStep({
selectedFiles,
isCollapsed: filesCollapsed,
placeholder: t("convert.selectFilesPlaceholder", "Select files in the main view to get started")
})}
<ToolStep
title={t("convert.settings", "Settings")}
isVisible={true}
isCollapsed={settingsCollapsed}
isCompleted={settingsCollapsed}
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
completedMessage={settingsCollapsed ? t("convert.conversionCompleted", "Conversion completed") : undefined}
>
{/* Settings Step */}
{steps.create(t("convert.settings", "Settings"), {
isCollapsed: settingsCollapsed,
isCompleted: settingsCollapsed,
onCollapsedClick: settingsCollapsed ? handleSettingsReset : undefined,
}, (
<Stack gap="sm">
<ConvertSettings
parameters={convertParams.parameters}
@ -146,8 +128,9 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
selectedFiles={selectedFiles}
disabled={endpointLoading}
/>
{hasFiles && convertParams.parameters.fromExtension && convertParams.parameters.toExtension && (
</Stack>
))}
{!hasResults && (
<OperationButton
onClick={handleConvert}
isLoading={convertOperation.isLoading}
@ -157,49 +140,16 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
data-testid="convert-button"
/>
)}
{/* Results Step */}
{steps.createResultsStep({
isVisible: hasResults,
operation: convertOperation,
title: t("convert.conversionResults", "Conversion Results"),
onFileClick: handleThumbnailClick
})}
</ToolStepProvider>
</Stack>
</ToolStep>
<ToolStep
title={t("convert.results", "Results")}
isVisible={hasResults}
data-testid="conversion-results"
>
<Stack gap="sm">
{convertOperation.status && (
<Text size="sm" c="dimmed">{convertOperation.status}</Text>
)}
<ErrorNotification
error={convertOperation.errorMessage}
onClose={convertOperation.clearError}
/>
{convertOperation.downloadUrl && (
<Button
component="a"
href={convertOperation.downloadUrl}
download={convertOperation.downloadFilename || t("convert.defaultFilename", "converted_file")}
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
data-testid="download-button"
>
{t("convert.downloadConverted", "Download Converted File")}
</Button>
)}
<ResultsPreview
files={previewResults}
onFileClick={handleThumbnailClick}
isGeneratingThumbnails={convertOperation.isGeneratingThumbnails}
title={t("convert.conversionResults", "Conversion Results")}
/>
</Stack>
</ToolStep>
</Stack>
</ToolStepContainer>
</div>
);
};

128
frontend/src/tools/OCR.tsx
View File

@ -1,16 +1,12 @@
import React, { useEffect, useMemo, useState } from "react";
import { Button, Stack, Text, Box } from "@mantine/core";
import { Stack, Box } from "@mantine/core";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useFileContext } from "../contexts/FileContext";
import { useToolFileSelection } from "../contexts/FileSelectionContext";
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
import { createToolSteps, ToolStepProvider } from "../components/tools/shared/ToolStep";
import OperationButton from "../components/tools/shared/OperationButton";
import ErrorNotification from "../components/tools/shared/ErrorNotification";
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
import ResultsPreview from "../components/tools/shared/ResultsPreview";
import OCRSettings from "../components/tools/ocr/OCRSettings";
import AdvancedOCRSettings from "../components/tools/ocr/AdvancedOCRSettings";
@ -79,138 +75,78 @@ const OCR = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
};
// Step visibility and collapse logic
const filesVisible = true;
const settingsVisible = true;
const resultsVisible = hasResults;
const filesCollapsed = expandedStep !== 'files';
const settingsCollapsed = expandedStep !== 'settings';
const previewResults = useMemo(() =>
ocrOperation.files?.map((file: File, index: number) => ({
file,
thumbnail: ocrOperation.thumbnails[index]
})) || [],
[ocrOperation.files, ocrOperation.thumbnails]
);
const steps = createToolSteps();
return (
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
<ToolStepContainer>
<ToolStepProvider>
{/* Files Step */}
<ToolStep
title="Files"
isVisible={filesVisible}
isCollapsed={hasFiles ? filesCollapsed : false}
isCompleted={hasFiles}
onCollapsedClick={undefined}
completedMessage={hasFiles && filesCollapsed ?
selectedFiles.length === 1
? `Selected: ${selectedFiles[0].name}`
: `Selected: ${selectedFiles.length} files`
: undefined}
>
<FileStatusIndicator
selectedFiles={selectedFiles}
placeholder="Select a PDF file in the main view to get started"
/>
</ToolStep>
{steps.createFilesStep({
selectedFiles,
isCollapsed: hasFiles && filesCollapsed,
})}
{/* Settings Step */}
<ToolStep
title="Settings"
isVisible={settingsVisible}
isCollapsed={settingsCollapsed}
isCompleted={hasFiles && hasValidSettings}
onCollapsedClick={() => {
{steps.create("Settings", {
isCollapsed: !hasFiles || settingsCollapsed,
isCompleted: hasFiles && hasValidSettings,
onCollapsedClick: () => {
if (!hasFiles) return; // Only allow if files are selected
setExpandedStep(expandedStep === 'settings' ? null : 'settings');
}}
completedMessage={hasFiles && hasValidSettings && settingsCollapsed ? "Basic settings configured" : undefined}
tooltip={ocrTips}
>
},
tooltip: ocrTips
}, (
<Stack gap="sm">
<OCRSettings
parameters={ocrParams.parameters}
onParameterChange={ocrParams.updateParameter}
disabled={endpointLoading}
/>
</Stack>
</ToolStep>
))}
{/* Advanced Step */}
<ToolStep
title="Advanced"
isVisible={true}
isCollapsed={expandedStep !== 'advanced'}
isCompleted={hasFiles && hasResults}
onCollapsedClick={() => {
{steps.create("Advanced", {
isCollapsed: expandedStep !== 'advanced',
isCompleted: hasFiles && hasResults,
onCollapsedClick: () => {
if (!hasFiles) return; // Only allow if files are selected
setExpandedStep(expandedStep === 'advanced' ? null : 'advanced');
}}
completedMessage={hasFiles && hasResults && expandedStep !== 'advanced' ? "OCR processing completed" : undefined}
>
},
}, (
<AdvancedOCRSettings
advancedOptions={ocrParams.parameters.additionalOptions}
ocrRenderType={ocrParams.parameters.ocrRenderType}
onParameterChange={ocrParams.updateParameter}
disabled={endpointLoading}
/>
</ToolStep>
))}
{/* Process Button - Available after all configuration */}
{hasValidSettings && !hasResults && (
<Box mt="md">
<OperationButton
onClick={handleOCR}
isLoading={ocrOperation.isLoading}
disabled={!ocrParams.validateParameters() || !hasFiles || !endpointEnabled}
loadingText={t("loading")}
submitText="Process OCR and Review"
submitText={t("ocr.operation.submit", "Process OCR and Review")}
/>
</Box>
)}
{/* Results Step */}
<ToolStep
title="Results"
isVisible={resultsVisible}
>
<Stack gap="sm">
{ocrOperation.status && (
<Text size="sm" c="dimmed">{ocrOperation.status}</Text>
)}
<ErrorNotification
error={ocrOperation.errorMessage}
onClose={ocrOperation.clearError}
/>
{ocrOperation.downloadUrl && (
<Button
component="a"
href={ocrOperation.downloadUrl}
download={ocrOperation.downloadFilename}
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
>
{t("download", "Download")}
</Button>
)}
<ResultsPreview
files={previewResults}
onFileClick={handleThumbnailClick}
isGeneratingThumbnails={ocrOperation.isGeneratingThumbnails}
title="OCR Results"
/>
</Stack>
</ToolStep>
</ToolStepContainer>
{steps.createResultsStep({
isVisible: resultsVisible,
operation: ocrOperation,
title: t("ocr.results.title", "OCR Results"),
onFileClick: handleThumbnailClick
})}
</ToolStepProvider>
</Stack>
);
}

101
frontend/src/tools/Split.tsx
View File

@ -1,16 +1,12 @@
import React, { useEffect, useMemo } from "react";
import { Button, Stack, Text } from "@mantine/core";
import { Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";
import DownloadIcon from "@mui/icons-material/Download";
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
import { useFileContext } from "../contexts/FileContext";
import { useToolFileSelection } from "../contexts/FileSelectionContext";
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
import { createToolSteps, ToolStepProvider } from "../components/tools/shared/ToolStep";
import OperationButton from "../components/tools/shared/OperationButton";
import ErrorNotification from "../components/tools/shared/ErrorNotification";
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
import ResultsPreview from "../components/tools/shared/ResultsPreview";
import SplitSettings from "../components/tools/split/SplitSettings";
import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
@ -66,42 +62,26 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const hasFiles = selectedFiles.length > 0;
const hasResults = splitOperation.downloadUrl !== null;
const filesCollapsed = hasFiles;
const settingsCollapsed = hasResults;
const settingsCollapsed = !hasFiles || hasResults;
const previewResults = useMemo(() =>
splitOperation.files?.map((file, index) => ({
file,
thumbnail: splitOperation.thumbnails[index]
})) || [],
[splitOperation.files, splitOperation.thumbnails]
);
const steps = createToolSteps();
return (
<ToolStepContainer>
<Stack gap="sm" h="100%" p="sm" style={{ overflow: 'auto' }}>
<ToolStepProvider>
{/* Files Step */}
<ToolStep
title="Files"
isVisible={true}
isCollapsed={filesCollapsed}
isCompleted={filesCollapsed}
completedMessage={hasFiles ? `Selected: ${selectedFiles[0]?.name}` : undefined}
>
<FileStatusIndicator
selectedFiles={selectedFiles}
placeholder="Select a PDF file in the main view to get started"
/>
</ToolStep>
{steps.createFilesStep({
selectedFiles,
isCollapsed: filesCollapsed,
placeholder: "Select a PDF file in the main view to get started"
})}
{/* Settings Step */}
<ToolStep
title="Settings"
isVisible={hasFiles}
isCollapsed={settingsCollapsed}
isCompleted={settingsCollapsed}
onCollapsedClick={settingsCollapsed ? handleSettingsReset : undefined}
completedMessage={settingsCollapsed ? "Split completed" : undefined}
>
{steps.create("Settings", {
isCollapsed: settingsCollapsed,
isCompleted: hasResults,
onCollapsedClick: hasResults ? handleSettingsReset : undefined,
}, (
<Stack gap="sm">
<SplitSettings
parameters={splitParams.parameters}
@ -109,7 +89,10 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
disabled={endpointLoading}
/>
{splitParams.parameters.mode && (
</Stack>
))}
{!hasResults && (
<OperationButton
onClick={handleSplit}
isLoading={splitOperation.isLoading}
@ -118,48 +101,16 @@ const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
submitText={t("split.submit", "Split PDF")}
/>
)}
</Stack>
</ToolStep>
{/* Results Step */}
<ToolStep
title="Results"
isVisible={hasResults}
>
<Stack gap="sm">
{splitOperation.status && (
<Text size="sm" c="dimmed">{splitOperation.status}</Text>
)}
<ErrorNotification
error={splitOperation.errorMessage}
onClose={splitOperation.clearError}
/>
{splitOperation.downloadUrl && (
<Button
component="a"
href={splitOperation.downloadUrl}
download="split_output.zip"
leftSection={<DownloadIcon />}
color="green"
fullWidth
mb="md"
>
{t("download", "Download")}
</Button>
)}
<ResultsPreview
files={previewResults}
onFileClick={handleThumbnailClick}
isGeneratingThumbnails={splitOperation.isGeneratingThumbnails}
title="Split Results"
/>
{steps.createResultsStep({
isVisible: hasResults,
operation: splitOperation,
title: "Split Results",
onFileClick: handleThumbnailClick
})}
</ToolStepProvider>
</Stack>
</ToolStep>
</Stack>
</ToolStepContainer>
);
}