Allow running workflow from menu actions

Author: Shellishack

web/components/interface/editor-toolbar.tsx

@@ -2,11 +2,10 @@
 
 import Icon from "@/components/misc/icon";
 import AppSettingsModal from "@/components/modals/app-settings-modal";
+import { useMenuActions } from "@/lib/hooks/use-menu-actions";
 import usePlatformAIAssistant from "@/lib/hooks/use-platform-ai-assistant";
 import useRecorder from "@/lib/hooks/use-recorder";
-import useScopedActions from "@/lib/hooks/use-scoped-actions";
-import { AppNodeData } from "@/lib/types";
-import { addToast, Button, Divider, Tooltip } from "@heroui/react";
+import { Button, Divider, Tooltip } from "@heroui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useContext, useState } from "react";
 import AgentConfigModal from "../modals/agent-config-modal";
@@ -18,7 +17,7 @@ export default function EditorToolbar() {
 
   const { chatWithAssistant } = usePlatformAIAssistant();
   const { isRecording, record } = useRecorder();
-  const { runAction } = useScopedActions();
+  const { runMenuActionByName } = useMenuActions();
 
   const [isAgentListModalOpen, setIsAgentListModalOpen] = useState(false);
   const [isAppSettingsModalOpen, setAppIsSettingsModalOpen] = useState(false);
@@ -87,54 +86,7 @@ export default function EditorToolbar() {
                   isIconOnly
                   className="text-default-foreground h-8 w-8 min-w-8 px-1 py-1"
                   onPress={() => {
-                    const node = editorContext?.editorStates.selectedNode;
-
-                    if (!node) {
-                      addToast({
-                        title: "No Node Selected",
-                        description:
-                          "Please select a node as a starting point to run the workflow.",
-                        color: "danger",
-                      });
-                      return;
-                    }
-
-                    const { selectedAction } = node.data as AppNodeData;
-
-                    if (!selectedAction) {
-                      addToast({
-                        title: "No Action Selected",
-                        description:
-                          "Please select an action for the node to run.",
-                        color: "danger",
-                      });
-                      return;
-                    }
-
-                    editorContext.setEditorStates((prev) => ({
-                      ...prev,
-                      runningNode: node,
-                    }));
-                    runAction(
-                      {
-                        action: selectedAction,
-                        viewId: node.id,
-                        type: "app",
-                      },
-                      {},
-                    ).then((result) => {
-                      addToast({
-                        title: "Workflow Completed",
-                        description: `The workflow has completed with result: ${JSON.stringify(
-                          result,
-                        )}`,
-                        color: "success",
-                      });
-                      editorContext?.setEditorStates((prev) => ({
-                        ...prev,
-                        runningNode: undefined,
-                      }));
-                    });
+                    runMenuActionByName("Run Workflow", "view");
                   }}
                 >
                   <Icon name="play_arrow" variant="round" />

web/components/interface/navigation/nav-top-bar.tsx

@@ -3,7 +3,6 @@ import { useAuth } from "@/lib/hooks/use-auth";
 import { useMenuActions } from "@/lib/hooks/use-menu-actions";
 import { useWorkspace } from "@/lib/hooks/use-workspace";
 import { getPlatform } from "@/lib/platform-api/platform-checker";
-import { MenuAction } from "@/lib/types";
 import {
   Button,
   Dropdown,
@@ -46,39 +45,12 @@ export default function NavTopBar({
   // Use the 'app' query parameter to load specific extension app upon loading page
   const app = params.get("app");
 
-  const { menuActions } = useMenuActions();
+  const { menuActions, runMenuActionByKeyboardShortcut } = useMenuActions();
 
   // Handle menu action shortcuts
   useEffect(() => {
-    async function runAction(action: MenuAction, event: KeyboardEvent) {
-      if (action.shortcut) {
-        // Parse shortcut like "Ctrl+Shift+X"
-        const keys = action.shortcut
-          .toLowerCase()
-          .split("+")
-          .map((k) => k.trim());
-        const ctrl = keys.includes("ctrl") || keys.includes("cmd");
-        const shift = keys.includes("shift");
-        const alt = keys.includes("alt");
-        const key = keys.find(
-          (k) => !["ctrl", "cmd", "shift", "alt"].includes(k),
-        );
-        if (
-          (ctrl ? event.ctrlKey || event.metaKey : true) &&
-          (shift ? event.shiftKey : true) &&
-          (alt ? event.altKey : true) &&
-          event.key.toLowerCase() === key
-        ) {
-          event.preventDefault();
-          await action.actionFunc();
-        }
-      }
-    }
-
     async function handleKeyDown(event: KeyboardEvent) {
-      for (const action of menuActions ?? []) {
-        await runAction(action, event);
-      }
+      await runMenuActionByKeyboardShortcut(event);
     }
 
     window.addEventListener("keydown", handleKeyDown);

web/components/views/canvas/canvas-view.tsx

@@ -1,10 +1,12 @@
 import { useAppInfo } from "@/lib/hooks/use-app-info";
 import { useMenuActions } from "@/lib/hooks/use-menu-actions";
+import useWorkflow from "@/lib/hooks/use-workflow";
 import {
   AppInfoModalContent,
   AppNodeData,
   CanvasViewConfig,
   MenuAction,
+  Workflow,
 } from "@/lib/types";
 import { Button } from "@heroui/react";
 import { Action } from "@pulse-editor/shared-utils";
@@ -21,6 +23,7 @@ import {
   Edge as ReactFlowEdge,
   Node as ReactFlowNode,
   reconnectEdge,
+  useNodes,
   useReactFlow,
   useViewport,
 } from "@xyflow/react";
@@ -52,36 +55,65 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
   const { openAppInfoModal } = useAppInfo();
   const { registerMenuAction, unregisterMenuAction } = useMenuActions();
 
+  const [workflow, setWorkflow] = useState<Workflow | undefined>(undefined);
+  const [entryPoint, setEntryPoint] = useState<
+    ReactFlowNode<AppNodeData> | undefined
+  >(undefined);
+
+  const { startWorkflow, runningNodes } = useWorkflow(workflow, entryPoint);
+
   const viewport = useViewport();
   const { screenToFlowPosition } = useReactFlow();
+  const nodes = useNodes<ReactFlowNode<AppNodeData>>();
 
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const [nodes, setNodes] = useState<ReactFlowNode<AppNodeData>[]>([]);
-  const [edges, setEdges] = useState<ReactFlowEdge[]>([]);
-
   const onNodesChange = useCallback(
     (changes: NodeChange<ReactFlowNode<AppNodeData>>[]) => {
       console.log("Node changes:", changes);
-      setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot));
+      setWorkflow((prev) => {
+        if (!prev) return undefined;
+        return {
+          ...prev,
+          nodes: applyNodeChanges(changes, prev.nodes),
+        };
+      });
     },
     [],
   );
   const onEdgesChange = useCallback(
     (changes: EdgeChange<{ id: string; source: string; target: string }>[]) => {
       console.log("Edge changes:", changes);
-      setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot));
+      setWorkflow((prev) => {
+        if (!prev) return undefined;
+        return {
+          ...prev,
+          edges: applyEdgeChanges(changes, prev.edges),
+        };
+      });
     },
     [],
   );
   const onConnect = useCallback(
     (params: any) =>
-      setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
+      setWorkflow((prev) => {
+        if (!prev) return undefined;
+        return {
+          ...prev,
+          edges: addEdge(params, prev.edges),
+        };
+      }),
     [],
   );
   const onReconnect = useCallback(
     (oldEdge: ReactFlowEdge, newConnection: Connection) =>
-      setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),
+      setWorkflow((prev) => {
+        if (!prev) return undefined;
+        return {
+          ...prev,
+          edges: reconnectEdge(oldEdge, newConnection, prev.edges),
+        };
+      }),
     [],
   );
 
@@ -120,9 +152,8 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
             reader.onload = (event) => {
               try {
                 const workflow = JSON.parse(event.target?.result as string);
-                if (workflow.nodes && workflow.edges) {
-                  setNodes(workflow.nodes);
-                  setEdges(workflow.edges);
+                if (workflow) {
+                  setWorkflow(workflow);
                 } else {
                   alert("Invalid workflow file");
                 }
@@ -150,12 +181,29 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
     };
   }, []);
 
+  useEffect(() => {
+    const action: MenuAction = {
+      name: "Run Workflow",
+      menuCategory: "view",
+      description:
+        "Run the current workflow from the selected or default entry point",
+      shortcut: "Ctrl+Alt+R",
+      actionFunc: async () => {
+        await startWorkflow();
+      },
+      icon: "play_arrow",
+    };
+
+    registerMenuAction(action, true);
+  }, [entryPoint]);
+
   // Add or remove nodes when config changes
   useEffect(() => {
     if (config) {
       // Added nodes
       const newNodes = config.nodes?.filter(
-        (newNode) => !nodes.find((node) => node.id === newNode.viewId),
+        (newNode) =>
+          !workflow?.nodes.find((node) => node.id === newNode.viewId),
       );
 
       if (newNodes && newNodes.length > 0) {
@@ -179,17 +227,15 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
 
             const flowCenter = screenToFlowPosition(screenCenter);
 
-            return {
-              id: appConfig.viewId,
-              position: flowCenter,
-              data: {
-                label: appConfig.app,
-                config: appConfig,
-                selectedAction: undefined,
-                setSelectedAction: async (action: Action | undefined) => {
-                  // Update the node's data
-                  setNodes((nds) =>
-                    nds.map((node) => {
+            const appNodeData: AppNodeData = {
+              config: appConfig,
+              selectedAction: undefined,
+              setSelectedAction: async (action: Action | undefined) => {
+                setWorkflow((prev) => {
+                  if (!prev) return undefined;
+                  return {
+                    ...prev,
+                    nodes: prev.nodes.map((node) => {
                       if (node.id === appConfig.viewId) {
                         return {
                           ...node,
@@ -201,37 +247,69 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
                       }
                       return node;
                     }),
-                  );
-                },
-                isRunning: false,
+                  };
+                });
               },
+              isRunning:
+                runningNodes?.find((n) => n.id === appConfig.viewId) !==
+                undefined,
+            };
+
+            return {
+              id: appConfig.viewId,
+              position: flowCenter,
+              data: appNodeData,
               type: "appNode",
               height: appConfig.recommendedHeight ?? 360,
               width: appConfig.recommendedWidth ?? 640,
             };
           }) ?? [];
 
-        setNodes((nds) => nds.concat(newAppNodes));
+        // Add new nodes to the workflow
+        setWorkflow((prev) => {
+          if (!prev) {
+            return {
+              nodes: newAppNodes,
+              edges: [],
+            };
+          }
+          return {
+            ...prev,
+            nodes: prev.nodes.concat(newAppNodes),
+          };
+        });
       }
 
       // Removed nodes
-      const removedNodes = nodes.filter(
+      const removedNodes = workflow?.nodes.filter(
         (node) => !config.nodes?.find((newNode) => newNode.viewId === node.id),
       );
 
       if (removedNodes && removedNodes.length > 0) {
-        setNodes((nds) =>
-          nds.filter(
-            (node) =>
-              !removedNodes.find((removedNode) => removedNode.id === node.id),
-          ),
-        );
+        setWorkflow((prev) => {
+          if (!prev) return undefined;
+          return {
+            ...prev,
+            nodes: prev.nodes.filter(
+              (node) =>
+                !removedNodes.find((removedNode) => removedNode.id === node.id),
+            ),
+          };
+        });
       }
     }
-  }, [config, viewport]);
+  }, [config, viewport, runningNodes]);
+
+  useEffect(() => {
+    const selectedNodes = nodes.filter((node) => node.selected);
+    if (selectedNodes.length > 0) {
+      setEntryPoint(selectedNodes[0]);
+    } else {
+      setEntryPoint(undefined);
+    }
+  }, [nodes]);
 
   async function exportWorkflow() {
-    const workflow = { nodes, edges };
     const blob = new Blob([JSON.stringify(workflow, null, 2)], {
       type: "application/json",
     });
@@ -250,8 +328,8 @@ export default function CanvasView({ config }: { config?: CanvasViewConfig }) {
       id={`canvas-${config?.viewId}`}
     >
       <ReactFlow
-        nodes={nodes}
-        edges={edges}
+        nodes={workflow?.nodes}
+        edges={workflow?.edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}