Add workflow states management hook

.changeset/fuzzy-sheep-pay.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Make action return type any

.changeset/pre.json

@@ -32,6 +32,7 @@
     "free-ears-swim",
     "fruity-goats-look",
     "full-beans-stop",
+    "fuzzy-sheep-pay",
     "hot-symbols-fry",
     "hot-windows-march",
     "large-moose-tap",
@@ -56,6 +57,7 @@
     "tough-aliens-appear",
     "true-suits-fly",
     "vast-places-rhyme",
+    "weak-beers-watch",
     "wicked-spoons-fry"
   ]
 }

.changeset/weak-beers-watch.md

@@ -0,0 +1,6 @@
+---
+"@pulse-editor/shared-utils": patch
+"@pulse-editor/react-api": patch
+---
+
+Update action register hook

npm-packages/react-api/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @pulse-editor/react-api
 
+## 0.1.1-alpha.45
+
+### Patch Changes
+
+- Make action return type any
+- Updated dependencies
+  - @pulse-editor/[email protected]
+
+## 0.1.1-alpha.44
+
+### Patch Changes
+
+- Update action register hook
+- Updated dependencies
+  - @pulse-editor/[email protected]
+
 ## 0.1.1-alpha.43
 
 ### Patch Changes

npm-packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pulse-editor/react-api",
-  "version": "0.1.1-alpha.43",
+  "version": "0.1.1-alpha.45",
   "main": "dist/main.js",
   "files": [
     "dist"
@@ -38,7 +38,7 @@
     "typescript-eslint": "^8.30.1"
   },
   "peerDependencies": {
-    "@pulse-editor/shared-utils": "0.1.1-alpha.43",
+    "@pulse-editor/shared-utils": "0.1.1-alpha.45",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

npm-packages/react-api/src/hooks/editor/use-register-action.ts

@@ -5,7 +5,7 @@ import {
   ReceiverHandler,
   TypedVariable,
 } from "@pulse-editor/shared-utils";
-import { useEffect, useRef, useState } from "react";
+import { DependencyList, useEffect, useRef, useState } from "react";
 import useIMC from "../../lib/use-imc";
 
 /**
@@ -17,7 +17,8 @@ import useIMC from "../../lib/use-imc";
  * @param parameters Parameters of the command.
  * @param returns Return values of the command.
  * @param callbackHandler Callback handler function to handle the command.
- * @param isExtReady Whether the extension is ready to receive commands. 
+ * @param deps Dependency list to re-register the action when changed.
+ * @param isExtReady Whether the extension is ready to receive commands.
  * Useful for actions that need to wait for some certain app state to be ready.
  *
  */
@@ -28,7 +29,8 @@ export default function useRegisterAction(
     parameters?: Record<string, TypedVariable>;
     returns?: Record<string, TypedVariable>;
   },
-  callbackHandler?: (args: any) => Promise<string | void>,
+  callbackHandler: (args: any) => Promise<any>,
+  deps: DependencyList,
   isExtReady: boolean = true
 ) {
   const { isReady, imc } = useIMC(getReceiverHandlerMap());
@@ -85,8 +87,9 @@ export default function useRegisterAction(
       description: actionInfo.description,
       parameters: actionInfo.parameters ?? {},
       returns: actionInfo.returns ?? {},
+      handler: callbackHandler,
     }));
-  }, [callbackHandler]);
+  }, [...deps]);
 
   async function executeAction(args: any) {
     if (!action.handler) return;

npm-packages/shared-utils/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @pulse-editor/shared-utils
 
+## 0.1.1-alpha.45
+
+### Patch Changes
+
+- Make action return type any
+
+## 0.1.1-alpha.44
+
+### Patch Changes
+
+- Update action register hook
+
 ## 0.1.1-alpha.43
 
 ### Patch Changes

npm-packages/shared-utils/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@pulse-editor/shared-utils",
-    "version": "0.1.1-alpha.43",
+    "version": "0.1.1-alpha.45",
     "main": "dist/main.js",
     "files": [
         "dist"

npm-packages/shared-utils/src/imc/inter-module-communication.ts

@@ -72,10 +72,7 @@ export class InterModuleCommunication {
       }
 
       const message = event.data;
-      if (
-        process.env.NODE_ENV === "development" &&
-        message.from !== undefined
-      ) {
+      if (message.from !== undefined) {
         console.log(
           `Module ${this.thisWindowId} received message from module ${
             message.from

web/components/app-loaders/sandbox-app-loader.tsx

@@ -141,7 +141,7 @@ export default function SandboxAppLoader({
     }
   }, [isConnected]);
 
-  // Send theme update to the extension
+  // Send theme update to the extension when theme changes
   useEffect(() => {
     if (currentViewId && imcContext?.polyIMC?.hasChannel(currentViewId)) {
       imcContext?.polyIMC?.sendMessage(
@@ -166,7 +166,7 @@ export default function SandboxAppLoader({
         getHandlerMap(viewModel),
       );
     }
-  }, [viewModel, isConnected]);
+  }, [viewModel]);
 
   function getHandlerMap(model: ViewModel) {
     const newMap = new Map<IMCMessageTypeEnum, ReceiverHandler>();
@@ -188,6 +188,16 @@ export default function SandboxAppLoader({
         if (onInitialLoaded) {
           onInitialLoaded();
         }
+
+        // Update with current theme
+        // TODO: pass theme directly to app along with config when creating a new view
+        if (currentViewId && imcContext?.polyIMC?.hasChannel(currentViewId)) {
+          imcContext?.polyIMC?.sendMessage(
+            currentViewId,
+            IMCMessageTypeEnum.EditorThemeUpdate,
+            resolvedTheme,
+          );
+        }
       },
     );
 

web/components/explorer/app/app-explorer.tsx

@@ -33,7 +33,7 @@ export default function AppExplorer() {
         onPress={(ext) => {
           const config: AppViewConfig = {
             app: ext.config.id,
-            viewId: v4(),
+            viewId: `${ext.config.id}-${v4()}`,
             recommendedHeight: ext.config.recommendedHeight,
             recommendedWidth: ext.config.recommendedWidth,
           };

web/components/explorer/file-system/fs-explorer.tsx

@@ -38,8 +38,7 @@ export default function FileSystemExplorer({
 
   function viewFile(uri: string, viewMode: ViewModeEnum) {
     platformApi?.readFile(uri).then((file) => {
-      const viewId = v4();
-      openFileInView(viewId, file, viewMode).then(() => {
+      openFileInView(file, viewMode).then(() => {
         if (platform === PlatformEnum.Capacitor) {
           setIsMenuOpen(false);
         }

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/menu-actions/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,38 +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;
-                    }
-
-                    runAction(
-                      {
-                        action: selectedAction,
-                        viewId: node.id,
-                        type: "app",
-                      },
-                      {},
-                    );
+                    runMenuActionByName("Run Workflow", "view");
                   }}
                 >
                   <Icon name="play_arrow" variant="round" />

web/components/interface/navigation/menu-dropdown/file-menu.tsx

@@ -1,35 +1,51 @@
-import { useMenuActions } from "@/lib/hooks/use-menu-actions";
-import NavMenuDropdown from "../nav-menu-dropdown";
-import { MenuAction } from "@/lib/types";
-import { useEffect } from "react";
+import { useMenuActions } from "@/lib/hooks/menu-actions/use-menu-actions";
+import { useRegisterMenuAction } from "@/lib/hooks/menu-actions/use-register-menu-action";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
-import { ViewModeEnum } from "@pulse-editor/shared-utils";
+import { useEffect, useState } from "react";
 import { v4 } from "uuid";
+import NavMenuDropdown from "../nav-menu-dropdown";
 
 export default function FileMenuDropDown() {
-  const { menuActions, registerMenuAction } = useMenuActions("file");
-  const { createTabView } = useTabViewManager();
+  const { menuActions } = useMenuActions("file");
+  const { createCanvasTabView, activeTabView, closeTabView } =
+    useTabViewManager();
 
-  const defaultMenuActions: MenuAction[] = [
+  useRegisterMenuAction(
     {
       name: "New Workflow",
-      actionFunc: async () => {
-        // Trigger new Workflow creation logic
-        await createTabView(ViewModeEnum.Canvas, { viewId: v4() });
-      },
       menuCategory: "file",
       shortcut: "Ctrl+N",
       icon: "add",
       description: "Create a new Workflow",
     },
-  ];
+    async () => {
+      // Trigger new Workflow creation logic
+      await createCanvasTabView({ viewId: "canvas-" + v4() });
+    },
+    [],
+  );
+
+  const [isCloseWorkflowEnabled, setIsCloseWorkflowEnabled] = useState(false);
+  useRegisterMenuAction(
+    {
+      name: "Close Workflow",
+      menuCategory: "file",
+      shortcut: "Ctrl+C",
+      icon: "close",
+      description: "Close the current workflow",
+    },
+    async () => {
+      if (activeTabView) {
+        closeTabView(activeTabView);
+      }
+    },
+    [activeTabView],
+    isCloseWorkflowEnabled,
+  );
 
-  // Register default menu actions if not already registered
   useEffect(() => {
-    defaultMenuActions.forEach((action) => {
-      registerMenuAction(action);
-    });
-  }, []);
+    setIsCloseWorkflowEnabled(activeTabView !== undefined);
+  }, [activeTabView]);
 
   return <NavMenuDropdown category="File" menuActions={menuActions} />;
 }