From cfbbddd95cb987da10d84df0506579b90f7308a4 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Sun, 10 Mar 2024 01:08:39 -0300 Subject: [PATCH] Add native categories to constants.ts and update nodeToolbarComponent --- src/frontend/src/constants/constants.ts | 10 +++ .../components/nodeToolbarComponent/index.tsx | 63 ++++++++++++++++++- src/frontend/src/stores/flowStore.ts | 15 +++++ src/frontend/src/types/components/index.ts | 5 ++ src/frontend/src/types/zustand/flow/index.ts | 3 + 5 files changed, 94 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index 89a8472c9..af079c739 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -740,6 +740,16 @@ export const PRIORITY_SIDEBAR_ORDER = [ "helpers", "experimental", ]; +export const NATIVE_CATEGORIES = [ + "inputs", + "outputs", + "prompts", + "data", + "prompt", + "models", + "helpers", + "experimental", +]; /* Data ingestion Basic Prompting diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 39f5f6660..349c15e09 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -10,6 +10,7 @@ import { SelectItem, SelectTrigger, } from "../../../../components/ui/select-custom"; +import { postCustomComponent } from "../../../../controllers/API"; import ConfirmationModal from "../../../../modals/ConfirmationModal"; import EditNodeModal from "../../../../modals/EditNodeModal"; import ShareModal from "../../../../modals/shareModal"; @@ -18,6 +19,7 @@ import { useDarkStore } from "../../../../stores/darkStore"; import useFlowStore from "../../../../stores/flowStore"; import useFlowsManagerStore from "../../../../stores/flowsManagerStore"; import { useStoreStore } from "../../../../stores/storeStore"; +import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType } from "../../../../types/api"; import { nodeToolbarPropsType } from "../../../../types/components"; import { FlowType } from "../../../../types/flow"; @@ -38,6 +40,7 @@ export default function NodeToolbarComponent({ showNode, name = "code", selected, + updateNodeCode, setShowState, onCloseAdvancedModal, }: nodeToolbarPropsType): JSX.Element { @@ -56,7 +59,7 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "dict" || data.node.template[templateField].type === "NestedDict") ).length; - + const templates = useTypesStore((state) => state.templates); const hasStore = useStoreStore((state) => state.hasStore); const hasApiKey = useStoreStore((state) => state.hasApiKey); const validApiKey = useStoreStore((state) => state.validApiKey); @@ -70,6 +73,7 @@ export default function NodeToolbarComponent({ const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); const setNodes = useFlowStore((state) => state.setNodes); + const setEdges = useFlowStore((state) => state.setEdges); const unselectAll = useFlowStore((state) => state.unselectAll); const saveComponent = useFlowsManagerStore((state) => state.saveComponent); @@ -79,7 +83,9 @@ export default function NodeToolbarComponent({ const [showModalAdvanced, setShowModalAdvanced] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false); - + const isOutdated = useFlowStore((state) => state.outDatedNodes).includes( + data.id + ); const [flowComponent, setFlowComponent] = useState(); const openInNewTab = (url) => { @@ -170,6 +176,37 @@ export default function NodeToolbarComponent({ paneY: nodes.find((node) => node.id === data.id)?.position.y, } ); + break; + case "update": + takeSnapshot(); + // to update we must get the code from the templates in useTypesStore + const thisNodeTemplate = templates[data.type].template; + // if the template does not have a code key + // return + if (!thisNodeTemplate.code) return; + + const currentCode = thisNodeTemplate.code.value; + if (data.node) { + postCustomComponent(currentCode, data.node) + .then((apiReturn) => { + const { data } = apiReturn; + if (data && updateNodeCode) { + updateNodeCode(data, currentCode, "code"); + } + }) + .catch((err) => { + console.log(err); + }); + setNode(data.id, (oldNode) => { + let newNode = cloneDeep(oldNode); + newNode.data = { + ...data, + }; + newNode.data.node.template.code.value = currentCode; + return newNode; + }); + } + break; } }; @@ -470,6 +507,28 @@ export default function NodeToolbarComponent({ C + {isOutdated && ( + +
+ {" "} + Update{" "} + {navigator.userAgent.toUpperCase().includes("MAC") ? ( + + ) : ( + + Ctrl +{" "} + + )} + U +
+ + )} {hasStore && ( ((set, get) => ({ } }); }, + outDatedNodes: [], + addToOutdatedNodes: (nodeId) => { + // add the nodes to the list of outdated nodes + // without removing the previous ones + let oldOutDatedNodes = get().outDatedNodes; + // filter out the nodes that are already in the list + if (!oldOutDatedNodes.includes(nodeId)) { + set({ outDatedNodes: [...oldOutDatedNodes, nodeId] }); + } + }, + removeFromOutdatedNodes: (nodeId) => { + // remove the nodes from the list of outdated nodes + let oldOutDatedNodes = get().outDatedNodes; + set({ outDatedNodes: oldOutDatedNodes.filter((id) => id !== nodeId) }); + }, })); export default useFlowStore; diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 0b50e36f0..0f5c056c7 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -491,6 +491,11 @@ export type nodeToolbarPropsType = { openAdvancedModal?: boolean; onCloseAdvancedModal?: (close: boolean) => void; selected: boolean; + updateNodeCode?: ( + newNodeClass: APIClassType, + code?: string, + name?: string + ) => void; setShowState: (show: boolean | SetStateAction) => void; }; diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 0f5fe6ecc..01cac5516 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -124,4 +124,7 @@ export type FlowStoreType = { data: FlowPoolObjectType | ChatOutputType | chatInputType, buildId?: string ) => void; + outDatedNodes: string[]; + addToOutdatedNodes: (nodeId: string) => void; + removeFromOutdatedNodes: (nodeId: string) => void; };