From 04bbf4eaf0b54ae05df578b2a256148890c33b68 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 28 Feb 2024 17:20:57 +0100
Subject: [PATCH] Made vertices be retrieved when opening chat or when changing
 anything. Added chat input in request.

---
 .../src/CustomNodes/GenericNode/index.tsx     |   2 +-
 .../src/components/IOInputField/index.tsx     |   8 +-
 .../src/components/IOOutputView/index.tsx     |   4 +-
 src/frontend/src/components/IOview/index.tsx  |  83 ++++++++-----
 .../chatComponent/buildTrigger/index.tsx      |   4 +-
 .../newChatView/chatInput/index.tsx           |  18 +--
 src/frontend/src/controllers/API/api.tsx      |   2 +-
 src/frontend/src/controllers/API/index.ts     |   5 +-
 src/frontend/src/stores/flowStore.ts          |  82 ++++++++-----
 src/frontend/src/stores/flowsManagerStore.ts  |   3 +-
 src/frontend/src/types/zustand/flow/index.ts  |   8 +-
 src/frontend/src/utils/buildUtils.ts          | 115 +++++++++++-------
 12 files changed, 203 insertions(+), 131 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 5632f3c7a..a536ec6d6 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -465,7 +465,7 @@ export default function GenericNode({
                   if (buildStatus === BuildStatus.BUILDING || isBuilding)
                     return;
                   setValidationStatus(null);
-                  buildFlow(data.id);
+                  buildFlow({nodeId: data.id});
                 }}
               >
                 <div>
diff --git a/src/frontend/src/components/IOInputField/index.tsx b/src/frontend/src/components/IOInputField/index.tsx
index e7aac5928..20c6dceb3 100644
--- a/src/frontend/src/components/IOInputField/index.tsx
+++ b/src/frontend/src/components/IOInputField/index.tsx
@@ -19,12 +19,12 @@ export default function IOInputField({
           <Textarea
             className="w-full"
             placeholder={"Enter text..."}
-            value={node.data.node!.template["value"].value}
+            value={node.data.node!.template["input_value"].value}
             onChange={(e) => {
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value = e.target.value;
                 setNode(node.id, newNode);
               }
             }}
@@ -49,12 +49,12 @@ export default function IOInputField({
           <Textarea
             className="w-full custom-scroll"
             placeholder={"Enter text..."}
-            value={node.data.node!.template["value"]}
+            value={node.data.node!.template["input_value"]}
             onChange={(e) => {
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value = e.target.value;
                 setNode(node.id, newNode);
               }
             }}
diff --git a/src/frontend/src/components/IOOutputView/index.tsx b/src/frontend/src/components/IOOutputView/index.tsx
index acf041356..00ef69a14 100644
--- a/src/frontend/src/components/IOOutputView/index.tsx
+++ b/src/frontend/src/components/IOOutputView/index.tsx
@@ -30,12 +30,12 @@ export default function IOOutputView({
           <Textarea
             className="w-full custom-scroll"
             placeholder={"Enter text..."}
-            value={node.data.node!.template["value"]}
+            value={node.data.node!.template["input_value"]}
             onChange={(e) => {
               e.target.value;
               if (node) {
                 let newNode = cloneDeep(node);
-                newNode.data.node!.template["value"].value = e.target.value;
+                newNode.data.node!.template["input_value"].value = e.target.value;
                 setNode(node.id, newNode);
               }
             }}
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 0e3f9e7e9..6f836fe41 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -1,9 +1,13 @@
-import { cloneDeep } from "lodash";
 import { useEffect, useState } from "react";
-import { CHAT_FORM_DIALOG_SUBTITLE, outputsModalTitle, textInputModalTitle } from "../../constants/constants";
+import {
+  CHAT_FORM_DIALOG_SUBTITLE,
+  outputsModalTitle,
+  textInputModalTitle,
+} from "../../constants/constants";
 import BaseModal from "../../modals/baseModal";
-import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { updateVerticesOrder } from "../../utils/buildUtils";
 import { cn } from "../../utils/utils";
 import AccordionComponent from "../AccordionComponent";
 import IOInputField from "../IOInputField";
@@ -40,27 +44,47 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
     { type: string; id: string } | undefined
   >(undefined);
 
-  const { getNode, setNode, buildFlow, getFlow } = useFlowStore();
-  const { setErrorData } = useAlertStore();
+  const buildFlow = useFlowStore((state) => state.buildFlow);
   const setIsBuilding = useFlowStore((state) => state.setIsBuilding);
   const [lockChat, setLockChat] = useState(false);
   const [chatValue, setChatValue] = useState("");
   const isBuilding = useFlowStore((state) => state.isBuilding);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const verticesBuild = useFlowStore((state) => state.verticesBuild);
+  const updateVerticesBuild = useFlowStore(
+    (state) => state.updateVerticesBuild
+  );
+
+  async function updateVertices() {
+    return new Promise<void>((resolve, reject) => {
+      if (!verticesBuild) {
+        updateVerticesOrder(currentFlow!.id, null).then((orderResponse) => {
+          resolve();
+        });
+      }
+      resolve();
+    });
+  }
+
+  useEffect(() => {
+    updateVertices();
+  }, [currentFlow]);
+
+  useEffect(() => {
+    if (open) {
+      updateVerticesBuild(null);
+      updateVertices();
+    }
+  }, [open]);
 
   async function sendMessage(count = 1): Promise<void> {
     if (isBuilding) return;
-    const { nodes, edges } = getFlow();
+    await updateVertices();
     setIsBuilding(true);
     setLockChat(true);
     setChatValue("");
-    const chatInputNode = nodes.find((node) => node.id === chatInput?.id);
-    if (chatInputNode) {
-      let newNode = cloneDeep(chatInputNode);
-      newNode.data.node!.template["input_value"].value = chatValue;
-      setNode(chatInput!.id, newNode);
-    }
     for (let i = 0; i < count; i++) {
-      await buildFlow().catch((err) => {
+      await buildFlow({ input_value: chatValue }).catch((err) => {
         console.error(err);
         setLockChat(false);
       });
@@ -104,7 +128,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                 <Tabs
                   value={selectedTab.toString()}
                   className={
-                    "flex h-full flex-col overflow-y-auto custom-scroll rounded-md border bg-muted text-center"
+                    "flex h-full flex-col overflow-y-auto rounded-md border bg-muted text-center custom-scroll"
                   }
                   onValueChange={(value) => {
                     setSelectedTab(Number(value));
@@ -266,24 +290,27 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
                       {selectedViewField.type}
                     </div>
                     <div className="h-full">
-                    {inputs.some(
-                      (input) => input.id === selectedViewField.id
-                    ) ? (
-                      <IOInputField
-                        inputType={selectedViewField.type!}
-                        inputId={selectedViewField.id!}
-                      />
-                    ) : (
-                      <IOOutputView
-                        outputType={selectedViewField.type!}
-                        outputId={selectedViewField.id!}
-                      />
-                    )}
+                      {inputs.some(
+                        (input) => input.id === selectedViewField.id
+                      ) ? (
+                        <IOInputField
+                          inputType={selectedViewField.type!}
+                          inputId={selectedViewField.id!}
+                        />
+                      ) : (
+                        <IOOutputView
+                          outputType={selectedViewField.type!}
+                          outputId={selectedViewField.id!}
+                        />
+                      )}
                     </div>
                   </div>
                 )}
                 <div
-                  className={cn("flex w-full h-full",selectedViewField ? "hidden" : "")}
+                  className={cn(
+                    "flex h-full w-full",
+                    selectedViewField ? "hidden" : ""
+                  )}
                 >
                   <NewChatView
                     sendMessage={sendMessage}
diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index 2db2e0c3b..2014b2b47 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -23,8 +23,6 @@ export default function BuildTrigger({
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setFlowState = useFlowStore((state) => state.setFlowState);
 
   const eventClick = isBuilding ? "pointer-events-none" : "";
   const [progress, setProgress] = useState(0);
@@ -47,7 +45,7 @@ export default function BuildTrigger({
       setIsBuilding(true);
 
       await enforceMinimumLoadingTime(startTime, minimumLoadingTime);
-      await buildFlow();
+      await buildFlow({});
     } catch (error) {
       console.error("Error:", error);
     } finally {
diff --git a/src/frontend/src/components/newChatView/chatInput/index.tsx b/src/frontend/src/components/newChatView/chatInput/index.tsx
index 8d60c2e8e..7c112bfd2 100644
--- a/src/frontend/src/components/newChatView/chatInput/index.tsx
+++ b/src/frontend/src/components/newChatView/chatInput/index.tsx
@@ -4,6 +4,7 @@ import { Textarea } from "../../../components/ui/textarea";
 import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
 import { chatInputPlaceholder, chatInputPlaceholderSend } from "../../../constants/constants";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
 
 export default function ChatInput({
   lockChat,
@@ -14,20 +15,21 @@ export default function ChatInput({
   noInput,
 }: chatInputType): JSX.Element {
   const [repeat, setRepeat] = useState(1);
+  const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();
     }
   }, [lockChat, inputRef]);
 
-  function handleChange(value: number) {
+/*   function handleChange(value: number) {
     console.log(value);
     if (value > 0) {
       setRepeat(value);
     } else {
       setRepeat(1);
     }
-  }
+  } */
 
   useEffect(() => {
     if (inputRef.current) {
@@ -41,13 +43,13 @@ export default function ChatInput({
       <div className="relative w-full">
         <Textarea
           onKeyDown={(event) => {
-            if (event.key === "Enter" && !lockChat && !event.shiftKey) {
+            if (event.key === "Enter" && !lockChat && !saveLoading && !event.shiftKey) {
               sendMessage(repeat);
             }
           }}
           rows={1}
           ref={inputRef}
-          disabled={lockChat || noInput}
+          disabled={lockChat || noInput || saveLoading}
           style={{
             resize: "none",
             bottom: `${inputRef?.current?.scrollHeight}px`,
@@ -58,12 +60,12 @@ export default function ChatInput({
                 : "hidden"
             }`,
           }}
-          value={lockChat ? "Thinking..." : chatValue}
+          value={lockChat ? "Thinking..." : (saveLoading ? "Saving..." : chatValue)}
           onChange={(event): void => {
             setChatValue(event.target.value);
           }}
           className={classNames(
-            lockChat
+            (lockChat || saveLoading)
               ? " form-modal-lock-true bg-input"
               : noInput
               ? "form-modal-no-input bg-input"
@@ -87,10 +89,10 @@ export default function ChatInput({
                 ? "text-primary"
                 : "bg-chat-send text-background"
             )}
-            disabled={lockChat}
+            disabled={lockChat || saveLoading}
             onClick={(): void => sendMessage(repeat)}
           >
-            {lockChat ? (
+            {lockChat || saveLoading ? (
               <IconComponent
                 name="Lock"
                 className="form-modal-lock-icon"
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 0942374e5..a7224dbc4 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -123,7 +123,7 @@ function ApiInterceptor() {
   async function clearBuildVerticesState(error) {
     if (error?.response?.status === 500) {
       const vertices = useFlowStore.getState().verticesBuild;
-      useFlowStore.getState().updateBuildStatus(vertices, BuildStatus.BUILT);
+      useFlowStore.getState().updateBuildStatus(vertices?.verticesIds ?? [], BuildStatus.BUILT);
       useFlowStore.getState().setIsBuilding(false);
     }
   }
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 5df2ebfa5..6e7b456f8 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -869,9 +869,10 @@ export async function getVerticesOrder(
 
 export async function postBuildVertex(
   flowId: string,
-  vertexId: string
+  vertexId: string,
+  input_value: string,
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
-  return await api.post(`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`);
+  return await api.post(`${BASE_URL_API}build/${flowId}/vertices/${vertexId}`, {inputs: {input_value: input_value}});
 }
 
 export async function downloadImage({ flowId, fileName }): Promise<any> {
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index f9a211e86..ba3bebf46 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -9,9 +9,12 @@ import {
   applyNodeChanges,
 } from "reactflow";
 import { create } from "zustand";
-import { FLOW_BUILD_SUCCESS_ALERT, MISSED_ERROR_ALERT } from "../constants/alerts_constants";
+import {
+  FLOW_BUILD_SUCCESS_ALERT,
+  MISSED_ERROR_ALERT,
+} from "../constants/alerts_constants";
 import { BuildStatus } from "../constants/enums";
-import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
+import { getFlowPool } from "../controllers/API";
 import { VertexBuildTypeAPI } from "../types/api";
 import {
   NodeDataType,
@@ -19,7 +22,12 @@ import {
   sourceHandleType,
   targetHandleType,
 } from "../types/flow";
-import { ChatOutputType, FlowPoolObjectType, FlowStoreType, chatInputType } from "../types/zustand/flow";
+import {
+  ChatOutputType,
+  FlowPoolObjectType,
+  FlowStoreType,
+  chatInputType,
+} from "../types/zustand/flow";
 import { buildVertices } from "../utils/buildUtils";
 import {
   cleanEdges,
@@ -59,23 +67,25 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     }
     get().setFlowPool(newFlowPool);
   },
-  updateFlowPool:(nodeId:string,data:FlowPoolObjectType| ChatOutputType | chatInputType,buildId?:string)=>{
+  updateFlowPool: (
+    nodeId: string,
+    data: FlowPoolObjectType | ChatOutputType | chatInputType,
+    buildId?: string
+  ) => {
     let newFlowPool = cloneDeep({ ...get().flowPool });
-    if (!newFlowPool[nodeId]){
+    if (!newFlowPool[nodeId]) {
       return;
-    }
-    else {
-      let index = newFlowPool[nodeId].length-1;
-      if(buildId){
-        index = newFlowPool[nodeId].findIndex((flow)=>flow.id===buildId);
+    } else {
+      let index = newFlowPool[nodeId].length - 1;
+      if (buildId) {
+        index = newFlowPool[nodeId].findIndex((flow) => flow.id === buildId);
       }
       //check if the data is a flowpool object
-      if((data as FlowPoolObjectType).data?.artifacts!==undefined){
-        newFlowPool[nodeId][index] = (data as FlowPoolObjectType);
+      if ((data as FlowPoolObjectType).data?.artifacts !== undefined) {
+        newFlowPool[nodeId][index] = data as FlowPoolObjectType;
       }
       //update data artifact
-      else
-      {
+      else {
         newFlowPool[nodeId][index].data.artifacts = data;
       }
     }
@@ -394,7 +404,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       });
     });
   },
-  buildFlow: async (nodeId?: string) => {
+  buildFlow: async ({
+    nodeId,
+    input_value,
+  }: {
+    nodeId?: string;
+    input_value?: string;
+  }) => {
     get().setIsBuilding(true);
     const currentFlow = useFlowsManagerStore.getState().currentFlow;
     const setSuccessData = useAlertStore.getState().setSuccessData;
@@ -417,25 +433,19 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
     function handleBuildUpdate(
       vertexBuildData: VertexBuildTypeAPI,
       status: BuildStatus,
-      buildId:string
+      buildId: string
     ) {
       if (vertexBuildData && vertexBuildData.inactive_vertices) {
         get().removeFromVerticesBuild(vertexBuildData.inactive_vertices);
       }
-      get().addDataToFlowPool({...vertexBuildData,buildId}, vertexBuildData.id);
+      get().addDataToFlowPool(
+        { ...vertexBuildData, buildId },
+        vertexBuildData.id
+      );
       useFlowStore.getState().updateBuildStatus([vertexBuildData.id], status);
     }
-    await updateFlowInDatabase({
-      data: {
-        nodes: get().nodes,
-        edges: get().edges,
-        viewport: get().reactFlowInstance?.getViewport()!,
-      },
-      id: currentFlow!.id,
-      name: currentFlow!.name,
-      description: currentFlow!.description,
-    });
     await buildVertices({
+      input_value,
       flowId: currentFlow!.id,
       nodeId,
       onGetOrderSuccess: () => {
@@ -473,16 +483,22 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       viewport: get().reactFlowInstance?.getViewport()!,
     };
   },
-  updateVerticesBuild: (vertices: string[]) => {
+  updateVerticesBuild: (
+    vertices: { verticesIds: string[], verticesOrder: string[][], verticesLayers: string[][], runId: string } | null
+  ) => {
     set({ verticesBuild: vertices });
   },
-  verticesBuild: [],
-
+  verticesBuild: null,
   removeFromVerticesBuild: (vertices: string[]) => {
+    const verticesBuild = get().verticesBuild;
+    if (!verticesBuild) return;
     set({
-      verticesBuild: get().verticesBuild.filter(
-        (vertex) => !vertices.includes(vertex)
-      ),
+      verticesBuild: {
+        ...verticesBuild,
+        verticesIds: get().verticesBuild!.verticesIds.filter(
+          (vertex) => !vertices.includes(vertex)
+        ),
+      },
     });
   },
   updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts
index a65c686b4..49849ba54 100644
--- a/src/frontend/src/stores/flowsManagerStore.ts
+++ b/src/frontend/src/stores/flowsManagerStore.ts
@@ -83,6 +83,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
     if (saveTimeoutId) {
       clearTimeout(saveTimeoutId);
     }
+    set({ saveLoading: true });
     // Set up a new timeout.
     saveTimeoutId = setTimeout(() => {
       if (get().currentFlow) {
@@ -92,7 +93,7 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
         );
       }
       set({ saveLoading: true });
-    }, 1000); // Delay of 1000ms.
+    }, 500); // Delay of 500ms because chat message depends on it.
   },
   saveFlow: (flow: FlowType, silent?: boolean) => {
     set({ saveLoading: true });
diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts
index c506b034f..b4cd0cdfa 100644
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@@ -86,11 +86,11 @@ export type FlowStoreType = {
   getFilterEdge: any[];
   onConnect: (connection: Connection) => void;
   unselectAll: () => void;
-  buildFlow: (nodeId?: string) => Promise<void>;
+  buildFlow: ({nodeId, input_value}: {nodeId?: string, input_value?: string}) => Promise<void>;
   getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
-  updateVerticesBuild: (vertices: string[]) => void;
-  removeFromVerticesBuild: (vertices: string[]) => void;
-  verticesBuild: string[];
+  updateVerticesBuild: (vertices: {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null) => void;
+  removeFromVerticesBuild: (vertices: string[]) => void; 
+  verticesBuild:  {verticesIds: string[], verticesLayers: string[][], verticesOrder: string[][], runId: string} | null;
   updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
   revertBuiltStatusFromBuilding: () => void;
   flowBuildStatus: { [key: string]: BuildStatus };
diff --git a/src/frontend/src/utils/buildUtils.ts b/src/frontend/src/utils/buildUtils.ts
index 3acc3d972..8243a8e0d 100644
--- a/src/frontend/src/utils/buildUtils.ts
+++ b/src/frontend/src/utils/buildUtils.ts
@@ -7,9 +7,14 @@ import { VertexBuildTypeAPI } from "../types/api";
 
 type BuildVerticesParams = {
   flowId: string; // Assuming FlowType is the type for your flow
+  input_value?: any; // Replace any with the actual type if it's not any
   nodeId?: string | null; // Assuming nodeId is of type string, and it's optional
   onGetOrderSuccess?: () => void;
-  onBuildUpdate?: (data: VertexBuildTypeAPI, status: BuildStatus,buildId:string) => void; // Replace any with the actual type if it's not any
+  onBuildUpdate?: (
+    data: VertexBuildTypeAPI,
+    status: BuildStatus,
+    buildId: string
+  ) => void; // Replace any with the actual type if it's not any
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list, idList: string[]) => void;
   onBuildStart?: (idList: string[]) => void;
@@ -34,8 +39,53 @@ function getInactiveVertexData(vertexId: string): VertexBuildTypeAPI {
   return inactiveVertexData;
 }
 
+export async function updateVerticesOrder(flowId: string, nodeId: string | null) {
+  return new Promise(async (resolve, reject) => {
+    const setErrorData = useAlertStore.getState().setErrorData;
+    let orderResponse;
+    try {
+      orderResponse = await getVerticesOrder(flowId, nodeId);
+    } catch (error: any) {
+      console.log(error);
+      setErrorData({
+        title: "Oops! Looks like you missed something",
+        list: [error.response?.data?.detail ?? "Unknown Error"],
+      });
+      useFlowStore.getState().setIsBuilding(false);
+      throw new Error("Invalid nodes");
+    }
+    let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
+    const runId = orderResponse.data.run_id;
+    let verticesLayers: Array<Array<string>> = [];
+
+    if (nodeId) {
+      for (let i = 0; i < verticesOrder.length; i += 1) {
+        const innerArray = verticesOrder[i];
+        const idIndex = innerArray.indexOf(nodeId);
+        if (idIndex !== -1) {
+          // If there's a nodeId, we want to run just that component and not the entire layer
+          // because a layer contains dependencies for the next layer
+          // and we are stopping at the layer that contains the nodeId
+          verticesLayers.push([innerArray[idIndex]]);
+          break; // Stop searching after finding the first occurrence
+        }
+        // If the targetId is not found, include the entire inner array
+        verticesLayers.push(innerArray);
+      }
+    } else {
+      verticesLayers = verticesOrder;
+    }
+
+    const verticesIds = verticesLayers.flat();
+    useFlowStore
+      .getState()
+      .updateVerticesBuild({ verticesLayers, verticesIds, verticesOrder, runId });
+  });
+}
+
 export async function buildVertices({
   flowId,
+  input_value,
   nodeId = null,
   onGetOrderSuccess,
   onBuildUpdate,
@@ -44,24 +94,18 @@ export async function buildVertices({
   onBuildStart,
   validateNodes,
 }: BuildVerticesParams) {
-  const setErrorData = useAlertStore.getState().setErrorData;
-  let orderResponse;
-  try {
-    orderResponse = await getVerticesOrder(flowId, nodeId);
-  } catch (error:any) {
-    console.log(error);
-    setErrorData({
-      title: "Oops! Looks like you missed something",
-      list: [error.response?.data?.detail ?? "Unknown Error"],
-    });
-    useFlowStore.getState().setIsBuilding(false);
-    throw new Error("Invalid nodes");
+  const verticesBuild = useFlowStore.getState().verticesBuild;
+  if (!verticesBuild) {
+    await updateVerticesOrder(flowId, nodeId);
   }
-  if (onGetOrderSuccess) onGetOrderSuccess();
-  let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
-  const runId = orderResponse.data.run_id;
-  let vertices_layers: Array<Array<string>> = [];
+  const verticesIds = verticesBuild?.verticesIds!;
+  const verticesLayers = verticesBuild?.verticesLayers!;
+  const verticesOrder = verticesBuild?.verticesOrder!;
+  const runId = verticesBuild?.runId!;
   let stop = false;
+
+  if (onGetOrderSuccess) onGetOrderSuccess();
+    
   if (validateNodes) {
     try {
       validateNodes(verticesOrder.flatMap((id) => id));
@@ -69,48 +113,29 @@ export async function buildVertices({
       return;
     }
   }
-  if (nodeId) {
-    for (let i = 0; i < verticesOrder.length; i += 1) {
-      const innerArray = verticesOrder[i];
-      const idIndex = innerArray.indexOf(nodeId);
-      if (idIndex !== -1) {
-        // If there's a nodeId, we want to run just that component and not the entire layer
-        // because a layer contains dependencies for the next layer
-        // and we are stopping at the layer that contains the nodeId
-        vertices_layers.push([innerArray[idIndex]]);
-        break; // Stop searching after finding the first occurrence
-      }
-      // If the targetId is not found, include the entire inner array
-      vertices_layers.push(innerArray);
-    }
-  } else {
-    vertices_layers = verticesOrder;
-  }
 
-  const verticesIds = vertices_layers.flat();
   useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
-  useFlowStore.getState().updateVerticesBuild(verticesIds);
   useFlowStore.getState().setIsBuilding(true);
 
   // Set each vertex state to building
   const buildResults: Array<boolean> = [];
-  for (const layer of vertices_layers) {
+  for (const layer of verticesLayers) {
     if (onBuildStart) onBuildStart(layer);
     for (const id of layer) {
       // Check if id is in the list of inactive nodes
-      if (
-        !useFlowStore.getState().verticesBuild.includes(id) &&
-        onBuildUpdate
-      ) {
+      if (!verticesIds.includes(id) && onBuildUpdate) {
         // If it is, skip building and set the state to inactive
-        onBuildUpdate(getInactiveVertexData(id), BuildStatus.INACTIVE,runId);
+        onBuildUpdate(getInactiveVertexData(id), BuildStatus.INACTIVE, runId);
         buildResults.push(false);
         continue;
       }
       await buildVertex({
         flowId,
         id,
-        onBuildUpdate:(data: VertexBuildTypeAPI, status: BuildStatus) => {if(onBuildUpdate) onBuildUpdate(data, status,runId)},
+        input_value,
+        onBuildUpdate: (data: VertexBuildTypeAPI, status: BuildStatus) => {
+          if (onBuildUpdate) onBuildUpdate(data, status, runId);
+        },
         onBuildError,
         verticesIds,
         buildResults,
@@ -137,6 +162,7 @@ export async function buildVertices({
 async function buildVertex({
   flowId,
   id,
+  input_value,
   onBuildUpdate,
   onBuildError,
   verticesIds,
@@ -145,6 +171,7 @@ async function buildVertex({
 }: {
   flowId: string;
   id: string;
+  input_value: string;
   onBuildUpdate?: (data: any, status: BuildStatus) => void;
   onBuildError?: (title, list, idList: string[]) => void;
   verticesIds: string[];
@@ -152,7 +179,7 @@ async function buildVertex({
   stopBuild: () => void;
 }) {
   try {
-    const buildRes = await postBuildVertex(flowId, id);
+    const buildRes = await postBuildVertex(flowId, id, input_value);
     const buildData: VertexBuildTypeAPI = buildRes.data;
     if (onBuildUpdate) {
       if (!buildData.valid) {