Merge remote-tracking branch 'origin/dev' into fix/api_settings

2024-06-06 08:29:28 -03:00 · 2024-06-06 08:29:28 -03:00 · cfb1df93ee
commit cfb1df93ee
parent a1e521f2c6 4236d22098
52 changed files with 1446 additions and 523 deletions
--- a/src/backend/base/langflow/api/v1/flows.py
+++ b/src/backend/base/langflow/api/v1/flows.py
@ -9,7 +9,7 @@ from loguru import logger
 from sqlmodel import Session, col, select

 from langflow.api.utils import remove_api_keys, validate_is_component
-from langflow.api.v1.schemas import FlowListCreate, FlowListIds, FlowListRead
+from langflow.api.v1.schemas import FlowListCreate, FlowListRead
 from langflow.initial_setup.setup import STARTER_FOLDER_NAME
 from langflow.services.auth.utils import get_current_active_user
 from langflow.services.database.models.flow import Flow, FlowCreate, FlowRead, FlowUpdate
@ -258,9 +258,9 @@ async def download_file(
    return FlowListRead(flows=flows)


-@router.post("/multiple_delete/")
+@router.delete("/")
 async def delete_multiple_flows(
-    flow_ids: FlowListIds, user: User = Depends(get_current_active_user), db: Session = Depends(get_session)
+    flow_ids: List[UUID], user: User = Depends(get_current_active_user), db: Session = Depends(get_session)
 ):
    """
    Delete multiple flows by their IDs.
@ -274,9 +274,7 @@ async def delete_multiple_flows(

    """
    try:
-        deleted_flows = db.exec(
-            select(Flow).where(col(Flow.id).in_(flow_ids.flow_ids)).where(Flow.user_id == user.id)
-        ).all()
+        deleted_flows = db.exec(select(Flow).where(col(Flow.id).in_(flow_ids)).where(Flow.user_id == user.id)).all()
        for flow in deleted_flows:
            db.delete(flow)
        db.commit()
--- a/src/backend/base/langflow/api/v1/monitor.py
+++ b/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),
--- a/src/backend/base/langflow/services/monitor/schema.py
+++ b/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")
--- a/src/backend/base/langflow/services/monitor/service.py
+++ b/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)
--- a/src/backend/base/poetry.lock
+++ b/src/backend/base/poetry.lock
@ -1197,13 +1197,13 @@ text-helpers = ["chardet (>=5.1.0,<6.0.0)"]

 [[package]]
 name = "langchain-community"
-version = "0.2.2"
+version = "0.2.3"
 description = "Community contributed LangChain integrations."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langchain_community-0.2.2-py3-none-any.whl", hash = "sha256:470ee16e05f1acacb91a656b6d3c2cbf6fb6a8dcb00a13901cd1353cd29c2bb3"},
-    {file = "langchain_community-0.2.2.tar.gz", hash = "sha256:fb09faf4640726a929932056dc55ff120e490aaf2e424fae8ddbb15605195447"},
+    {file = "langchain_community-0.2.3-py3-none-any.whl", hash = "sha256:aa895545be2f3f4aa2fea36f6da2e3b4ec50ce61ec986e8f146901a1e9138138"},
+    {file = "langchain_community-0.2.3.tar.gz", hash = "sha256:a3c35af215e47b700e7cb4e548fa8b45c6d46d52b5a5a65af2577c5a0104fc9f"},
 ]

 [package.dependencies]
@ -1296,13 +1296,13 @@ types-requests = ">=2.31.0.2,<3.0.0.0"

 [[package]]
 name = "langsmith"
-version = "0.1.71"
+version = "0.1.72"
 description = "Client library to connect to the LangSmith LLM Tracing and Evaluation Platform."
 optional = false
 python-versions = "<4.0,>=3.8.1"
 files = [
-    {file = "langsmith-0.1.71-py3-none-any.whl", hash = "sha256:a9979de2780442eb24eced31314e49f5ece6f807a0d70740b2c6c39217226794"},
-    {file = "langsmith-0.1.71.tar.gz", hash = "sha256:bdb1037a08acf7c19b3969c085df09c1eecb65baca8400b3b76ae871e2c8a97e"},
+    {file = "langsmith-0.1.72-py3-none-any.whl", hash = "sha256:a4456707669521bd75b7431b9205a6b99579fb9ff01bd338f52d29df11a7662d"},
+    {file = "langsmith-0.1.72.tar.gz", hash = "sha256:262ae9e8aceaba50f3a0f5b6eb559d6110886f0afc6b0ed5270e7d3d3f1fd8d6"},
 ]

 [package.dependencies]
@ -2214,13 +2214,13 @@ typing-extensions = ">=4.6.0,<4.7.0 || >4.7.0"

 [[package]]
 name = "pydantic-settings"
-version = "2.3.0"
+version = "2.3.1"
 description = "Settings management using Pydantic"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "pydantic_settings-2.3.0-py3-none-any.whl", hash = "sha256:26eeed27370a9c5e3f64e4a7d6602573cbedf05ed940f1d5b11c3f178427af7a"},
-    {file = "pydantic_settings-2.3.0.tar.gz", hash = "sha256:78db28855a71503cfe47f39500a1dece523c640afd5280edb5c5c9c9cfa534c9"},
+    {file = "pydantic_settings-2.3.1-py3-none-any.whl", hash = "sha256:acb2c213140dfff9669f4fe9f8180d43914f51626db28ab2db7308a576cce51a"},
+    {file = "pydantic_settings-2.3.1.tar.gz", hash = "sha256:e34bbd649803a6bb3e2f0f58fb0edff1f0c7f556849fda106cc21bcce12c30ab"},
 ]

 [package.dependencies]
--- a/src/backend/base/pyproject.toml
+++ b/src/backend/base/pyproject.toml
@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow-base"
-version = "0.0.56"
+version = "0.0.57"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <contact@langflow.org>"]
 maintainers = [
--- a/src/frontend/package-lock.json
+++ b/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",
--- a/src/frontend/package.json
+++ b/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",
--- a/src/frontend/src/components/tableComponent/components/ResetColumns/index.tsx
+++ b/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>
+  );
+}
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/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 } 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">
@ -51,6 +116,7 @@ const TableComponent = forwardRef<
        className={cn(
          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
          "ag-theme-shadcn flex h-full flex-col",
+          "relative",
        )} // applying the grid theme
      >
        <AgGridReact
@ -59,11 +125,16 @@ const TableComponent = forwardRef<
          defaultColDef={{
            minWidth: 100,
          }}
-          ref={ref}
+          columnDefs={colDef}
+          ref={realRef}
          getRowId={(params) => {
            return params.data.id;
          }}
+          pagination={true}
+          onGridReady={onGridReady}
+          onColumnMoved={onColumnMoved}
        />
+        <ResetColumns resetGrid={() => resetGrid(realRef, initialColumnDefs)} />
      </div>
    );
  },
--- a/src/frontend/src/components/tableComponent/utils/reset-grid-columns.tsx
+++ b/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;
+    }
+  }
+}
--- a/src/frontend/src/components/ui/toggle.tsx
+++ b/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 };
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@ -736,3 +736,5 @@ export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to displa
 export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";

 export const LOCATIONS_TO_RETURN = ["/flow/", "/settings/"];
+
+export const MAX_BATCH_SIZE = 50;
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@ -1,7 +1,7 @@
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import { AxiosRequestConfig, AxiosResponse } from "axios";
 import { Edge, Node, ReactFlowJsonObject } from "reactflow";
-import { BASE_URL_API } from "../../constants/constants";
+import { BASE_URL_API, MAX_BATCH_SIZE } from "../../constants/constants";
 import { api } from "../../controllers/API/api";
 import {
  APIObjectType,
@ -28,6 +28,7 @@ import {
  UploadFileTypeAPI,
  errorsTypeAPI,
 } from "./../../types/api/index";
+import { Message } from "../../types/messages";

 /**
 * Fetches all objects from the API endpoint.
@ -999,12 +1000,41 @@ export async function deleteFlowPool(
  return await api.delete(`${BASE_URL_API}monitor/builds`, config);
 }

+/**
+ * Deletes multiple flow components by their IDs.
+ * @param flowIds - An array of flow IDs to be deleted.
+ * @param token - The authorization token for the API request.
+ * @returns A promise that resolves to an array of AxiosResponse objects representing the delete responses.
+ */
 export async function multipleDeleteFlowsComponents(
  flowIds: string[],
-): Promise<AxiosResponse<any>> {
-  return await api.post(`${BASE_URL_API}flows/multiple_delete/`, {
-    flow_ids: flowIds,
-  });
+): Promise<AxiosResponse<any>[]> {
+  const batches: string[][] = [];
+
+  // Split the flowIds into batches
+  for (let i = 0; i < flowIds.length; i += MAX_BATCH_SIZE) {
+    batches.push(flowIds.slice(i, i + MAX_BATCH_SIZE));
+  }
+
+  // Function to delete a batch of flow IDs
+  const deleteBatch = async (batch: string[]): Promise<AxiosResponse<any>> => {
+    try {
+      return await api.delete(`${BASE_URL_API}flows/`, {
+        data: batch,
+      });
+    } catch (error) {
+      console.error("Error deleting flows:", error);
+      throw error;
+    }
+  };
+
+  // Execute all delete requests
+  const responses: Promise<AxiosResponse<any>>[] = batches.map((batch) =>
+    deleteBatch(batch),
+  );
+
+  // Return the responses after all requests are completed
+  return Promise.all(responses);
 }

 export async function getTransactionTable(
@ -1023,16 +1053,47 @@ export async function getTransactionTable(
 }

 export async function getMessagesTable(
-  id: string,
  mode: "intersection" | "union",
+  id?: string,
+  excludedFields?: string[],
  params = {},
-): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+): 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);
+}
--- a/src/frontend/src/icons/Streamlit/SvgStreamlit.jsx
+++ b/src/frontend/src/icons/Streamlit/SvgStreamlit.jsx
@ -0,0 +1,25 @@
+export default function SvgStreamlit(props) {
+  return (
+    <svg
+      width="301"
+      height="165"
+      viewBox="0 0 301 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M150.731 101.547L98.1387 73.7471L6.84674 25.4969C6.7634 25.4136 6.59674 25.4136 6.51341 25.4136C3.18007 23.8303 -0.236608 27.1636 1.0134 30.497L47.5302 149.139L47.5385 149.164C47.5885 149.281 47.6302 149.397 47.6802 149.514C49.5885 153.939 53.7552 156.672 58.2886 157.747C58.6719 157.831 58.9461 157.906 59.4064 157.998C59.8645 158.1 60.5052 158.239 61.0552 158.281C61.1469 158.289 61.2302 158.289 61.3219 158.297H61.3886C61.4552 158.306 61.5219 158.306 61.5886 158.314H61.6802C61.7386 158.322 61.8052 158.322 61.8636 158.322H61.9719C62.0386 158.331 62.1052 158.331 62.1719 158.331V158.331C121.084 164.754 180.519 164.754 239.431 158.331V158.331C240.139 158.331 240.831 158.297 241.497 158.231C241.714 158.206 241.922 158.181 242.131 158.156C242.156 158.147 242.189 158.147 242.214 158.139C242.356 158.122 242.497 158.097 242.639 158.072C242.847 158.047 243.056 158.006 243.264 157.964C243.681 157.872 243.87 157.806 244.436 157.611C245.001 157.417 245.94 157.077 246.527 156.794C247.115 156.511 247.522 156.239 248.014 155.931C248.622 155.547 249.201 155.155 249.788 154.715C250.041 154.521 250.214 154.397 250.397 154.222L250.297 154.164L150.731 101.547Z"
+        fill="#FF4B4B"
+      />
+      <path
+        d="M294.766 25.4981H294.683L203.357 73.7483L254.124 149.357L300.524 30.4981V30.3315C301.691 26.8314 298.108 23.6648 294.766 25.4981"
+        fill="#7D353B"
+      />
+      <path
+        d="M155.598 2.55572C153.264 -0.852624 148.181 -0.852624 145.931 2.55572L98.1389 73.7477L150.731 101.548L250.398 154.222C251.024 153.609 251.526 153.012 252.056 152.381C252.806 151.456 253.506 150.465 254.123 149.356L203.356 73.7477L155.598 2.55572Z"
+        fill="#BD4043"
+      />
+    </svg>
+  );
+}
--- a/src/frontend/src/icons/Streamlit/index.tsx
+++ b/src/frontend/src/icons/Streamlit/index.tsx
@ -0,0 +1,8 @@
+import React, { forwardRef } from "react";
+import SvgStreamlit from "./SvgStreamlit";
+
+export const Streamlit = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+  (props, ref) => {
+    return <SvgStreamlit className="icon" ref={ref} {...props} />;
+  },
+);
--- a/src/frontend/src/modals/IOModal/components/chatView/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/index.tsx
@ -1,5 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../../../components/genericIconComponent";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../../../../components/ui/select";
 import {
  CHAT_FIRST_INITIAL_TEXT,
  CHAT_SECOND_INITIAL_TEXT,
@ -118,10 +124,21 @@ export default function ChatView({
    if (lockChat) setLockChat(false);
  }

+  function handleSelectChange(event: string): void {
+    switch (event) {
+      case "builds":
+        clearChat();
+        break;
+      case "buildsNSession":
+        console.log("delete build and session");
+        break;
+    }
+  }
+
  function updateChat(
    chat: ChatMessageType,
    message: string,
-    stream_url?: string
+    stream_url?: string,
  ) {
    // if (message === "") return;
    chat.message = message;
@ -149,18 +166,57 @@ export default function ChatView({
    <div className="eraser-column-arrangement">
      <div className="eraser-size">
        <div className="eraser-position">
-          <button disabled={lockChat} onClick={() => clearChat()}>
+          <button
+            className="flex gap-1"
+            onClick={() => handleSelectChange("builds")}
+          >
            <IconComponent
              name="Eraser"
              className={classNames(
-                "h-5 w-5",
-                lockChat
-                  ? "animate-pulse text-primary"
-                  : "text-primary hover:text-gray-600"
+                "h-5 w-5 transition-all duration-100",
+                lockChat ? "animate-pulse text-primary" : "text-primary",
              )}
              aria-hidden="true"
            />
          </button>
+          {/* <Select
+            onValueChange={handleSelectChange}
+            value=""
+            disabled={lockChat}
+          >
+            <SelectTrigger className="">
+              <button className="flex gap-1">
+                <IconComponent
+                  name="Eraser"
+                  className={classNames(
+                    "h-5 w-5 transition-all duration-100",
+                    lockChat ? "animate-pulse text-primary" : "text-primary",
+                  )}
+                  aria-hidden="true"
+                />
+              </button>
+            </SelectTrigger>
+            <SelectContent className="right-[9.5em]">
+              <SelectItem value="builds" className="cursor-pointer">
+                <div className="flex">
+                  <IconComponent
+                    name={"Trash2"}
+                    className={`relative top-0.5 mr-2 h-4 w-4`}
+                  />
+                  <span className="">Clear Builds</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="buildsNSession" className="cursor-pointer">
+                <div className="flex">
+                  <IconComponent
+                    name={"Trash2"}
+                    className={`relative top-0.5 mr-2 h-4 w-4`}
+                  />
+                  <span className="">Clear Builds & Session</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select> */}
        </div>
        <div ref={messagesRef} className="chat-message-div">
          {chatHistory?.length > 0 ? (
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@ -24,6 +24,7 @@ import { cn } from "../../utils/utils";
 import BaseModal from "../baseModal";
 import IOFieldView from "./components/IOFieldView";
 import ChatView from "./components/chatView";
+import { getSessions } from "../../controllers/API";

 export default function IOModal({
  children,
@ -77,6 +78,7 @@ export default function IOModal({
  const isBuilding = useFlowStore((state) => state.isBuilding);
  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
  const setNode = useFlowStore((state) => state.setNode);
+  const [sessions, setSessions] = useState<string[]>([]);

  async function updateVertices() {
    return updateVerticesOrder(currentFlow!.id, null);
@ -113,6 +115,11 @@ export default function IOModal({

  useEffect(() => {
    setSelectedViewField(startView());
+    // if (haveChat) {
+    //   getSessions().then((sessions) => {
+    //     setSessions(sessions);
+    //   });
+    // }
  }, [open]);

  return (
@ -161,6 +168,9 @@ export default function IOModal({
                      {outputs.length > 0 && (
                        <TabsTrigger value={"2"}>Outputs</TabsTrigger>
                      )}
+                      {/* {haveChat && (
+                        <TabsTrigger value={"3"}>History</TabsTrigger>
+                      )} */}
                    </TabsList>
                  </div>

--- a/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
+++ b/src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx
@ -9,7 +9,7 @@ export default function getPythonApiCode(
  flowId: string,
  isAuth: boolean,
  tweaksBuildedObject,
-  endpointName?: string
+  endpointName?: string,
 ): string {
  const tweaksObject = tweaksBuildedObject[0];
  return `import argparse
--- a/src/frontend/src/modals/apiModal/views/index.tsx
+++ b/src/frontend/src/modals/apiModal/views/index.tsx
@ -35,7 +35,7 @@ const ApiModal = forwardRef(
      flow: FlowType;
      children: ReactNode;
    },
-    ref
+    ref,
  ) => {
    const tweak = useTweaksStore((state) => state.tweak);
    const addTweaks = useTweaksStore((state) => state.setTweak);
@ -50,18 +50,18 @@ const ApiModal = forwardRef(
      flow?.id,
      autoLogin,
      tweak,
-      flow?.endpoint_name
+      flow?.endpoint_name,
    );
    const curl_run_code = getCurlRunCode(
      flow?.id,
      autoLogin,
      tweak,
-      flow?.endpoint_name
+      flow?.endpoint_name,
    );
    const curl_webhook_code = getCurlWebhookCode(
      flow?.id,
      autoLogin,
-      flow?.endpoint_name
+      flow?.endpoint_name,
    );
    const pythonCode = getPythonCode(flow?.name, tweak);
    const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -77,7 +77,7 @@ const ApiModal = forwardRef(
      pythonCode,
    ];
    const [tabs, setTabs] = useState(
-      createTabsArray(codesArray, includeWebhook)
+      createTabsArray(codesArray, includeWebhook),
    );

    const canShowTweaks =
@ -126,7 +126,7 @@ const ApiModal = forwardRef(
              buildTweakObject(
                nodeId,
                element.data.node.template[templateField].value,
-                element.data.node.template[templateField]
+                element.data.node.template[templateField],
              );
            }
          });
@ -143,7 +143,7 @@ const ApiModal = forwardRef(
    async function buildTweakObject(
      tw: string,
      changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType
+      template: TemplateVariableType,
    ) {
      changes = getChangesType(changes, template);

@ -185,7 +185,7 @@ const ApiModal = forwardRef(
        flow?.id,
        autoLogin,
        cloneTweak,
-        flow?.endpoint_name
+        flow?.endpoint_name,
      );
      const pythonCode = getPythonCode(flow?.name, cloneTweak);
      const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
@ -229,7 +229,7 @@ const ApiModal = forwardRef(
        </BaseModal.Content>
      </BaseModal>
    );
-  }
+  },
 );

 export default ApiModal;
--- a/src/frontend/src/modals/flowLogsModal/index.tsx
+++ b/src/frontend/src/modals/flowLogsModal/index.tsx
@ -33,11 +33,13 @@ export default function FlowLogsModal({
        setRows(rows);
      });
    } else if (activeTab === "Messages") {
-      getMessagesTable(currentFlowId, "union").then((data) => {
-        const { columns, rows } = data;
-        setColumns(columns.map((col) => ({ ...col, editable: true })));
-        setRows(rows);
-      });
+      getMessagesTable("union", currentFlowId, ["index", "flow_id"]).then(
+        (data) => {
+          const { columns, rows } = data;
+          setColumns(columns.map((col) => ({ ...col, editable: true })));
+          setRows(rows);
+        },
+      );
    }

    if (open && activeTab === "Messages" && !noticed.current) {
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/index.tsx
@ -55,6 +55,13 @@ export default function SettingsPage(): JSX.Element {
        />
      ),
    },
+    {
+      title: "Messages",
+      href: "/settings/messages",
+      icon: (
+        <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
+      ),
+    },
  ];
  return (
    <PageLayout
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@ -78,9 +78,6 @@ export default function GlobalVariablesPage() {
  // Column Definitions: Defines the columns to be displayed.
  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
    {
-      headerCheckboxSelection: true,
-      checkboxSelection: true,
-      showDisabledCheckboxes: true,
      headerName: "Variable Name",
      field: "name",
      flex: 2,
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/components/headerMessages/index.tsx
@ -0,0 +1,49 @@
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+import { cn } from "../../../../../../utils/utils";
+
+type HeaderMessagesComponentProps = {
+  selectedRows: number[];
+  handleRemoveMessages: () => void;
+};
+const HeaderMessagesComponent = ({
+  selectedRows,
+  handleRemoveMessages,
+}: HeaderMessagesComponentProps) => {
+  return (
+    <>
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            Messages
+            <ForwardedIconComponent
+              name="MessagesSquare"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Inspect, edit and remove messages to explore and refine model
+            behaviors.
+          </p>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <Button
+            data-testid="api-key-button-store"
+            variant="primary"
+            className="group px-2"
+            disabled={selectedRows.length === 0}
+            onClick={handleRemoveMessages}
+          >
+            <ForwardedIconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary",
+              )}
+            />
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+export default HeaderMessagesComponent;
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-messages-table.tsx
@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { getMessagesTable } from "../../../../../controllers/API";
+import { useMessagesStore } from "../../../../../stores/messagesStore";
+
+const useMessagesTable = (setColumns) => {
+  const setMessages = useMessagesStore((state) => state.setMessages);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const data = await getMessagesTable("union", undefined, ["index"]);
+        const { columns, rows } = data;
+        setColumns(columns);
+        setMessages(rows);
+      } catch (error) {
+        console.error("Error fetching messages:", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  return null;
+};
+
+export default useMessagesTable;
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-remove-messages.tsx
@ -0,0 +1,30 @@
+import { deleteMessagesFn } from "../../../../../controllers/API";
+import { useMessagesStore } from "../../../../../stores/messagesStore";
+
+const useRemoveMessages = (
+  setSelectedRows,
+  setSuccessData,
+  setErrorData,
+  selectedRows,
+) => {
+  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;
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/hooks/use-updateMessage.tsx
@ -0,0 +1,29 @@
+import { useMessagesStore } from "../../../../../stores/messagesStore";
+import { Message } from "../../../../../types/messages";
+import { updateMessageApi } from "../../../../../controllers/API";
+
+const useUpdateMessage = (setSuccessData, setErrorData) => {
+  const updateMessage = useMessagesStore((state) => state.updateMessage);
+
+  const handleUpdate = async (data: Message) => {
+    try {
+      await updateMessageApi(data);
+
+      updateMessage(data);
+
+      // Set success message
+      setSuccessData({
+        title: "Messages updated successfully.",
+      });
+    } catch (error) {
+      // Set error message
+      setErrorData({
+        title: "Error updating messages.",
+      });
+    }
+  };
+
+  return { handleUpdate };
+};
+
+export default useUpdateMessage;
--- a/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/messagesPage/index.tsx
@ -0,0 +1,81 @@
+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 HeaderMessagesComponent from "./components/headerMessages";
+import useMessagesTable from "./hooks/use-messages-table";
+import useRemoveMessages from "./hooks/use-remove-messages";
+import useUpdateMessage from "./hooks/use-updateMessage";
+
+export default function MessagesPage() {
+  const [columns, setColumns] = useState<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);
+
+  useMessagesTable(setColumns);
+
+  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 (
+    <div className="flex h-full w-full flex-col justify-between gap-6">
+      <HeaderMessagesComponent
+        selectedRows={selectedRows}
+        handleRemoveMessages={handleRemoveMessages}
+      />
+
+      <div className="flex h-full w-full flex-col justify-between pb-8">
+        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
+          <CardContent className="h-full">
+            <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}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@ -6,6 +6,7 @@ import { ProtectedLoginRoute } from "./components/authLoginGuard";
 import { CatchAllRoute } from "./components/catchAllRoutes";
 import LoadingComponent from "./components/loadingComponent";
 import { StoreGuard } from "./components/storeGuard";
+import MessagesPage from "./pages/SettingsPage/pages/messagesPage";

 const AdminPage = lazy(() => import("./pages/AdminPage"));
 const LoginAdminPage = lazy(() => import("./pages/AdminPage/LoginPage"));
@ -81,6 +82,7 @@ const Router = () => {
          <Route path="api-keys" element={<ApiKeysPage />} />
          <Route path="general/:scrollId?" element={<GeneralPage />} />
          <Route path="shortcuts" element={<ShortcutsPage />} />
+          <Route path="messages" element={<MessagesPage />} />
        </Route>
        <Route
          path="/store"
--- a/src/frontend/src/stores/messagesStore.ts
+++ b/src/frontend/src/stores/messagesStore.ts
@ -0,0 +1,43 @@
+import { create } from "zustand";
+import { MessagesStoreType } from "../types/zustand/messages";
+
+export const useMessagesStore = create<MessagesStoreType>((set, get) => ({
+  messages: [],
+  setMessages: (messages) => {
+    set(() => ({ messages: messages }));
+  },
+  addMessage: (message) => {
+    set(() => ({ messages: [...get().messages, message] }));
+  },
+  removeMessage: (message) => {
+    set(() => ({
+      messages: get().messages.filter((msg) => msg.id !== message.id),
+    }));
+  },
+  updateMessage: (message) => {
+    set(() => ({
+      messages: get().messages.map((msg) =>
+        msg.index === message.index ? message : msg,
+      ),
+    }));
+  },
+  clearMessages: () => {
+    set(() => ({ messages: [] }));
+  },
+  removeMessages: (ids) => {
+    return new Promise((resolve, reject) => {
+      try {
+        set((state) => {
+          const updatedMessages = state.messages.filter(
+            (msg) => !ids.includes(msg.index),
+          );
+          get().setMessages(updatedMessages);
+          resolve(updatedMessages);
+          return { messages: updatedMessages };
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  },
+}));
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@ -15,6 +15,10 @@ pre {
  font-family: inherit;
 }

+.ag-paging-page-size {
+  display: none;
+}
+
 .react-flow__pane {
  cursor: default;
 }
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -752,3 +752,17 @@ export type toolbarSelectItemProps = {
  dataTestId: string;
  ping?: boolean;
 };
+
+export type clearChatPropsType = {
+  lockChat: boolean;
+  setLockChat: (lock: boolean) => void;
+  setChatHistory: (chatHistory: ChatMessageType) => void;
+  method: string;
+};
+
+export type handleSelectPropsType = {
+  event: string;
+  lockChat: boolean;
+  setLockChat: (lock: boolean) => void;
+  setChatHistory: (chatHistory: ChatMessageType) => void;
+};
--- a/src/frontend/src/types/messages/index.ts
+++ b/src/frontend/src/types/messages/index.ts
@ -0,0 +1,13 @@
+type Message = {
+  artifacts: Record<string, any>;
+  flow_id: string;
+  index: number;
+  message: string;
+  sender: string;
+  sender_name: string;
+  session_id: string;
+  timestamp: string;
+  id: string;
+};
+
+export type { Message };
--- a/src/frontend/src/types/zustand/flow/index.ts
+++ b/src/frontend/src/types/zustand/flow/index.ts
@ -48,8 +48,16 @@ export type FlowStoreType = {
  onFlowPage: boolean;
  setOnFlowPage: (onFlowPage: boolean) => void;
  flowPool: FlowPoolType;
-  inputs: Array<{ type: string; id: string; displayName: string }>;
-  outputs: Array<{ type: string; id: string; displayName: string }>;
+  inputs: Array<{
+    type: string;
+    id: string;
+    displayName: string;
+  }>;
+  outputs: Array<{
+    type: string;
+    id: string;
+    displayName: string;
+  }>;
  hasIO: boolean;
  setFlowPool: (flowPool: FlowPoolType) => void;
  addDataToFlowPool: (data: FlowPoolObjectType, nodeId: string) => void;
--- a/src/frontend/src/types/zustand/messages/index.ts
+++ b/src/frontend/src/types/zustand/messages/index.ts
@ -0,0 +1,11 @@
+import { Message } from "../../messages";
+
+export type MessagesStoreType = {
+  messages: Message[];
+  setMessages: (messages: Message[]) => void;
+  addMessage: (message: Message) => void;
+  removeMessage: (message: Message) => void;
+  updateMessage: (message: Message) => void;
+  clearMessages: () => void;
+  removeMessages: (ids: number[]) => void;
+};
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@ -99,18 +99,18 @@ export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
 export function isValidConnection(
  { source, target, sourceHandle, targetHandle }: Connection,
  nodes: Node[],
-  edges: Edge[]
+  edges: Edge[],
 ) {
  const targetHandleObject: targetHandleType = scapeJSONParse(targetHandle!);
  const sourceHandleObject: sourceHandleType = scapeJSONParse(sourceHandle!);
  if (
    targetHandleObject.inputTypes?.some(
-      (n) => n === sourceHandleObject.dataType
+      (n) => n === sourceHandleObject.dataType,
    ) ||
    sourceHandleObject.baseClasses.some(
      (t) =>
        targetHandleObject.inputTypes?.some((n) => n === t) ||
-        t === targetHandleObject.type
+        t === targetHandleObject.type,
    )
  ) {
    let targetNode = nodes.find((node) => node.id === target!)?.data?.node;
@ -143,7 +143,7 @@ export function removeApiKeys(flow: FlowType): FlowType {

 export function updateTemplate(
  reference: APITemplateType,
-  objectToUpdate: APITemplateType
+  objectToUpdate: APITemplateType,
 ): APITemplateType {
  let clonedObject: APITemplateType = cloneDeep(reference);

@ -203,7 +203,7 @@ export const processDataFromFlow = (flow: FlowType, refreshIds = true) => {

 export function updateIds(
  { edges, nodes }: { edges: Edge[]; nodes: Node[] },
-  selection?: { edges: Edge[]; nodes: Node[] }
+  selection?: { edges: Edge[]; nodes: Node[] },
 ) {
  let idsMap = {};
  const selectionIds = selection?.nodes.map((n) => n.id);
@ -231,7 +231,7 @@ export function updateIds(
      edge.source = idsMap[edge.source];
      edge.target = idsMap[edge.target];
      const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!
+        edge.sourceHandle!,
      );
      edge.sourceHandle = scapedJSONStringfy({
        ...sourceHandleObject,
@ -241,7 +241,7 @@ export function updateIds(
        edge.data.sourceHandle.id = edge.source;
      }
      const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!
+        edge.targetHandle!,
      );
      edge.targetHandle = scapedJSONStringfy({
        ...targetHandleObject,
@ -287,11 +287,11 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
          (scapeJSONParse(edge.targetHandle!) as targetHandleType).fieldName ===
            t &&
          (scapeJSONParse(edge.targetHandle!) as targetHandleType).id ===
-            node.id
+            node.id,
      )
    ) {
      errors.push(
-        `${displayName || type} is missing ${getFieldTitle(template, t)}.`
+        `${displayName || type} is missing ${getFieldTitle(template, t)}.`,
      );
    } else if (
      template[t].type === "dict" &&
@ -305,15 +305,15 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
        errors.push(
          `${displayName || type} (${getFieldTitle(
            template,
-            t
-          )}) contains duplicate keys with the same values.`
+            t,
+          )}) contains duplicate keys with the same values.`,
        );
      if (hasEmptyKey(template[t].value))
        errors.push(
          `${displayName || type} (${getFieldTitle(
            template,
-            t
-          )}) field must not be empty.`
+            t,
+          )}) field must not be empty.`,
        );
    }
    return errors;
@ -322,7 +322,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {

 export function validateNodes(
  nodes: Node[],
-  edges: Edge[]
+  edges: Edge[],
 ): // this returns an array of tuples with the node id and the errors
 Array<{ id: string; errors: Array<string> }> {
  if (nodes.length === 0) {
@ -343,7 +343,7 @@ export function updateEdges(edges: Edge[]) {
  if (edges)
    edges.forEach((edge) => {
      const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!
+        edge.targetHandle!,
      );
      edge.className = "stroke-gray-900 stroke-connection";
    });
@ -410,7 +410,7 @@ export function handleKeyDown(
    | React.KeyboardEvent<HTMLInputElement>
    | React.KeyboardEvent<HTMLTextAreaElement>,
  inputValue: string | string[] | null,
-  block: string
+  block: string,
 ) {
  //condition to fix bug control+backspace on Windows/Linux
  if (
@ -435,7 +435,7 @@ export function handleKeyDown(
 }

 export function handleOnlyIntegerInput(
-  event: React.KeyboardEvent<HTMLInputElement>
+  event: React.KeyboardEvent<HTMLInputElement>,
 ) {
  if (
    event.key === "." ||
@ -451,7 +451,7 @@ export function handleOnlyIntegerInput(

 export function getConnectedNodes(
  edge: Edge,
-  nodes: Array<NodeType>
+  nodes: Array<NodeType>,
 ): Array<NodeType> {
  const sourceId = edge.source;
  const targetId = edge.target;
@ -552,7 +552,7 @@ export function checkOldEdgesHandles(edges: Edge[]): boolean {
      !edge.sourceHandle ||
      !edge.targetHandle ||
      !edge.sourceHandle.includes("{") ||
-      !edge.targetHandle.includes("{")
+      !edge.targetHandle.includes("{"),
  );
 }

@ -575,7 +575,7 @@ export function customStringify(obj: any): string {

  const keys = Object.keys(obj).sort();
  const keyValuePairs = keys.map(
-    (key) => `"${key}":${customStringify(obj[key])}`
+    (key) => `"${key}":${customStringify(obj[key])}`,
  );
  return `{${keyValuePairs.join(",")}}`;
 }
@ -604,7 +604,7 @@ export function getHandleId(
  source: string,
  sourceHandle: string,
  target: string,
-  targetHandle: string
+  targetHandle: string,
 ) {
  return (
    "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle
@ -615,7 +615,7 @@ export function generateFlow(
  selection: OnSelectionChangeParams,
  nodes: Node[],
  edges: Edge[],
-  name: string
+  name: string,
 ): generateFlowType {
  const newFlowData = { nodes, edges, viewport: { zoom: 1, x: 0, y: 0 } };
  const uid = new ShortUniqueId({ length: 5 });
@ -624,7 +624,7 @@ export function generateFlow(
  newFlowData.edges = selection.edges.filter(
    (edge) =>
      selection.nodes.some((node) => node.id === edge.target) &&
-      selection.nodes.some((node) => node.id === edge.source)
+      selection.nodes.some((node) => node.id === edge.source),
  );
  newFlowData.nodes = selection.nodes;

@ -645,7 +645,7 @@ export function generateFlow(
      (edge) =>
        (selection.nodes.some((node) => node.id === edge.target) ||
          selection.nodes.some((node) => node.id === edge.source)) &&
-        newFlowData.edges.every((e) => e.id !== edge.id)
+        newFlowData.edges.every((e) => e.id !== edge.id),
    ),
  };
 }
@ -656,13 +656,13 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
  const { nodes, edges } = groupNode.data.node!.flow!.data!;
  const lastNode = findLastNode(groupNode.data.node!.flow!.data!);
  newEdges = newEdges.filter(
-    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id)
+    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id),
  );
  newEdges.forEach((edge) => {
    if (lastNode && edge.source === lastNode.id) {
      edge.source = groupNode.id;
      let newSourceHandle: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!
+        edge.sourceHandle!,
      );
      newSourceHandle.id = groupNode.id;
      edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
@ -689,7 +689,7 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
 export function filterFlow(
  selection: OnSelectionChangeParams,
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
 ) {
  setNodes((nodes) => nodes.filter((node) => !selection.nodes.includes(node)));
  setEdges((edges) => edges.filter((edge) => !selection.edges.includes(edge)));
@ -727,7 +727,7 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
 export function concatFlows(
  flow: FlowType,
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
 ) {
  const { nodes, edges } = flow.data!;
  setNodes((old) => [...old, ...nodes]);
@ -736,7 +736,7 @@ export function concatFlows(

 export function validateSelection(
  selection: OnSelectionChangeParams,
-  edges: Edge[]
+  edges: Edge[],
 ): Array<string> {
  const clonedSelection = cloneDeep(selection);
  const clonedEdges = cloneDeep(edges);
@ -750,7 +750,7 @@ export function validateSelection(
  let nodesSet = new Set(clonedSelection.nodes.map((n) => n.id));
  // then filter the edges that are connected to the nodes in the set
  let connectedEdges = clonedSelection.edges.filter(
-    (e) => nodesSet.has(e.source) && nodesSet.has(e.target)
+    (e) => nodesSet.has(e.source) && nodesSet.has(e.target),
  );
  // add the edges to the selection
  clonedSelection.edges = connectedEdges;
@ -764,17 +764,17 @@ export function validateSelection(
    clonedSelection.nodes.some(
      (node) =>
        isInputNode(node.data as NodeDataType) ||
-        isOutputNode(node.data as NodeDataType)
+        isOutputNode(node.data as NodeDataType),
    )
  ) {
    errorsArray.push(
-      "Please select only nodes that are not input or output nodes"
+      "Please select only nodes that are not input or output nodes",
    );
  }
  //check if there are two or more nodes with free outputs
  if (
    clonedSelection.nodes.filter(
-      (n) => !clonedSelection.edges.some((e) => e.source === n.id)
+      (n) => !clonedSelection.edges.some((e) => e.source === n.id),
    ).length > 1
  ) {
    errorsArray.push("Please select only one node with free outputs");
@ -785,7 +785,7 @@ export function validateSelection(
    clonedSelection.nodes.some(
      (node) =>
        !clonedSelection.edges.some((edge) => edge.target === node.id) &&
-        !clonedSelection.edges.some((edge) => edge.source === node.id)
+        !clonedSelection.edges.some((edge) => edge.source === node.id),
    )
  ) {
    errorsArray.push("Please select only nodes that are connected");
@ -842,8 +842,8 @@ export function mergeNodeTemplates({
              nodeTemplate[key].display_name
                ? nodeTemplate[key].display_name
                : nodeTemplate[key].name
-                ? toTitleCase(nodeTemplate[key].name)
-                : toTitleCase(key);
+                  ? toTitleCase(nodeTemplate[key].name)
+                  : toTitleCase(key);
          }
        }
      });
@ -854,7 +854,7 @@ function isHandleConnected(
  edges: Edge[],
  key: string,
  field: TemplateVariableType,
-  nodeId: string
+  nodeId: string,
 ) {
  /*
 		this function receives a flow and a handleId and check if there is a connection with this handle
@ -870,7 +870,7 @@ function isHandleConnected(
            id: nodeId,
            proxy: { id: field.proxy!.id, field: field.proxy!.field },
            inputTypes: field.input_types,
-          } as targetHandleType)
+          } as targetHandleType),
      )
    ) {
      return true;
@ -885,7 +885,7 @@ function isHandleConnected(
            fieldName: key,
            id: nodeId,
            inputTypes: field.input_types,
-          } as targetHandleType)
+          } as targetHandleType),
      )
    ) {
      return true;
@ -908,7 +908,7 @@ export function generateNodeTemplate(Flow: FlowType) {

 export function generateNodeFromFlow(
  flow: FlowType,
-  getNodeId: (type: string) => string
+  getNodeId: (type: string) => string,
 ): NodeType {
  const { nodes } = flow.data!;
  const outputNode = cloneDeep(findLastNode(flow.data!));
@ -939,7 +939,7 @@ export function generateNodeFromFlow(
 export function connectedInputNodesOnHandle(
  nodeId: string,
  handleId: string,
-  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] }
+  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] },
 ) {
  const connectedNodes: Array<{ name: string; id: string; isGroup: boolean }> =
    [];
@ -976,7 +976,7 @@ export function connectedInputNodesOnHandle(

 export function updateProxyIdsOnTemplate(
  template: APITemplateType,
-  idsMap: { [key: string]: string }
+  idsMap: { [key: string]: string },
 ) {
  Object.keys(template).forEach((key) => {
    if (template[key].proxy && idsMap[template[key].proxy!.id]) {
@ -987,7 +987,7 @@ export function updateProxyIdsOnTemplate(

 export function updateEdgesIds(
  edges: Edge[],
-  idsMap: { [key: string]: string }
+  idsMap: { [key: string]: string },
 ) {
  edges.forEach((edge) => {
    let targetHandle: targetHandleType = edge.data.targetHandle;
@ -1019,7 +1019,7 @@ export function expandGroupNode(
  nodes: Node[],
  edges: Edge[],
  setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
 ) {
  const idsMap = updateIds(flow!.data!);
  updateProxyIdsOnTemplate(template, idsMap);
@ -1062,7 +1062,7 @@ export function expandGroupNode(
      const lastNode = cloneDeep(findLastNode(flow!.data!));
      newEdge.source = lastNode!.id;
      let newSourceHandle: sourceHandleType = scapeJSONParse(
-        newEdge.sourceHandle!
+        newEdge.sourceHandle!,
      );
      newSourceHandle.id = lastNode!.id;
      newEdge.data.sourceHandle = newSourceHandle;
@ -1119,7 +1119,7 @@ export function expandGroupNode(

 export function getGroupStatus(
  flow: FlowType,
-  ssData: { [key: string]: { valid: boolean; params: string } }
+  ssData: { [key: string]: { valid: boolean; params: string } },
 ) {
  let status = { valid: true, params: SUCCESS_BUILD };
  const { nodes } = flow.data!;
@ -1138,7 +1138,7 @@ export function getGroupStatus(

 export function createFlowComponent(
  nodeData: NodeDataType,
-  version: string
+  version: string,
 ): FlowType {
  const flowNode: FlowType = {
    data: {
@ -1174,7 +1174,7 @@ export function downloadNode(NodeFLow: FlowType) {

 export function updateComponentNameAndType(
  data: any,
-  component: NodeDataType
+  component: NodeDataType,
 ) {}

 export function removeFileNameFromComponents(flow: FlowType) {
@ -1248,7 +1248,7 @@ export function extractFieldsFromComponenents(data: APIObjectType) {
 export function downloadFlow(
  flow: FlowType,
  flowName: string,
-  flowDescription?: string
+  flowDescription?: string,
 ) {
  let clonedFlow = cloneDeep(flow);
  removeFileNameFromComponents(clonedFlow);
@ -1258,7 +1258,7 @@ export function downloadFlow(
      ...clonedFlow,
      name: flowName,
      description: flowDescription,
-    })
+    }),
  )}`;

  // create a link element and set its properties
@ -1273,7 +1273,7 @@ export function downloadFlow(
 export function downloadFlows() {
  downloadFlowsFromDatabase().then((flows) => {
    const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flows)
+      JSON.stringify(flows),
    )}`;

    // create a link element and set its properties
@ -1297,7 +1297,7 @@ export function getRandomDescription(): string {
 export const createNewFlow = (
  flowData: ReactFlowJsonObject,
  flow: FlowType,
-  folderId: string
+  folderId: string,
 ) => {
  return {
    description: flow?.description ?? getRandomDescription(),
--- a/src/frontend/src/utils/storeUtils.ts
+++ b/src/frontend/src/utils/storeUtils.ts
@ -21,8 +21,16 @@ export default function cloneFLowWithParent(
 }

 export function getInputsAndOutputs(nodes: Node[]) {
-  let inputs: { type: string; id: string; displayName: string }[] = [];
-  let outputs: { type: string; id: string; displayName: string }[] = [];
+  let inputs: {
+    type: string;
+    id: string;
+    displayName: string;
+  }[] = [];
+  let outputs: {
+    type: string;
+    id: string;
+    displayName: string;
+  }[] = [];
  nodes.forEach((node) => {
    const nodeData: NodeDataType = node.data as NodeDataType;
    if (isOutputNode(nodeData)) {
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@ -143,6 +143,8 @@ import {
  X,
  XCircle,
  Zap,
+  RotateCcw,
+  Settings,
 } from "lucide-react";
 import { FaApple, FaDiscord, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@ -193,6 +195,7 @@ import SvgWolfram from "../icons/Wolfram/Wolfram";
 import { HackerNewsIcon } from "../icons/hackerNews";
 import { SupabaseIcon } from "../icons/supabase";
 import { iconsType } from "../types/components";
+import { Streamlit } from "../icons/Streamlit";

 export const gradients = [
  "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
@ -526,4 +529,7 @@ export const nodeIconsLucide: iconsType = {
  FolderPlusIcon,
  FolderIcon,
  Discord: FaDiscord,
+  RotateCcw,
+  Settings,
+  Streamlit,
 };
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@ -354,8 +354,9 @@ export function isTimeStampString(str: string): boolean {
 export function extractColumnsFromRows(
  rows: object[],
  mode: "intersection" | "union",
+  excludeColumns?: Array<string>,
 ): (ColDef<any> | ColGroupDef<any>)[] {
-  const columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
+  let columnsKeys: { [key: string]: ColDef<any> | ColGroupDef<any> } = {};
  if (rows.length === 0) {
    return [];
  }
@ -395,5 +396,11 @@ export function extractColumnsFromRows(
    union();
  }

+  if (excludeColumns) {
+    for (const key of excludeColumns) {
+      delete columnsKeys[key];
+    }
+  }
+
  return Object.values(columnsKeys);
 }