refactor: optimize deletion of messages (#2714)

* feat: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

* feat: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

* refactor: optimize deletion of messages in SessionView component

This commit optimizes the deletion of messages in the SessionView component by using the useDeleteMessages hook from the API queries. It replaces the useRemoveMessages hook that was previously used. The new implementation handles the deletion of messages more efficiently and provides better error handling. The selectedRows state is updated after successful deletion, and a success message is displayed to the user. In case of an error, an error message is shown.

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>

src/frontend/src/controllers/API/index.ts

@@ -1070,14 +1070,3 @@ export async function getTransactionTable(
   const columns = extractColumnsFromRows(rows.data, mode);
   return { rows: rows.data, columns };
 }
-
-export async function deleteMessagesFn(ids: string[]) {
-  try {
-    return await api.delete(`${BASE_URL_API}monitor/messages`, {
-      data: ids,
-    });
-  } catch (error) {
-    console.error("Error deleting flows:", error);
-    throw error;
-  }
-}

src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts

@@ -0,0 +1,31 @@
+import { useMutationFunctionType } from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface DeleteMessagesParams {
+  ids: string[];
+}
+
+export const useDeleteMessages: useMutationFunctionType<
+  DeleteMessagesParams
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const deleteMessage = async ({ ids }: DeleteMessagesParams): Promise<any> => {
+    const response = await api.delete(`${getURL("MESSAGES")}`, {
+      data: ids,
+    });
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<
+    DeleteMessagesParams,
+    any,
+    DeleteMessagesParams
+  > = mutate(["useDeleteMessages"], deleteMessage, options);
+
+  return mutation;
+};

src/frontend/src/modals/IOModal/components/SessionView/hooks/index.tsx

@@ -1,29 +0,0 @@
-import { deleteMessagesFn } from "../../../../../controllers/API";
-import { useMessagesStore } from "../../../../../stores/messagesStore";
-
-const useRemoveSession = (setSuccessData, setErrorData) => {
-  const deleteSession = useMessagesStore((state) => state.deleteSession);
-  const messages = useMessagesStore((state) => state.messages);
-
-  const handleRemoveSession = async (session_id: string) => {
-    try {
-      await deleteMessagesFn(
-        messages
-          .filter((msg) => msg.session_id === session_id)
-          .map((msg) => msg.id),
-      );
-      deleteSession(session_id);
-      setSuccessData({
-        title: "Session deleted successfully.",
-      });
-    } catch (error) {
-      setErrorData({
-        title: "Error deleting Session.",
-      });
-    }
-  };
-
-  return { handleRemoveSession };
-};
-
-export default useRemoveSession;

src/frontend/src/modals/IOModal/components/SessionView/index.tsx

@@ -1,5 +1,6 @@
 import Loading from "@/components/ui/loading";
 import {
+  useDeleteMessages,
   useGetMessagesQuery,
   useUpdateMessage,
 } from "@/controllers/API/queries/messages";
@@ -12,7 +13,6 @@ import {
 import cloneDeep from "lodash/cloneDeep";
 import { useMemo, useState } from "react";
 import TableComponent from "../../../../components/tableComponent";
-import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
 import useAlertStore from "../../../../stores/alertStore";
 import { useMessagesStore } from "../../../../stores/messagesStore";
 import { messagesSorter } from "../../../../utils/utils";
@@ -29,19 +29,27 @@ export default function SessionView({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const updateMessage = useMessagesStore((state) => state.updateMessage);
-
+  const deleteMessagesStore = useMessagesStore((state) => state.removeMessages);
   const isFetching = useIsFetching({
     queryKey: ["useGetMessagesQuery"],
     exact: false,
   });
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
-  const { handleRemoveMessages } = useRemoveMessages(
-    setSelectedRows,
-    setSuccessData,
-    setErrorData,
-    selectedRows,
-  );
+  const { mutate: deleteMessages } = useDeleteMessages({
+    onSuccess: () => {
+      deleteMessagesStore(selectedRows);
+      setSelectedRows([]);
+      setSuccessData({
+        title: "Messages deleted successfully.",
+      });
+    },
+    onError: () => {
+      setErrorData({
+        title: "Error deleting messages.",
+      });
+    },
+  });
 
   const { mutate: updateMessageMutation } = useUpdateMessage();
 
@@ -81,6 +89,10 @@ export default function SessionView({
     return filteredMessages;
   }, [session, id, messages]);
 
+  function handleRemoveMessages() {
+    deleteMessages({ ids: selectedRows });
+  }
+
   return isFetching > 0 ? (
     <div className="flex h-full w-full items-center justify-center align-middle">
       <Loading></Loading>

src/frontend/src/modals/IOModal/index.tsx

@@ -1,4 +1,7 @@
-import { useGetMessagesQuery } from "@/controllers/API/queries/messages";
+import {
+  useDeleteMessages,
+  useGetMessagesQuery,
+} from "@/controllers/API/queries/messages";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import AccordionComponent from "../../components/accordionComponent";
@@ -24,7 +27,6 @@ import { cn } from "../../utils/utils";
 import BaseModal from "../baseModal";
 import IOFieldView from "./components/IOFieldView";
 import SessionView from "./components/SessionView";
-import useRemoveSession from "./components/SessionView/hooks";
 import ChatView from "./components/chatView";
 
 export default function IOModal({
@@ -57,6 +59,32 @@ export default function IOModal({
   );
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const deleteSession = useMessagesStore((state) => state.deleteSession);
+
+  const { mutate: deleteSessionFunction } = useDeleteMessages();
+
+  function handleDeleteSession(session_id: string) {
+    deleteSessionFunction(
+      {
+        ids: messages
+          .filter((msg) => msg.session_id === session_id)
+          .map((msg) => msg.id),
+      },
+      {
+        onSuccess: () => {
+          setSuccessData({
+            title: "Session deleted successfully.",
+          });
+          deleteSession(session_id);
+        },
+        onError: () => {
+          setErrorData({
+            title: "Error deleting Session.",
+          });
+        },
+      },
+    );
+  }
 
   function startView() {
     if (!chatInput && !chatOutput) {
@@ -126,11 +154,6 @@ export default function IOModal({
     }
   }
 
-  const { handleRemoveSession } = useRemoveSession(
-    setSuccessData,
-    setErrorData,
-  );
-
   useEffect(() => {
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
   }, [allNodes.length]);
@@ -371,7 +394,7 @@ export default function IOModal({
                               onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
-                                handleRemoveSession(session);
+                                handleDeleteSession(session);
                                 if (selectedViewField?.id === session)
                                   setSelectedViewField(undefined);
                               }}

src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx

@@ -1,30 +0,0 @@
-import { deleteMessagesFn } from "../../../../../controllers/API";
-import { useMessagesStore } from "../../../../../stores/messagesStore";
-
-const useRemoveMessages = (
-  setSelectedRows: (data: string[]) => void,
-  setSuccessData: (data: { title: string }) => void,
-  setErrorData: (data: { title: string }) => void,
-  selectedRows: string[],
-) => {
-  const deleteMessages = useMessagesStore((state) => state.removeMessages);
-
-  const handleRemoveMessages = async () => {
-    try {
-      await deleteMessagesFn(selectedRows);
-      deleteMessages(selectedRows);
-      setSelectedRows([]);
-      setSuccessData({
-        title: "Messages deleted successfully.",
-      });
-    } catch (error) {
-      setErrorData({
-        title: "Error deleting messages.",
-      });
-    }
-  };
-
-  return { handleRemoveMessages };
-};
-
-export default useRemoveMessages;