Feat: add Copy to node toolbar

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import _, { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
@@ -89,7 +89,7 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
-
+  const setLastCopiedSelection = useFlowStore(state => state.setLastCopiedSelection);
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));
   }, [
@@ -143,6 +143,9 @@ export default function NodeToolbarComponent({
       case "delete":
         deleteNode(data.id);
         break;
+      case "copy":
+        const node = nodes.filter(node => node.id === data.id)
+        setLastCopiedSelection({ nodes: _.cloneDeep(node), edges: [] })
     }
   };
 
@@ -361,6 +364,22 @@ export default function NodeToolbarComponent({
                   </SelectItem>
                 )
               )}
+              <SelectItem value={"copy"}>
+                <div className="flex">
+                  <IconComponent
+                    name="Copy"
+                    className="relative top-0.5 mr-2 h-4 w-4 "
+                  />{" "}
+                  <span className="">Copy</span>{" "}
+                  
+                    <IconComponent
+                      name="Command"
+                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                    ></IconComponent>
+                    <span className="absolute right-2 top-[0.5em]">C</span>
+  
+                </div>
+              </SelectItem>
               {hasStore && (
                 <SelectItem
                   value={"Share"}
@@ -431,7 +450,7 @@ export default function NodeToolbarComponent({
                   <span>
                     <IconComponent
                       name="Delete"
-                      className="absolute right-2 top-2 h-4 w-4 text-red-400"
+                      className="absolute right-2 top-2 h-4 w-4 text-red-400 stroke-2"
                     ></IconComponent>
                   </span>
                 </div>

src/frontend/src/stores/flowStore.ts

@@ -9,7 +9,7 @@ import {
   applyNodeChanges,
 } from "reactflow";
 import { create } from "zustand";
-import { FLOW_BUILD_SUCCESS_ALERT } from "../alerts_constants";
+import { FLOW_BUILD_SUCCESS_ALERT, MISSED_ERROR_ALERT } from "../alerts_constants";
 import { BuildStatus } from "../constants/enums";
 import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
 import { VertexBuildTypeAPI } from "../types/api";
@@ -385,7 +385,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       );
       if (errors.length > 0) {
         setErrorData({
-          title: "Oops! Looks like you missed something",
+          title: MISSED_ERROR_ALERT,
           list: errors,
         });
         get().setIsBuilding(false);

src/frontend/src/utils/styleUtils.ts

@@ -25,6 +25,7 @@ import {
   Code,
   Code2,
   Combine,
+  Command,
   Compass,
   Copy,
   Cpu,
@@ -426,4 +427,5 @@ export const nodeIconsLucide: iconsType = {
   AlertCircle,
   Bot,
   Delete,
+  Command,
 };