fix: stop building with abort controller (#3634)

* Added buildController and stopBuilding controllers

* Used stop building in header Stop button

* Set the build controller in API performstreamingrequest

* added setbuildcontroller to types

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -50,6 +50,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
   const updatedAt = currentSavedFlow?.updated_at;
   const onFlowPage = useFlowStore((state) => state.onFlowPage);
   const setCurrentFlow = useFlowsManagerStore((state) => state.setCurrentFlow);
+  const stopBuilding = useFlowStore((state) => state.stopBuilding);
 
   const changesNotSaved =
     customStringify(currentFlow) !== customStringify(currentSavedFlow) &&
@@ -310,7 +311,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               disabled={!isBuilding}
               onClick={(_) => {
                 if (isBuilding) {
-                  window.stop();
+                  stopBuilding();
                 }
               }}
               className={

src/frontend/src/controllers/API/api.tsx

@@ -228,6 +228,7 @@ async function performStreamingRequest({
     headers["Authorization"] = `Bearer ${accessToken}`;
   }
   const controller = new AbortController();
+  useFlowStore.getState().setBuildController(controller);
   const params = {
     method: method,
     headers: headers,

src/frontend/src/stores/flowStore.ts

@@ -79,6 +79,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   nodes: [],
   edges: [],
   isBuilding: false,
+  stopBuilding: () => {
+    get().buildController.abort();
+  },
   isPending: true,
   setHasIO: (hasIO) => {
     set({ hasIO });
@@ -766,6 +769,10 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       },
     });
   },
+  buildController: new AbortController(),
+  setBuildController: (controller) => {
+    set({ buildController: controller });
+  },
 }));
 
 export default useFlowStore;

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

@@ -180,4 +180,7 @@ export type FlowStoreType = {
     edges?: Edge[];
     viewport?: Viewport;
   }) => void;
+  stopBuilding: () => void;
+  buildController: AbortController;
+  setBuildController: (controller: AbortController) => void;
 };