workin session managment in playground, need to add tooltips

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

@@ -1030,7 +1030,6 @@ export async function getMessagesTable(
 ): Promise<{
   rows: Array<Message>;
   columns: Array<ColDef | ColGroupDef>;
-  sessions: Array<string>;
 }> {
   const config = {};
   if (id) {
@@ -1045,7 +1044,7 @@ export async function getMessagesTable(
   rows.data.forEach((row) => {
     sessions.add(row.session_id);
   });
-  return { rows: rows.data, columns, sessions: Array.from(sessions) };
+  return { rows: rows.data, columns };
 }
 
 export async function deleteMessagesFn(ids: number[]) {

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

@@ -0,0 +1,29 @@
+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.index),
+      );
+      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

@@ -11,17 +11,13 @@ 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";
+import { Button } from "../../../../components/ui/button";
+import ForwardedIconComponent from "../../../../components/genericIconComponent";
+import { cn } from "../../../../utils/utils";
 
-export default function SessionView({
+export default function SessionView({ rows }: { rows: Array<any> }) {
-  session,
+  const columns = useMessagesStore((state) => state.columns);
-  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);
 
@@ -48,21 +44,43 @@ export default function SessionView({
   }
 
   return (
-    <TableComponent
+    <div className="flex h-full w-full flex-col justify-between gap-6">
-      readOnlyEdit
+      <>
-      onCellEditRequest={(event) => {
+        <div className="flex w-full items-center justify-end gap-4 space-y-0.5">
-        handleUpdateMessage(event);
+          <div className="flex flex-shrink-0 items-center gap-2">
-      }}
+            <Button
-      editable={["Sender Name", "Message"]}
+              data-testid="api-key-button-store"
-      overlayNoRowsTemplate="No data available"
+              variant="primary"
-      onSelectionChanged={(event: SelectionChangedEvent) => {
+              className="group px-2"
-        setSelectedRows(event.api.getSelectedRows().map((row) => row.index));
+              disabled={selectedRows.length === 0}
-      }}
+              onClick={handleRemoveMessages}
-      rowSelection="multiple"
+            >
-      suppressRowClickSelection={true}
+              <ForwardedIconComponent
-      pagination={true}
+                name="Trash2"
-      columnDefs={columns}
+                className={cn(
-      rowData={messages.filter((message) => message.session_id === session)}
+                  "h-5 w-5 text-destructive group-disabled:text-primary",
-    />
+                )}
+              />
+            </Button>
+          </div>
+        </div>
+      </>
+      <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={rows}
+      />
+    </div>
   );
 }

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

@@ -27,8 +27,9 @@ import IOFieldView from "./components/IOFieldView";
 import ChatView from "./components/chatView";
 import { getMessagesTable } from "../../controllers/API";
 import { useMessagesStore } from "../../stores/messagesStore";
-import { ColDef, ColGroupDef } from "ag-grid-community";
 import SessionView from "./components/SessionView";
+import useRemoveSession from "./components/SessionView/hooks";
+import useAlertStore from "../../stores/alertStore";
 
 export default function IOModal({
   children,
@@ -59,6 +60,8 @@ export default function IOModal({
   const [selectedTab, setSelectedTab] = useState(
     inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0,
   );
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
   function startView() {
     if (!chatInput && !chatOutput) {
@@ -84,8 +87,8 @@ 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>>([]);
+  const messages = useMessagesStore((state) => state.messages);
-
+  const setColumns = useMessagesStore((state) => state.setColumns);
   async function updateVertices() {
     return updateVerticesOrder(currentFlow!.id, null);
   }
@@ -114,6 +117,11 @@ export default function IOModal({
     }
   }
 
+  const { handleRemoveSession } = useRemoveSession(
+    setSuccessData,
+    setErrorData,
+  );
+
   useEffect(() => {
     setSelectedTab(inputs.length > 0 ? 1 : outputs.length > 0 ? 2 : 0);
   }, [allNodes.length]);
@@ -131,14 +139,22 @@ export default function IOModal({
   useEffect(() => {
     setSelectedViewField(startView());
     if (haveChat) {
-      getMessagesTable("union").then(({ sessions, rows, columns }) => {
+      getMessagesTable("union").then(({ rows, columns }) => {
-        setSessions(sessions);
         setMessages(rows);
         setColumns(columns);
       });
     }
   }, [open]);
 
+  useEffect(() => {
+    const sessions = new Set<string>();
+    messages.forEach((row) => {
+      sessions.add(row.session_id);
+    });
+    setSessions(Array.from(sessions));
+    sessions;
+  }, [messages]);
+
   return (
     <BaseModal size={"md-thin"} open={open} setOpen={setOpen} disable={disable}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
@@ -322,7 +338,16 @@ export default function IOModal({
                             {session}
                           </Badge>
                           <div className="flex items-center justify-center gap-2 align-middle">
-                            <Button variant="ghost" onClick={() => {}}>
+                            <Button
+                              variant="ghost"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleRemoveSession(session);
+                                if (selectedViewField?.id === session)
+                                  setSelectedViewField(undefined);
+                              }}
+                            >
                               <ShadTooltip content={"delete"}>
                                 <IconComponent
                                   name="Trash2"
@@ -400,8 +425,10 @@ export default function IOModal({
                       (session) => session === selectedViewField.id,
                     ) && (
                       <SessionView
-                        columns={columns}
+                        rows={messages.filter(
-                        session={selectedViewField.id}
+                          (message) =>
+                            message.session_id === selectedViewField.id,
+                        )}
                       />
                     )}
                   </div>

src/frontend/src/stores/messagesStore.ts

@@ -2,6 +2,18 @@ import { create } from "zustand";
 import { MessagesStoreType } from "../types/zustand/messages";
 
 export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
+  deleteSession: (id) => {
+    set((state) => {
+      const updatedMessages = state.messages.filter(
+        (msg) => msg.session_id !== id,
+      );
+      return { messages: updatedMessages };
+    });
+  },
+  columns: [],
+  setColumns: (columns) => {
+    set(() => ({ columns: columns }));
+  },
   messages: [],
   setMessages: (messages) => {
     set(() => ({ messages: messages }));

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

@@ -1,3 +1,4 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
 import { Message } from "../../messages";
 
 export type MessagesStoreType = {
@@ -8,4 +9,7 @@ export type MessagesStoreType = {
   updateMessage: (message: Message) => void;
   clearMessages: () => void;
   removeMessages: (ids: number[]) => void;
+  columns: Array<ColDef | ColGroupDef>;
+  setColumns: (columns: Array<ColDef | ColGroupDef>) => void;
+  deleteSession: (id: string) => void;
 };