diff --git a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx b/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx index df60fd1ef..95a0b8124 100644 --- a/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx +++ b/src/frontend/src/CustomNodes/hooks/use-check-code-validity.tsx @@ -1,3 +1,4 @@ +import { componentsToIgnoreUpdate } from "@/constants/constants"; import { useEffect } from "react"; import { NodeDataType } from "../../types/flow"; import { nodeNames } from "../../utils/styleUtils"; @@ -16,13 +17,11 @@ const useCheckCodeValidity = ( if (!data?.node || !templates) return; const currentCode = templates[data.type]?.template?.code?.value; const thisNodesCode = data.node!.template?.code?.value; - const componentsToIgnore = ["CustomComponent"]; setIsOutdated( currentCode && thisNodesCode && currentCode !== thisNodesCode && - !componentsToIgnore.includes(data.type) && - Object.keys(nodeNames).includes(types[data.type]), + !componentsToIgnoreUpdate.includes(data.type), ); setIsUserEdited(data.node?.edited ?? false); // template.code can be undefined diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 46fc2e5ca..2a3859cbb 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -849,6 +849,8 @@ export const MODAL_CLASSES = export const ALLOWED_IMAGE_INPUT_EXTENSIONS = ["png", "jpg", "jpeg"]; +export const componentsToIgnoreUpdate = ["CustomComponent"]; + export const FS_ERROR_TEXT = "Please ensure your file has one of the following extensions:"; export const SN_ERROR_TEXT = ALLOWED_IMAGE_INPUT_EXTENSIONS.join(", "); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 408ead525..a6b37499b 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -1,4 +1,7 @@ -import { BROKEN_EDGES_WARNING } from "@/constants/constants"; +import { + BROKEN_EDGES_WARNING, + componentsToIgnoreUpdate, +} from "@/constants/constants"; import { brokenEdgeMessage } from "@/utils/utils"; import { cloneDeep, zip } from "lodash"; import { @@ -44,9 +47,27 @@ import useAlertStore from "./alertStore"; import { useDarkStore } from "./darkStore"; import useFlowsManagerStore from "./flowsManagerStore"; import { useGlobalVariablesStore } from "./globalVariablesStore/globalVariables"; +import { useTypesStore } from "./typesStore"; // this is our useStore hook that we can use in our components to get parts of the store and call actions const useFlowStore = create((set, get) => ({ + componentsToUpdate: false, + updateComponentsToUpdate: (nodes) => { + let outdatedNodes = false; + const templates = useTypesStore.getState().templates; + for (let i = 0; i < nodes.length; i++) { + const currentCode = templates[nodes[i].data?.type]?.template?.code?.value; + const thisNodesCode = nodes[i].data?.node!.template?.code?.value; + outdatedNodes = + currentCode && + thisNodesCode && + currentCode !== thisNodesCode && + !nodes[i].data?.node?.edited && + !componentsToIgnoreUpdate.includes(nodes[i].data?.type); + if (outdatedNodes) break; + } + set({ componentsToUpdate: outdatedNodes }); + }, onFlowPage: false, lockChat: false, setLockChat: (lockChat) => { @@ -143,6 +164,7 @@ const useFlowStore = create((set, get) => ({ } let newEdges = cleanEdges(nodes, edges); const { inputs, outputs } = getInputsAndOutputs(nodes); + get().updateComponentsToUpdate(nodes); set({ nodes, edges: newEdges, @@ -188,7 +210,7 @@ const useFlowStore = create((set, get) => ({ let newChange = typeof change === "function" ? change(get().nodes) : change; let newEdges = cleanEdges(newChange, get().edges); const { inputs, outputs } = getInputsAndOutputs(newChange); - + get().updateComponentsToUpdate(newChange); set({ edges: newEdges, nodes: newChange, @@ -633,6 +655,11 @@ const useFlowStore = create((set, get) => ({ .map((element) => element.id) .filter(Boolean) as string[]; useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILT); + if (get().componentsToUpdate) + setErrorData({ + title: + "There are outdated components in the flow. The error could be related to them.", + }); setErrorData({ list, title }); get().setIsBuilding(false); get().setLockChat(false); diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 8d17aa34a..631537939 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -53,6 +53,8 @@ export type FlowPoolType = { }; export type FlowStoreType = { + componentsToUpdate: boolean; + updateComponentsToUpdate: (nodes: Node[]) => void; onFlowPage: boolean; setOnFlowPage: (onFlowPage: boolean) => void; flowPool: FlowPoolType;