mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Merge branch 'V2' of github.com:Stirling-Tools/Stirling-PDF into UIUX/V2/StylingSnags
This commit is contained in:
EthanHealy01
commit
6d72878b4b
@ -48,7 +48,11 @@
|
||||
"filesSelected": "{{count}} files selected",
|
||||
"files": {
|
||||
"title": "Files",
|
||||
"placeholder": "Select a PDF file in the main view to get started"
|
||||
"placeholder": "Select a PDF file in the main view to get started",
|
||||
"upload": "Upload",
|
||||
"addFiles": "Add files",
|
||||
"noFiles": "No files uploaded. ",
|
||||
"selectFromWorkbench": "Select files from the workbench or "
|
||||
},
|
||||
"noFavourites": "No favourites added",
|
||||
"downloadComplete": "Download Complete",
|
||||
@ -2275,6 +2279,20 @@
|
||||
"description": "Configure the settings for this tool. These settings will be applied when the automation runs.",
|
||||
"cancel": "Cancel",
|
||||
"save": "Save Configuration"
|
||||
}
|
||||
},
|
||||
"copyToSaved": "Copy to Saved"
|
||||
}
|
||||
},
|
||||
"automation": {
|
||||
"suggested": {
|
||||
"securePdfIngestion": "Secure PDF Ingestion",
|
||||
"securePdfIngestionDesc": "Comprehensive PDF processing workflow that sanitises documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimises file size.",
|
||||
"emailPreparation": "Email Preparation",
|
||||
"emailPreparationDesc": "Optimises PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy.",
|
||||
"secureWorkflow": "Security Workflow",
|
||||
"secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorised access.",
|
||||
"processImages": "Process Images",
|
||||
"processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2106,5 +2106,20 @@
|
||||
"results": {
|
||||
"title": "Decrypted PDFs"
|
||||
}
|
||||
},
|
||||
"automation": {
|
||||
"suggested": {
|
||||
"securePdfIngestion": "Secure PDF Ingestion",
|
||||
"securePdfIngestionDesc": "Comprehensive PDF processing workflow that sanitizes documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimizes file size.",
|
||||
"emailPreparation": "Email Preparation",
|
||||
"emailPreparationDesc": "Optimizes PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy.",
|
||||
"secureWorkflow": "Security Workflow",
|
||||
"secureWorkflowDesc": "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access.",
|
||||
"processImages": "Process Images",
|
||||
"processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
|
||||
}
|
||||
},
|
||||
"automate": {
|
||||
"copyToSaved": "Copy to Saved"
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,6 +31,8 @@ export interface TextInputProps {
|
||||
readOnly?: boolean;
|
||||
/** Accessibility label */
|
||||
'aria-label'?: string;
|
||||
/** Focus event handler */
|
||||
onFocus?: () => void;
|
||||
}
|
||||
|
||||
export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
|
||||
@ -46,6 +48,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
|
||||
disabled = false,
|
||||
readOnly = false,
|
||||
'aria-label': ariaLabel,
|
||||
onFocus,
|
||||
...props
|
||||
}, ref) => {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
@ -81,6 +84,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
|
||||
disabled={disabled}
|
||||
readOnly={readOnly}
|
||||
aria-label={ariaLabel}
|
||||
onFocus={onFocus}
|
||||
style={{
|
||||
backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF',
|
||||
color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382',
|
||||
|
||||
@ -8,6 +8,7 @@ import ToolRenderer from './ToolRenderer';
|
||||
import ToolSearch from './toolPicker/ToolSearch';
|
||||
import { useSidebarContext } from "../../contexts/SidebarContext";
|
||||
import rainbowStyles from '../../styles/rainbow.module.css';
|
||||
import { Stack, ScrollArea } from '@mantine/core';
|
||||
|
||||
// No props needed - component uses context
|
||||
|
||||
@ -91,15 +92,17 @@ export default function ToolPanel() {
|
||||
</div>
|
||||
) : (
|
||||
// Selected Tool Content View
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Tool content */}
|
||||
<div className="flex-1 min-h-0">
|
||||
{selectedToolKey && (
|
||||
<ToolRenderer
|
||||
selectedToolKey={selectedToolKey}
|
||||
onPreviewFile={setPreviewFile}
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<ScrollArea h="100%">
|
||||
{selectedToolKey && (
|
||||
<ToolRenderer
|
||||
selectedToolKey={selectedToolKey}
|
||||
onPreviewFile={setPreviewFile}
|
||||
/>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -98,7 +98,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
|
||||
const saveAutomation = async () => {
|
||||
if (!canSaveAutomation()) return;
|
||||
|
||||
const automation = {
|
||||
const automationData = {
|
||||
name: automationName.trim(),
|
||||
description: '',
|
||||
operations: selectedTools.map(tool => ({
|
||||
@ -109,7 +109,30 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
|
||||
|
||||
try {
|
||||
const { automationStorage } = await import('../../../services/automationStorage');
|
||||
const savedAutomation = await automationStorage.saveAutomation(automation);
|
||||
let savedAutomation;
|
||||
|
||||
if (mode === AutomationMode.EDIT && existingAutomation) {
|
||||
// For edit mode, check if name has changed
|
||||
const nameChanged = automationName.trim() !== existingAutomation.name;
|
||||
|
||||
if (nameChanged) {
|
||||
// Name changed - create new automation
|
||||
savedAutomation = await automationStorage.saveAutomation(automationData);
|
||||
} else {
|
||||
// Name unchanged - update existing automation
|
||||
const updatedAutomation = {
|
||||
...existingAutomation,
|
||||
...automationData,
|
||||
id: existingAutomation.id,
|
||||
createdAt: existingAutomation.createdAt
|
||||
};
|
||||
savedAutomation = await automationStorage.updateAutomation(updatedAutomation);
|
||||
}
|
||||
} else {
|
||||
// Create mode - always create new automation
|
||||
savedAutomation = await automationStorage.saveAutomation(automationData);
|
||||
}
|
||||
|
||||
onComplete(savedAutomation);
|
||||
} catch (error) {
|
||||
console.error('Error saving automation:', error);
|
||||
|
||||
@ -4,10 +4,14 @@ import { Button, Group, Text, ActionIcon, Menu, Box } from '@mantine/core';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import { Tooltip } from '../../shared/Tooltip';
|
||||
|
||||
interface AutomationEntryProps {
|
||||
/** Optional title for the automation (usually for custom ones) */
|
||||
title?: string;
|
||||
/** Optional description for tooltip */
|
||||
description?: string;
|
||||
/** MUI Icon component for the badge */
|
||||
badgeIcon?: React.ComponentType<any>;
|
||||
/** Array of tool operation names in the workflow */
|
||||
@ -22,17 +26,21 @@ interface AutomationEntryProps {
|
||||
onEdit?: () => void;
|
||||
/** Delete handler */
|
||||
onDelete?: () => void;
|
||||
/** Copy handler (for suggested automations) */
|
||||
onCopy?: () => void;
|
||||
}
|
||||
|
||||
export default function AutomationEntry({
|
||||
title,
|
||||
description,
|
||||
badgeIcon: BadgeIcon,
|
||||
operations,
|
||||
onClick,
|
||||
keepIconColor = false,
|
||||
showMenu = false,
|
||||
onEdit,
|
||||
onDelete
|
||||
onDelete,
|
||||
onCopy
|
||||
}: AutomationEntryProps) {
|
||||
const { t } = useTranslation();
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
@ -41,6 +49,47 @@ export default function AutomationEntry({
|
||||
// Keep item in hovered state if menu is open
|
||||
const shouldShowHovered = isHovered || isMenuOpen;
|
||||
|
||||
// Create tooltip content with description and tool chain
|
||||
const createTooltipContent = () => {
|
||||
if (!description) return null;
|
||||
|
||||
const toolChain = operations.map((op, index) => (
|
||||
<React.Fragment key={`${op}-${index}`}>
|
||||
<Text
|
||||
component="span"
|
||||
size="sm"
|
||||
fw={600}
|
||||
style={{
|
||||
color: 'var(--mantine-primary-color-filled)',
|
||||
background: 'var(--mantine-primary-color-light)',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.75rem',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
{t(`${op}.title`, op)}
|
||||
</Text>
|
||||
{index < operations.length - 1 && (
|
||||
<Text component="span" size="sm" mx={4}>
|
||||
→
|
||||
</Text>
|
||||
)}
|
||||
</React.Fragment>
|
||||
));
|
||||
|
||||
return (
|
||||
<div style={{ minWidth: '400px', width: 'auto' }}>
|
||||
<Text size="sm" mb={8} style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
|
||||
{description}
|
||||
</Text>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', whiteSpace: 'nowrap' }}>
|
||||
{toolChain}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (title) {
|
||||
// Custom automation with title
|
||||
@ -89,7 +138,7 @@ export default function AutomationEntry({
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
const boxContent = (
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'transparent',
|
||||
@ -132,6 +181,17 @@ export default function AutomationEntry({
|
||||
</Menu.Target>
|
||||
|
||||
<Menu.Dropdown>
|
||||
{onCopy && (
|
||||
<Menu.Item
|
||||
leftSection={<ContentCopyIcon style={{ fontSize: 16 }} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCopy();
|
||||
}}
|
||||
>
|
||||
{t('automate.copyToSaved', 'Copy to Saved')}
|
||||
</Menu.Item>
|
||||
)}
|
||||
{onEdit && (
|
||||
<Menu.Item
|
||||
leftSection={<EditIcon style={{ fontSize: 16 }} />}
|
||||
@ -160,4 +220,18 @@ export default function AutomationEntry({
|
||||
</Group>
|
||||
</Box>
|
||||
);
|
||||
|
||||
// Only show tooltip if description exists, otherwise return plain content
|
||||
return description ? (
|
||||
<Tooltip
|
||||
content={createTooltipContent()}
|
||||
position="right"
|
||||
arrow={true}
|
||||
delay={500}
|
||||
>
|
||||
{boxContent}
|
||||
</Tooltip>
|
||||
) : (
|
||||
boxContent
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import AutomationEntry from "./AutomationEntry";
|
||||
import { useSuggestedAutomations } from "../../../hooks/tools/automate/useSuggestedAutomations";
|
||||
import { AutomationConfig } from "../../../types/automation";
|
||||
import { AutomationConfig, SuggestedAutomation } from "../../../types/automation";
|
||||
|
||||
interface AutomationSelectionProps {
|
||||
savedAutomations: AutomationConfig[];
|
||||
@ -13,6 +13,7 @@ interface AutomationSelectionProps {
|
||||
onRun: (automation: AutomationConfig) => void;
|
||||
onEdit: (automation: AutomationConfig) => void;
|
||||
onDelete: (automation: AutomationConfig) => void;
|
||||
onCopyFromSuggested: (automation: SuggestedAutomation) => void;
|
||||
}
|
||||
|
||||
export default function AutomationSelection({
|
||||
@ -20,7 +21,8 @@ export default function AutomationSelection({
|
||||
onCreateNew,
|
||||
onRun,
|
||||
onEdit,
|
||||
onDelete
|
||||
onDelete,
|
||||
onCopyFromSuggested
|
||||
}: AutomationSelectionProps) {
|
||||
const { t } = useTranslation();
|
||||
const suggestedAutomations = useSuggestedAutomations();
|
||||
@ -63,9 +65,13 @@ export default function AutomationSelection({
|
||||
{suggestedAutomations.map((automation) => (
|
||||
<AutomationEntry
|
||||
key={automation.id}
|
||||
title={automation.name}
|
||||
description={automation.description}
|
||||
badgeIcon={automation.icon}
|
||||
operations={automation.operations.map(op => op.operation)}
|
||||
onClick={() => onRun(automation)}
|
||||
showMenu={true}
|
||||
onCopy={() => onCopyFromSuggested(automation)}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Text, Stack, Group, ActionIcon } from '@mantine/core';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
|
||||
import { AutomationTool } from '../../../types/automation';
|
||||
import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
|
||||
import ToolSelector from './ToolSelector';
|
||||
import AutomationEntry from './AutomationEntry';
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Text, Stack, Group, ActionIcon } from "@mantine/core";
|
||||
import SettingsIcon from "@mui/icons-material/Settings";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
|
||||
import { AutomationTool } from "../../../types/automation";
|
||||
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
|
||||
import ToolSelector from "./ToolSelector";
|
||||
import AutomationEntry from "./AutomationEntry";
|
||||
|
||||
interface ToolListProps {
|
||||
tools: AutomationTool[];
|
||||
@ -29,7 +28,7 @@ export default function ToolList({
|
||||
onToolConfigure,
|
||||
onToolAdd,
|
||||
getToolName,
|
||||
getToolDefaultParameters
|
||||
getToolDefaultParameters,
|
||||
}: ToolListProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -40,24 +39,28 @@ export default function ToolList({
|
||||
operation: newOperation,
|
||||
name: getToolName(newOperation),
|
||||
configured: false,
|
||||
parameters: defaultParams
|
||||
parameters: defaultParams,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Text size="sm" fw={500} mb="xs" style={{ color: 'var(--mantine-color-text)' }}>
|
||||
{t('automate.creation.tools.selected', 'Selected Tools')} ({tools.length})
|
||||
<Text size="sm" fw={500} mb="xs" style={{ color: "var(--mantine-color-text)" }}>
|
||||
{t("automate.creation.tools.selected", "Selected Tools")} ({tools.length})
|
||||
</Text>
|
||||
<Stack gap="0">
|
||||
{tools.map((tool, index) => (
|
||||
<React.Fragment key={tool.id}>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--mantine-color-gray-2)',
|
||||
borderRadius: 'var(--mantine-radius-sm)',
|
||||
position: 'relative',
|
||||
padding: 'var(--mantine-spacing-xs)'
|
||||
border: "1px solid var(--mantine-color-gray-2)",
|
||||
borderRadius: tool.operation && !tool.configured
|
||||
? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
|
||||
: "var(--mantine-radius-lg)",
|
||||
backgroundColor: "var(--mantine-color-gray-2)",
|
||||
position: "relative",
|
||||
padding: "var(--mantine-spacing-xs)",
|
||||
borderBottomWidth: tool.operation && !tool.configured ? "0" : "1px",
|
||||
}}
|
||||
>
|
||||
{/* Delete X in top right */}
|
||||
@ -65,26 +68,26 @@ export default function ToolList({
|
||||
variant="subtle"
|
||||
size="xs"
|
||||
onClick={() => onToolRemove(index)}
|
||||
title={t('automate.creation.tools.remove', 'Remove tool')}
|
||||
title={t("automate.creation.tools.remove", "Remove tool")}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
right: '4px',
|
||||
position: "absolute",
|
||||
top: "4px",
|
||||
right: "4px",
|
||||
zIndex: 1,
|
||||
color: 'var(--mantine-color-gray-6)'
|
||||
color: "var(--mantine-color-gray-6)",
|
||||
}}
|
||||
>
|
||||
<CloseIcon style={{ fontSize: 12 }} />
|
||||
<CloseIcon style={{ fontSize: 16 }} />
|
||||
</ActionIcon>
|
||||
|
||||
<div style={{ paddingRight: '1.25rem' }}>
|
||||
<div style={{ paddingRight: "1.25rem" }}>
|
||||
{/* Tool Selection Dropdown with inline settings cog */}
|
||||
<Group gap="xs" align="center" wrap="nowrap">
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<ToolSelector
|
||||
key={`tool-selector-${tool.id}`}
|
||||
onSelect={(newOperation) => handleToolSelect(index, newOperation)}
|
||||
excludeTools={['automate']}
|
||||
excludeTools={["automate"]}
|
||||
toolRegistry={toolRegistry}
|
||||
selectedValue={tool.operation}
|
||||
placeholder={tool.name}
|
||||
@ -97,26 +100,37 @@ export default function ToolList({
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
onClick={() => onToolConfigure(index)}
|
||||
title={t('automate.creation.tools.configure', 'Configure tool')}
|
||||
style={{ color: 'var(--mantine-color-gray-6)' }}
|
||||
title={t("automate.creation.tools.configure", "Configure tool")}
|
||||
style={{ color: "var(--mantine-color-gray-6)" }}
|
||||
>
|
||||
<SettingsIcon style={{ fontSize: 16 }} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{/* Configuration status underneath */}
|
||||
{tool.operation && !tool.configured && (
|
||||
<Text pl="md" size="xs" c="dimmed" mt="xs">
|
||||
{t('automate.creation.tools.notConfigured', "! Not Configured")}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration status underneath */}
|
||||
{tool.operation && !tool.configured && (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
border: "1px solid var(--mantine-color-gray-2)",
|
||||
borderTop: "none",
|
||||
borderRadius: "0 0 var(--mantine-radius-lg) var(--mantine-radius-lg)",
|
||||
backgroundColor: "var(--active-bg)",
|
||||
padding: "var(--mantine-spacing-xs)",
|
||||
}}
|
||||
>
|
||||
<Text pl="md" size="xs" >
|
||||
{t("automate.creation.tools.notConfigured", "! Not Configured")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
{index < tools.length - 1 && (
|
||||
<div style={{ textAlign: 'center', padding: '8px 0' }}>
|
||||
<Text size="xs" c="dimmed">↓</Text>
|
||||
<div style={{ textAlign: "center", padding: "8px 0" }}>
|
||||
<Text size="xs" c="dimmed">
|
||||
↓
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
@ -124,19 +138,23 @@ export default function ToolList({
|
||||
|
||||
{/* Arrow before Add Tool Button */}
|
||||
{tools.length > 0 && (
|
||||
<div style={{ textAlign: 'center', padding: '8px 0' }}>
|
||||
<Text size="xs" c="dimmed">↓</Text>
|
||||
<div style={{ textAlign: "center", padding: "8px 0" }}>
|
||||
<Text size="xs" c="dimmed">
|
||||
↓
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add Tool Button */}
|
||||
<div style={{
|
||||
border: '1px solid var(--mantine-color-gray-2)',
|
||||
borderRadius: 'var(--mantine-radius-sm)',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
border: "1px solid var(--mantine-color-gray-2)",
|
||||
borderRadius: "var(--mantine-radius-sm)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<AutomationEntry
|
||||
title={t('automate.creation.tools.addTool', 'Add Tool')}
|
||||
title={t("automate.creation.tools.addTool", "Add Tool")}
|
||||
badgeIcon={AddCircleOutline}
|
||||
operations={[]}
|
||||
onClick={onToolAdd}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Menu, Stack, Text, ScrollArea } from '@mantine/core';
|
||||
import { Stack, Text, ScrollArea } from '@mantine/core';
|
||||
import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
|
||||
import { useToolSections } from '../../../hooks/useToolSections';
|
||||
import { renderToolButtons } from '../shared/renderToolButtons';
|
||||
import ToolSearch from '../toolPicker/ToolSearch';
|
||||
import ToolButton from '../toolPicker/ToolButton';
|
||||
|
||||
interface ToolSelectorProps {
|
||||
onSelect: (toolKey: string) => void;
|
||||
@ -24,6 +25,8 @@ export default function ToolSelector({
|
||||
const { t } = useTranslation();
|
||||
const [opened, setOpened] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [shouldAutoFocus, setShouldAutoFocus] = useState(false);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Filter out excluded tools (like 'automate' itself)
|
||||
const baseFilteredTools = useMemo(() => {
|
||||
@ -66,13 +69,21 @@ export default function ToolSelector({
|
||||
}
|
||||
|
||||
if (!sections || sections.length === 0) {
|
||||
// If no sections, create a simple group from filtered tools
|
||||
if (baseFilteredTools.length > 0) {
|
||||
return [{
|
||||
name: 'All Tools',
|
||||
subcategoryId: 'all' as any,
|
||||
tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// Find the "all" section which contains all tools without duplicates
|
||||
const allSection = sections.find(s => (s as any).key === 'all');
|
||||
return allSection?.subcategories || [];
|
||||
}, [isSearching, searchGroups, sections]);
|
||||
}, [isSearching, searchGroups, sections, baseFilteredTools]);
|
||||
|
||||
const handleToolSelect = useCallback((toolKey: string) => {
|
||||
onSelect(toolKey);
|
||||
@ -88,8 +99,25 @@ export default function ToolSelector({
|
||||
|
||||
const handleSearchFocus = () => {
|
||||
setOpened(true);
|
||||
setShouldAutoFocus(true); // Request auto-focus for the input
|
||||
};
|
||||
|
||||
// Handle click outside to close dropdown
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setOpened(false);
|
||||
setSearchTerm('');
|
||||
}
|
||||
};
|
||||
|
||||
if (opened) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
}, [opened]);
|
||||
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchTerm(value);
|
||||
if (!opened) {
|
||||
@ -97,6 +125,14 @@ export default function ToolSelector({
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
if (!opened) {
|
||||
setOpened(true);
|
||||
}
|
||||
// Clear auto-focus flag since input is now focused
|
||||
setShouldAutoFocus(false);
|
||||
};
|
||||
|
||||
// Get display value for selected tool
|
||||
const getDisplayValue = () => {
|
||||
if (selectedValue && toolRegistry[selectedValue]) {
|
||||
@ -106,77 +142,63 @@ export default function ToolSelector({
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', width: '100%' }}>
|
||||
<Menu
|
||||
opened={opened}
|
||||
onChange={(isOpen) => {
|
||||
setOpened(isOpen);
|
||||
// Clear search term when menu closes to show proper display
|
||||
if (!isOpen) {
|
||||
setSearchTerm('');
|
||||
}
|
||||
}}
|
||||
closeOnClickOutside={true}
|
||||
closeOnEscape={true}
|
||||
position="bottom-start"
|
||||
offset={4}
|
||||
withinPortal={false}
|
||||
trapFocus={false}
|
||||
shadow="sm"
|
||||
transitionProps={{ duration: 0 }}
|
||||
>
|
||||
<Menu.Target>
|
||||
<div style={{ width: '100%' }}>
|
||||
{selectedValue && toolRegistry[selectedValue] && !opened ? (
|
||||
// Show selected tool in AutomationEntry style when tool is selected and not searching
|
||||
<div onClick={handleSearchFocus} style={{ cursor: 'pointer' }}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 'var(--mantine-spacing-sm)',
|
||||
padding: '0 0.5rem',
|
||||
borderRadius: 'var(--mantine-radius-sm)',
|
||||
}}>
|
||||
<div style={{ color: 'var(--mantine-color-text)', fontSize: '1.2rem' }}>
|
||||
{toolRegistry[selectedValue].icon}
|
||||
</div>
|
||||
<Text size="sm" style={{ flex: 1, color: 'var(--mantine-color-text)' }}>
|
||||
{toolRegistry[selectedValue].name}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
// Show search input when no tool selected or actively searching
|
||||
<ToolSearch
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
toolRegistry={filteredToolRegistry}
|
||||
mode="filter"
|
||||
placeholder={getDisplayValue()}
|
||||
hideIcon={true}
|
||||
onFocus={handleSearchFocus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Menu.Target>
|
||||
<div ref={containerRef} className='rounded-xl'>
|
||||
{/* Always show the target - either selected tool or search input */}
|
||||
|
||||
<Menu.Dropdown p={0} style={{ minWidth: '16rem' }}>
|
||||
<ScrollArea h={350}>
|
||||
<Stack gap="sm" p="sm">
|
||||
{displayGroups.length === 0 ? (
|
||||
<Text size="sm" c="dimmed" ta="center" p="md">
|
||||
{isSearching
|
||||
? t('tools.noSearchResults', 'No tools found')
|
||||
: t('tools.noTools', 'No tools available')
|
||||
}
|
||||
</Text>
|
||||
) : (
|
||||
renderedTools
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
{selectedValue && toolRegistry[selectedValue] && !opened ? (
|
||||
// Show selected tool in AutomationEntry style when tool is selected and dropdown closed
|
||||
<div onClick={handleSearchFocus} style={{ cursor: 'pointer',
|
||||
borderRadius: "var(--mantine-radius-lg)" }}>
|
||||
<ToolButton id='tool' tool={toolRegistry[selectedValue]} isSelected={false}
|
||||
onSelect={()=>{}} rounded={true}></ToolButton>
|
||||
</div>
|
||||
) : (
|
||||
// Show search input when no tool selected OR when dropdown is opened
|
||||
<ToolSearch
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
toolRegistry={filteredToolRegistry}
|
||||
mode="unstyled"
|
||||
placeholder={getDisplayValue()}
|
||||
hideIcon={true}
|
||||
onFocus={handleInputFocus}
|
||||
autoFocus={shouldAutoFocus}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Custom dropdown */}
|
||||
{opened && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000,
|
||||
backgroundColor: 'var(--mantine-color-body)',
|
||||
border: '1px solid var(--mantine-color-gray-3)',
|
||||
borderRadius: 'var(--mantine-radius-sm)',
|
||||
boxShadow: 'var(--mantine-shadow-sm)',
|
||||
marginTop: '4px',
|
||||
minWidth: '16rem'
|
||||
}}
|
||||
>
|
||||
<ScrollArea h={350}>
|
||||
<Stack gap="sm" p="sm">
|
||||
{displayGroups.length === 0 ? (
|
||||
<Text size="sm" c="dimmed" ta="center" p="md">
|
||||
{isSearching
|
||||
? t('tools.noSearchResults', 'No tools found')
|
||||
: t('tools.noTools', 'No tools available')
|
||||
}
|
||||
</Text>
|
||||
) : (
|
||||
renderedTools
|
||||
)}
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Text, Anchor } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import FolderIcon from '@mui/icons-material/Folder';
|
||||
import UploadIcon from '@mui/icons-material/Upload';
|
||||
import { useFilesModalContext } from "../../../contexts/FilesModalContext";
|
||||
import { useAllFiles } from "../../../contexts/FileContext";
|
||||
import { useFileManager } from "../../../hooks/useFileManager";
|
||||
|
||||
export interface FileStatusIndicatorProps {
|
||||
selectedFiles?: File[];
|
||||
@ -14,40 +16,110 @@ const FileStatusIndicator = ({
|
||||
selectedFiles = [],
|
||||
}: FileStatusIndicatorProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { openFilesModal } = useFilesModalContext();
|
||||
const { openFilesModal, onFilesSelect } = useFilesModalContext();
|
||||
const { files: workbenchFiles } = useAllFiles();
|
||||
const { loadRecentFiles } = useFileManager();
|
||||
const [hasRecentFiles, setHasRecentFiles] = useState<boolean | null>(null);
|
||||
|
||||
// Check if there are recent files
|
||||
useEffect(() => {
|
||||
const checkRecentFiles = async () => {
|
||||
try {
|
||||
const recentFiles = await loadRecentFiles();
|
||||
setHasRecentFiles(recentFiles.length > 0);
|
||||
} catch (error) {
|
||||
setHasRecentFiles(false);
|
||||
}
|
||||
};
|
||||
checkRecentFiles();
|
||||
}, [loadRecentFiles]);
|
||||
|
||||
// Handle native file picker
|
||||
const handleNativeUpload = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.multiple = true;
|
||||
input.accept = '.pdf,application/pdf';
|
||||
input.onchange = (event) => {
|
||||
const files = Array.from((event.target as HTMLInputElement).files || []);
|
||||
if (files.length > 0) {
|
||||
onFilesSelect(files);
|
||||
}
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
// Don't render until we know if there are recent files
|
||||
if (hasRecentFiles === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check if there are no files in the workbench
|
||||
if (workbenchFiles.length === 0) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={openFilesModal}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '14px' }} />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
// If no recent files, show upload button
|
||||
if (!hasRecentFiles) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={handleNativeUpload}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<UploadIcon style={{ fontSize: '0.875rem' }} />
|
||||
{t("files.upload", "Upload")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
} else {
|
||||
// If there are recent files, show add files button
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={openFilesModal}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '0.875rem' }} />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Show selection status when there are files in workbench
|
||||
if (selectedFiles.length === 0) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={openFilesModal}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '14px' }} />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
// If no recent files, show upload option
|
||||
if (!hasRecentFiles) {
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={handleNativeUpload}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<UploadIcon style={{ fontSize: '0.875rem' }} />
|
||||
{t("files.upload", "Upload")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
} else {
|
||||
// If there are recent files, show add files option
|
||||
return (
|
||||
<Text size="sm" c="dimmed">
|
||||
{t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
|
||||
<Anchor
|
||||
size="sm"
|
||||
onClick={openFilesModal}
|
||||
style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
|
||||
>
|
||||
<FolderIcon style={{ fontSize: '0.875rem' }} />
|
||||
{t("files.addFiles", "Add files")}
|
||||
</Anchor>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -65,7 +65,8 @@ export function createToolFlow(config: ToolFlowConfig) {
|
||||
const steps = createToolSteps();
|
||||
|
||||
return (
|
||||
<Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
|
||||
<Stack gap="sm" p="sm" >
|
||||
{/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
|
||||
<ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
|
||||
{config.title && <ToolWorkflowTitle {...config.title} />}
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ interface ToolButtonProps {
|
||||
tool: ToolRegistryEntry;
|
||||
isSelected: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
|
||||
|
||||
@ -4,18 +4,19 @@ import { useTranslation } from "react-i18next";
|
||||
import LocalIcon from '../../shared/LocalIcon';
|
||||
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
|
||||
import { TextInput } from "../../shared/TextInput";
|
||||
import './ToolPicker.css';
|
||||
import "./ToolPicker.css";
|
||||
|
||||
interface ToolSearchProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
toolRegistry: Readonly<Record<string, ToolRegistryEntry>>;
|
||||
onToolSelect?: (toolId: string) => void;
|
||||
mode: 'filter' | 'dropdown';
|
||||
mode: "filter" | "dropdown" | "unstyled";
|
||||
selectedToolKey?: string | null;
|
||||
placeholder?: string;
|
||||
hideIcon?: boolean;
|
||||
onFocus?: () => void;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
const ToolSearch = ({
|
||||
@ -23,11 +24,12 @@ const ToolSearch = ({
|
||||
onChange,
|
||||
toolRegistry,
|
||||
onToolSelect,
|
||||
mode = 'filter',
|
||||
mode = "filter",
|
||||
selectedToolKey,
|
||||
placeholder,
|
||||
hideIcon = false,
|
||||
onFocus
|
||||
onFocus,
|
||||
autoFocus = false,
|
||||
}: ToolSearchProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
@ -38,9 +40,10 @@ const ToolSearch = ({
|
||||
if (!value.trim()) return [];
|
||||
return Object.entries(toolRegistry)
|
||||
.filter(([id, tool]) => {
|
||||
if (mode === 'dropdown' && id === selectedToolKey) return false;
|
||||
return tool.name.toLowerCase().includes(value.toLowerCase()) ||
|
||||
tool.description.toLowerCase().includes(value.toLowerCase());
|
||||
if (mode === "dropdown" && id === selectedToolKey) return false;
|
||||
return (
|
||||
tool.name.toLowerCase().includes(value.toLowerCase()) || tool.description.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
})
|
||||
.slice(0, 6)
|
||||
.map(([id, tool]) => ({ id, tool }));
|
||||
@ -48,7 +51,7 @@ const ToolSearch = ({
|
||||
|
||||
const handleSearchChange = (searchValue: string) => {
|
||||
onChange(searchValue);
|
||||
if (mode === 'dropdown') {
|
||||
if (mode === "dropdown") {
|
||||
setDropdownOpen(searchValue.trim().length > 0 && filteredTools.length > 0);
|
||||
}
|
||||
};
|
||||
@ -64,12 +67,20 @@ const ToolSearch = ({
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Auto-focus the input when requested
|
||||
useEffect(() => {
|
||||
if (autoFocus && searchRef.current) {
|
||||
setTimeout(() => {
|
||||
searchRef.current?.focus();
|
||||
}, 10);
|
||||
}
|
||||
}, [autoFocus]);
|
||||
|
||||
const searchInput = (
|
||||
<div className="search-input-container">
|
||||
<TextInput
|
||||
ref={searchRef}
|
||||
value={value}
|
||||
@ -77,36 +88,39 @@ const ToolSearch = ({
|
||||
placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
|
||||
icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
|
||||
autoComplete="off"
|
||||
|
||||
onFocus={onFocus}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (mode === 'filter') {
|
||||
if (mode === "filter") {
|
||||
return <div className="search-input-container">{searchInput}</div>;
|
||||
}
|
||||
|
||||
if (mode === "unstyled") {
|
||||
return searchInput;
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={searchRef} style={{ position: 'relative' }}>
|
||||
<div ref={searchRef} style={{ position: "relative" }}>
|
||||
{searchInput}
|
||||
{dropdownOpen && filteredTools.length > 0 && (
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000,
|
||||
backgroundColor: 'var(--mantine-color-body)',
|
||||
border: '1px solid var(--mantine-color-gray-3)',
|
||||
borderRadius: '6px',
|
||||
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
||||
maxHeight: '300px',
|
||||
overflowY: 'auto'
|
||||
backgroundColor: "var(--mantine-color-body)",
|
||||
border: "1px solid var(--mantine-color-gray-3)",
|
||||
borderRadius: "6px",
|
||||
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<Stack gap="xs" style={{ padding: '8px' }}>
|
||||
<Stack gap="xs" style={{ padding: "8px" }}>
|
||||
{filteredTools.map(({ id, tool }) => (
|
||||
<Button
|
||||
key={id}
|
||||
@ -115,22 +129,18 @@ const ToolSearch = ({
|
||||
onToolSelect && onToolSelect(id);
|
||||
setDropdownOpen(false);
|
||||
}}
|
||||
leftSection={
|
||||
<div style={{ color: 'var(--tools-text-and-icon-color)' }}>
|
||||
{tool.icon}
|
||||
</div>
|
||||
}
|
||||
leftSection={<div style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}
|
||||
fullWidth
|
||||
justify="flex-start"
|
||||
style={{
|
||||
borderRadius: '6px',
|
||||
color: 'var(--tools-text-and-icon-color)',
|
||||
padding: '8px 12px'
|
||||
borderRadius: "6px",
|
||||
color: "var(--tools-text-and-icon-color)",
|
||||
padding: "8px 12px",
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'left' }}>
|
||||
<div style={{ textAlign: "left" }}>
|
||||
<div style={{ fontWeight: 500 }}>{tool.name}</div>
|
||||
<Text size="xs" c="dimmed" style={{ marginTop: '2px' }}>
|
||||
<Text size="xs" c="dimmed" style={{ marginTop: "2px" }}>
|
||||
{tool.description}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
@ -134,7 +134,10 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
|
||||
|
||||
const setPreviewFile = useCallback((file: File | null) => {
|
||||
dispatch({ type: 'SET_PREVIEW_FILE', payload: file });
|
||||
}, []);
|
||||
if (file) {
|
||||
actions.setMode('viewer');
|
||||
}
|
||||
}, [actions]);
|
||||
|
||||
const setPageEditorFunctions = useCallback((functions: PageEditorFunctions | null) => {
|
||||
dispatch({ type: 'SET_PAGE_EDITOR_FUNCTIONS', payload: functions });
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { AutomationTool, AutomationConfig, AutomationMode } from '../../../types/automation';
|
||||
import { AUTOMATION_CONSTANTS } from '../../../constants/automation';
|
||||
@ -16,18 +16,18 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
|
||||
const [automationName, setAutomationName] = useState('');
|
||||
const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]);
|
||||
|
||||
const getToolName = (operation: string) => {
|
||||
const getToolName = useCallback((operation: string) => {
|
||||
const tool = toolRegistry?.[operation] as any;
|
||||
return tool?.name || t(`tools.${operation}.name`, operation);
|
||||
};
|
||||
}, [toolRegistry, t]);
|
||||
|
||||
const getToolDefaultParameters = (operation: string): Record<string, any> => {
|
||||
const getToolDefaultParameters = useCallback((operation: string): Record<string, any> => {
|
||||
const config = toolRegistry[operation]?.operationConfig;
|
||||
if (config?.defaultParameters) {
|
||||
return { ...config.defaultParameters };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
}, [toolRegistry]);
|
||||
|
||||
// Initialize based on mode and existing automation
|
||||
useEffect(() => {
|
||||
@ -58,7 +58,7 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
|
||||
}));
|
||||
setSelectedTools(defaultTools);
|
||||
}
|
||||
}, [mode, existingAutomation, selectedTools.length, t, getToolName]);
|
||||
}, [mode, existingAutomation, t, getToolName]);
|
||||
|
||||
const addTool = (operation: string) => {
|
||||
const newTool: AutomationTool = {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { AutomationConfig } from '../../../services/automationStorage';
|
||||
import { SuggestedAutomation } from '../../../types/automation';
|
||||
|
||||
export interface SavedAutomation extends AutomationConfig {}
|
||||
|
||||
@ -40,6 +41,26 @@ export function useSavedAutomations() {
|
||||
}
|
||||
}, [refreshAutomations]);
|
||||
|
||||
const copyFromSuggested = useCallback(async (suggestedAutomation: SuggestedAutomation) => {
|
||||
try {
|
||||
const { automationStorage } = await import('../../../services/automationStorage');
|
||||
|
||||
// Convert suggested automation to saved automation format
|
||||
const savedAutomation = {
|
||||
name: suggestedAutomation.name,
|
||||
description: suggestedAutomation.description,
|
||||
operations: suggestedAutomation.operations
|
||||
};
|
||||
|
||||
await automationStorage.saveAutomation(savedAutomation);
|
||||
// Refresh the list after saving
|
||||
refreshAutomations();
|
||||
} catch (err) {
|
||||
console.error('Error copying suggested automation:', err);
|
||||
throw err;
|
||||
}
|
||||
}, [refreshAutomations]);
|
||||
|
||||
// Load automations on mount
|
||||
useEffect(() => {
|
||||
loadSavedAutomations();
|
||||
@ -50,6 +71,7 @@ export function useSavedAutomations() {
|
||||
loading,
|
||||
error,
|
||||
refreshAutomations,
|
||||
deleteAutomation
|
||||
deleteAutomation,
|
||||
copyFromSuggested
|
||||
};
|
||||
}
|
||||
@ -17,9 +17,60 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
|
||||
const now = new Date().toISOString();
|
||||
return [
|
||||
{
|
||||
id: "compress-and-split",
|
||||
name: t("automation.suggested.compressAndSplit", "Compress & Split"),
|
||||
description: t("automation.suggested.compressAndSplitDesc", "Compress PDFs and split them by pages"),
|
||||
id: "secure-pdf-ingestion",
|
||||
name: t("automation.suggested.securePdfIngestion", "Secure PDF Ingestion"),
|
||||
description: t("automation.suggested.securePdfIngestionDesc", "Comprehensive PDF processing workflow that sanitizes documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimizes file size."),
|
||||
operations: [
|
||||
{
|
||||
operation: "sanitize",
|
||||
parameters: {
|
||||
removeJavaScript: true,
|
||||
removeEmbeddedFiles: true,
|
||||
removeXMPMetadata: true,
|
||||
removeMetadata: true,
|
||||
removeLinks: false,
|
||||
removeFonts: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
operation: "ocr",
|
||||
parameters: {
|
||||
languages: ['eng'],
|
||||
ocrType: 'skip-text',
|
||||
ocrRenderType: 'hocr',
|
||||
additionalOptions: ['clean', 'cleanFinal'],
|
||||
}
|
||||
},
|
||||
{
|
||||
operation: "convert",
|
||||
parameters: {
|
||||
fromExtension: 'pdf',
|
||||
toExtension: 'pdfa',
|
||||
pdfaOptions: {
|
||||
outputFormat: 'pdfa-1',
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
operation: "compress",
|
||||
parameters: {
|
||||
compressionLevel: 5,
|
||||
grayscale: false,
|
||||
expectedSize: '',
|
||||
compressionMethod: 'quality',
|
||||
fileSizeValue: '',
|
||||
fileSizeUnit: 'MB',
|
||||
}
|
||||
}
|
||||
],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
icon: SecurityIcon,
|
||||
},
|
||||
{
|
||||
id: "email-preparation",
|
||||
name: t("automation.suggested.emailPreparation", "Email Preparation"),
|
||||
description: t("automation.suggested.emailPreparationDesc", "Optimizes PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy."),
|
||||
operations: [
|
||||
{
|
||||
operation: "compress",
|
||||
@ -36,45 +87,37 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
|
||||
operation: "splitPdf",
|
||||
parameters: {
|
||||
mode: 'bySizeOrCount',
|
||||
pages: '1',
|
||||
hDiv: '2',
|
||||
vDiv: '2',
|
||||
pages: '',
|
||||
hDiv: '1',
|
||||
vDiv: '1',
|
||||
merge: false,
|
||||
splitType: 'pages',
|
||||
splitValue: '1',
|
||||
splitType: 'size',
|
||||
splitValue: '20MB',
|
||||
bookmarkLevel: '1',
|
||||
includeMetadata: false,
|
||||
allowDuplicates: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
operation: "sanitize",
|
||||
parameters: {
|
||||
removeJavaScript: false,
|
||||
removeEmbeddedFiles: false,
|
||||
removeXMPMetadata: true,
|
||||
removeMetadata: true,
|
||||
removeLinks: false,
|
||||
removeFonts: false,
|
||||
}
|
||||
}
|
||||
],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
icon: CompressIcon,
|
||||
},
|
||||
{
|
||||
id: "ocr-workflow",
|
||||
name: t("automation.suggested.ocrWorkflow", "OCR Processing"),
|
||||
description: t("automation.suggested.ocrWorkflowDesc", "Extract text from PDFs using OCR technology"),
|
||||
operations: [
|
||||
{
|
||||
operation: "ocr",
|
||||
parameters: {
|
||||
languages: ['eng'],
|
||||
ocrType: 'skip-text',
|
||||
ocrRenderType: 'hocr',
|
||||
additionalOptions: [],
|
||||
}
|
||||
}
|
||||
],
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
icon: TextFieldsIcon,
|
||||
},
|
||||
{
|
||||
id: "secure-workflow",
|
||||
name: t("automation.suggested.secureWorkflow", "Security Workflow"),
|
||||
description: t("automation.suggested.secureWorkflowDesc", "Sanitize PDFs and add password protection"),
|
||||
description: t("automation.suggested.secureWorkflowDesc", "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access."),
|
||||
operations: [
|
||||
{
|
||||
operation: "sanitize",
|
||||
@ -111,23 +154,32 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
|
||||
icon: SecurityIcon,
|
||||
},
|
||||
{
|
||||
id: "optimization-workflow",
|
||||
name: t("automation.suggested.optimizationWorkflow", "Optimization Workflow"),
|
||||
description: t("automation.suggested.optimizationWorkflowDesc", "Repair and compress PDFs for better performance"),
|
||||
id: "process-images",
|
||||
name: t("automation.suggested.processImages", "Process Images"),
|
||||
description: t("automation.suggested.processImagesDesc", "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."),
|
||||
operations: [
|
||||
{
|
||||
operation: "repair",
|
||||
parameters: {}
|
||||
operation: "convert",
|
||||
parameters: {
|
||||
fromExtension: 'image',
|
||||
toExtension: 'pdf',
|
||||
imageOptions: {
|
||||
colorType: 'color',
|
||||
dpi: 300,
|
||||
singleOrMultiple: 'multiple',
|
||||
fitOption: 'maintainAspectRatio',
|
||||
autoRotate: true,
|
||||
combineImages: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
operation: "compress",
|
||||
operation: "ocr",
|
||||
parameters: {
|
||||
compressionLevel: 7,
|
||||
grayscale: false,
|
||||
expectedSize: '',
|
||||
compressionMethod: 'quality',
|
||||
fileSizeValue: '',
|
||||
fileSizeUnit: 'MB',
|
||||
languages: ['eng'],
|
||||
ocrType: 'skip-text',
|
||||
ocrRenderType: 'hocr',
|
||||
additionalOptions: [],
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { useFileSelection } from "../contexts/FileContext";
|
||||
import { useNavigation } from "../contexts/NavigationContext";
|
||||
|
||||
import { createToolFlow } from "../components/tools/shared/createToolFlow";
|
||||
import { createFilesToolStep } from "../components/tools/shared/FilesToolStep";
|
||||
@ -13,20 +14,21 @@ import { useAutomateOperation } from "../hooks/tools/automate/useAutomateOperati
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry";
|
||||
import { useSavedAutomations } from "../hooks/tools/automate/useSavedAutomations";
|
||||
import { AutomationConfig, AutomationStepData, AutomationMode } from "../types/automation";
|
||||
import { AutomationConfig, AutomationStepData, AutomationMode, AutomationStep } from "../types/automation";
|
||||
import { AUTOMATION_STEPS } from "../constants/automation";
|
||||
|
||||
const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { selectedFiles } = useFileSelection();
|
||||
const { setMode } = useNavigation();
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<'selection' | 'creation' | 'run'>(AUTOMATION_STEPS.SELECTION);
|
||||
const [currentStep, setCurrentStep] = useState<AutomationStep>(AUTOMATION_STEPS.SELECTION);
|
||||
const [stepData, setStepData] = useState<AutomationStepData>({ step: AUTOMATION_STEPS.SELECTION });
|
||||
|
||||
const automateOperation = useAutomateOperation();
|
||||
const toolRegistry = useFlatToolRegistry();
|
||||
const hasResults = automateOperation.files.length > 0 || automateOperation.downloadUrl !== null;
|
||||
const { savedAutomations, deleteAutomation, refreshAutomations } = useSavedAutomations();
|
||||
const { savedAutomations, deleteAutomation, refreshAutomations, copyFromSuggested } = useSavedAutomations();
|
||||
|
||||
const handleStepChange = (data: AutomationStepData) => {
|
||||
// If navigating away from run step, reset automation results
|
||||
@ -62,7 +64,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
|
||||
const renderCurrentStep = () => {
|
||||
switch (currentStep) {
|
||||
case 'selection':
|
||||
case AUTOMATION_STEPS.SELECTION:
|
||||
return (
|
||||
<AutomationSelection
|
||||
savedAutomations={savedAutomations}
|
||||
@ -77,10 +79,18 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
onError?.(`Failed to delete automation: ${automation.name}`);
|
||||
}
|
||||
}}
|
||||
onCopyFromSuggested={async (suggestedAutomation) => {
|
||||
try {
|
||||
await copyFromSuggested(suggestedAutomation);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy suggested automation:', error);
|
||||
onError?.(`Failed to copy automation: ${suggestedAutomation.name}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'creation':
|
||||
case AUTOMATION_STEPS.CREATION:
|
||||
if (!stepData.mode) {
|
||||
console.error('Creation mode is undefined');
|
||||
return null;
|
||||
@ -98,7 +108,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
/>
|
||||
);
|
||||
|
||||
case 'run':
|
||||
case AUTOMATION_STEPS.RUN:
|
||||
if (!stepData.automation) {
|
||||
console.error('Automation config is undefined');
|
||||
return null;
|
||||
@ -171,7 +181,11 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
review: {
|
||||
isVisible: hasResults && currentStep === AUTOMATION_STEPS.RUN,
|
||||
operation: automateOperation,
|
||||
title: t('automate.reviewTitle', 'Automation Results')
|
||||
title: t('automate.reviewTitle', 'Automation Results'),
|
||||
onFileClick: (file: File) => {
|
||||
onPreviewFile?.(file);
|
||||
setMode('viewer');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -24,8 +24,10 @@ export interface AutomationTool {
|
||||
parameters?: Record<string, any>;
|
||||
}
|
||||
|
||||
export type AutomationStep = typeof import('../constants/automation').AUTOMATION_STEPS[keyof typeof import('../constants/automation').AUTOMATION_STEPS];
|
||||
|
||||
export interface AutomationStepData {
|
||||
step: 'selection' | 'creation' | 'run';
|
||||
step: AutomationStep;
|
||||
mode?: AutomationMode;
|
||||
automation?: AutomationConfig;
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ export const isValidMode = (mode: string): mode is ModeType => {
|
||||
return validModes.includes(mode as ModeType);
|
||||
};
|
||||
|
||||
export const getDefaultMode = (): ModeType => 'pageEditor';
|
||||
export const getDefaultMode = (): ModeType => 'fileEditor';
|
||||
|
||||
// Route parsing result
|
||||
export interface ToolRoute {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user