fix: building vertices not working on Safari and improve stop button (#3569)

* fix: building vertices not working on Safari

* fix: building vertices not working on Safari

* fix: stop build button seems to not work

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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

@@ -315,9 +315,6 @@ export const MenuBar = ({}: {}): JSX.Element => {
               disabled={!isBuilding}
               onClick={(_) => {
                 if (isBuilding) {
-                  setIsBuilding(false);
-                  revertBuiltStatusFromBuilding();
-                  setLockChat(false);
                   window.stop();
                 }
               }}

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

@@ -208,6 +208,7 @@ export type StreamingRequestParams = {
   onData: (event: object) => Promise<boolean>;
   body?: object;
   onError?: (statusCode: number) => void;
+  onNetworkError?: (error: Error) => void;
 };
 
 async function performStreamingRequest({
@@ -216,6 +217,7 @@ async function performStreamingRequest({
   onData,
   body,
   onError,
+  onNetworkError,
 }: StreamingRequestParams) {
   let headers = {
     "Content-Type": "application/json",
@@ -248,35 +250,48 @@ async function performStreamingRequest({
   if (response.body === null) {
     return;
   }
-  for await (const chunk of response.body) {
-    const decodedChunk = await textDecoder.decode(chunk);
-    let all = decodedChunk.split("\n\n");
-    for (const string of all) {
-      if (string.endsWith("}")) {
-        const allString = current.join("") + string;
-        let data: object;
-        try {
-          data = JSON.parse(allString);
-          current = [];
-        } catch (e) {
+  try {
+    const reader = response.body.getReader();
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      const decodedChunk = textDecoder.decode(value);
+      let all = decodedChunk.split("\n\n");
+      for (const string of all) {
+        if (string.endsWith("}")) {
+          const allString = current.join("") + string;
+          let data: object;
+          try {
+            data = JSON.parse(allString);
+            current = [];
+          } catch (e) {
+            current.push(string);
+            continue;
+          }
+          const shouldContinue = await onData(data);
+          if (!shouldContinue) {
+            controller.abort();
+            return;
+          }
+        } else {
           current.push(string);
-          continue;
         }
-        const shouldContinue = await onData(data);
-        if (!shouldContinue) {
-          controller.abort();
-          return;
-        }
-      } else {
-        current.push(string);
       }
     }
-  }
-  if (current.length > 0) {
-    const allString = current.join("");
-    if (allString) {
-      const data = JSON.parse(current.join(""));
-      await onData(data);
+    if (current.length > 0) {
+      const allString = current.join("");
+      if (allString) {
+        const data = JSON.parse(current.join(""));
+        await onData(data);
+      }
+    }
+  } catch (e: any) {
+    if (onNetworkError) {
+      onNetworkError(e);
+    } else {
+      throw e;
     }
   }
 }

src/frontend/src/stores/flowStore.ts

@@ -642,6 +642,14 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         get().setLockChat(false);
       },
       onBuildUpdate: handleBuildUpdate,
+      onBuildStopped: () => {
+        get().setIsBuilding(false);
+        setErrorData({
+          title: "Build stopped",
+        });
+        get().revertBuiltStatusFromBuilding();
+        get().setLockChat(false);
+      },
       onBuildError: (title: string, list: string[], elementList) => {
         const idList = elementList
           .map((element) => element.id)

src/frontend/src/utils/buildUtils.ts

@@ -26,6 +26,7 @@ type BuildVerticesParams = {
   ) => void; // Replace any with the actual type if it's not any
   onBuildComplete?: (allNodesValid: boolean) => void;
   onBuildError?: (title, list, idList: VertexLayerElementType[]) => void;
+  onBuildStopped?: () => void;
   onBuildStart?: (idList: VertexLayerElementType[]) => void;
   onValidateNodes?: (nodes: string[]) => void;
   nodes?: Node[];
@@ -143,6 +144,7 @@ export async function buildFlowVertices({
   onBuildUpdate,
   onBuildComplete,
   onBuildError,
+  onBuildStopped,
   onBuildStart,
   onValidateNodes,
   nodes,
@@ -297,6 +299,8 @@ export async function buildFlowVertices({
       }
       throw new Error("error in streaming request");
     },
+    // network error are likely caused by the window.stop() called in the stopBuild function
+    onNetworkError: onBuildStopped,
   });
 }