diff --git a/frontend/src/components/tools/addAttachments/AddAttachmentsSettings.tsx b/frontend/src/components/tools/addAttachments/AddAttachmentsSettings.tsx new file mode 100644 index 000000000..632ed71f1 --- /dev/null +++ b/frontend/src/components/tools/addAttachments/AddAttachmentsSettings.tsx @@ -0,0 +1,119 @@ +/** + * AddAttachmentsSettings - Shared settings component for both tool UI and automation + * + * Allows selecting files to attach to PDFs. + */ + +import { Stack, Text, Group, ActionIcon, Alert, ScrollArea, Button } from "@mantine/core"; +import { useTranslation } from "react-i18next"; +import { AddAttachmentsParameters } from "../../../hooks/tools/addAttachments/useAddAttachmentsParameters"; +import LocalIcon from "../../shared/LocalIcon"; + +interface AddAttachmentsSettingsProps { + parameters: AddAttachmentsParameters; + onParameterChange: (key: K, value: AddAttachmentsParameters[K]) => void; + disabled?: boolean; +} + +const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = false }: AddAttachmentsSettingsProps) => { + const { t } = useTranslation(); + + return ( + + + + {t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.")} + + + + + + {t("AddAttachmentsRequest.selectFiles", "Select Files to Attach")} + + { + const files = Array.from(e.target.files || []); + // Append to existing attachments instead of replacing + const newAttachments = [...(parameters.attachments || []), ...files]; + onParameterChange('attachments', newAttachments); + // Reset the input so the same file can be selected again + e.target.value = ''; + }} + disabled={disabled} + style={{ display: 'none' }} + id="attachments-input" + /> + + + + {parameters.attachments?.length > 0 && ( + + + {t("AddAttachmentsRequest.selectedFiles", "Selected Files")} ({parameters.attachments.length}) + + + + {parameters.attachments.map((file, index) => ( + + + {/* Filename (two-line clamp, wraps, no icon on the left) */} +
+
+ {file.name} +
+
+ + ({(file.size / 1024).toFixed(1)} KB) + + + { + const newAttachments = (parameters.attachments || []).filter((_, i) => i !== index); + onParameterChange('attachments', newAttachments); + }} + disabled={disabled} + > + + + + ))} + + + + )} + + ); +}; + +export default AddAttachmentsSettings; diff --git a/frontend/src/data/useTranslatedToolRegistry.tsx b/frontend/src/data/useTranslatedToolRegistry.tsx index 2a9108bbf..aba1835de 100644 --- a/frontend/src/data/useTranslatedToolRegistry.tsx +++ b/frontend/src/data/useTranslatedToolRegistry.tsx @@ -94,6 +94,7 @@ import CertSignAutomationSettings from "../components/tools/certSign/CertSignAut import CropAutomationSettings from "../components/tools/crop/CropAutomationSettings"; import RotateAutomationSettings from "../components/tools/rotate/RotateAutomationSettings"; import SplitAutomationSettings from "../components/tools/split/SplitAutomationSettings"; +import AddAttachmentsSettings from "../components/tools/addAttachments/AddAttachmentsSettings"; const showPlaceholderTools = true; // Show all tools; grey out unavailable ones in UI @@ -509,7 +510,7 @@ export function useFlatToolRegistry(): ToolRegistry { maxFiles: 1, endpoints: ["add-attachments"], operationConfig: addAttachmentsOperationConfig, - automationSettings: null, // TODO:: Needs settings + automationSettings: AddAttachmentsSettings, }, // Extraction diff --git a/frontend/src/tools/AddAttachments.tsx b/frontend/src/tools/AddAttachments.tsx index 2b090e331..933e78611 100644 --- a/frontend/src/tools/AddAttachments.tsx +++ b/frontend/src/tools/AddAttachments.tsx @@ -6,10 +6,8 @@ import { BaseToolProps, ToolComponent } from "../types/tool"; import { useEndpointEnabled } from "../hooks/useEndpointConfig"; import { useAddAttachmentsParameters } from "../hooks/tools/addAttachments/useAddAttachmentsParameters"; import { useAddAttachmentsOperation } from "../hooks/tools/addAttachments/useAddAttachmentsOperation"; -import { Stack, Text, Group, ActionIcon, Alert, ScrollArea, Button } from "@mantine/core"; -import LocalIcon from "../components/shared/LocalIcon"; import { useAccordionSteps } from "../hooks/tools/shared/useAccordionSteps"; -// Removed FitText for two-line wrapping with clamping +import AddAttachmentsSettings from "../components/tools/addAttachments/AddAttachmentsSettings"; const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const { t } = useTranslation(); @@ -67,99 +65,11 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) = onCollapsedClick: () => accordion.handleStepToggle(AddAttachmentsStep.ATTACHMENTS), isVisible: true, content: ( - - - - {t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.")} - - - - - - {t("AddAttachmentsRequest.selectFiles", "Select Files to Attach")} - - { - const files = Array.from(e.target.files || []); - // Append to existing attachments instead of replacing - const newAttachments = [...params.parameters.attachments, ...files]; - params.updateParameter('attachments', newAttachments); - // Reset the input so the same file can be selected again - e.target.value = ''; - }} - disabled={endpointLoading} - style={{ display: 'none' }} - id="attachments-input" - /> - - - - {params.parameters.attachments && params.parameters.attachments.length > 0 && ( - - - {t("AddAttachmentsRequest.selectedFiles", "Selected Files")} ({params.parameters.attachments.length}) - - - - {params.parameters.attachments.map((file, index) => ( - - - {/* Filename (two-line clamp, wraps, no icon on the left) */} -
-
- {file.name} -
-
- - ({(file.size / 1024).toFixed(1)} KB) - - - { - const newAttachments = params.parameters.attachments.filter((_, i) => i !== index); - params.updateParameter('attachments', newAttachments); - }} - > - - - - ))} - - - - )} - + ), });