Action Node Selection Done

apps/http-backend/src/index.ts

@@ -2,14 +2,16 @@
 // import axios from "axios";
 import { prismaClient } from "@repo/db/client";
 import cookieParser from 'cookie-parser'
-import { NodeRegistry } from "@repo/nodes/nodeClinet";
+
+
+import { NodeRegistry } from "@repo/nodes/nodeClient";
 import express from "express";
 import { userRouter } from "./routes/userRoutes/userRoutes.js";
 import cors from "cors"
 
 const app = express()
 
-const allowedOrigins = ['http://localhost:3000'];
+const allowedOrigins = ['http://localhost:3000' , 'http://localhost:3001' ];
 app.use(cors({
   origin: allowedOrigins,
   credentials: true,

apps/http-backend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/routes/nodes.routes.ts","./src/routes/userroutes/usermiddleware.ts","./src/routes/userroutes/userroutes.ts"],"version":"5.7.3"}
+{"root":["./src/index.ts","./src/routes/nodes.routes.ts","./src/routes/userRoutes/userMiddleware.ts","./src/routes/userRoutes/userRoutes.ts"],"version":"5.7.3"}

apps/web/app/components/Actions/ActionNode.tsx

@@ -0,0 +1,26 @@
+import { Handle, Position } from "@xyflow/react";
+
+interface ActionNodeProps {
+  data: {
+    label: string;
+    name?: string;
+    icon?: string;
+    type?: string;
+  };
+}
+
+export const ActionNode = ({ data }: ActionNodeProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center p-4 bg-gray-800 border-2 border-blue-500 rounded-lg min-w-[150px]">
+      <Handle type="target" position={Position.Left} />
+
+      <span className="text-3xl mb-2">{data.icon || "⚙️"}</span>
+      <span className="text-white font-semibold">{data.name}</span>
+      <span className="text-gray-400 text-sm">{data.type}</span>
+
+      <Handle type="source" position={Position.Right} />
+    </div>
+  );
+};
+
+export default ActionNode;

apps/web/app/components/Actions/ActionSidebar.tsx

@@ -0,0 +1,79 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@workspace/ui/components/sheet";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@workspace/ui/components/select";
+import { useActions } from "@/app/hooks/useActions";
+
+interface SideBarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectAction: (action: { id: string; name: string; type: string; icon?: string }) => void;
+}
+
+const getAvailableActions = (actions: any): Array<any> => {
+  if (Array.isArray(actions)) return actions;
+  if (actions && Array.isArray(actions.Data)) return actions.Data;
+  return [];
+};
+
+export const ActionSideBar = ({ isOpen, onClose, onSelectAction }: SideBarProps) => {
+  const { actions, loading, error } = useActions({ shouldFetch: true });
+  const availableActions = getAvailableActions(actions);
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <SheetContent className="w-[400px] sm:w-[540px]">
+        <SheetHeader>
+          <SheetTitle>Select an Action</SheetTitle>
+        </SheetHeader>
+
+        {loading ? (
+          <p>Loading...</p>
+        ) : error ? (
+          <p className="text-red-500">Error fetching actions</p>
+        ) : (
+          <Select onValueChange={(value) => {
+            const selected = availableActions.find((a: any) => String(a.id) === value);
+            if (selected) {
+              onSelectAction({
+                id: selected.id,
+                name: selected.name,
+                type: selected.type,
+                icon: 'icon' in selected && selected.icon ? selected.icon : '⚡',
+              });
+              onClose();
+            }
+          }}>
+            <SelectTrigger className="w-full mt-4">
+              <SelectValue placeholder="Select Action" />
+            </SelectTrigger>
+            <SelectContent>
+              {availableActions.length ? (
+                availableActions.map((action: any) => (
+                  <SelectItem key={action.id} value={String(action.id)}>
+                    {'icon' in action && action.icon ? action.icon : '⚡'} {action.name}
+                  </SelectItem>
+                ))
+              ) : (
+                <div className="px-4 py-2 text-muted-foreground">
+                  No actions available
+                </div>
+              )}
+            </SelectContent>
+          </Select>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default ActionSideBar;