update message structure in frontend (#2388)

* update messages structure to new structure without index

* style: run prettier

---------

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

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

@@ -1112,7 +1112,7 @@ export async function getMessagesTable(
   return { rows: rowsOrganized, columns };
 }
 
-export async function deleteMessagesFn(ids: number[]) {
+export async function deleteMessagesFn(ids: string[]) {
   try {
     return await api.delete(`${BASE_URL_API}monitor/messages`, {
       data: ids,
@@ -1124,5 +1124,5 @@ export async function deleteMessagesFn(ids: number[]) {
 }
 
 export async function updateMessageApi(data: Message) {
-  return await api.post(`${BASE_URL_API}monitor/messages/${data.index}`, data);
+  return await api.post(`${BASE_URL_API}monitor/messages/${data.id}`, data);
 }

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

@@ -10,7 +10,7 @@ const useRemoveSession = (setSuccessData, setErrorData) => {
       await deleteMessagesFn(
         messages
           .filter((msg) => msg.session_id === session_id)
-          .map((msg) => msg.index),
+          .map((msg) => msg.id),
       );
       deleteSession(session_id);
       setSuccessData({

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

@@ -17,7 +17,7 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
-  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   const { handleRemoveMessages } = useRemoveMessages(
     setSelectedRows,
@@ -52,7 +52,8 @@ export default function SessionView({ rows }: { rows: Array<any> }) {
       ]}
       overlayNoRowsTemplate="No data available"
       onSelectionChanged={(event: SelectionChangedEvent) => {
-        setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
+        console.log(event.api.getSelectedRows());
+        setSelectedRows(event.api.getSelectedRows().map((row) => row.id));
       }}
       rowSelection="multiple"
       suppressRowClickSelection={true}

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

@@ -2,10 +2,10 @@ import { deleteMessagesFn } from "../../../../../controllers/API";
 import { useMessagesStore } from "../../../../../stores/messagesStore";
 
 const useRemoveMessages = (
-  setSelectedRows: (data: number[]) => void,
+  setSelectedRows: (data: string[]) => void,
   setSuccessData: (data: { title: string }) => void,
   setErrorData: (data: { title: string }) => void,
-  selectedRows: number[],
+  selectedRows: string[],
 ) => {
   const deleteMessages = useMessagesStore((state) => state.removeMessages);
 

src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx

@@ -21,7 +21,7 @@ export default function MessagesPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
-  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   const { handleRemoveMessages } = useRemoveMessages(
     setSelectedRows,

src/frontend/src/stores/messagesStore.ts

@@ -29,7 +29,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
   updateMessage: (message) => {
     set(() => ({
       messages: get().messages.map((msg) =>
-        msg.index === message.index ? message : msg,
+        msg.id === message.id ? message : msg,
       ),
     }));
   },
@@ -41,7 +41,7 @@ export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
       try {
         set((state) => {
           const updatedMessages = state.messages.filter(
-            (msg) => !ids.includes(msg.index),
+            (msg) => !ids.includes(msg.id),
           );
           get().setMessages(updatedMessages);
           resolve(updatedMessages);

src/frontend/src/types/messages/index.ts

@@ -1,7 +1,6 @@
 type Message = {
   artifacts: Record<string, any>;
   flow_id: string;
-  index: number;
   message: string;
   sender: string;
   sender_name: string;

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

@@ -8,7 +8,7 @@ export type MessagesStoreType = {
   removeMessage: (message: Message) => void;
   updateMessage: (message: Message) => void;
   clearMessages: () => void;
-  removeMessages: (ids: number[]) => void;
+  removeMessages: (ids: string[]) => void;
   columns: Array<ColDef | ColGroupDef>;
   setColumns: (columns: Array<ColDef | ColGroupDef>) => void;
   deleteSession: (id: string) => void;