Refactor SettingsPage component and add Messages page (#2084)

* Feat: Create the first version of the eraser tool

* feat: Add Messages page to SettingsPage

Refactor the SettingsPage component to include a new "Messages" page. This page will be accessible through the "/settings/messages" route and will display messages related to user settings. The necessary changes have been made to the index.tsx file of the SettingsPage component and the routes.tsx file.

* refactor(tableComponent): update column definitions to include checkbox selection logic for first column

feat(API): add support for excluding specific columns in getMessagesTable function

fix(flowLogsModal): pass excludedFields parameter to getMessagesTable function

refactor(GlobalVariablesPage): remove unnecessary checkbox selection properties from column definitions

fix(messagesPage): pass excludedFields parameter to getMessagesTable function

refactor(utils): add support for excluding specific columns in extractColumnsFromRows function

* feat: Add API endpoints for managing messages

This commit adds new API endpoints for managing messages. It includes the ability to delete messages by their IDs, update a specific message, and delete all messages associated with a session. These changes are implemented in the `monitor.py`, `schema.py`, and `service.py` files.

* ✨ (monitor.py): add MessageIds schema for structured message deletion
♻️ (monitor.py): change delete_messages endpoint to POST for better semantics
♻️ (monitor.py): update delete_messages to use MessageIds schema
✨ (schemas.py): add MessageIds schema for structured message deletion
🐛 (service.py): fix SQL query in delete_messages to use correct column name
✨ (index.tsx): add toTitleCase utility to format column headers
✨ (API/index.ts): add deleteMessagesFn to handle message deletion via API
✨ (headerMessages): add HeaderMessagesComponent for message management UI
✨ (use-messages-table): add useMessagesTable hook to fetch and manage messages
✨ (use-remove-messages): add useRemoveMessages hook to handle message deletion

♻️ (messagesPage): refactor messages page to use new messages store
✨ (messagesStore): create zustand store for managing messages state
✨ (types): add types for messages and zustand messages store

* 💡 (schemas.py): add newline at end of file to follow PEP 8 guidelines

* refactor(headerMessages): update text content in HeaderMessagesComponent

* move editable attribute to table Component

* refactor: Move editable attribute to TableComponent
add update function, need to fix backend

* ♻️ (monitor.py): change POST to DELETE for delete_messages endpoint
♻️ (schemas.py): remove unused MessageIds schema
♻️ (api.tsx): add missing commas in ApiInterceptor function
🐛 (api.tsx): fix duplicate request check to include method "get"
♻️ (index.ts): change deleteMessagesFn to use DELETE method instead of POST
♻️ (use-remove-messages.tsx): clean up comments and improve error handling

* start history in playgroundModal

* ♻️ (monitor.py): refactor update_message to return MessageModelResponse
♻️ (service.py): update SQL query to use index instead of id
♻️ (api.tsx): refactor duplicate request check logic
✨ (check-duplicate-requests.ts): add helper to check and store duplicate requests
🐛 (messagesStore.ts): fix message update logic to use index instead of id

* ♻️ (monitor.py, service.py): remove trailing whitespace to improve code cleanliness

* refactor: Add getSessions function to fetch available sessions in IOModal

* 🐛 (service.py): add missing 'id' column in SQL query to fix data retrieval issue
💡 (service.py): add print statement for debugging SQL query
♻️ (index.tsx): reorder imports for better readability and maintainability

♻️ (flowStore.ts): remove trailing commas to improve code consistency and readability

💡 (index.ts, storeUtils.ts): format type definitions for better readability

* update editable fields

* Feat: Make the table last column non-resizable and add a restore columns button

* Remove unnused imports

* Refactor: Remove “Page size” from table pagination

* Refactor: remove page size directly in css file

* chore: Update description text in SettingsPage

* Refactor: Add ResetColumns component to improve table functionality

* Refactor: Make Reset Column button reset columns order

* Refactor: Remove select from delete session button

* Refactor: Remove commented code for chat history tab in IOModal

* update route

* fix selection bug on Messages Table

* fix libs

---------

Co-authored-by: igorrCarvalho <igorsilvabhz6@gmail.com>
Co-authored-by: ogabrielluiz <gabriel@langflow.org>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>

README.zh_CN.md

@@ -86,11 +86,12 @@ from langflow.load import run_flow_from_json
 
 results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
 ```
+
 # 部署
 
 ## 在Google Cloud Platform上部署Langflow
 
-请按照我们的分步指南使用 Google Cloud Shell 在 Google Cloud Platform (GCP) 上部署 Langflow。该指南在  [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md)  文档中提供。
+请按照我们的分步指南使用 Google Cloud Shell 在 Google Cloud Platform (GCP) 上部署 Langflow。该指南在 [**Langflow in Google Cloud Platform**](GCP_DEPLOYMENT.md) 文档中提供。
 
 或者，点击下面的 "Open in Cloud Shell" 按钮，启动 Google Cloud Shell，克隆 Langflow 仓库，并开始一个互动教程，该教程将指导您设置必要的资源并在 GCP 项目中部署 Langflow。
 
@@ -168,4 +169,4 @@ langflow run [OPTIONS]
 
 # 📄 许可证
 
-Langflow 以 MIT 许可证发布。有关详细信息，请参阅  [LICENSE](LICENSE)  文件。
+Langflow 以 MIT 许可证发布。有关详细信息，请参阅 [LICENSE](LICENSE) 文件。

docs/docs/administration/global-env.mdx

@@ -17,7 +17,6 @@ Global Variables are a useful feature of Langflow, allowing you to define reusab
 - All Credential Global Variables are encrypted and accessible only by you.
 - Set _`LANGFLOW_STORE_ENVIRONMENT_VARIABLES`_ to _`true`_ in your `.env` file to add all variables in _`LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`_ to your user's Global Variables.
 
-
 ## Creating and Adding a Global Variable
 
 To create and add a global variable, click the 🌐 button in a Text field, and then click **+ Add New Variable**.
@@ -25,18 +24,20 @@ To create and add a global variable, click the 🌐 button in a Text field, and
 Text fields are where you write text without opening a Text area, and are identified with the 🌐 icon.
 
 For example, to create an environment variable for the **OpenAI** component:
-   1. In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
-   2. Enter `openai_api_key` in the **Variable Name** field.
-   3. Paste your OpenAI API Key (`sk-...`) in the **Value** field.
-   4. Select **Credential** for the **Type**.
-   5. Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
-   6. Click **Save Variable**.
+
+1.  In the **OpenAI API Key** text field, click the 🌐 button, then **Add New Variable**.
+2.  Enter `openai_api_key` in the **Variable Name** field.
+3.  Paste your OpenAI API Key (`sk-...`) in the **Value** field.
+4.  Select **Credential** for the **Type**.
+5.  Choose **OpenAI API Key** in the **Apply to Fields** field to apply this variable to all fields named **OpenAI API Key**.
+6.  Click **Save Variable**.
 
 You now have a `openai_api_key` global environment variable for your Langflow project.
 Subsequently, clicking the 🌐 button in a Text field will display the new variable in the dropdown.
 
 <Admonition type="tip">
-  You can also create global variables in **Settings** > **Variables and Secrets**.
+  You can also create global variables in **Settings** > **Variables and
+  Secrets**.
 </Admonition>
 
 <ZoomableImage
@@ -65,7 +66,8 @@ Setting `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `true` in your `.env` file (de
 These variables are accessible like any other Global Variable.
 
 <Admonition type="tip">
-  To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `false` in your `.env` file.
+  To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to
+  `false` in your `.env` file.
 </Admonition>
 
 You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`.

docs/docs/components/inputs-and-outputs.mdx

@@ -1,4 +1,4 @@
-import Admonition from '@theme/Admonition';
+import Admonition from "@theme/Admonition";
 import ZoomableImage from "/src/theme/ZoomableImage.js";
 
 # Inputs and Outputs
@@ -29,9 +29,8 @@ This component collects user input from the chat.
 
 <Admonition type="note" title="Note">
   <p>
-    If `As Record` is `true` and the `Message` is a `Record`, the data
-    of the `Record` will be updated with the `Sender`, `Sender Name`, and
-    `Session ID`.
+    If `As Record` is `true` and the `Message` is a `Record`, the data of the
+    `Record` will be updated with the `Sender`, `Sender Name`, and `Session ID`.
   </p>
 </Admonition>
 
@@ -112,9 +111,10 @@ This component sends a message to the chat.
 - **Message:** Specifies the text of the message.
 
 <Admonition type="note" title="Note">
-    <p>
-        If `As Record` is `true` and the `Message` is a `Record`, the data in the `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
-    </p>
+  <p>
+    If `As Record` is `true` and the `Message` is a `Record`, the data in the
+    `Record` is updated with the `Sender`, `Sender Name`, and `Session ID`.
+  </p>
 </Admonition>
 
 ### Text Output
@@ -125,7 +125,6 @@ This component displays text data to the user. It is useful when you want to sho
 
 - **Value:** Specifies the text data to be displayed. Defaults to an empty string.
 
-
 The `TextOutput` component provides a simple way to display text data. It allows textual data to be visible in the chat window during your interaction flow.
 
 ## Prompts
@@ -155,7 +154,8 @@ The `PromptTemplate` component enables users to create prompts and define variab
 
 <Admonition type="info">
   After defining a variable in the prompt template, it acts as its own component
-  input. See [Prompt Customization](../administration/prompt-customization) for more details.
+  input. See [Prompt Customization](../administration/prompt-customization) for
+  more details.
 </Admonition>
 
-- **template:** The template used to format an individual request.
+- **template:** The template used to format an individual request.

docs/docs/components/text-and-record.mdx

@@ -2,7 +2,7 @@
 
 In Langflow 1.0, we added two main input and output types: `Text` and `Record`.
 
-`Text` is a simple string input and output type, while ``Record`` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
+`Text` is a simple string input and output type, while `Record` is a structure very similar to a dictionary in Python. It is a key-value pair data structure.
 
 We've created a few components to help you work with these types. Let's see how a few of them work.
 

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "1.0.0a46"
+version = "1.0.0a43"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <contact@langflow.org>"]
 maintainers = [
@@ -81,7 +81,7 @@ langchain-google-vertexai = "^1.0.3"
 langchain-groq = "^0.1.3"
 langchain-pinecone = "^0.1.0"
 langchain-mistralai = "^0.1.6"
-couchbase = { extras = ["couchbase"], version = "^4.2.1", optional = true }
+couchbase = "^4.2.1"
 youtube-transcript-api = "^0.6.2"
 markdown = "^3.6"
 langchain-chroma = "^0.1.1"
@@ -118,7 +118,6 @@ vulture = "^2.11"
 
 [tool.poetry.extras]
 deploy = ["celery", "redis", "flower"]
-couchbase = ["couchbase"]
 local = ["llama-cpp-python", "sentence-transformers", "ctransformers"]
 
 
@@ -141,7 +140,7 @@ testpaths = ["tests", "integration"]
 console_output_style = "progress"
 filterwarnings = ["ignore::DeprecationWarning"]
 log_cli = true
-markers = ["async_test", "api_key_required"]
+markers = ["async_test"]
 
 
 [tool.ruff]

src/backend/base/langflow/api/v1/monitor.py

@@ -1,9 +1,10 @@
 from typing import List, Optional
-
+from uuid import UUID
 from fastapi import APIRouter, Depends, HTTPException, Query
 
 from langflow.services.deps import get_monitor_service
 from langflow.services.monitor.schema import (
+    MessageModelRequest,
     MessageModelResponse,
     TransactionModelResponse,
     VertexBuildMapModel,
@@ -66,6 +67,44 @@ async def get_messages(
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@router.delete("/messages", status_code=204)
+async def delete_messages(
+    message_ids: List[int],
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        monitor_service.delete_messages(message_ids=message_ids)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/messages/{message_id}", response_model=MessageModelResponse)
+async def update_message(
+    message_id: str,
+    message: MessageModelRequest,
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        message_dict = message.model_dump(exclude_none=True)
+        message_dict.pop("index", None)
+        monitor_service.update_message(message_id=message_id, **message_dict)
+        return MessageModelResponse(index=message_id, **message_dict)
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/messages/session/{session_id}", status_code=204)
+async def delete_messages_session(
+    session_id: str,
+    monitor_service: MonitorService = Depends(get_monitor_service),
+):
+    try:
+        monitor_service.delete_messages_session(session_id=session_id)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @router.get("/transactions", response_model=List[TransactionModelResponse])
 async def get_transactions(
     source: Optional[str] = Query(None),

src/backend/base/langflow/services/monitor/schema.py

@@ -122,6 +122,13 @@ class MessageModelResponse(MessageModel):
         return v
 
 
+class MessageModelRequest(MessageModel):
+    message: str = Field(default="")
+    sender: str = Field(default="")
+    sender_name: str = Field(default="")
+    session_id: str = Field(default="")
+
+
 class VertexBuildModel(BaseModel):
     index: Optional[int] = Field(default=None, alias="index", exclude=True)
     id: Optional[str] = Field(default=None, alias="id")

src/backend/base/langflow/services/monitor/service.py

@@ -32,6 +32,10 @@ class MonitorService(Service):
         except Exception as e:
             logger.exception(f"Error initializing monitor service: {e}")
 
+    def exec_query(self, query: str):
+        with duckdb.connect(str(self.db_path)) as conn:
+            return conn.execute(query).df()
+
     def to_df(self, table_name):
         return self.load_table_as_dataframe(table_name)
 
@@ -69,7 +73,7 @@ class MonitorService(Service):
         valid: Optional[bool] = None,
         order_by: Optional[str] = "timestamp",
     ):
-        query = "SELECT index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        query = "SELECT id, index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
         conditions = []
         if flow_id:
             conditions.append(f"flow_id = '{flow_id}'")
@@ -88,6 +92,8 @@ class MonitorService(Service):
         with duckdb.connect(str(self.db_path)) as conn:
             df = conn.execute(query).df()
 
+        print(query)
+
         return df.to_dict(orient="records")
 
     def delete_vertex_builds(self, flow_id: Optional[str] = None):
@@ -98,11 +104,20 @@ class MonitorService(Service):
         with duckdb.connect(str(self.db_path)) as conn:
             conn.execute(query)
 
-    def delete_messages(self, session_id: str):
+    def delete_messages_session(self, session_id: str):
         query = f"DELETE FROM messages WHERE session_id = '{session_id}'"
 
-        with duckdb.connect(str(self.db_path)) as conn:
-            conn.execute(query)
+        return self.exec_query(query)
+
+    def delete_messages(self, message_ids: list[int]):
+        query = f"DELETE FROM messages WHERE index IN ({','.join(map(str, message_ids))})"
+
+        return self.exec_query(query)
+
+    def update_message(self, message_id: int, **kwargs):
+        query = f"""UPDATE messages SET {', '.join(f"{k} = '{v}'" for k, v in kwargs.items())} WHERE index = {message_id}"""
+
+        return self.exec_query(query)
 
     def add_message(self, message: MessageModel):
         self.add_row("messages", message)

src/frontend/package-lock.json

@@ -26,6 +26,7 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-tooltip": "^1.0.6",
         "@tabler/icons-react": "^2.32.0",
         "@tailwindcss/forms": "^0.5.6",
@@ -2762,6 +2763,31 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
+      "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",

src/frontend/package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tabler/icons-react": "^2.32.0",
     "@tailwindcss/forms": "^0.5.6",

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -23,19 +23,19 @@ export default function AddNewVariableButton({ children }): JSX.Element {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const unavaliableFields = new Set(
-    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields))
+    Object.keys(useGlobalVariablesStore((state) => state.unavaliableFields)),
   );
 
   const availableFields = () => {
     const fields = Array.from(componentFields).filter(
-      (field) => !unavaliableFields.has(field)
+      (field) => !unavaliableFields.has(field),
     );
 
     return sortByName(fields);
   };
 
   const addGlobalVariable = useGlobalVariablesStore(
-    (state) => state.addGlobalVariable
+    (state) => state.addGlobalVariable,
   );
 
   function handleSaveVariable() {

src/frontend/src/components/inputListComponent/index.tsx

@@ -31,7 +31,7 @@ export default function InputListComponent({
     <div
       className={classNames(
         value.length > 1 && editNode ? "my-1" : "",
-        "flex flex-col gap-3"
+        "flex flex-col gap-3",
       )}
     >
       {value.map((singleValue, idx) => {

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -33,7 +33,7 @@ const SideBarFoldersButtonsComponent = ({
   const [foldersNames, setFoldersNames] = useState({});
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const [editFolders, setEditFolderName] = useState(
-    folders.map((obj) => ({ name: obj.name, edit: false }))
+    folders.map((obj) => ({ name: obj.name, edit: false })),
   );
   const uploadFolder = useFolderStore((state) => state.uploadFolder);
   const currentFolder = pathname.split("/");
@@ -58,7 +58,7 @@ const SideBarFoldersButtonsComponent = ({
 
   const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
     folderId,
-    handleFolderChange
+    handleFolderChange,
   );
 
   const handleUploadFlowsToFolder = () => {
@@ -73,7 +73,7 @@ const SideBarFoldersButtonsComponent = ({
     addFolder({ name: "New Folder", parent_id: null, description: "" }).then(
       (res) => {
         getFoldersApi(true);
-      }
+      },
     );
   }
 
@@ -119,7 +119,7 @@ const SideBarFoldersButtonsComponent = ({
         <>
           {folders.map((item, index) => {
             const editFolderName = editFolders?.filter(
-              (folder) => folder.name === item.name
+              (folder) => folder.name === item.name,
             )[0];
             return (
               <div
@@ -135,7 +135,7 @@ const SideBarFoldersButtonsComponent = ({
                     ? "border border-border bg-muted hover:bg-muted"
                     : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
                   "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
-                  folderIdDragging === item.id! ? "bg-border" : ""
+                  folderIdDragging === item.id! ? "bg-border" : "",
                 )}
                 onClick={() => handleChangeFolder!(item.id!)}
               >
@@ -205,7 +205,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              }))
+                              })),
                             );
                           }
                           if (e.key === "Enter") {
@@ -238,10 +238,10 @@ const SideBarFoldersButtonsComponent = ({
                             };
                             const updatedFolder = await updateFolder(
                               body,
-                              item.id!
+                              item.id!,
                             );
                             const updateFolders = folders.filter(
-                              (f) => f.name !== item.name
+                              (f) => f.name !== item.name,
                             );
                             setFolders([...updateFolders, updatedFolder]);
                             setFoldersNames({});
@@ -249,7 +249,7 @@ const SideBarFoldersButtonsComponent = ({
                               folders.map((obj) => ({
                                 name: obj.name,
                                 edit: false,
-                              }))
+                              })),
                             );
                           } else {
                             setFoldersNames((old) => ({

src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx

@@ -0,0 +1,31 @@
+import { cn } from "../../../../utils/utils";
+import ShadTooltip from "../../../shadTooltipComponent";
+import { Toggle } from "../../../ui/toggle";
+
+export default function ResetColumns({
+  resetGrid,
+}: {
+  resetGrid: () => void;
+}): JSX.Element {
+  return (
+    /*<div className="absolute left-2 bottom-1 cursor-pointer">
+          <div
+            className="flex h-10 items-center justify-center px-2 pl-3 rounded-md border border-ring/60 text-sm text-[#bccadc] ring-offset-background placeholder:text-muted-foreground hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            onClick={() => setShow(!show)}
+          >
+            <ForwardedIconComponent name="Settings"></ForwardedIconComponent>
+            <ForwardedIconComponent name={show ? "ChevronLeft" : "ChevronRight"} className="transition-all"></ForwardedIconComponent>
+          </div>
+        </div>*/
+    <div className={cn("absolute bottom-4 left-6")}>
+      <span
+        className="cursor-pointer underline"
+        onClick={() => {
+          resetGrid();
+        }}
+      >
+        Reset Columns
+      </span>
+    </div>
+  );
+}

src/frontend/src/components/tableComponent/index.tsx

@@ -1,22 +1,27 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ElementRef, forwardRef, useCallback } from "react";
+import { ElementRef, forwardRef, useEffect, useRef } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
 } from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
 import "../../style/ag-theme-shadcn.css"; // Custom CSS applied to the grid
-import { cn } from "../../utils/utils";
+import { cn, toTitleCase } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { Toggle } from "../ui/toggle";
+import ShadTooltip from "../shadTooltipComponent";
+import resetGrid from "./utils/reset-grid-columns";
+import ResetColumns from "./components/ResetColumns";
 
 interface TableComponentProps extends AgGridReactProps {
   columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
   rowData: NonNullable<AgGridReactProps["rowData"]>;
   alertTitle?: string;
   alertDescription?: string;
+  editable?: boolean | string[];
 }
 
 const TableComponent = forwardRef<
@@ -31,7 +36,67 @@ const TableComponent = forwardRef<
     },
     ref,
   ) => {
+    let colDef = props.columnDefs.map((col, index) => {
+      let newCol = {
+        ...col,
+        headerName: toTitleCase(col.headerName),
+      };
+      if (index === props.columnDefs.length - 1) {
+        newCol = {
+          ...newCol,
+          resizable: false,
+        };
+      }
+      if (props.onSelectionChanged && index === 0) {
+        newCol = {
+          ...newCol,
+          checkboxSelection: true,
+          headerCheckboxSelection: true,
+          headerCheckboxSelectionFilteredOnly: true,
+        };
+      }
+      if (
+        (typeof props.editable === "boolean" && props.editable) ||
+        (Array.isArray(props.editable) &&
+          props.editable.includes(newCol.headerName ?? ""))
+      ) {
+        newCol = {
+          ...newCol,
+          editable: true,
+        };
+      }
+      return newCol;
+    });
+    const gridRef = useRef(null);
+    // @ts-ignore
+    const realRef = ref?.current ? ref : gridRef;
     const dark = useDarkStore((state) => state.dark);
+    const initialColumnDefs = useRef(colDef);
+
+    const makeLastColumnNonResizable = (columnDefs) => {
+      columnDefs.forEach((colDef, index) => {
+        colDef.resizable = index !== columnDefs.length - 1;
+      });
+      return columnDefs;
+    };
+
+    const onGridReady = (params) => {
+      // @ts-ignore
+      realRef.current = params;
+      const updatedColumnDefs = makeLastColumnNonResizable([...colDef]);
+      params.api.setColumnDefs(updatedColumnDefs);
+      initialColumnDefs.current = params.api.getColumnDefs();
+      if (props.onGridReady) props.onGridReady(params);
+    };
+
+    const onColumnMoved = (params) => {
+      const updatedColumnDefs = makeLastColumnNonResizable(
+        params.columnApi.getAllGridColumns().map((col) => col.getColDef()),
+      );
+      params.api.setColumnDefs(updatedColumnDefs);
+      if (props.onColumnMoved) props.onColumnMoved(params);
+    };
+
     if (props.rowData.length === 0) {
       return (
         <div className="flex h-full w-full items-center justify-center rounded-md border">
@@ -46,12 +111,12 @@ const TableComponent = forwardRef<
         </div>
       );
     }
-
     return (
       <div
         className={cn(
           dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
           "ag-theme-shadcn flex h-full flex-col",
+          "relative",
         )} // applying the grid theme
       >
         <AgGridReact
@@ -60,8 +125,13 @@ const TableComponent = forwardRef<
           defaultColDef={{
             minWidth: 100,
           }}
-          ref={ref}
+          columnDefs={colDef}
+          ref={realRef}
+          pagination={true}
+          onGridReady={onGridReady}
+          onColumnMoved={onColumnMoved}
         />
+        <ResetColumns resetGrid={() => resetGrid(realRef, initialColumnDefs)} />
       </div>
     );
   },

src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx

@@ -0,0 +1,12 @@
+export default function resetGrid(ref, initialColumnDefs) {
+  if (ref?.current && ref?.current.api) {
+    ref.current.api.resetColumnState();
+    if (initialColumnDefs.current) {
+      const resetColumns = ref.current.api.applyColumnState({
+        state: initialColumnDefs.current,
+        applyOrder: true,
+      });
+      return resetColumns;
+    }
+  }
+}

src/frontend/src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../utils/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

src/frontend/src/controllers/API/api.tsx

@@ -48,7 +48,7 @@ function ApiInterceptor() {
         }
         await clearBuildVerticesState(error);
         return Promise.reject(error);
-      }
+      },
     );
 
     const isAuthorizedURL = (url) => {
@@ -65,10 +65,10 @@ function ApiInterceptor() {
         const parsedURL = new URL(url);
 
         const isDomainAllowed = authorizedDomains.some(
-          (domain) => parsedURL.origin === new URL(domain).origin
+          (domain) => parsedURL.origin === new URL(domain).origin,
         );
         const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
-          parsedURL.pathname.includes(endpoint)
+          parsedURL.pathname.includes(endpoint),
         );
 
         return isDomainAllowed || isEndpointAllowed;
@@ -96,7 +96,7 @@ function ApiInterceptor() {
       },
       (error) => {
         return Promise.reject(error);
-      }
+      },
     );
 
     return () => {
@@ -128,7 +128,7 @@ function ApiInterceptor() {
       if (error?.config?.headers) {
         delete error.config.headers["Authorization"];
         error.config.headers["Authorization"] = `Bearer ${cookies.get(
-          "access_token_lf"
+          "access_token_lf",
         )}`;
         const response = await axios.request(error.config);
         return response;

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

@@ -28,6 +28,7 @@ import {
   UploadFileTypeAPI,
   errorsTypeAPI,
 } from "./../../types/api/index";
+import { Message } from "../../types/messages";
 
 /**
  * Fetches all objects from the API endpoint.
@@ -61,7 +62,7 @@ export async function sendAll(data: sendAllProps) {
 }
 
 export async function postValidateCode(
-  code: string
+  code: string,
 ): Promise<AxiosResponse<errorsTypeAPI>> {
   return await api.post(`${BASE_URL_API}validate/code`, { code });
 }
@@ -76,7 +77,7 @@ export async function postValidateCode(
 export async function postValidatePrompt(
   name: string,
   template: string,
-  frontend_node: APIClassType
+  frontend_node: APIClassType,
 ): Promise<AxiosResponse<PromptTypeAPI>> {
   return api.post(`${BASE_URL_API}validate/prompt`, {
     name,
@@ -149,7 +150,7 @@ export async function saveFlowToDatabase(newFlow: {
  * @throws Will throw an error if the update fails.
  */
 export async function updateFlowInDatabase(
-  updatedFlow: FlowType
+  updatedFlow: FlowType,
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}flows/${updatedFlow.id}`, {
@@ -327,7 +328,7 @@ export async function getHealth() {
  *
  */
 export async function getBuildStatus(
-  flowId: string
+  flowId: string,
 ): Promise<AxiosResponse<BuildStatusTypeAPI>> {
   return await api.get(`${BASE_URL_API}build/${flowId}/status`);
 }
@@ -340,7 +341,7 @@ export async function getBuildStatus(
  *
  */
 export async function postBuildInit(
-  flow: FlowType
+  flow: FlowType,
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await api.post(`${BASE_URL_API}build/init/${flow.id}`, flow);
 }
@@ -356,7 +357,7 @@ export async function postBuildInit(
  */
 export async function uploadFile(
   file: File,
-  id: string
+  id: string,
 ): Promise<AxiosResponse<UploadFileTypeAPI>> {
   const formData = new FormData();
   formData.append("file", file);
@@ -365,7 +366,7 @@ export async function uploadFile(
 
 export async function postCustomComponent(
   code: string,
-  apiClass: APIClassType
+  apiClass: APIClassType,
 ): Promise<AxiosResponse<APIClassType>> {
   // let template = apiClass.template;
   return await api.post(`${BASE_URL_API}custom_component`, {
@@ -378,7 +379,7 @@ export async function postCustomComponentUpdate(
   code: string,
   template: APITemplateType,
   field: string,
-  field_value: any
+  field_value: any,
 ): Promise<AxiosResponse<APIClassType>> {
   return await api.post(`${BASE_URL_API}custom_component/update`, {
     code,
@@ -400,7 +401,7 @@ export async function onLogin(user: LoginType) {
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
         },
-      }
+      },
     );
 
     if (response.status === 200) {
@@ -462,11 +463,11 @@ export async function addUser(user: UserInputType): Promise<Array<Users>> {
 
 export async function getUsersPage(
   skip: number,
-  limit: number
+  limit: number,
 ): Promise<Array<Users>> {
   try {
     const res = await api.get(
-      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`
+      `${BASE_URL_API}users/?skip=${skip}&limit=${limit}`,
     );
     if (res.status === 200) {
       return res.data;
@@ -503,7 +504,7 @@ export async function resetPassword(user_id: string, user: resetPasswordType) {
   try {
     const res = await api.patch(
       `${BASE_URL_API}users/${user_id}/reset-password`,
-      user
+      user,
     );
     if (res.status === 200) {
       return res.data;
@@ -577,7 +578,7 @@ export async function saveFlowStore(
     last_tested_version?: string;
   },
   tags: string[],
-  publicFlow = false
+  publicFlow = false,
 ): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}store/components/`, {
@@ -706,7 +707,7 @@ export async function postStoreComponents(component: Component) {
 export async function getComponent(component_id: string) {
   try {
     const res = await api.get(
-      `${BASE_URL_API}store/components/${component_id}`
+      `${BASE_URL_API}store/components/${component_id}`,
     );
     if (res.status === 200) {
       return res.data;
@@ -721,7 +722,7 @@ export async function searchComponent(
   page?: number | null,
   limit?: number | null,
   status?: string | null,
-  tags?: string[]
+  tags?: string[],
 ): Promise<StoreComponentResponse | undefined> {
   try {
     let url = `${BASE_URL_API}store/components/`;
@@ -833,7 +834,7 @@ export async function updateFlowStore(
   },
   tags: string[],
   publicFlow = false,
-  id: string
+  id: string,
 ): Promise<FlowType> {
   try {
     const response = await api.patch(`${BASE_URL_API}store/components/${id}`, {
@@ -917,7 +918,7 @@ export async function deleteGlobalVariable(id: string) {
 export async function updateGlobalVariable(
   name: string,
   value: string,
-  id: string
+  id: string,
 ) {
   try {
     const response = api.patch(`${BASE_URL_API}variables/${id}`, {
@@ -936,7 +937,7 @@ export async function getVerticesOrder(
   startNodeId?: string | null,
   stopNodeId?: string | null,
   nodes?: Node[],
-  Edges?: Edge[]
+  Edges?: Edge[],
 ): Promise<AxiosResponse<VerticesOrderTypeAPI>> {
   // nodeId is optional and is a query parameter
   // if nodeId is not provided, the API will return all vertices
@@ -956,19 +957,19 @@ export async function getVerticesOrder(
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices`,
     data,
-    config
+    config,
   );
 }
 
 export async function postBuildVertex(
   flowId: string,
   vertexId: string,
-  input_value: string
+  input_value: string,
 ): Promise<AxiosResponse<VertexBuildTypeAPI>> {
   // input_value is optional and is a query parameter
   return await api.post(
     `${BASE_URL_API}build/${flowId}/vertices/${vertexId}`,
-    input_value ? { inputs: { input_value: input_value } } : undefined
+    input_value ? { inputs: { input_value: input_value } } : undefined,
   );
 }
 
@@ -992,7 +993,7 @@ export async function getFlowPool({
 }
 
 export async function deleteFlowPool(
-  flowId: string
+  flowId: string,
 ): Promise<AxiosResponse<any>> {
   const config = {};
   config["params"] = { flow_id: flowId };
@@ -1006,7 +1007,7 @@ export async function deleteFlowPool(
  * @returns A promise that resolves to an array of AxiosResponse objects representing the delete responses.
  */
 export async function multipleDeleteFlowsComponents(
-  flowIds: string[]
+  flowIds: string[],
 ): Promise<AxiosResponse<any>[]> {
   const batches: string[][] = [];
 
@@ -1029,7 +1030,7 @@ export async function multipleDeleteFlowsComponents(
 
   // Execute all delete requests
   const responses: Promise<AxiosResponse<any>>[] = batches.map((batch) =>
-    deleteBatch(batch)
+    deleteBatch(batch),
   );
 
   // Return the responses after all requests are completed
@@ -1039,7 +1040,7 @@ export async function multipleDeleteFlowsComponents(
 export async function getTransactionTable(
   id: string,
   mode: "intersection" | "union",
-  params = {}
+  params = {},
 ): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
   config["params"] = { flow_id: id };
@@ -1052,16 +1053,47 @@ export async function getTransactionTable(
 }
 
 export async function getMessagesTable(
-  id: string,
   mode: "intersection" | "union",
-  params = {}
-): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+  id?: string,
+  excludedFields?: string[],
+  params = {},
+): Promise<{ rows: Array<Message>; columns: Array<ColDef | ColGroupDef> }> {
   const config = {};
-  config["params"] = { flow_id: id };
+  if (id) {
+    config["params"] = { flow_id: id };
+  }
   if (params) {
     config["params"] = { ...config["params"], ...params };
   }
   const rows = await api.get(`${BASE_URL_API}monitor/messages`, config);
-  const columns = extractColumnsFromRows(rows.data, mode);
+  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);
+}
+
+export async function deleteMessagesFn(ids: number[]) {
+  try {
+    return await api.delete(`${BASE_URL_API}monitor/messages`, {
+      data: ids,
+    });
+  } catch (error) {
+    console.error("Error deleting flows:", error);
+    throw error;
+  }
+}
+
+export async function updateMessageApi(data: Message) {
+  return await api.post(`${BASE_URL_API}monitor/messages/${data.index}`, data);
+}