diff --git a/src/components/WorkflowToolbar.tsx b/src/components/WorkflowToolbar.tsx index e1abada..829d08b 100644 --- a/src/components/WorkflowToolbar.tsx +++ b/src/components/WorkflowToolbar.tsx @@ -1,4 +1,5 @@ import React, { useRef, useState } from "react"; +import toast from "react-hot-toast"; import { useWorkflowStore } from "../store/workflowStore"; import { Download, @@ -34,6 +35,7 @@ export const WorkflowToolbar: React.FC = () => { const { currentWorkflow, saveWorkflow, + importWorkflow, executeWorkflow, isExecuting, clearAllNodes, @@ -70,15 +72,50 @@ export const WorkflowToolbar: React.FC = () => { event: React.ChangeEvent ) => { const file = event.target.files?.[0]; - if (file) { + if (!file) return; + + const toastId = toast.loading(`Importing ${file.name}...`); + + try { const workflow = await loadWorkflowFromFile(file); + if (workflow) { - // In a real app, you'd add this to the workflows list - console.log("Imported workflow:", workflow); - alert("Workflow imported successfully!"); + // Import workflow - automatically adds to list and opens for editing + importWorkflow(workflow); + + toast.success( + `✓ Workflow "${workflow.name}" imported successfully!\n` + + `${workflow.nodes.length} nodes, ${workflow.edges.length} connections`, + { + id: toastId, + duration: 4000, + } + ); + + console.log(`[WorkflowToolbar] Imported workflow:`, { + name: workflow.name, + nodes: workflow.nodes.length, + edges: workflow.edges.length, + }); } else { - alert("Failed to import workflow. Please check the file format."); + toast.error("Failed to import workflow\nPlease check the file format", { + id: toastId, + duration: 5000, + }); } + } catch (error) { + console.error("[WorkflowToolbar] Import error:", error); + toast.error( + `Import failed: ${ + error instanceof Error ? error.message : "Unknown error" + }`, + { id: toastId, duration: 5000 } + ); + } + + // Reset file input + if (fileInputRef.current) { + fileInputRef.current.value = ""; } }; diff --git a/src/store/workflowStore.ts b/src/store/workflowStore.ts index 6bc1239..7c5f382 100644 --- a/src/store/workflowStore.ts +++ b/src/store/workflowStore.ts @@ -252,6 +252,7 @@ interface WorkflowStore { // Workflow management createWorkflow: (name: string) => void; loadWorkflow: (workflowId: string) => void; + importWorkflow: (workflow: Workflow) => void; saveWorkflow: () => void; updateWorkflow: (workflowId: string, updates: Partial) => void; deleteWorkflow: (workflowId: string) => void; @@ -385,6 +386,51 @@ export const useWorkflowStore = create((set, get) => ({ } }, + importWorkflow: (workflow: Workflow) => { + // Check if workflow with same ID already exists + const existingWorkflow = get().workflows.find((w) => w.id === workflow.id); + + if (existingWorkflow) { + // Generate new ID to avoid conflicts + const importedWorkflow = { + ...workflow, + id: generateNodeId(), // Reuse UUID generator + name: `${workflow.name} (imported)`, + createdAt: new Date(), + updatedAt: new Date(), + }; + + const newWorkflows = [...get().workflows, importedWorkflow]; + + set({ + workflows: newWorkflows, + currentWorkflow: importedWorkflow, + }); + + saveWorkflowsToStorage(newWorkflows); + + console.log(`Workflow "${importedWorkflow.name}" imported with new ID`); + } else { + // Use original workflow (no ID conflict) + const importedWorkflow = { + ...workflow, + createdAt: new Date(workflow.createdAt), + updatedAt: new Date(), + }; + + const newWorkflows = [...get().workflows, importedWorkflow]; + + set({ + workflows: newWorkflows, + currentWorkflow: importedWorkflow, + }); + + saveWorkflowsToStorage(newWorkflows); + + console.log(`Workflow "${importedWorkflow.name}" imported successfully`); + } + }, + saveWorkflow: () => { const { currentWorkflow } = get(); if (currentWorkflow) {