fix(typesContext.tsx): import createFlowComponent function from reactflowUtils to fix compilation error

fix(typesContext.tsx): update assignment of custom_components in data object to use correct property name
fix(typesContext.tsx): update assignment of custom_components in data object to use correct property value
fix(typesContext.tsx): update assignment of components in savedComponentsJSON to use createFlowComponent function
fix(typesContext.tsx): update setData function to use functional update to avoid stale state
fix(entities/index.ts): update type of components property in localStorageUserType to use FlowType
fix(flow/index.ts): update property name isNode to isComponent in FlowType
fix(reactflowUtils.ts): update property name isNode to isComponent in createFlowComponent function

src/frontend/src/contexts/typesContext.tsx

@@ -12,6 +12,7 @@ import { APIClassType, APIKindType } from "../types/api";
 import { localStorageUserType } from "../types/entities";
 import { NodeDataType } from "../types/flow";
 import { typesContextType } from "../types/typesContext";
+import { createFlowComponent } from "../utils/reactflowUtils";
 import {
   checkLocalStorageKey,
   getSetFromObject,
@@ -79,7 +80,9 @@ export function TypesProvider({ children }: { children: ReactNode }) {
             savedComponents!
           );
           Object.keys(components).forEach((key) => {
-            data["custom_components"][key] = components[key].node!;
+            data["custom_components"][key] = (
+              components[key].data?.nodes[0].data! as NodeDataType
+            ).node!;
           });
         }
         setData(data);
@@ -181,7 +184,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
       }
     }
     component.node!.official = false;
-    components[key] = component;
+    components[key] = createFlowComponent(component);
     savedComponentsJSON.components = components;
     localStorage.setItem(id, JSON.stringify(savedComponentsJSON));
     setData((prev) => {

src/frontend/src/types/entities/index.ts

@@ -1,4 +1,4 @@
-import { NodeDataType } from "../flow";
+import { FlowType } from "../flow";
 
 export type sidebarNavigationItemType = {
   name: string;
@@ -8,5 +8,5 @@ export type sidebarNavigationItemType = {
 };
 
 export type localStorageUserType = {
-  components: { [key: string]: NodeDataType };
+  components: { [key: string]: FlowType };
 };

src/frontend/src/types/flow/index.ts

@@ -7,7 +7,7 @@ export type FlowType = {
   data: ReactFlowJsonObject | null;
   description: string;
   style?: FlowStyleType;
-  isNode?: boolean;
+  isComponent?: boolean;
 };
 export type NodeType = {
   id: string;

src/frontend/src/utils/reactflowUtils.ts

@@ -1079,9 +1079,9 @@ export function createFlowComponent(nodeData: NodeDataType): FlowType {
       viewport: { x: 1, y: 1, zoom: 1 },
     },
     description: nodeData.node?.description || "",
-    name: nodeData.node?.display_name || "",
+    name: nodeData.node?.display_name || nodeData.type || "",
     id: nodeData.id || "",
-    isNode: true,
+    isComponent: true,
   };
   return flowNode;
 }