Fixed copy button on node toolbar

src/frontend/src/contexts/tabsContext.tsx

@@ -35,6 +35,9 @@ const TabsContextInitialValue: TabsContextType = {
   hardReset: () => {},
   disableCopyPaste: false,
   setDisableCopyPaste: (state: boolean) => {},
+  lastCopiedSelection: null,
+  setLastCopiedSelection: (selection: any) => {},
+
   getNodeId: () => "",
   paste: (
     selection: { nodes: any; edges: any },
@@ -52,6 +55,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   const [flows, setFlows] = useState<Array<FlowType>>([]);
   const [id, setId] = useState(uuidv4());
   const { templates, reactFlowInstance } = useContext(typesContext);
+  const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
 
   const newNodeId = useRef(uuidv4());
   function incrementNodeId() {
@@ -379,6 +383,8 @@ export function TabsProvider({ children }: { children: ReactNode }) {
   return (
     <TabsContext.Provider
       value={{
+        lastCopiedSelection,
+        setLastCopiedSelection,
         disableCopyPaste,
         setDisableCopyPaste,
         save,

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
 import {
@@ -11,14 +11,18 @@ import {
 import { classNames } from "../../../../utils";
 import { Fragment } from "react";
 import NodeModal from "../../../../modals/NodeModal";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { useReactFlow } from "reactflow";
 
 const NodeToolbarComponent = (props) => {
+  const { setLastCopiedSelection } = useContext(TabsContext);
+  const reactFlowInstance = useReactFlow();
   return (
     <>
       <div className="h-10 w-26">
         <span className="isolate inline-flex rounded-md shadow-sm">
           <button
-            className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+            className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
             onClick={() => {
               props.deleteNode(props.data.id);
             }}
@@ -68,11 +72,13 @@ const NodeToolbarComponent = (props) => {
             className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
             onClick={(event) => {
               event.preventDefault();
+              setLastCopiedSelection({
+                nodes: [reactFlowInstance.getNode(props.data.id)],
+                edges: [],
+              });
             }}
           >
-            <DocumentDuplicateIcon
+            <DocumentDuplicateIcon className="w-5 h-5  dark:text-gray-300"></DocumentDuplicateIcon>
-              className="w-5 h-5  dark:text-gray-300"
-            ></DocumentDuplicateIcon>
           </button>
 
           <Menu as="div" className="relative inline-block text-left z-100">

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

@@ -38,20 +38,25 @@ const nodeTypes = {
 };
 
 export default function FlowPage({ flow }: { flow: FlowType }) {
-  let { updateFlow, disableCopyPaste, addFlow, getNodeId, paste } =
+  let {
-    useContext(TabsContext);
+    updateFlow,
+    disableCopyPaste,
+    addFlow,
+    getNodeId,
+    paste,
+    lastCopiedSelection,
+    setLastCopiedSelection,
+  } = useContext(TabsContext);
   const { types, reactFlowInstance, setReactFlowInstance, templates } =
     useContext(typesContext);
   const reactFlowWrapper = useRef(null);
 
-  const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
+  const { takeSnapshot } = useUndoRedo();
 
   const [position, setPosition] = useState({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =
     useState<OnSelectionChangeParams>(null);
 
-  const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
-
   useEffect(() => {
     // this effect is used to attach the global event handlers
 
@@ -63,6 +68,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
         !disableCopyPaste
       ) {
         event.preventDefault();
+        console.log(_.cloneDeep(lastSelection));
         setLastCopiedSelection(_.cloneDeep(lastSelection));
       }
       if (

src/frontend/src/types/tabs/index.ts

@@ -20,6 +20,8 @@ export type TabsContextType = {
     selection: { nodes: any; edges: any },
     position: { x: number; y: number }
   ) => void;
+  lastCopiedSelection: { nodes: any; edges: any };
+  setLastCopiedSelection: (selection: { nodes: any; edges: any }) => void;
 };
 
 export type LangFlowState = {