almost fixing, miss delte session and delete session message

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

@@ -1027,7 +1027,11 @@ export async function getMessagesTable(
   id?: string,
   excludedFields?: string[],
   params = {},
-): Promise<{ rows: Array<Message>; columns: Array<ColDef | ColGroupDef> }> {
+): Promise<{
+  rows: Array<Message>;
+  columns: Array<ColDef | ColGroupDef>;
+  sessions: Array<string>;
+}> {
   const config = {};
   if (id) {
     config["params"] = { flow_id: id };
@@ -1037,20 +1041,11 @@ export async function getMessagesTable(
   }
   const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
   const columns = extractColumnsFromRows(rows.data, mode, excludedFields);
-  return { rows: rows.data, columns };
-}
-
-export async function getSessions(id?: string): Promise<Array<string>> {
-  const config = {};
-  if (id) {
-    config["params"] = { flow_id: id };
-  }
-  const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
   const sessions = new Set<string>();
   rows.data.forEach((row) => {
     sessions.add(row.session_id);
   });
-  return Array.from(sessions);
+  return { rows: rows.data, columns, sessions: Array.from(sessions) };
 }
 
 export async function deleteMessagesFn(ids: number[]) {

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

@@ -0,0 +1,68 @@
+import {
+  CellEditRequestEvent,
+  ColDef,
+  ColGroupDef,
+  SelectionChangedEvent,
+} from "ag-grid-community";
+import { useState } from "react";
+import TableComponent from "../../../../components/tableComponent";
+import { Card, CardContent } from "../../../../components/ui/card";
+import useAlertStore from "../../../../stores/alertStore";
+import { useMessagesStore } from "../../../../stores/messagesStore";
+import useUpdateMessage from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage";
+import useRemoveMessages from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages";
+import useMessagesTable from "../../../../pages/SettingsPage/pages/messagesPage/hooks/use-messages-table";
+import HeaderMessagesComponent from "../../../../pages/SettingsPage/pages/messagesPage/components/headerMessages";
+
+export default function SessionView({
+  session,
+  columns,
+}: {
+  session: string;
+  columns: Array<ColDef | ColGroupDef>;
+}) {
+  const messages = useMessagesStore((state) => state.messages);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+  const { handleRemoveMessages } = useRemoveMessages(
+    setSelectedRows,
+    setSuccessData,
+    setErrorData,
+    selectedRows,
+  );
+
+  const { handleUpdate } = useUpdateMessage(setSuccessData, setErrorData);
+
+  function handleUpdateMessage(event: CellEditRequestEvent<any, string>) {
+    const newValue = event.newValue;
+    const field = event.column.getColId();
+    const row = event.data;
+    const data = {
+      ...row,
+      [field]: newValue,
+    };
+    handleUpdate(data);
+  }
+
+  return (
+    <TableComponent
+      readOnlyEdit
+      onCellEditRequest={(event) => {
+        handleUpdateMessage(event);
+      }}
+      editable={["Sender Name", "Message"]}
+      overlayNoRowsTemplate="No data available"
+      onSelectionChanged={(event: SelectionChangedEvent) => {
+        setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
+      }}
+      rowSelection="multiple"
+      suppressRowClickSelection={true}
+      pagination={true}
+      columnDefs={columns}
+      rowData={messages.filter((message) => message.session_id === session)}
+    />
+  );
+}

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

@@ -25,7 +25,10 @@ import { cn } from "../../utils/utils";
 import BaseModal from "../baseModal";
 import IOFieldView from "./components/IOFieldView";
 import ChatView from "./components/chatView";
-import { getSessions } from "../../controllers/API";
+import { getMessagesTable } from "../../controllers/API";
+import { useMessagesStore } from "../../stores/messagesStore";
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import SessionView from "./components/SessionView";
 
 export default function IOModal({
   children,
@@ -34,6 +37,7 @@ export default function IOModal({
   disable,
 }: IOModalPropsType): JSX.Element {
   const allNodes = useFlowStore((state) => state.nodes);
+  const setMessages = useMessagesStore((state) => state.setMessages);
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput",
   );
@@ -80,6 +84,7 @@ export default function IOModal({
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setNode = useFlowStore((state) => state.setNode);
   const [sessions, setSessions] = useState<string[]>([]);
+  const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
 
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);
@@ -126,8 +131,10 @@ export default function IOModal({
   useEffect(() => {
     setSelectedViewField(startView());
     if (haveChat) {
-      getSessions().then((sessions) => {
+      getMessagesTable("union").then(({ sessions, rows, columns }) => {
         setSessions(sessions);
+        setMessages(rows);
+        setColumns(columns);
       });
     }
   }, [open]);
@@ -300,7 +307,16 @@ export default function IOModal({
                 <TabsContent value={"0"} className="api-modal-tabs-content">
                   {sessions.map((session, index) => {
                     return (
-                      <div className="file-component-accordion-div">
+                      <div
+                        className="file-component-accordion-div cursor-pointer"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          setSelectedViewField({
+                            id: session,
+                            type: "Session",
+                          });
+                        }}
+                      >
                         <div className="flex w-full items-center justify-between border-b px-2 py-1 align-middle">
                           <Badge variant="gray" size="md">
                             {session}
@@ -362,14 +378,17 @@ export default function IOModal({
                   <div className="h-full w-full">
                     {inputs.some(
                       (input) => input.id === selectedViewField.id,
-                    ) ? (
+                    ) && (
                       <IOFieldView
                         type={InputOutput.INPUT}
                         left={false}
                         fieldType={selectedViewField.type!}
                         fieldId={selectedViewField.id!}
                       />
-                    ) : (
+                    )}
+                    {outputs.some(
+                      (output) => output.id === selectedViewField.id,
+                    ) && (
                       <IOFieldView
                         type={InputOutput.OUTPUT}
                         left={false}
@@ -377,6 +396,14 @@ export default function IOModal({
                         fieldId={selectedViewField.id!}
                       />
                     )}
+                    {sessions.some(
+                      (session) => session === selectedViewField.id,
+                    ) && (
+                      <SessionView
+                        columns={columns}
+                        session={selectedViewField.id}
+                      />
+                    )}
                   </div>
                 </div>
               )}