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,8 +250,14 @@ async function performStreamingRequest({
   if (response.body === null) {
     return;
   }
-  for await (const chunk of response.body) {
+  try {
-    const decodedChunk = await textDecoder.decode(chunk);
+    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("}")) {
@@ -279,6 +287,13 @@ async function performStreamingRequest({
         await onData(data);
       }
     }
+  } catch (e: any) {
+    if (onNetworkError) {
+      onNetworkError(e);
+    } else {
+      throw e;
+    }
+  }
 }
 
 export { ApiInterceptor, api, performStreamingRequest };

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,
   });
 }