fix(frontend): resolve JSON.stringify performance issue

frontend/src/app-components/inputs/AutoCompleteEntitySelect.tsx

@@ -8,6 +8,7 @@
 
 import { ChipTypeMap } from "@mui/material";
 import { AutocompleteProps } from "@mui/material/Autocomplete";
+import stringify from "fast-json-stable-stringify";
 import { forwardRef, useEffect, useRef } from "react";
 
 import { useInfiniteFind } from "@/hooks/crud/useInfiniteFind";
@@ -102,7 +103,7 @@ const AutoCompleteEntitySelect = <
   useEffect(() => {
     fetchNextPage({ pageParam: params });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(searchPayload)]);
+  }, [stringify(searchPayload)]);
 
   return (
     <AutoCompleteSelect<Value, Label, Multiple>

frontend/src/components/nlp/components/NlpTrainForm.tsx

@@ -22,6 +22,7 @@ import {
   RadioGroup,
   Typography,
 } from "@mui/material";
+import stringify from "fast-json-stable-stringify";
 import { FC, useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { useQuery } from "react-query";
@@ -82,7 +83,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
       ) as INlpDatasetKeywordEntity[],
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [allKeywordEntities, allTraitEntities, JSON.stringify(sample)],
+    [allKeywordEntities, allTraitEntities, stringify(sample)],
   );
   const { handleSubmit, control, register, reset, setValue, watch } =
     useForm<INlpSampleFormAttributes>({
@@ -167,7 +168,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
   useEffect(() => {
     reset(defaultValues);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(defaultValues)]);
+  }, [stringify(defaultValues)]);
 
   return (
     <Box className="nlp-train" sx={{ position: "relative", p: 2 }}>
@@ -322,9 +323,7 @@ const NlpDatasetSample: FC<NlpDatasetSampleProps> = ({
               </ContentItem>
             ))}
           </Box>
-          {
+          {/* Keyword entities */}
-            /* Keyword entities */
-          }
           <Box display="flex" flexDirection="column">
             {keywordEntities.map((keywordEntity, index) => (
               <ContentItem

frontend/src/components/visual-editor/Aside.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
@@ -7,6 +7,7 @@
  */
 
 import { Grid, IconButton, Paper, Typography, styled } from "@mui/material";
+import stringify from "fast-json-stable-stringify";
 import { FC, SVGProps } from "react";
 
 import AttachmentIcon from "@/app-components/svg/toolbar/AttachmentIcon";
@@ -88,7 +89,7 @@ export const Block = ({
       onDragStart={(event) => {
         event.dataTransfer.setData(
           "storm-diagram-node",
-          JSON.stringify({
+          stringify({
             ...blockTemplate,
             name,
           }),

frontend/src/components/visual-editor/v2/Diagrams.tsx

@@ -29,6 +29,7 @@ import {
   DiagramModel,
   DiagramModelGenerics,
 } from "@projectstorm/react-diagrams";
+import stringify from "fast-json-stable-stringify";
 import { useRouter } from "next/router";
 import { SyntheticEvent, useCallback, useEffect, useState } from "react";
 import { useQueryClient } from "react-query";
@@ -340,7 +341,7 @@ const Diagrams = () => {
     });
   }, [
     selectedCategoryId,
-    JSON.stringify(
+    stringify(
       blocks.map((b) => {
         return { ...b, position: undefined, updatedAt: undefined };
       }),

frontend/src/hooks/crud/useCount.tsx

@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * Copyright © 2025 Hexastack. All rights reserved.
  *
  * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
  * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import stringify from "fast-json-stable-stringify";
 import { useQuery, UseQueryOptions } from "react-query";
 
 import { EntityType, QueryType } from "@/services/types";
@@ -31,6 +32,6 @@ export const useCount = <TEntity extends IDynamicProps["entity"]>(
   return useQuery({
     ...options,
     queryFn: () => api.count({ where: params }),
-    queryKey: [QueryType.count, entity, JSON.stringify(params)],
+    queryKey: [QueryType.count, entity, stringify(params)],
   });
 };

frontend/src/websocket/SocketIoClient.ts

@@ -6,6 +6,7 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+import stringify from "fast-json-stable-stringify";
 import { io, ManagerOptions, Socket, SocketOptions } from "socket.io-client";
 
 import { IOIncomingMessage, IOOutgoingMessage } from "./types/io-message";
@@ -133,7 +134,7 @@ export class SocketIoClient {
       return response;
     }
     throw new Error(
-      `Request failed with status code ${response.statusCode}: ${JSON.stringify(
+      `Request failed with status code ${response.statusCode}: ${stringify(
         response.body,
       )}`,
     );