diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx index 7d2d4d987..49fb52759 100644 --- a/src/frontend/src/alerts/notice/index.tsx +++ b/src/frontend/src/alerts/notice/index.tsx @@ -47,7 +47,7 @@ export default function NoticeAlert({ />
-

+

{title}

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index c3632cf6d..d5a18f261 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -34,6 +34,7 @@ import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType } from "../../../../types/api"; import { FlowType, NodeType } from "../../../../types/flow"; import { + checkOldComponents, generateFlow, generateNodeFromFlow, getNodeId, @@ -97,6 +98,7 @@ export default function Page({ const onConnect = useFlowStore((state) => state.onConnect); const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); const setErrorData = useAlertStore((state) => state.setErrorData); + const setNoticeData = useAlertStore((state) => state.setNoticeData); const [selectionMenuVisible, setSelectionMenuVisible] = useState(false); const edgeUpdateSuccessful = useRef(true); @@ -170,6 +172,12 @@ export default function Page({ } }, [currentFlowId, reactFlowInstance]); +useEffect(() => { + if(checkOldComponents({nodes:flow?.data?.nodes ?? []})){ + setNoticeData({title:"Components created before Langflow 1.0 may be unstable. Ensure components are up to date."}) + } +},[]) + useEffect(() => { return () => { cleanFlow(); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 24e3a83d3..05f5ff948 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -27,6 +27,7 @@ import { FlowStoreType, VertexLayerElementType } from "../types/zustand/flow"; import { buildVertices } from "../utils/buildUtils"; import { checkChatInput, + checkOldComponents, cleanEdges, getHandleId, getNodeId, @@ -240,6 +241,11 @@ const useFlowStore = create((set, get) => ({ }); return; } + if(selection.nodes){ + if(checkOldComponents({nodes:selection.nodes ?? []})){ + useAlertStore.getState().setNoticeData({title:"Components created before Langflow 1.0 may be unstable. Ensure components are up to date."}) + } + } let minimumX = Infinity; let minimumY = Infinity; let idsMap = {}; diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index ad9666201..34cefa4a1 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -1511,3 +1511,8 @@ export function getGroupOutputNodeId( } return { id: node.id, outputName: p_name }; } + +export function checkOldComponents({nodes}:{nodes:any[]}) { + return nodes.some((node) => node.data.node?.template.code && (node.data.node?.template.code.value as string).includes("(CustomComponent):")); + +}