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/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build.yml
@ -100,6 +100,4 @@ jobs:

      - name: Restart HuggingFace Spaces Build
        run: |
-          poetry run python ./scripts/factory_restart_space.py
-        env:
-          HUGGINGFACE_API_TOKEN: ${{ secrets.HUGGINGFACE_API_TOKEN }}
+          poetry run python ./scripts/factory_restart_space.py --space "Langflow/Langflow-Preview" --token ${{ secrets.HUGGINGFACE_API_TOKEN }}
--- a/README.PT.md
+++ b/README.PT.md
@ -0,0 +1,171 @@
+<!-- markdownlint-disable MD030 -->
+
+# [![Langflow](./docs/static/img/hero.png)](https://www.langflow.org)
+
+<p align="center"><strong>
+    Um framework visual para criar apps de agentes autônomos e RAG
+</strong></p>
+<p align="center" style="font-size: 12px;">
+    Open-source, construído em Python, totalmente personalizável, agnóstico em relação a modelos e databases
+</p>
+
+<p align="center" style="font-size: 12px;">
+    <a href="https://docs.langflow.org" style="text-decoration: underline;">Docs</a> -
+    <a href="https://discord.com/invite/EqksyE2EX9" style="text-decoration: underline;">Junte-se ao nosso Discord</a> -
+    <a href="https://twitter.com/langflow_ai" style="text-decoration: underline;">Siga-nos no X</a> -
+    <a href="https://huggingface.co/spaces/Langflow/Langflow-Preview" style="text-decoration: underline;">Demonstração</a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/langflow-ai/langflow">
+        <img src="https://img.shields.io/github/stars/langflow-ai/langflow">
+    </a>
+    <a href="https://discord.com/invite/EqksyE2EX9">
+        <img src="https://img.shields.io/discord/1116803230643527710?label=Discord">
+    </a>
+</p>
+
+<div align="center">
+  <a href="./README.md"><img alt="README em Inglês" src="https://img.shields.io/badge/English-d9d9d9"></a>
+  <a href="./README.zh_CN.md"><img alt="README em Chinês Simplificado" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
+</div>
+
+<p align="center">
+  <img src="./docs/static/img/langflow_basic_howto.gif" alt="Seu GIF" style="border: 3px solid #211C43;">
+</p>
+
+# 📝 Conteúdo
+
+- [📝 Conteúdo](#-conteúdo)
+- [📦 Introdução](#-introdução)
+- [🎨 Criar Fluxos](#-criar-fluxos)
+- [Deploy](#deploy)
+  - [Deploy usando Google Cloud Platform](#deploy-usando-google-cloud-platform)
+  - [Deploy on Railway](#deploy-on-railway)
+  - [Deploy on Render](#deploy-on-render)
+- [🖥️ Interface de Linha de Comando (CLI)](#️-interface-de-linha-de-comando-cli)
+  - [Uso](#uso)
+    - [Variáveis de Ambiente](#variáveis-de-ambiente)
+- [👋 Contribuir](#-contribuir)
+- [🌟 Contribuidores](#-contribuidores)
+- [📄 Licença](#-licença)
+
+# 📦 Introdução
+
+Você pode instalar o Langflow com pip:
+
+```shell
+# Certifique-se de ter >=Python 3.10 instalado no seu sistema.
+# Instale a versão pré-lançamento (recomendada para as atualizações mais recentes)
+python -m pip install langflow --pre --force-reinstall
+
+# ou versão estável
+python -m pip install langflow -U
+```
+
+Então, execute o Langflow com:
+
+```shell
+python -m langflow run
+```
+
+Você também pode visualizar o Langflow no [HuggingFace Spaces](https://huggingface.co/spaces/Langflow/Langflow-Preview). [Clone o Space usando este link](https://huggingface.co/spaces/Langflow/Langflow-Preview?duplicate=true) para criar seu próprio workspace do Langflow em minutos.
+
+# 🎨 Criar Fluxos
+
+Criar fluxos com Langflow é fácil. Basta arrastar componentes da barra lateral para o canvas e conectá-los para começar a construir sua aplicação.
+
+Explore editando os parâmetros do prompt, agrupando componentes e construindo seus próprios componentes personalizados (Custom Components).
+
+Quando terminar, você pode exportar seu fluxo como um arquivo JSON.
+
+Carregue o fluxo com:
+
+```python
+from langflow.load import run_flow_from_json
+
+results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
+```
+
+# Deploy
+
+## Deploy usando Google Cloud Platform
+
+Siga nosso passo a passo para fazer deploy do Langflow no Google Cloud Platform (GCP) usando o Google Cloud Shell. O guia está disponível no documento [**Langflow on Google Cloud Platform**](https://github.com/langflow-ai/langflow/blob/dev/docs/docs/deployment/gcp-deployment.md).
+
+Alternativamente, clique no botão **"Open in Cloud Shell"** abaixo para iniciar o Google Cloud Shell, clonar o repositório do Langflow e começar um **tutorial interativo** que o guiará pelo processo de configuração dos recursos necessários e deploy do Langflow no seu projeto GCP.
+
+[![Open on Cloud Shell](https://gstatic.com/cloudssh/images/open-btn.svg)](https://console.cloud.google.com/cloudshell/open?git_repo=https://github.com/langflow-ai/langflow&working_dir=scripts/gcp&shellonly=true&tutorial=walkthroughtutorial_spot.md)
+
+## Deploy on Railway
+
+Use este template para implantar o Langflow 1.0 Preview no Railway:
+
+[![Deploy 1.0 Preview on Railway](https://railway.app/button.svg)](https://railway.app/template/UsJ1uB?referralCode=MnPSdg)
+
+Ou este para implantar o Langflow 0.6.x:
+
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/JMXEWp?referralCode=MnPSdg)
+
+## Deploy on Render
+
+<a href="https://render.com/deploy?repo=https://github.com/langflow-ai/langflow/tree/dev">
+<img src="https://render.com/images/deploy-to-render-button.svg" alt="Deploy to Render" />
+</a>
+
+# 🖥️ Interface de Linha de Comando (CLI)
+
+O Langflow fornece uma interface de linha de comando (CLI) para fácil gerenciamento e configuração.
+
+## Uso
+
+Você pode executar o Langflow usando o seguinte comando:
+
+```shell
+langflow run [OPTIONS]
+```
+
+Cada opção é detalhada abaixo:
+
+- `--help`: Exibe todas as opções disponíveis.
+- `--host`: Define o host para vincular o servidor. Pode ser configurado usando a variável de ambiente `LANGFLOW_HOST`. O padrão é `127.0.0.1`.
+- `--workers`: Define o número de processos. Pode ser configurado usando a variável de ambiente `LANGFLOW_WORKERS`. O padrão é `1`.
+- `--timeout`: Define o tempo limite do worker em segundos. O padrão é `60`.
+- `--port`: Define a porta para escutar. Pode ser configurado usando a variável de ambiente `LANGFLOW_PORT`. O padrão é `7860`.
+- `--env-file`: Especifica o caminho para o arquivo .env contendo variáveis de ambiente. O padrão é `.env`.
+- `--log-level`: Define o nível de log. Pode ser configurado usando a variável de ambiente `LANGFLOW_LOG_LEVEL`. O padrão é `critical`.
+- `--components-path`: Especifica o caminho para o diretório contendo componentes personalizados. Pode ser configurado usando a variável de ambiente `LANGFLOW_COMPONENTS_PATH`. O padrão é `langflow/components`.
+- `--log-file`: Especifica o caminho para o arquivo de log. Pode ser configurado usando a variável de ambiente `LANGFLOW_LOG_FILE`. O padrão é `logs/langflow.log`.
+- `--cache`: Seleciona o tipo de cache a ser usado. As opções são `InMemoryCache` e `SQLiteCache`. Pode ser configurado usando a variável de ambiente `LANGFLOW_LANGCHAIN_CACHE`. O padrão é `SQLiteCache`.
+- `--dev/--no-dev`: Alterna o modo de desenvolvimento. O padrão é `no-dev`.
+- `--path`: Especifica o caminho para o diretório frontend contendo os arquivos de build. Esta opção é apenas para fins de desenvolvimento. Pode ser configurado usando a variável de ambiente `LANGFLOW_FRONTEND_PATH`.
+- `--open-browser/--no-open-browser`: Alterna a opção de abrir o navegador após iniciar o servidor. Pode ser configurado usando a variável de ambiente `LANGFLOW_OPEN_BROWSER`. O padrão é `open-browser`.
+- `--remove-api-keys/--no-remove-api-keys`: Alterna a opção de remover as chaves de API dos projetos salvos no banco de dados. Pode ser configurado usando a variável de ambiente `LANGFLOW_REMOVE_API_KEYS`. O padrão é `no-remove-api-keys`.
+- `--install-completion [bash|zsh|fish|powershell|pwsh]`: Instala a conclusão para o shell especificado.
+- `--show-completion [bash|zsh|fish|powershell|pwsh]`: Exibe a conclusão para o shell especificado, permitindo que você copie ou personalize a instalação.
+- `--backend-only`: Este parâmetro, com valor padrão `False`, permite executar apenas o servidor backend sem o frontend. Também pode ser configurado usando a variável de ambiente `LANGFLOW_BACKEND_ONLY`.
+- `--store`: Este parâmetro, com valor padrão `True`, ativa os recursos da loja, use `--no-store` para desativá-los. Pode ser configurado usando a variável de ambiente `LANGFLOW_STORE`.
+
+Esses parâmetros são importantes para usuários que precisam personalizar o comportamento do Langflow, especialmente em cenários de desenvolvimento ou deploy especializado.
+
+### Variáveis de Ambiente
+
+Você pode configurar muitas das opções de CLI usando variáveis de ambiente. Estas podem ser exportadas no seu sistema operacional ou adicionadas a um arquivo `.env` e carregadas usando a opção `--env-file`.
+
+Um arquivo de exemplo `.env` chamado `.env.example` está incluído no projeto. Copie este arquivo para um novo arquivo chamado `.env` e substitua os valores de exemplo pelas suas configurações reais. Se você estiver definindo valores tanto no seu sistema operacional quanto no arquivo `.env`, as configurações do `.env` terão precedência.
+
+# 👋 Contribuir
+
+Aceitamos contribuições de desenvolvedores de todos os níveis para nosso projeto open-source no GitHub. Se você deseja contribuir, por favor, confira nossas [diretrizes de contribuição](./CONTRIBUTING.md) e ajude a tornar o Langflow mais acessível.
+
+---
+
+[![Star History Chart](https://api.star-history.com/svg?repos=langflow-ai/langflow&type=Timeline)](https://star-history.com/#langflow-ai/langflow&Date)
+
+# 🌟 Contribuidores
+
+[![langflow contributors](https://contrib.rocks/image?repo=langflow-ai/langflow)](https://github.com/langflow-ai/langflow/graphs/contributors)
+
+# 📄 Licença
+
+O Langflow é lançado sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para detalhes.
--- a/README.md
+++ b/README.md
@ -27,6 +27,7 @@

 <div align="center">
  <a href="./README.md"><img alt="README in English" src="https://img.shields.io/badge/English-d9d9d9"></a>
+  <a href="./README.PT.md"><img alt="README in Portuguese" src="https://img.shields.io/badge/Portuguese-d9d9d9"></a>
  <a href="./README.zh_CN.md"><img alt="README in Simplified Chinese" src="https://img.shields.io/badge/简体中文-d9d9d9"></a>
 </div>

@ -36,7 +37,6 @@

 # 📝 Content

- [](#)
 - [📝 Content](#-content)
 - [📦 Get Started](#-get-started)
 - [🎨 Create Flows](#-create-flows)
--- a/README.zh_CN.md
+++ b/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) 文件。
--- a/docs/docs/administration/global-env.mdx
+++ b/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`.
--- a/docs/docs/components/inputs-and-outputs.mdx
+++ b/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.
--- a/docs/docs/components/text-and-record.mdx
+++ b/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.

--- a/docs/docs/integrations/notion/add-content-to-page.md
+++ b/docs/docs/integrations/notion/add-content-to-page.md
@ -9,14 +9,11 @@ The `AddContentToPage` component converts markdown text to Notion blocks and app

 [Notion Reference](https://developers.notion.com/reference/patch-block-children)

-<Admonition type="tip" title="Component Functionality">
-
 The `AddContentToPage` component enables you to:

 - Convert markdown text to Notion blocks.
 - Append the converted blocks to a specified Notion page.
 - Seamlessly integrate Notion content creation into Langflow workflows.
-  </Admonition>

 ## Component Usage

@ -100,8 +97,6 @@ class NotionPageCreator(CustomComponent):

 ## Example Usage

-<Admonition type="info" title="Example Usage">
-
 Example of using the `AddContentToPage` component in a Langflow flow using Markdown as input:

 <ZoomableImage
@ -115,8 +110,6 @@ style={{ width: "100%", margin: "20px 0" }}

 In this example, the `AddContentToPage` component connects to a `MarkdownLoader` component to provide the markdown text input. The converted Notion blocks are appended to the specified Notion page using the provided `block_id` and `notion_secret`.

-</Admonition>
-
 ## Best Practices

 When using the `AddContentToPage` component:
--- a/docs/docs/integrations/notion/list-users.md
+++ b/docs/docs/integrations/notion/list-users.md
@ -9,13 +9,11 @@ The `NotionUserList` component retrieves users from Notion. It provides a conven

 [Notion Reference](https://developers.notion.com/reference/get-users)

-<Admonition type="tip" title="Component Functionality">
- The `NotionUserList` component enables you to:
+The `NotionUserList` component enables you to:

 - Retrieve user data from Notion
 - Access user information such as ID, type, name, and avatar URL
 - Integrate Notion user data seamlessly into your Langflow workflows
-  </Admonition>

 ## Component Usage

@ -95,7 +93,6 @@ class NotionUserList(CustomComponent):

 ## Example Usage

-<Admonition type="info" title="Example Usage">
 Here's an example of how you can use the `NotionUserList` component in a Langflow flow and passing the outputs to the Prompt component:

 <ZoomableImage
@ -107,8 +104,6 @@ sources={{
 style={{ width: "100%", margin: "20px 0" }}
 />

-</Admonition>
-
 ## Best Practices

 When using the `NotionUserList` component, consider the following best practices:
--- a/poetry.lock
+++ b/poetry.lock
--- a/pyproject.toml
+++ b/pyproject.toml
@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow"
-version = "1.0.0a45"
+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]
--- a/scripts/factory_restart_space.py
+++ b/scripts/factory_restart_space.py
@ -1,4 +1,4 @@
-import os
+import argparse

 from huggingface_hub import HfApi, list_models
 from rich import print
@ -6,11 +6,27 @@ from rich import print
 # Use root method
 models = list_models()

+args = argparse.ArgumentParser(description="Restart a space in the Hugging Face Hub.")
+args.add_argument("--space", type=str, help="The space to restart.")
+args.add_argument("--token", type=str, help="The Hugging Face API token.")
+
+parsed_args = args.parse_args()
+
+space = parsed_args.space
+
+if not space:
+    print("Please provide a space to restart.")
+    exit()
+
+if not parsed_args.token:
+    print("Please provide an API token.")
+    exit()
+
 # Or configure a HfApi client
 hf_api = HfApi(
    endpoint="https://huggingface.co",  # Can be a Private Hub endpoint.
-    token=os.getenv("HUGGINFACE_API_TOKEN"),
+    token=parsed_args.token,
 )

-space_runtime = hf_api.restart_space("Langflow/Langflow-Preview", factory_reboot=True)
+space_runtime = hf_api.restart_space(space, factory_reboot=True)
 print(space_runtime)
--- 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);
 }
--- a/tests/test_database.py
+++ b/tests/test_database.py
@ -1,5 +1,3 @@
-import os
-from typing import Optional, List
 from uuid import UUID, uuid4

 import orjson
@ -13,7 +11,6 @@ from langflow.services.database.models.base import orjson_dumps
 from langflow.services.database.models.flow import Flow, FlowCreate, FlowUpdate
 from langflow.services.database.utils import session_getter
 from langflow.services.deps import get_db_service
-from langflow.services.settings.base import Settings


@pytest.fixture(scope="module")
@ -113,6 +110,21 @@ def test_delete_flow(client: TestClient, json_flow: str, active_user, logged_in_
    assert response.json()["message"] == "Flow deleted successfully"


+def test_delete_flows(client: TestClient, json_flow: str, active_user, logged_in_headers):
+    # Create ten flows
+    number_of_flows = 10
+    flows = [FlowCreate(name=f"Flow {i}", description="description", data={}) for i in range(number_of_flows)]
+    flow_ids = []
+    for flow in flows:
+        response = client.post("api/v1/flows/", json=flow.model_dump(), headers=logged_in_headers)
+        assert response.status_code == 201
+        flow_ids.append(response.json()["id"])
+
+    response = client.request("DELETE", "api/v1/flows/", headers=logged_in_headers, json=flow_ids)
+    assert response.status_code == 200, response.content
+    assert response.json().get("deleted") == number_of_flows
+
+
 def test_create_flows(client: TestClient, session: Session, json_flow: str, logged_in_headers):
    flow = orjson.loads(json_flow)
    data = flow["data"]
@ -263,5 +275,3 @@ def test_load_flows(client: TestClient, load_flows_dir):
    response = client.get("api/v1/flows/c54f9130-f2fa-4a3e-b22a-3856d946351b")
    assert response.status_code == 200
    assert response.json()["name"] == "BasicExample"
-
-