next-workflow-builder 0.1.0

package/dist/client/components/workflow/workflow-toolbar.js

@@ -0,0 +1,707 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useReactFlow } from "@xyflow/react";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { Check, ChevronDown, Copy, Download, Globe, Loader2, Lock, Play, Plus, Redo2, Save, Settings2, Trash2, Undo2, } from "lucide-react";
+import { nanoid } from "nanoid";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { api } from "../../../lib/api-client.js";
+import { authClient, useSession } from "../../../lib/auth-client.js";
+import { integrationsAtom } from "../../../lib/integrations-store.js";
+import { addNodeAtom, canRedoAtom, canUndoAtom, clearWorkflowAtom, currentWorkflowIdAtom, currentWorkflowNameAtom, currentWorkflowVisibilityAtom, deleteEdgeAtom, deleteNodeAtom, edgesAtom, hasUnsavedChangesAtom, isExecutingAtom, isGeneratingAtom, isSavingAtom, isWorkflowOwnerAtom, nodesAtom, propertiesPanelActiveTabAtom, redoAtom, selectedEdgeAtom, selectedExecutionIdAtom, selectedNodeAtom, triggerExecuteAtom, undoAtom, updateNodeDataAtom, } from "../../../lib/workflow-store.js";
+import { findActionById, flattenConfigFields, getIntegrationLabels } from "../../../plugins/registry.js";
+import { Panel } from "../ai-elements/panel.js";
+import { DeployButton } from "../deploy-button.js";
+import { ConfigurationOverlay } from "../overlays/configuration-overlay.js";
+import { ConfirmOverlay } from "../overlays/confirm-overlay.js";
+import { ExportWorkflowOverlay } from "../overlays/export-workflow-overlay.js";
+import { MakePublicOverlay } from "../overlays/make-public-overlay.js";
+import { useOverlay } from "../overlays/overlay-provider.js";
+import { WorkflowIssuesOverlay } from "../overlays/workflow-issues-overlay.js";
+import { Button } from "../ui/button.js";
+import { ButtonGroup } from "../ui/button-group.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+import { WorkflowIcon } from "../ui/workflow-icon.js";
+import { UserMenu } from "../workflows/user-menu.js";
+function updateNodesStatus(nodes, updateNodeData, status) {
+    for (const node of nodes) {
+        updateNodeData({ id: node.id, data: { status } });
+    }
+}
+const BUILTIN_ACTION_INTEGRATIONS = {
+    "Database Query": "database",
+};
+const BUILTIN_INTEGRATION_LABELS = {
+    database: "Database",
+};
+function extractTemplateReferences(value) {
+    if (typeof value !== "string") {
+        return [];
+    }
+    const pattern = /\{\{@([^:]+):([^}]+)\}\}/g;
+    const matches = value.matchAll(pattern);
+    return Array.from(matches).map((match) => ({
+        nodeId: match[1],
+        displayText: match[2],
+    }));
+}
+function extractAllTemplateReferences(config, prefix = "") {
+    const results = [];
+    for (const [key, value] of Object.entries(config)) {
+        const fieldPath = prefix ? `${prefix}.${key}` : key;
+        if (typeof value === "string") {
+            const refs = extractTemplateReferences(value);
+            for (const ref of refs) {
+                results.push({ field: fieldPath, ...ref });
+            }
+        }
+        else if (typeof value === "object" &&
+            value !== null &&
+            !Array.isArray(value)) {
+            results.push(...extractAllTemplateReferences(value, fieldPath));
+        }
+    }
+    return results;
+}
+function getBrokenTemplateReferences(nodes) {
+    const nodeIds = new Set(nodes.map((n) => n.id));
+    const brokenByNode = [];
+    for (const node of nodes) {
+        if (node.data.enabled === false) {
+            continue;
+        }
+        const config = node.data.config;
+        if (!config || typeof config !== "object") {
+            continue;
+        }
+        const allRefs = extractAllTemplateReferences(config);
+        const brokenRefs = allRefs.filter((ref) => !nodeIds.has(ref.nodeId));
+        if (brokenRefs.length > 0) {
+            const actionType = config.actionType;
+            const action = actionType ? findActionById(actionType) : undefined;
+            const flatFields = action ? flattenConfigFields(action.configFields) : [];
+            brokenByNode.push({
+                nodeId: node.id,
+                nodeLabel: node.data.label || action?.label || "Unnamed Step",
+                brokenReferences: brokenRefs.map((ref) => {
+                    const configField = flatFields.find((f) => f.key === ref.field);
+                    return {
+                        fieldKey: ref.field,
+                        fieldLabel: configField?.label || ref.field,
+                        referencedNodeId: ref.nodeId,
+                        displayText: ref.displayText,
+                    };
+                }),
+            });
+        }
+    }
+    return brokenByNode;
+}
+function isFieldEmpty(value) {
+    if (value === undefined || value === null) {
+        return true;
+    }
+    if (typeof value === "string" && value.trim() === "") {
+        return true;
+    }
+    return false;
+}
+function shouldShowField(field, config) {
+    if (!field.showWhen) {
+        return true;
+    }
+    return config[field.showWhen.field] === field.showWhen.equals;
+}
+function getNodeMissingFields(node) {
+    if (node.data.enabled === false) {
+        return null;
+    }
+    const config = node.data.config;
+    const actionType = config?.actionType;
+    if (!actionType) {
+        return null;
+    }
+    const action = findActionById(actionType);
+    if (!action) {
+        return null;
+    }
+    const flatFields = flattenConfigFields(action.configFields);
+    const missingFields = flatFields
+        .filter((field) => field.required &&
+        shouldShowField(field, config || {}) &&
+        isFieldEmpty(config?.[field.key]))
+        .map((field) => ({
+        fieldKey: field.key,
+        fieldLabel: field.label,
+    }));
+    if (missingFields.length === 0) {
+        return null;
+    }
+    return {
+        nodeId: node.id,
+        nodeLabel: node.data.label || action.label || "Unnamed Step",
+        missingFields,
+    };
+}
+function getMissingRequiredFields(nodes) {
+    return nodes
+        .map(getNodeMissingFields)
+        .filter((result) => result !== null);
+}
+function getMissingIntegrations(nodes, userIntegrations) {
+    const userIntegrationTypes = new Set(userIntegrations.map((i) => i.type));
+    const userIntegrationIds = new Set(userIntegrations.map((i) => i.id));
+    const missingByType = new Map();
+    const integrationLabels = getIntegrationLabels();
+    for (const node of nodes) {
+        if (node.data.enabled === false) {
+            continue;
+        }
+        const actionType = node.data.config?.actionType;
+        if (!actionType) {
+            continue;
+        }
+        const action = findActionById(actionType);
+        const requiredIntegrationType = action?.integration || BUILTIN_ACTION_INTEGRATIONS[actionType];
+        if (!requiredIntegrationType) {
+            continue;
+        }
+        const configuredIntegrationId = node.data.config?.integrationId;
+        const hasValidIntegration = configuredIntegrationId &&
+            userIntegrationIds.has(configuredIntegrationId);
+        if (hasValidIntegration) {
+            continue;
+        }
+        if (!userIntegrationTypes.has(requiredIntegrationType)) {
+            const existing = missingByType.get(requiredIntegrationType) || [];
+            const actionInfo = findActionById(actionType);
+            existing.push(node.data.label || actionInfo?.label || actionType);
+            missingByType.set(requiredIntegrationType, existing);
+        }
+    }
+    return Array.from(missingByType.entries()).map(([integrationType, nodeNames]) => ({
+        integrationType,
+        integrationLabel: integrationLabels[integrationType] ||
+            BUILTIN_INTEGRATION_LABELS[integrationType] ||
+            integrationType,
+        nodeNames,
+    }));
+}
+async function executeTestWorkflow({ workflowId, nodes, updateNodeData, pollingIntervalRef, setIsExecuting, setSelectedExecutionId, }) {
+    updateNodesStatus(nodes, updateNodeData, "idle");
+    for (const node of nodes) {
+        if (node.data.type === "trigger") {
+            updateNodeData({ id: node.id, data: { status: "running" } });
+        }
+    }
+    try {
+        const response = await fetch(`/api/workflow/${workflowId}/execute`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ input: {} }),
+        });
+        if (!response.ok) {
+            throw new Error("Failed to execute workflow");
+        }
+        const result = await response.json();
+        setSelectedExecutionId(result.executionId);
+        const pollInterval = setInterval(async () => {
+            try {
+                const statusData = await api.workflow.getExecutionStatus(result.executionId);
+                for (const nodeStatus of statusData.nodeStatuses) {
+                    updateNodeData({
+                        id: nodeStatus.nodeId,
+                        data: {
+                            status: nodeStatus.status,
+                        },
+                    });
+                }
+                if (statusData.status !== "running") {
+                    if (pollingIntervalRef.current) {
+                        clearInterval(pollingIntervalRef.current);
+                        pollingIntervalRef.current = null;
+                    }
+                    setIsExecuting(false);
+                }
+            }
+            catch (error) {
+                console.error("Failed to poll execution status:", error);
+            }
+        }, 500);
+        pollingIntervalRef.current = pollInterval;
+    }
+    catch (error) {
+        console.error("Failed to execute workflow:", error);
+        toast.error(error instanceof Error ? error.message : "Failed to execute workflow");
+        updateNodesStatus(nodes, updateNodeData, "error");
+        setIsExecuting(false);
+    }
+}
+function useWorkflowHandlers({ currentWorkflowId, nodes, edges, updateNodeData, isExecuting, setIsExecuting, setIsSaving, setHasUnsavedChanges, setActiveTab, setNodes, setEdges, setSelectedNodeId, setSelectedExecutionId, userIntegrations, }) {
+    const { open: openOverlay } = useOverlay();
+    const pollingIntervalRef = useRef(null);
+    useEffect(() => () => {
+        if (pollingIntervalRef.current) {
+            clearInterval(pollingIntervalRef.current);
+        }
+    }, []);
+    const handleSave = async () => {
+        if (!currentWorkflowId) {
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await api.workflow.update(currentWorkflowId, { nodes, edges });
+            setHasUnsavedChanges(false);
+        }
+        catch (error) {
+            console.error("Failed to save workflow:", error);
+            toast.error("Failed to save workflow. Please try again.");
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    const executeWorkflow = async () => {
+        if (!currentWorkflowId) {
+            toast.error("Please save the workflow before executing");
+            return;
+        }
+        setActiveTab("runs");
+        setNodes(nodes.map((node) => ({ ...node, selected: false })));
+        setEdges(edges.map((edge) => ({ ...edge, selected: false })));
+        setSelectedNodeId(null);
+        setIsExecuting(true);
+        await executeTestWorkflow({
+            workflowId: currentWorkflowId,
+            nodes,
+            updateNodeData,
+            pollingIntervalRef,
+            setIsExecuting,
+            setSelectedExecutionId,
+        });
+    };
+    const handleGoToStep = (nodeId, fieldKey) => {
+        setSelectedNodeId(nodeId);
+        setActiveTab("properties");
+        if (fieldKey) {
+            setTimeout(() => {
+                const element = document.getElementById(fieldKey);
+                if (element) {
+                    element.focus();
+                    element.scrollIntoView({ behavior: "smooth", block: "center" });
+                }
+            }, 100);
+        }
+    };
+    const handleExecute = async () => {
+        if (isExecuting) {
+            return;
+        }
+        const brokenRefs = getBrokenTemplateReferences(nodes);
+        const missingFields = getMissingRequiredFields(nodes);
+        const missingIntegrations = getMissingIntegrations(nodes, userIntegrations);
+        if (brokenRefs.length > 0 ||
+            missingFields.length > 0 ||
+            missingIntegrations.length > 0) {
+            openOverlay(WorkflowIssuesOverlay, {
+                issues: {
+                    brokenReferences: brokenRefs,
+                    missingRequiredFields: missingFields,
+                    missingIntegrations,
+                },
+                onGoToStep: handleGoToStep,
+                onRunAnyway: executeWorkflow,
+            });
+            return;
+        }
+        await executeWorkflow();
+    };
+    return {
+        handleSave,
+        handleExecute,
+    };
+}
+function useWorkflowState() {
+    const [nodes, setNodes] = useAtom(nodesAtom);
+    const [edges, setEdges] = useAtom(edgesAtom);
+    const [isExecuting, setIsExecuting] = useAtom(isExecutingAtom);
+    const [isGenerating] = useAtom(isGeneratingAtom);
+    const clearWorkflow = useSetAtom(clearWorkflowAtom);
+    const updateNodeData = useSetAtom(updateNodeDataAtom);
+    const [currentWorkflowId] = useAtom(currentWorkflowIdAtom);
+    const [workflowName, setCurrentWorkflowName] = useAtom(currentWorkflowNameAtom);
+    const [workflowVisibility, setWorkflowVisibility] = useAtom(currentWorkflowVisibilityAtom);
+    const isOwner = useAtomValue(isWorkflowOwnerAtom);
+    const router = useRouter();
+    const [isSaving, setIsSaving] = useAtom(isSavingAtom);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useAtom(hasUnsavedChangesAtom);
+    const undo = useSetAtom(undoAtom);
+    const redo = useSetAtom(redoAtom);
+    const addNode = useSetAtom(addNodeAtom);
+    const [canUndo] = useAtom(canUndoAtom);
+    const [canRedo] = useAtom(canRedoAtom);
+    const { data: session } = useSession();
+    const setActiveTab = useSetAtom(propertiesPanelActiveTabAtom);
+    const setSelectedNodeId = useSetAtom(selectedNodeAtom);
+    const setSelectedExecutionId = useSetAtom(selectedExecutionIdAtom);
+    const userIntegrations = useAtomValue(integrationsAtom);
+    const [triggerExecute, setTriggerExecute] = useAtom(triggerExecuteAtom);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [isDuplicating, setIsDuplicating] = useState(false);
+    const [allWorkflows, setAllWorkflows] = useState([]);
+    useEffect(() => {
+        const loadAllWorkflows = async () => {
+            try {
+                const workflows = await api.workflow.getAll();
+                setAllWorkflows(workflows);
+            }
+            catch (error) {
+                console.error("Failed to load workflows:", error);
+            }
+        };
+        loadAllWorkflows();
+    }, []);
+    return {
+        nodes,
+        edges,
+        isExecuting,
+        setIsExecuting,
+        isGenerating,
+        clearWorkflow,
+        updateNodeData,
+        currentWorkflowId,
+        workflowName,
+        setCurrentWorkflowName,
+        workflowVisibility,
+        setWorkflowVisibility,
+        isOwner,
+        router,
+        isSaving,
+        setIsSaving,
+        hasUnsavedChanges,
+        setHasUnsavedChanges,
+        undo,
+        redo,
+        addNode,
+        canUndo,
+        canRedo,
+        session,
+        isDownloading,
+        setIsDownloading,
+        isDuplicating,
+        setIsDuplicating,
+        allWorkflows,
+        setAllWorkflows,
+        setActiveTab,
+        setNodes,
+        setEdges,
+        setSelectedNodeId,
+        setSelectedExecutionId,
+        userIntegrations,
+        triggerExecute,
+        setTriggerExecute,
+    };
+}
+function useWorkflowActions(state) {
+    const { open: openOverlay } = useOverlay();
+    const { currentWorkflowId, workflowName, nodes, edges, updateNodeData, isExecuting, setIsExecuting, setIsSaving, setHasUnsavedChanges, clearWorkflow, setWorkflowVisibility, setAllWorkflows, setIsDownloading, setIsDuplicating, setActiveTab, setNodes, setEdges, setSelectedNodeId, setSelectedExecutionId, userIntegrations, triggerExecute, setTriggerExecute, router, session, } = state;
+    const { handleSave, handleExecute } = useWorkflowHandlers({
+        currentWorkflowId,
+        nodes,
+        edges,
+        updateNodeData,
+        isExecuting,
+        setIsExecuting,
+        setIsSaving,
+        setHasUnsavedChanges,
+        setActiveTab,
+        setNodes,
+        setEdges,
+        setSelectedNodeId,
+        setSelectedExecutionId,
+        userIntegrations,
+    });
+    useEffect(() => {
+        if (triggerExecute) {
+            setTriggerExecute(false);
+            handleExecute();
+        }
+    }, [triggerExecute, setTriggerExecute, handleExecute]);
+    const handleClearWorkflow = () => {
+        openOverlay(ConfirmOverlay, {
+            title: "Clear Workflow",
+            message: "Are you sure you want to clear all nodes and connections? This action cannot be undone.",
+            confirmLabel: "Clear Workflow",
+            confirmVariant: "destructive",
+            destructive: true,
+            onConfirm: () => {
+                clearWorkflow();
+            },
+        });
+    };
+    const handleDeleteWorkflow = () => {
+        openOverlay(ConfirmOverlay, {
+            title: "Delete Workflow",
+            message: `Are you sure you want to delete "${workflowName}"? This will permanently delete the workflow. This cannot be undone.`,
+            confirmLabel: "Delete Workflow",
+            confirmVariant: "destructive",
+            destructive: true,
+            onConfirm: async () => {
+                if (!currentWorkflowId)
+                    return;
+                try {
+                    await api.workflow.delete(currentWorkflowId);
+                    toast.success("Workflow deleted successfully");
+                    window.location.href = "/";
+                }
+                catch (error) {
+                    console.error("Failed to delete workflow:", error);
+                    toast.error("Failed to delete workflow. Please try again.");
+                }
+            },
+        });
+    };
+    const handleDownload = async () => {
+        if (!currentWorkflowId) {
+            toast.error("Please save the workflow before downloading");
+            return;
+        }
+        setIsDownloading(true);
+        toast.info("Preparing workflow files for download...");
+        try {
+            const result = await api.workflow.download(currentWorkflowId);
+            if (!result.success) {
+                throw new Error(result.error || "Failed to prepare download");
+            }
+            if (!result.files) {
+                throw new Error("No files to download");
+            }
+            const JSZip = (await import("jszip")).default;
+            const zip = new JSZip();
+            for (const [path, content] of Object.entries(result.files)) {
+                zip.file(path, content);
+            }
+            const blob = await zip.generateAsync({ type: "blob" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${workflowName.toLowerCase().replace(/[^a-z0-9]/g, "-")}-workflow.zip`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            toast.success("Workflow downloaded successfully!");
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : "Failed to download workflow");
+        }
+        finally {
+            setIsDownloading(false);
+        }
+    };
+    const loadWorkflows = async () => {
+        try {
+            const workflows = await api.workflow.getAll();
+            setAllWorkflows(workflows);
+        }
+        catch (error) {
+            console.error("Failed to load workflows:", error);
+        }
+    };
+    const handleToggleVisibility = async (newVisibility) => {
+        if (!currentWorkflowId) {
+            return;
+        }
+        if (newVisibility === "public") {
+            openOverlay(MakePublicOverlay, {
+                onConfirm: async () => {
+                    try {
+                        await api.workflow.update(currentWorkflowId, {
+                            visibility: "public",
+                        });
+                        setWorkflowVisibility("public");
+                        toast.success("Workflow is now public");
+                    }
+                    catch (error) {
+                        console.error("Failed to update visibility:", error);
+                        toast.error("Failed to update visibility. Please try again.");
+                    }
+                },
+            });
+            return;
+        }
+        try {
+            await api.workflow.update(currentWorkflowId, {
+                visibility: newVisibility,
+            });
+            setWorkflowVisibility(newVisibility);
+            toast.success("Workflow is now private");
+        }
+        catch (error) {
+            console.error("Failed to update visibility:", error);
+            toast.error("Failed to update visibility. Please try again.");
+        }
+    };
+    const handleDuplicate = async () => {
+        if (!currentWorkflowId) {
+            return;
+        }
+        setIsDuplicating(true);
+        try {
+            if (!session?.user) {
+                await authClient.signIn.anonymous();
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            }
+            const newWorkflow = await api.workflow.duplicate(currentWorkflowId);
+            toast.success("Workflow duplicated successfully");
+            router.push(`/workflows/${newWorkflow.id}`);
+        }
+        catch (error) {
+            console.error("Failed to duplicate workflow:", error);
+            toast.error("Failed to duplicate workflow. Please try again.");
+        }
+        finally {
+            setIsDuplicating(false);
+        }
+    };
+    return {
+        handleSave,
+        handleExecute,
+        handleClearWorkflow,
+        handleDeleteWorkflow,
+        handleDownload,
+        loadWorkflows,
+        handleToggleVisibility,
+        handleDuplicate,
+    };
+}
+function ToolbarActions({ workflowId, state, actions, }) {
+    const { open: openOverlay, push } = useOverlay();
+    const [selectedNodeId] = useAtom(selectedNodeAtom);
+    const [selectedEdgeId] = useAtom(selectedEdgeAtom);
+    const [nodes] = useAtom(nodesAtom);
+    const [edges] = useAtom(edgesAtom);
+    const deleteNode = useSetAtom(deleteNodeAtom);
+    const deleteEdge = useSetAtom(deleteEdgeAtom);
+    const { screenToFlowPosition } = useReactFlow();
+    const selectedNode = nodes.find((node) => node.id === selectedNodeId);
+    const selectedEdge = edges.find((edge) => edge.id === selectedEdgeId);
+    const hasSelection = selectedNode || selectedEdge;
+    if (workflowId && !state.isOwner) {
+        return null;
+    }
+    if (!workflowId) {
+        return null;
+    }
+    const handleDeleteConfirm = () => {
+        const isNode = Boolean(selectedNodeId);
+        const itemType = isNode ? "Node" : "Connection";
+        push(ConfirmOverlay, {
+            title: `Delete ${itemType}`,
+            message: `Are you sure you want to delete this ${itemType.toLowerCase()}? This action cannot be undone.`,
+            confirmLabel: "Delete",
+            confirmVariant: "destructive",
+            onConfirm: () => {
+                if (selectedNodeId) {
+                    deleteNode(selectedNodeId);
+                }
+                else if (selectedEdgeId) {
+                    deleteEdge(selectedEdgeId);
+                }
+            },
+        });
+    };
+    const handleAddStep = () => {
+        const flowWrapper = document.querySelector(".react-flow");
+        if (!flowWrapper) {
+            return;
+        }
+        const rect = flowWrapper.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        const position = screenToFlowPosition({ x: centerX, y: centerY });
+        const nodeWidth = 192;
+        const nodeHeight = 192;
+        position.x -= nodeWidth / 2;
+        position.y -= nodeHeight / 2;
+        const offset = 20;
+        const threshold = 20;
+        const finalPosition = { ...position };
+        let hasOverlap = true;
+        let attempts = 0;
+        const maxAttempts = 20;
+        while (hasOverlap && attempts < maxAttempts) {
+            hasOverlap = state.nodes.some((node) => {
+                const dx = Math.abs(node.position.x - finalPosition.x);
+                const dy = Math.abs(node.position.y - finalPosition.y);
+                return dx < threshold && dy < threshold;
+            });
+            if (hasOverlap) {
+                finalPosition.x += offset;
+                finalPosition.y += offset;
+                attempts += 1;
+            }
+        }
+        const newNode = {
+            id: nanoid(),
+            type: "action",
+            position: finalPosition,
+            data: {
+                label: "",
+                description: "",
+                type: "action",
+                config: {},
+                status: "idle",
+            },
+        };
+        state.addNode(newNode);
+        state.setSelectedNodeId(newNode.id);
+        state.setActiveTab("properties");
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonGroup, { className: "flex lg:hidden", orientation: "vertical", children: _jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: state.isGenerating, onClick: handleAddStep, size: "icon", title: "Add Step", variant: "secondary", children: _jsx(Plus, { className: "size-4" }) }) }), _jsxs(ButtonGroup, { className: "flex lg:hidden", orientation: "vertical", children: [_jsx(Button, { className: "border hover:bg-black/5 dark:hover:bg-white/5", onClick: () => openOverlay(ConfigurationOverlay, {}), size: "icon", title: "Configuration", variant: "secondary", children: _jsx(Settings2, { className: "size-4" }) }), hasSelection && (_jsx(Button, { className: "border hover:bg-black/5 dark:hover:bg-white/5", onClick: handleDeleteConfirm, size: "icon", title: "Delete", variant: "secondary", children: _jsx(Trash2, { className: "size-4" }) }))] }), _jsx(ButtonGroup, { className: "hidden lg:flex", orientation: "horizontal", children: _jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: state.isGenerating, onClick: handleAddStep, size: "icon", title: "Add Step", variant: "secondary", children: _jsx(Plus, { className: "size-4" }) }) }), _jsxs(ButtonGroup, { className: "flex lg:hidden", orientation: "vertical", children: [_jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: !state.canUndo || state.isGenerating, onClick: () => state.undo(), size: "icon", title: "Undo", variant: "secondary", children: _jsx(Undo2, { className: "size-4" }) }), _jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: !state.canRedo || state.isGenerating, onClick: () => state.redo(), size: "icon", title: "Redo", variant: "secondary", children: _jsx(Redo2, { className: "size-4" }) })] }), _jsxs(ButtonGroup, { className: "hidden lg:flex", orientation: "horizontal", children: [_jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: !state.canUndo || state.isGenerating, onClick: () => state.undo(), size: "icon", title: "Undo", variant: "secondary", children: _jsx(Undo2, { className: "size-4" }) }), _jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: !state.canRedo || state.isGenerating, onClick: () => state.redo(), size: "icon", title: "Redo", variant: "secondary", children: _jsx(Redo2, { className: "size-4" }) })] }), _jsxs(ButtonGroup, { className: "flex lg:hidden", orientation: "vertical", children: [_jsx(SaveButton, { handleSave: actions.handleSave, state: state }), _jsx(DownloadButton, { actions: actions, state: state })] }), _jsxs(ButtonGroup, { className: "hidden lg:flex", orientation: "horizontal", children: [_jsx(SaveButton, { handleSave: actions.handleSave, state: state }), _jsx(DownloadButton, { actions: actions, state: state })] }), _jsx(VisibilityButton, { actions: actions, state: state }), _jsx(RunButtonGroup, { actions: actions, state: state })] }));
+}
+function SaveButton({ state, handleSave, }) {
+    return (_jsxs(Button, { className: "relative border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: !state.currentWorkflowId || state.isGenerating || state.isSaving, onClick: handleSave, size: "icon", title: state.isSaving ? "Saving..." : "Save workflow", variant: "secondary", children: [state.isSaving ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Save, { className: "size-4" })), state.hasUnsavedChanges && !state.isSaving && (_jsx("div", { className: "absolute top-1.5 right-1.5 size-2 rounded-full bg-primary" }))] }));
+}
+function DownloadButton({ state, actions, }) {
+    const { open: openOverlay } = useOverlay();
+    const handleClick = () => {
+        openOverlay(ExportWorkflowOverlay, {
+            onExport: actions.handleDownload,
+            isDownloading: state.isDownloading,
+        });
+    };
+    return (_jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: state.isDownloading ||
+            state.nodes.length === 0 ||
+            state.isGenerating ||
+            !state.currentWorkflowId, onClick: handleClick, size: "icon", title: state.isDownloading
+            ? "Preparing download..."
+            : "Export workflow as code", variant: "secondary", children: state.isDownloading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Download, { className: "size-4" })) }));
+}
+function VisibilityButton({ state, actions, }) {
+    const isPublic = state.workflowVisibility === "public";
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { className: "border hover:bg-black/5 dark:hover:bg-white/5", disabled: !state.currentWorkflowId || state.isGenerating, size: "icon", title: isPublic ? "Public workflow" : "Private workflow", variant: "secondary", children: isPublic ? (_jsx(Globe, { className: "size-4" })) : (_jsx(Lock, { className: "size-4" })) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { className: "flex items-center gap-2", onClick: () => actions.handleToggleVisibility("private"), children: [_jsx(Lock, { className: "size-4" }), "Private", !isPublic && _jsx(Check, { className: "ml-auto size-4" })] }), _jsxs(DropdownMenuItem, { className: "flex items-center gap-2", onClick: () => actions.handleToggleVisibility("public"), children: [_jsx(Globe, { className: "size-4" }), "Public", isPublic && _jsx(Check, { className: "ml-auto size-4" })] })] })] }));
+}
+function RunButtonGroup({ state, actions, }) {
+    return (_jsx(Button, { className: "border hover:bg-black/5 disabled:opacity-100 dark:hover:bg-white/5 disabled:[&>svg]:text-muted-foreground", disabled: state.isExecuting || state.nodes.length === 0 || state.isGenerating, onClick: () => actions.handleExecute(), size: "icon", title: "Run Workflow", variant: "secondary", children: state.isExecuting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : (_jsx(Play, { className: "size-4" })) }));
+}
+function DuplicateButton({ isDuplicating, onDuplicate, }) {
+    return (_jsxs(Button, { className: "h-9 border hover:bg-black/5 dark:hover:bg-white/5", disabled: isDuplicating, onClick: onDuplicate, size: "sm", title: "Duplicate to your workflows", variant: "secondary", children: [isDuplicating ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin" })) : (_jsx(Copy, { className: "mr-2 size-4" })), "Duplicate"] }));
+}
+function WorkflowMenuComponent({ workflowId, state, actions, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "flex h-9 max-w-[160px] items-center overflow-hidden rounded-md border bg-secondary text-secondary-foreground sm:max-w-none", children: _jsxs(DropdownMenu, { onOpenChange: (open) => open && actions.loadWorkflows(), children: [_jsxs(DropdownMenuTrigger, { className: "flex h-full cursor-pointer items-center gap-2 px-3 font-medium text-sm transition-all hover:bg-black/5 dark:hover:bg-white/5", children: [_jsx(WorkflowIcon, { className: "size-4 shrink-0" }), _jsx("p", { className: "truncate font-medium text-sm", children: workflowId ? (state.workflowName) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "sm:hidden", children: "New" }), _jsx("span", { className: "hidden sm:inline", children: "New Workflow" })] })) }), _jsx(ChevronDown, { className: "size-3 shrink-0 opacity-50" })] }), _jsxs(DropdownMenuContent, { align: "start", className: "w-64", children: [_jsx(DropdownMenuItem, { asChild: true, className: "flex items-center justify-between", children: _jsxs("a", { href: "/", children: ["New Workflow", " ", !workflowId && _jsx(Check, { className: "size-4 shrink-0" })] }) }), _jsx(DropdownMenuSeparator, {}), state.allWorkflows.length === 0 ? (_jsx(DropdownMenuItem, { disabled: true, children: "No workflows found" })) : (state.allWorkflows
+                                    .filter((w) => w.name !== "__current__")
+                                    .map((workflow) => (_jsxs(DropdownMenuItem, { className: "flex items-center justify-between", onClick: () => state.router.push(`/workflows/${workflow.id}`), children: [_jsx("span", { className: "truncate", children: workflow.name }), workflow.id === state.currentWorkflowId && (_jsx(Check, { className: "size-4 shrink-0" }))] }, workflow.id))))] })] }) }), workflowId && !state.isOwner && (_jsx("span", { className: "text-muted-foreground text-xs uppercase lg:hidden", children: "Read-only" }))] }));
+}
+export const WorkflowToolbar = ({ workflowId }) => {
+    const state = useWorkflowState();
+    const actions = useWorkflowActions(state);
+    return (_jsxs(React.Fragment, { children: [_jsx(Panel, { className: "flex flex-col gap-2 rounded-none border-none bg-transparent p-0 lg:flex-row lg:items-center", position: "top-left", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WorkflowMenuComponent, { actions: actions, state: state, workflowId: workflowId }), workflowId && !state.isOwner && (_jsx("span", { className: "hidden text-muted-foreground text-xs uppercase lg:inline", children: "Read-only" }))] }) }), _jsx("div", { className: "pointer-events-auto absolute top-4 right-4 z-10", children: _jsxs("div", { className: "flex flex-col-reverse items-end gap-2 lg:flex-row lg:items-center", children: [_jsx(ToolbarActions, { actions: actions, state: state, workflowId: workflowId }), _jsxs("div", { className: "flex items-center gap-2", children: [!workflowId && _jsx(DeployButton, {}), workflowId && !state.isOwner && (_jsx(DuplicateButton, { isDuplicating: state.isDuplicating, onDuplicate: actions.handleDuplicate })), _jsx(UserMenu, {})] })] }) })] }));
+};
+//# sourceMappingURL=workflow-toolbar.js.map