/** * Add Tool Dialog Component * @description Dialog for adding and configuring tools (API/MCP) */ import { useState, useRef, useEffect } from 'react'; import { ChevronDown } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose, } from './dialog'; import type { Tool } from '@/types'; interface AddToolDialogProps { open: boolean; onOpenChange: (open: boolean) => void; onAddTool?: (tool: Omit) => void; onUpdateTool?: (toolId: string, tool: Omit) => void; editingTool?: Tool | null; } // Tool options for the dropdown with their display names and colors const toolOptions = [ { name: 'Slack', displayName: 'Slack', color: '#ff0080' }, { name: 'GitHub', displayName: 'GitHub', color: '#8fbc24' }, { name: 'Search', displayName: 'Search', color: '#0033FF' }, { name: 'Weather', displayName: 'Weather', color: '#03f' }, { name: 'Calculator', displayName: 'Calculator', color: '#03f' }, { name: 'Translator', displayName: 'Translator', color: '#03f' }, ]; /** * AddToolDialog component * @description Modal dialog for adding tools with API/MCP selection * @param open - Whether the dialog is open * @param onOpenChange - Callback when dialog open state changes */ export function AddToolDialog({ open, onOpenChange, onAddTool, onUpdateTool, editingTool }: AddToolDialogProps) { const [selectedType, setSelectedType] = useState<'API' | 'MCP'>('API'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [selectedTool, setSelectedTool] = useState(null); const dropdownRef = useRef(null); const selectRef = useRef(null); // Initialize form when editing a tool useEffect(() => { if (editingTool && open) { setSelectedType(editingTool.type); const toolOption = toolOptions.find((opt) => opt.displayName === editingTool.name); if (toolOption) { setSelectedTool(toolOption); } } else if (!editingTool && open) { // Reset when adding new tool setSelectedType('API'); setSelectedTool(null); } }, [editingTool, open]); // Close dropdown when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && selectRef.current && !dropdownRef.current.contains(event.target as Node) && !selectRef.current.contains(event.target as Node) ) { setIsDropdownOpen(false); } }; if (isDropdownOpen) { document.addEventListener('mousedown', handleClickOutside); } return () => { document.removeEventListener('mousedown', handleClickOutside); }; }, [isDropdownOpen]); // Reset state when dialog closes useEffect(() => { if (!open) { setIsDropdownOpen(false); setSelectedTool(null); } }, [open]); const handleToolSelect = (tool: typeof toolOptions[0]) => { setSelectedTool(tool); setIsDropdownOpen(false); }; const handleSave = () => { if (selectedTool) { const toolData = { name: selectedTool.displayName, type: selectedType, color: selectedTool.color, }; if (editingTool && onUpdateTool) { // Update existing tool onUpdateTool(editingTool.id, toolData); } else if (onAddTool) { // Add new tool onAddTool(toolData); } // Reset state setSelectedTool(null); setIsDropdownOpen(false); onOpenChange(false); } }; return ( ); }