Superglue MCP

'use client'; import { useTools } from '@/src/app/tools-context'; import { Button } from '@/src/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/src/components/ui/dialog'; import { Input } from '@/src/components/ui/input'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/src/components/ui/tabs'; import { Textarea } from '@/src/components/ui/textarea'; import { cn } from '@/src/lib/general-utils'; import { ExecutionStep } from '@superglue/shared'; import { AlertTriangle, Loader2, WandSparkles } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useGenerateStepConfig } from '../hooks/use-generate-step-config'; import { IntegrationSelector } from '../shared/IntegrationSelector'; interface AddStepDialogProps { open: boolean; onOpenChange: (open: boolean) => void; onConfirm: (stepId: string, instruction: string, integrationId?: string) => void; onConfirmTool?: (steps: ExecutionStep[]) => void; onConfirmGenerate?: (step: ExecutionStep) => void; existingStepIds: string[]; stepInput?: Record<string, any>; currentToolId?: string; } export function AddStepDialog({ open, onOpenChange, onConfirm, onConfirmTool, onConfirmGenerate, existingStepIds, stepInput, currentToolId }: AddStepDialogProps) { const [stepId, setStepId] = useState(''); const [instruction, setInstruction] = useState(''); const [selectedIntegrationId, setSelectedIntegrationId] = useState<string>(''); const [error, setError] = useState(''); const [activeTab, setActiveTab] = useState<'scratch' | 'tool'>('scratch'); const [selectedToolId, setSelectedToolId] = useState<string | null>(null); const [searchQuery, setSearchQuery] = useState(''); const { tools, isInitiallyLoading, isRefreshing, refreshTools } = useTools(); const { generateConfig, isGenerating, error: generateError } = useGenerateStepConfig(); useEffect(() => { refreshTools(); }, []); useEffect(() => { if (open) { setStepId(''); setInstruction(''); setSelectedIntegrationId(''); setError(''); } }, [open]); const handleOpenChange = (newOpen: boolean) => { if (!newOpen) { setError(''); setInstruction(''); setSelectedIntegrationId(''); setSelectedToolId(null); setActiveTab('scratch'); setSearchQuery(''); } onOpenChange(newOpen); }; const filteredTools = tools.filter(tool => { // Exclude tools with no steps if (!tool.steps || tool.steps.length === 0) return false; // Exclude the current tool if (currentToolId && tool.id === currentToolId) return false; if (!searchQuery.trim()) return true; const query = searchQuery.toLowerCase(); return ( tool.id?.toLowerCase().includes(query) || tool.instruction?.toLowerCase().includes(query) ); }); const handleConfirmScratch = () => { const trimmedId = stepId.trim(); if (!trimmedId) { setError('Step ID is required'); return; } if (existingStepIds.includes(trimmedId)) { setError(`Step with ID "${trimmedId}" already exists`); return; } if (!selectedIntegrationId) { setError('Please select an integration'); return; } onConfirm(trimmedId, instruction.trim(), selectedIntegrationId); setError(''); }; const handleConfirmTool = () => { if (!selectedToolId) { setError('Please select a tool'); return; } const selectedTool = tools.find(t => t.id === selectedToolId); if (!selectedTool || !selectedTool.steps) { setError('Selected tool has no steps'); return; } // Rename imported steps if they collide with existing step IDs const usedIds = new Set(existingStepIds); const renamedSteps = selectedTool.steps.map(step => { let newId = step.id; if (usedIds.has(newId)) { let suffix = 2; while (usedIds.has(`${step.id}${suffix}`)) { suffix++; } newId = `${step.id}${suffix}`; } usedIds.add(newId); if (newId !== step.id) { return { ...step, id: newId, apiConfig: step.apiConfig ? { ...step.apiConfig, id: newId } : undefined }; } return step; }); if (onConfirmTool) { onConfirmTool(renamedSteps); } setError(''); setSelectedToolId(null); }; const handleConfirmGenerate = async () => { const trimmedId = stepId.trim(); const trimmedInstruction = instruction.trim(); if (!trimmedId) { setError('Step ID is required'); return; } if (existingStepIds.includes(trimmedId)) { setError(`Step with ID "${trimmedId}" already exists`); return; } if (!selectedIntegrationId) { setError('Please select an integration'); return; } if (!trimmedInstruction) { setError('Instruction is required to automatically generate step'); return; } try { setError(''); const result = await generateConfig({ currentStepConfig: { id: trimmedId, instruction: trimmedInstruction }, stepInput: stepInput, integrationId: selectedIntegrationId }); const newStep: ExecutionStep = { id: trimmedId, integrationId: selectedIntegrationId, apiConfig: { ...result.config, id: trimmedId, instruction: trimmedInstruction }, loopSelector: result.dataSelector }; if (onConfirmGenerate) { onConfirmGenerate(newStep); } handleOpenChange(false); } catch (err: any) { setError(err.message || 'Failed to generate step configuration'); } }; return ( <Dialog open={open} onOpenChange={handleOpenChange}> <DialogContent className="max-w-2xl"> <DialogHeader> <DialogTitle>Add</DialogTitle> <DialogDescription> Create a new step from scratch or import steps from an existing tool </DialogDescription> </DialogHeader> <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'scratch' | 'tool')} className="overflow-hidden w-full"> <TabsList className="grid w-full grid-cols-2"> <TabsTrigger value="scratch">Add new step</TabsTrigger> <TabsTrigger value="tool">Import tool</TabsTrigger> </TabsList> <TabsContent value="scratch" className="space-y-4 py-4"> <div className="space-y-2"> <label htmlFor="step-id" className="text-sm font-medium"> Step ID </label> <Input id="step-id" value={stepId} onChange={(e) => { setStepId(e.target.value); setError(''); }} placeholder="e.g., fetch_users" /> </div> <div className="space-y-2"> <label className="text-sm font-medium"> Integration </label> <IntegrationSelector value={selectedIntegrationId} onValueChange={(value) => { setSelectedIntegrationId(value); setError(''); }} /> </div> <div className="space-y-2"> <label htmlFor="step-instruction" className="text-sm font-medium"> Instruction </label> <Textarea id="step-instruction" value={instruction} onChange={(e) => { setInstruction(e.target.value); setError(''); }} placeholder="e.g., Fetch all users from the API" rows={4} className="resize-none focus:ring-inset" /> </div> {error && ( <div className="flex items-center gap-2 rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300"> <AlertTriangle className="h-4 w-4 flex-shrink-0" /> <span>{error}</span> </div> )} </TabsContent> <TabsContent value="tool" className="space-y-4 py-4"> {isInitiallyLoading || isRefreshing ? ( <div className="flex items-center justify-center py-8"> <Loader2 className="h-6 w-6 animate-spin" /> </div> ) : tools.length === 0 ? ( <div className="text-center py-8 text-muted-foreground"> No tools found </div> ) : ( <div className="space-y-3"> <div className="space-y-2"> <Input placeholder="Search by ID or instruction..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full" /> </div> <div className="border rounded-lg max-h-[400px] overflow-y-auto overflow-x-hidden"> {filteredTools.length === 0 ? ( <div className="text-center py-8 text-muted-foreground"> No tools match your search </div> ) : ( filteredTools.map((tool) => ( <button key={tool.id} onClick={() => { setSelectedToolId(tool.id); setError(''); }} className={cn( "w-full text-left px-4 py-3 border-b last:border-b-0 hover:bg-accent transition-colors overflow-hidden", selectedToolId === tool.id && "bg-accent" )} > <div className="font-medium truncate">{tool.id}</div> {tool.instruction && ( <div className="text-sm text-muted-foreground truncate mt-1"> {tool.instruction} </div> )} <div className="text-xs text-muted-foreground mt-1"> {tool.steps?.length || 0} step{tool.steps?.length !== 1 ? 's' : ''} </div> </button> )) )} </div> {error && ( <div className="flex items-center gap-2 rounded-md border border-amber-500/50 bg-amber-500/10 px-3 py-2 text-sm text-amber-700 dark:text-amber-300"> <AlertTriangle className="h-4 w-4 flex-shrink-0" /> <span>{error}</span> </div> )} </div> )} </TabsContent> </Tabs> <DialogFooter> <Button variant="outline" onClick={() => handleOpenChange(false)} > Cancel </Button> {activeTab === 'scratch' ? ( <> <Button variant="outline" onClick={handleConfirmScratch} disabled={isGenerating} > Add Step </Button> <Button onClick={handleConfirmGenerate} disabled={isGenerating} > {isGenerating ? ( <> <Loader2 className="h-4 w-4 animate-spin" /> Generating... </> ) : ( <> <WandSparkles className="h-4 w-4" /> Generate Step </> )} </Button> </> ) : ( <Button onClick={handleConfirmTool} disabled={isInitiallyLoading} > Import Steps </Button> )} </DialogFooter> </DialogContent> </Dialog> ); }