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

AutomateFixes (#4281)

Browse Source 
can edit automations
drop down styles
drop down bug fixes

---------

Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
This commit is contained in:
ConnorYoh 2025-08-26 09:44:30 +01:00 committed by GitHub
parent 42d7664e25
commit fe9d2367d5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 264 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/shared/TextInput.tsx
View File

@ -31,6 +31,8 @@ export interface TextInputProps {
readOnly?: boolean; readOnly?: boolean;
/** Accessibility label */ /** Accessibility label */
'aria-label'?: string; 'aria-label'?: string;
/** Focus event handler */
onFocus?: () => void;
} }
export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
@ -46,6 +48,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
disabled = false, disabled = false,
readOnly = false, readOnly = false,
'aria-label': ariaLabel, 'aria-label': ariaLabel,
onFocus,
...props ...props
}, ref) => { }, ref) => {
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
@ -63,7 +66,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
return ( return (
<div className={`${styles.container} ${className}`} style={style}> <div className={`${styles.container} ${className}`} style={style}>
{icon && ( {icon && (
<span <span
className={styles.icon} className={styles.icon}
style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }} style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
> >
@ -81,6 +84,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
disabled={disabled} disabled={disabled}
readOnly={readOnly} readOnly={readOnly}
aria-label={ariaLabel} aria-label={ariaLabel}
onFocus={onFocus}
style={{ style={{
backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF', backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF',
color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382', color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382',

27
frontend/src/components/tools/automate/AutomationCreation.tsx
View File

@ -98,7 +98,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
const saveAutomation = async () => { const saveAutomation = async () => {
if (!canSaveAutomation()) return; if (!canSaveAutomation()) return;
const automation = { const automationData = {
name: automationName.trim(), name: automationName.trim(),
description: '', description: '',
operations: selectedTools.map(tool => ({ operations: selectedTools.map(tool => ({
@ -109,7 +109,30 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
try { try {
const { automationStorage } = await import('../../../services/automationStorage'); 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); onComplete(savedAutomation);
} catch (error) { } catch (error) {
console.error('Error saving automation:', error); console.error('Error saving automation:', error);

116
frontend/src/components/tools/automate/ToolList.tsx
View File

@ -1,14 +1,13 @@
import React from 'react'; import React from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Text, Stack, Group, ActionIcon } from '@mantine/core'; import { Text, Stack, Group, ActionIcon } from "@mantine/core";
import DeleteIcon from '@mui/icons-material/Delete'; import SettingsIcon from "@mui/icons-material/Settings";
import SettingsIcon from '@mui/icons-material/Settings'; import CloseIcon from "@mui/icons-material/Close";
import CloseIcon from '@mui/icons-material/Close'; import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
import AddCircleOutline from '@mui/icons-material/AddCircleOutline'; import { AutomationTool } from "../../../types/automation";
import { AutomationTool } from '../../../types/automation'; import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
import { ToolRegistryEntry } from '../../../data/toolsTaxonomy'; import ToolSelector from "./ToolSelector";
import ToolSelector from './ToolSelector'; import AutomationEntry from "./AutomationEntry";
import AutomationEntry from './AutomationEntry';
interface ToolListProps { interface ToolListProps {
tools: AutomationTool[]; tools: AutomationTool[];
@ -29,35 +28,39 @@ export default function ToolList({
onToolConfigure, onToolConfigure,
onToolAdd, onToolAdd,
getToolName, getToolName,
getToolDefaultParameters getToolDefaultParameters,
}: ToolListProps) { }: ToolListProps) {
const { t } = useTranslation(); const { t } = useTranslation();
const handleToolSelect = (index: number, newOperation: string) => { const handleToolSelect = (index: number, newOperation: string) => {
const defaultParams = getToolDefaultParameters(newOperation); const defaultParams = getToolDefaultParameters(newOperation);
onToolUpdate(index, { onToolUpdate(index, {
operation: newOperation, operation: newOperation,
name: getToolName(newOperation), name: getToolName(newOperation),
configured: false, configured: false,
parameters: defaultParams parameters: defaultParams,
}); });
}; };
return ( return (
<div> <div>
<Text size="sm" fw={500} mb="xs" style={{ color: 'var(--mantine-color-text)' }}> <Text size="sm" fw={500} mb="xs" style={{ color: "var(--mantine-color-text)" }}>
{t('automate.creation.tools.selected', 'Selected Tools')} ({tools.length}) {t("automate.creation.tools.selected", "Selected Tools")} ({tools.length})
</Text> </Text>
<Stack gap="0"> <Stack gap="0">
{tools.map((tool, index) => ( {tools.map((tool, index) => (
<React.Fragment key={tool.id}> <React.Fragment key={tool.id}>
<div <div
style={{ style={{
border: '1px solid var(--mantine-color-gray-2)', border: "1px solid var(--mantine-color-gray-2)",
borderRadius: 'var(--mantine-radius-sm)', borderRadius: tool.operation && !tool.configured
position: 'relative', ? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
padding: 'var(--mantine-spacing-xs)' : "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 */} {/* Delete X in top right */}
@ -65,26 +68,26 @@ export default function ToolList({
variant="subtle" variant="subtle"
size="xs" size="xs"
onClick={() => onToolRemove(index)} onClick={() => onToolRemove(index)}
title={t('automate.creation.tools.remove', 'Remove tool')} title={t("automate.creation.tools.remove", "Remove tool")}
style={{ style={{
position: 'absolute', position: "absolute",
top: '4px', top: "4px",
right: '4px', right: "4px",
zIndex: 1, zIndex: 1,
color: 'var(--mantine-color-gray-6)' color: "var(--mantine-color-gray-6)",
}} }}
> >
<CloseIcon style={{ fontSize: 12 }} /> <CloseIcon style={{ fontSize: 16 }} />
</ActionIcon> </ActionIcon>
<div style={{ paddingRight: '1.25rem' }}> <div style={{ paddingRight: "1.25rem" }}>
{/* Tool Selection Dropdown with inline settings cog */} {/* Tool Selection Dropdown with inline settings cog */}
<Group gap="xs" align="center" wrap="nowrap"> <Group gap="xs" align="center" wrap="nowrap">
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1, minWidth: 0 }}>
<ToolSelector <ToolSelector
key={`tool-selector-${tool.id}`} key={`tool-selector-${tool.id}`}
onSelect={(newOperation) => handleToolSelect(index, newOperation)} onSelect={(newOperation) => handleToolSelect(index, newOperation)}
excludeTools={['automate']} excludeTools={["automate"]}
toolRegistry={toolRegistry} toolRegistry={toolRegistry}
selectedValue={tool.operation} selectedValue={tool.operation}
placeholder={tool.name} placeholder={tool.name}
@ -97,26 +100,37 @@ export default function ToolList({
variant="subtle" variant="subtle"
size="sm" size="sm"
onClick={() => onToolConfigure(index)} onClick={() => onToolConfigure(index)}
title={t('automate.creation.tools.configure', 'Configure tool')} title={t("automate.creation.tools.configure", "Configure tool")}
style={{ color: 'var(--mantine-color-gray-6)' }} style={{ color: "var(--mantine-color-gray-6)" }}
> >
<SettingsIcon style={{ fontSize: 16 }} /> <SettingsIcon style={{ fontSize: 16 }} />
</ActionIcon> </ActionIcon>
)} )}
</Group> </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>
</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 && ( {index < tools.length - 1 && (
<div style={{ textAlign: 'center', padding: '8px 0' }}> <div style={{ textAlign: "center", padding: "8px 0" }}>
<Text size="xs" c="dimmed">↓</Text> <Text size="xs" c="dimmed">
↓
</Text>
</div> </div>
)} )}
</React.Fragment> </React.Fragment>
@ -124,19 +138,23 @@ export default function ToolList({
{/* Arrow before Add Tool Button */} {/* Arrow before Add Tool Button */}
{tools.length > 0 && ( {tools.length > 0 && (
<div style={{ textAlign: 'center', padding: '8px 0' }}> <div style={{ textAlign: "center", padding: "8px 0" }}>
<Text size="xs" c="dimmed">↓</Text> <Text size="xs" c="dimmed">
↓
</Text>
</div> </div>
)} )}
{/* Add Tool Button */} {/* Add Tool Button */}
<div style={{ <div
border: '1px solid var(--mantine-color-gray-2)', style={{
borderRadius: 'var(--mantine-radius-sm)', border: "1px solid var(--mantine-color-gray-2)",
overflow: 'hidden' borderRadius: "var(--mantine-radius-sm)",
}}> overflow: "hidden",
}}
>
<AutomationEntry <AutomationEntry
title={t('automate.creation.tools.addTool', 'Add Tool')} title={t("automate.creation.tools.addTool", "Add Tool")}
badgeIcon={AddCircleOutline} badgeIcon={AddCircleOutline}
operations={[]} operations={[]}
onClick={onToolAdd} onClick={onToolAdd}
@ -146,4 +164,4 @@ export default function ToolList({
</Stack> </Stack>
</div> </div>
); );
} }

168
frontend/src/components/tools/automate/ToolSelector.tsx
View File

@ -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 { 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 { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
import { useToolSections } from '../../../hooks/useToolSections'; import { useToolSections } from '../../../hooks/useToolSections';
import { renderToolButtons } from '../shared/renderToolButtons'; import { renderToolButtons } from '../shared/renderToolButtons';
import ToolSearch from '../toolPicker/ToolSearch'; import ToolSearch from '../toolPicker/ToolSearch';
import ToolButton from '../toolPicker/ToolButton';
interface ToolSelectorProps { interface ToolSelectorProps {
onSelect: (toolKey: string) => void; onSelect: (toolKey: string) => void;
@ -24,6 +25,8 @@ export default function ToolSelector({
const { t } = useTranslation(); const { t } = useTranslation();
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [shouldAutoFocus, setShouldAutoFocus] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
// Filter out excluded tools (like 'automate' itself) // Filter out excluded tools (like 'automate' itself)
const baseFilteredTools = useMemo(() => { const baseFilteredTools = useMemo(() => {
@ -66,13 +69,21 @@ export default function ToolSelector({
} }
if (!sections || sections.length === 0) { 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 []; return [];
} }
// Find the "all" section which contains all tools without duplicates // Find the "all" section which contains all tools without duplicates
const allSection = sections.find(s => (s as any).key === 'all'); const allSection = sections.find(s => (s as any).key === 'all');
return allSection?.subcategories || []; return allSection?.subcategories || [];
}, [isSearching, searchGroups, sections]); }, [isSearching, searchGroups, sections, baseFilteredTools]);
const handleToolSelect = useCallback((toolKey: string) => { const handleToolSelect = useCallback((toolKey: string) => {
onSelect(toolKey); onSelect(toolKey);
@ -88,8 +99,25 @@ export default function ToolSelector({
const handleSearchFocus = () => { const handleSearchFocus = () => {
setOpened(true); 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) => { const handleSearchChange = (value: string) => {
setSearchTerm(value); setSearchTerm(value);
if (!opened) { 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 // Get display value for selected tool
const getDisplayValue = () => { const getDisplayValue = () => {
if (selectedValue && toolRegistry[selectedValue]) { if (selectedValue && toolRegistry[selectedValue]) {
@ -106,77 +142,63 @@ export default function ToolSelector({
}; };
return ( return (
<div style={{ position: 'relative', width: '100%' }}> <div ref={containerRef} className='rounded-xl'>
<Menu {/* Always show the target - either selected tool or search input */}
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>
<Menu.Dropdown p={0} style={{ minWidth: '16rem' }}> {selectedValue && toolRegistry[selectedValue] && !opened ? (
<ScrollArea h={350}> // Show selected tool in AutomationEntry style when tool is selected and dropdown closed
<Stack gap="sm" p="sm"> <div onClick={handleSearchFocus} style={{ cursor: 'pointer',
{displayGroups.length === 0 ? ( borderRadius: "var(--mantine-radius-lg)" }}>
<Text size="sm" c="dimmed" ta="center" p="md"> <ToolButton id='tool' tool={toolRegistry[selectedValue]} isSelected={false}
{isSearching onSelect={()=>{}} rounded={true}></ToolButton>
? t('tools.noSearchResults', 'No tools found') </div>
: t('tools.noTools', 'No tools available') ) : (
} // Show search input when no tool selected OR when dropdown is opened
</Text> <ToolSearch
) : ( value={searchTerm}
renderedTools onChange={handleSearchChange}
)} toolRegistry={filteredToolRegistry}
</Stack> mode="unstyled"
</ScrollArea> placeholder={getDisplayValue()}
</Menu.Dropdown> hideIcon={true}
</Menu> 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> </div>
); );
} }

15
frontend/src/components/tools/toolPicker/ToolButton.tsx
View File

@ -9,9 +9,10 @@ interface ToolButtonProps {
tool: ToolRegistryEntry; tool: ToolRegistryEntry;
isSelected: boolean; isSelected: boolean;
onSelect: (id: string) => void; onSelect: (id: string) => void;
rounded?: boolean;
} }
const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => { const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, rounded = false }) => {
const handleClick = (id: string) => { const handleClick = (id: string) => {
if (tool.link) { if (tool.link) {
// Open external link in new tab // Open external link in new tab
@ -33,7 +34,17 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
fullWidth fullWidth
justify="flex-start" justify="flex-start"
className="tool-button" className="tool-button"
styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }} styles={{
root: {
borderRadius: rounded ? 'var(--mantine-radius-lg)' : 0,
color: "var(--tools-text-and-icon-color)",
...(rounded && {
'&:hover': {
borderRadius: 'var(--mantine-radius-lg)',
}
})
}
}}
> >
<FitText <FitText
text={tool.name} text={tool.name}

2
frontend/src/components/tools/toolPicker/ToolPicker.css
View File

@ -76,4 +76,4 @@
.search-input-container { .search-input-container {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

78
frontend/src/components/tools/toolPicker/ToolSearch.tsx
View File

@ -4,18 +4,19 @@ import { useTranslation } from "react-i18next";
import LocalIcon from '../../shared/LocalIcon'; import LocalIcon from '../../shared/LocalIcon';
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy"; import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
import { TextInput } from "../../shared/TextInput"; import { TextInput } from "../../shared/TextInput";
import './ToolPicker.css'; import "./ToolPicker.css";
interface ToolSearchProps { interface ToolSearchProps {
value: string; value: string;
onChange: (value: string) => void; onChange: (value: string) => void;
toolRegistry: Readonly<Record<string, ToolRegistryEntry>>; toolRegistry: Readonly<Record<string, ToolRegistryEntry>>;
onToolSelect?: (toolId: string) => void; onToolSelect?: (toolId: string) => void;
mode: 'filter' | 'dropdown'; mode: "filter" | "dropdown" | "unstyled";
selectedToolKey?: string | null; selectedToolKey?: string | null;
placeholder?: string; placeholder?: string;
hideIcon?: boolean; hideIcon?: boolean;
onFocus?: () => void; onFocus?: () => void;
autoFocus?: boolean;
} }
const ToolSearch = ({ const ToolSearch = ({
@ -23,11 +24,12 @@ const ToolSearch = ({
onChange, onChange,
toolRegistry, toolRegistry,
onToolSelect, onToolSelect,
mode = 'filter', mode = "filter",
selectedToolKey, selectedToolKey,
placeholder, placeholder,
hideIcon = false, hideIcon = false,
onFocus onFocus,
autoFocus = false,
}: ToolSearchProps) => { }: ToolSearchProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [dropdownOpen, setDropdownOpen] = useState(false); const [dropdownOpen, setDropdownOpen] = useState(false);
@ -38,9 +40,10 @@ const ToolSearch = ({
if (!value.trim()) return []; if (!value.trim()) return [];
return Object.entries(toolRegistry) return Object.entries(toolRegistry)
.filter(([id, tool]) => { .filter(([id, tool]) => {
if (mode === 'dropdown' && id === selectedToolKey) return false; if (mode === "dropdown" && id === selectedToolKey) return false;
return tool.name.toLowerCase().includes(value.toLowerCase()) || return (
tool.description.toLowerCase().includes(value.toLowerCase()); tool.name.toLowerCase().includes(value.toLowerCase()) || tool.description.toLowerCase().includes(value.toLowerCase())
);
}) })
.slice(0, 6) .slice(0, 6)
.map(([id, tool]) => ({ id, tool })); .map(([id, tool]) => ({ id, tool }));
@ -48,7 +51,7 @@ const ToolSearch = ({
const handleSearchChange = (searchValue: string) => { const handleSearchChange = (searchValue: string) => {
onChange(searchValue); onChange(searchValue);
if (mode === 'dropdown') { if (mode === "dropdown") {
setDropdownOpen(searchValue.trim().length > 0 && filteredTools.length > 0); setDropdownOpen(searchValue.trim().length > 0 && filteredTools.length > 0);
} }
}; };
@ -64,12 +67,20 @@ const ToolSearch = ({
setDropdownOpen(false); setDropdownOpen(false);
} }
}; };
document.addEventListener('mousedown', handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener('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 = ( const searchInput = (
<div className="search-input-container">
<TextInput <TextInput
ref={searchRef} ref={searchRef}
value={value} value={value}
@ -77,36 +88,39 @@ const ToolSearch = ({
placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")} placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />} icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
autoComplete="off" 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 searchInput;
} }
return ( return (
<div ref={searchRef} style={{ position: 'relative' }}> <div ref={searchRef} style={{ position: "relative" }}>
{searchInput} {searchInput}
{dropdownOpen && filteredTools.length > 0 && ( {dropdownOpen && filteredTools.length > 0 && (
<div <div
ref={dropdownRef} ref={dropdownRef}
style={{ style={{
position: 'absolute', position: "absolute",
top: '100%', top: "100%",
left: 0, left: 0,
right: 0, right: 0,
zIndex: 1000, zIndex: 1000,
backgroundColor: 'var(--mantine-color-body)', backgroundColor: "var(--mantine-color-body)",
border: '1px solid var(--mantine-color-gray-3)', border: "1px solid var(--mantine-color-gray-3)",
borderRadius: '6px', borderRadius: "6px",
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
maxHeight: '300px', maxHeight: "300px",
overflowY: 'auto' overflowY: "auto",
}} }}
> >
<Stack gap="xs" style={{ padding: '8px' }}> <Stack gap="xs" style={{ padding: "8px" }}>
{filteredTools.map(({ id, tool }) => ( {filteredTools.map(({ id, tool }) => (
<Button <Button
key={id} key={id}
@ -115,22 +129,18 @@ const ToolSearch = ({
onToolSelect && onToolSelect(id); onToolSelect && onToolSelect(id);
setDropdownOpen(false); setDropdownOpen(false);
}} }}
leftSection={ leftSection={<div style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}
<div style={{ color: 'var(--tools-text-and-icon-color)' }}>
{tool.icon}
</div>
}
fullWidth fullWidth
justify="flex-start" justify="flex-start"
style={{ style={{
borderRadius: '6px', borderRadius: "6px",
color: 'var(--tools-text-and-icon-color)', color: "var(--tools-text-and-icon-color)",
padding: '8px 12px' padding: "8px 12px",
}} }}
> >
<div style={{ textAlign: 'left' }}> <div style={{ textAlign: "left" }}>
<div style={{ fontWeight: 500 }}>{tool.name}</div> <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} {tool.description}
</Text> </Text>
</div> </div>

12
frontend/src/hooks/tools/automate/useAutomationForm.ts
View File

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { AutomationTool, AutomationConfig, AutomationMode } from '../../../types/automation'; import { AutomationTool, AutomationConfig, AutomationMode } from '../../../types/automation';
import { AUTOMATION_CONSTANTS } from '../../../constants/automation'; import { AUTOMATION_CONSTANTS } from '../../../constants/automation';
@ -16,18 +16,18 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
const [automationName, setAutomationName] = useState(''); const [automationName, setAutomationName] = useState('');
const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]); const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]);
const getToolName = (operation: string) => { const getToolName = useCallback((operation: string) => {
const tool = toolRegistry?.[operation] as any; const tool = toolRegistry?.[operation] as any;
return tool?.name || t(`tools.${operation}.name`, operation); 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; const config = toolRegistry[operation]?.operationConfig;
if (config?.defaultParameters) { if (config?.defaultParameters) {
return { ...config.defaultParameters }; return { ...config.defaultParameters };
} }
return {}; return {};
}; }, [toolRegistry]);
// Initialize based on mode and existing automation // Initialize based on mode and existing automation
useEffect(() => { useEffect(() => {
@ -58,7 +58,7 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
})); }));
setSelectedTools(defaultTools); setSelectedTools(defaultTools);
} }
}, [mode, existingAutomation, selectedTools.length, t, getToolName]); }, [mode, existingAutomation, t, getToolName]);
const addTool = (operation: string) => { const addTool = (operation: string) => {
const newTool: AutomationTool = { const newTool: AutomationTool = {

10
frontend/src/tools/Automate.tsx
View File

@ -14,7 +14,7 @@ import { useAutomateOperation } from "../hooks/tools/automate/useAutomateOperati
import { BaseToolProps } from "../types/tool"; import { BaseToolProps } from "../types/tool";
import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry"; import { useFlatToolRegistry } from "../data/useTranslatedToolRegistry";
import { useSavedAutomations } from "../hooks/tools/automate/useSavedAutomations"; 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"; import { AUTOMATION_STEPS } from "../constants/automation";
const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
@ -22,7 +22,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { selectedFiles } = useFileSelection(); const { selectedFiles } = useFileSelection();
const { setMode } = useNavigation(); 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 [stepData, setStepData] = useState<AutomationStepData>({ step: AUTOMATION_STEPS.SELECTION });
const automateOperation = useAutomateOperation(); const automateOperation = useAutomateOperation();
@ -64,7 +64,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const renderCurrentStep = () => { const renderCurrentStep = () => {
switch (currentStep) { switch (currentStep) {
case 'selection': case AUTOMATION_STEPS.SELECTION:
return ( return (
<AutomationSelection <AutomationSelection
savedAutomations={savedAutomations} savedAutomations={savedAutomations}
@ -82,7 +82,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
/> />
); );
case 'creation': case AUTOMATION_STEPS.CREATION:
if (!stepData.mode) { if (!stepData.mode) {
console.error('Creation mode is undefined'); console.error('Creation mode is undefined');
return null; return null;
@ -100,7 +100,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
/> />
); );
case 'run': case AUTOMATION_STEPS.RUN:
if (!stepData.automation) { if (!stepData.automation) {
console.error('Automation config is undefined'); console.error('Automation config is undefined');
return null; return null;

4
frontend/src/types/automation.ts
View File

@ -24,8 +24,10 @@ export interface AutomationTool {
parameters?: Record<string, any>; parameters?: Record<string, any>;
} }
export type AutomationStep = typeof import('../constants/automation').AUTOMATION_STEPS[keyof typeof import('../constants/automation').AUTOMATION_STEPS];
export interface AutomationStepData { export interface AutomationStepData {
step: 'selection' | 'creation' | 'run'; step: AutomationStep;
mode?: AutomationMode; mode?: AutomationMode;
automation?: AutomationConfig; automation?: AutomationConfig;
} }