fix paste function

src/frontend/src/contexts/tabsContext.tsx

@@ -391,7 +391,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
    * Add a new flow to the list of flows.
    * @param flow Optional flow to add.
    */
-
   function paste(
     selectionInstance: { nodes: Node[]; edges: Edge[] },
     position: { x: number; y: number; paneX?: number; paneY?: number }
@@ -448,15 +447,19 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       );
       let sourceHandle = scapedJSONStringfy({
         ...sourceHandleObject,
-        id: edge.source,
+        id: source,
       });
+      sourceHandleObject.id = source;
+      edge.data.sourceHandle = sourceHandleObject;
       const targetHandleObject: targetHandleType = scapeJSONParse(
         edge.targetHandle!
       );
       let targetHandle = scapedJSONStringfy({
         ...targetHandleObject,
-        id: edge.target,
+        id: target,
       });
+      targetHandleObject.id = target;
+      edge.data.targetHandle = targetHandleObject;
       let id =
         "reactflow__edge-" +
         source +

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

@@ -456,7 +456,7 @@ export default function Page({
                           reactFlowInstance!,
                           getRandomName()
                         );
-                        const newGroupNode = generateNodeFromFlow(newFlow);
+                        const newGroupNode = generateNodeFromFlow(newFlow,getNodeId);
                         setNodes((oldNodes) => [
                           ...oldNodes.filter(
                             (oldNodes) =>

src/frontend/src/utils/reactflowUtils.ts

@@ -1,4 +1,4 @@
-import _ from "lodash";
+import _, { get } from "lodash";
 import {
   Connection,
   Edge,
@@ -659,15 +659,16 @@ export function generateNodeTemplate(Flow: FlowType) {
   return template;
 }
 
-export function generateNodeFromFlow(flow: FlowType): NodeType {
+export function generateNodeFromFlow(flow: FlowType,getNodeId:(type:string)=>string): NodeType {
   const { nodes } = flow.data!;
   const outputNode = _.cloneDeep(findLastNode(flow.data!));
   // console.log(flow)
   const position = getMiddlePoint(nodes);
   let data = _.cloneDeep(flow);
+  const id = getNodeId(outputNode?.data.type!)
   const newGroupNode: NodeType = {
     data: {
-      id: "GroupNode" + data.id,
+      id, 
       type: outputNode?.data.type!,
       node: {
         output_types: outputNode!.data.node!.output_types,
@@ -679,7 +680,7 @@ export function generateNodeFromFlow(flow: FlowType): NodeType {
         flow: data,
       },
     },
-    id: "GroupNode" + data.id,
+    id,
     position,
     type: "genericNode",
   };