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'; interface ToolListProps { tools: AutomationTool[]; toolRegistry: Record; onToolUpdate: (index: number, updates: Partial) => void; onToolRemove: (index: number) => void; onToolConfigure: (index: number) => void; onToolAdd: () => void; getToolName: (operation: string) => string; getToolDefaultParameters: (operation: string) => Record; } export default function ToolList({ tools, toolRegistry, onToolUpdate, onToolRemove, onToolConfigure, onToolAdd, getToolName, getToolDefaultParameters }: ToolListProps) { const { t } = useTranslation(); const handleToolSelect = (index: number, newOperation: string) => { const defaultParams = getToolDefaultParameters(newOperation); onToolUpdate(index, { operation: newOperation, name: getToolName(newOperation), configured: false, parameters: defaultParams }); }; return (
{t('automate.creation.tools.selected', 'Selected Tools')} ({tools.length}) {tools.map((tool, index) => (
{/* Delete X in top right */} onToolRemove(index)} title={t('automate.creation.tools.remove', 'Remove tool')} style={{ position: 'absolute', top: '4px', right: '4px', zIndex: 1, color: 'var(--mantine-color-gray-6)' }} >
{/* Tool Selection Dropdown with inline settings cog */}
handleToolSelect(index, newOperation)} excludeTools={['automate']} toolRegistry={toolRegistry} selectedValue={tool.operation} placeholder={tool.name} />
{/* Settings cog - only show if tool is selected, aligned right */} {tool.operation && ( onToolConfigure(index)} title={t('automate.creation.tools.configure', 'Configure tool')} style={{ color: 'var(--mantine-color-gray-6)' }} > )}
{/* Configuration status underneath */} {tool.operation && !tool.configured && ( {t('automate.creation.tools.notConfigured', "! Not Configured")} )}
{index < tools.length - 1 && (
)}
))} {/* Arrow before Add Tool Button */} {tools.length > 0 && (
)} {/* Add Tool Button */}
); }