Merge dev into refactor/utils

src/backend/base/langflow/__main__.py

@@ -17,8 +17,10 @@ from rich import print as rprint
 from rich.console import Console
 from rich.panel import Panel
 from rich.table import Table
+from sqlmodel import select
 
 from langflow.main import setup_app
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
 from langflow.services.database.utils import session_getter
 from langflow.services.deps import get_db_service
 from langflow.services.utils import initialize_services
@@ -432,11 +434,16 @@ def superuser(
             # Verify that the superuser was created
             from langflow.services.database.models.user.model import User
 
-            user: User = session.query(User).filter(User.username == username).first()
+            user: User = session.exec(select(User).where(User.username == username)).first()
             if user is None or not user.is_superuser:
                 typer.echo("Superuser creation failed.")
                 return
-
+            # Now create the first folder for the user
+            result = create_default_folder_if_it_doesnt_exist(session, user.id)
+            if result:
+                typer.echo("Default folder created successfully.")
+            else:
+                raise RuntimeError("Could not create default folder.")
             typer.echo("Superuser created successfully.")
 
         else:

src/backend/base/langflow/alembic/versions/012fb73ac359_add_folder_table.py

@@ -0,0 +1,78 @@
+"""Add Folder table
+
+Revision ID: 012fb73ac359
+Revises: c153816fd85f
+Create Date: 2024-05-07 12:52:16.954691
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+import sqlmodel
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+# revision identifiers, used by Alembic.
+revision: str = "012fb73ac359"
+down_revision: Union[str, None] = "c153816fd85f"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if "folder" not in table_names:
+        op.create_table(
+            "folder",
+            sa.Column("name", sqlmodel.sql.sqltypes.AutoString(), nullable=False),
+            sa.Column("description", sqlmodel.sql.sqltypes.AutoString(), nullable=True),
+            sa.Column("id", sqlmodel.sql.sqltypes.GUID(), nullable=False),
+            sa.Column("parent_id", sqlmodel.sql.sqltypes.GUID(), nullable=True),
+            sa.Column("user_id", sqlmodel.sql.sqltypes.GUID(), nullable=True),
+            sa.ForeignKeyConstraint(
+                ["parent_id"],
+                ["folder.id"],
+            ),
+            sa.ForeignKeyConstraint(
+                ["user_id"],
+                ["user.id"],
+            ),
+            sa.PrimaryKeyConstraint("id"),
+        )
+    indexes = inspector.get_indexes("folder")
+    if "ix_folder_name" not in [index["name"] for index in indexes]:
+        with op.batch_alter_table("folder", schema=None) as batch_op:
+            batch_op.create_index(batch_op.f("ix_folder_name"), ["name"], unique=False)
+
+    if "folder_id" not in inspector.get_columns("flow"):
+        with op.batch_alter_table("flow", schema=None) as batch_op:
+            batch_op.add_column(sa.Column("folder_id", sqlmodel.sql.sqltypes.GUID(), nullable=True))
+            batch_op.create_foreign_key("flow_folder_id_fkey", "folder", ["folder_id"], ["id"])
+            batch_op.drop_column("folder")
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    table_names = inspector.get_table_names()
+    # ### commands auto generated by Alembic - please adjust! ###
+    if "folder_id" in inspector.get_columns("flow"):
+        with op.batch_alter_table("flow", schema=None) as batch_op:
+            batch_op.add_column(sa.Column("folder", sa.VARCHAR(), nullable=True))
+            batch_op.drop_constraint("flow_folder_id_fkey", type_="foreignkey")
+            batch_op.drop_column("folder_id")
+
+    indexes = inspector.get_indexes("folder")
+    if "ix_folder_name" in [index["name"] for index in indexes]:
+        with op.batch_alter_table("folder", schema=None) as batch_op:
+            batch_op.drop_index(batch_op.f("ix_folder_name"))
+
+    if "folder" in table_names:
+        op.drop_table("folder")
+    # ### end Alembic commands ###

src/backend/base/langflow/alembic/versions/29fe8f1f806b_add_missing_index.py

@@ -0,0 +1,43 @@
+"""Add missing index
+
+Revision ID: 29fe8f1f806b
+Revises: 012fb73ac359
+Create Date: 2024-05-21 09:23:48.772367
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+from sqlalchemy.engine.reflection import Inspector
+
+revision: str = "29fe8f1f806b"
+down_revision: Union[str, None] = "012fb73ac359"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    # ### commands auto generated by Alembic - please adjust! ###
+    indexes = inspector.get_indexes("flow")
+    with op.batch_alter_table("flow", schema=None) as batch_op:
+        indexes_names = [index["name"] for index in indexes]
+        if "ix_flow_folder_id" not in indexes_names:
+            batch_op.create_index(batch_op.f("ix_flow_folder_id"), ["folder_id"], unique=False)
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    conn = op.get_bind()
+    inspector = Inspector.from_engine(conn)  # type: ignore
+    # ### commands auto generated by Alembic - please adjust! ###
+    indexes = inspector.get_indexes("flow")
+    with op.batch_alter_table("flow", schema=None) as batch_op:
+        indexes_names = [index["name"] for index in indexes]
+        if "ix_flow_folder_id" in indexes_names:
+            batch_op.drop_index(batch_op.f("ix_flow_folder_id"))
+
+    # ### end Alembic commands ###

src/backend/base/langflow/api/router.py

@@ -13,6 +13,7 @@ from langflow.api.v1 import (
     users_router,
     validate_router,
     variables_router,
+    folders_router,
 )
 
 router = APIRouter(
@@ -29,3 +30,4 @@ router.include_router(login_router)
 router.include_router(variables_router)
 router.include_router(files_router)
 router.include_router(monitor_router)
+router.include_router(folders_router)

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

@@ -9,6 +9,7 @@ from langflow.api.v1.store import router as store_router
 from langflow.api.v1.users import router as users_router
 from langflow.api.v1.validate import router as validate_router
 from langflow.api.v1.variable import router as variables_router
+from langflow.api.v1.folders import router as folders_router
 
 __all__ = [
     "chat_router",
@@ -22,4 +23,5 @@ __all__ = [
     "variables_router",
     "monitor_router",
     "files_router",
+    "folders_router",
 ]

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

@@ -29,7 +29,7 @@ from langflow.services.deps import get_chat_service, get_session, get_session_se
 from langflow.services.monitor.utils import log_vertex_build
 
 if TYPE_CHECKING:
-    from langflow.graph.vertex.types import ChatVertex
+    from langflow.graph.vertex.types import InterfaceVertex
     from langflow.services.session.service import SessionService
 
 router = APIRouter(tags=["Chat"])
@@ -288,7 +288,7 @@ async def build_vertex_stream(
                     if not graph:
                         raise ValueError(f"No graph found for {flow_id}.")
 
-                vertex: "ChatVertex" = graph.get_vertex(vertex_id)
+                vertex: "InterfaceVertex" = graph.get_vertex(vertex_id)
                 if not hasattr(vertex, "stream"):
                     raise ValueError(f"Vertex {vertex_id} does not support streaming")
                 if isinstance(vertex._built_result, str) and vertex._built_result:

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

@@ -4,7 +4,7 @@ from typing import Annotated, List, Optional, Union
 import sqlalchemy as sa
 from fastapi import APIRouter, Body, Depends, HTTPException, UploadFile, status
 from loguru import logger
-from sqlmodel import Session, select
+from sqlmodel import Session, col, select
 
 from langflow.api.utils import update_frontend_node_with_template_values
 from langflow.api.v1.schemas import (

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

@@ -2,17 +2,19 @@ from datetime import datetime, timezone
 from typing import List
 from uuid import UUID
 
+from langflow.services.database.models.folder.constants import DEFAULT_FOLDER_NAME
 import orjson
 from fastapi import APIRouter, Depends, File, HTTPException, UploadFile
 from fastapi.encoders import jsonable_encoder
 from loguru import logger
-from sqlmodel import Session, select
+from sqlmodel import Session, col, select
 
 from langflow.api.utils import remove_api_keys, validate_is_component
-from langflow.api.v1.schemas import FlowListCreate, FlowListRead
+from langflow.api.v1.schemas import FlowListCreate, FlowListIds, 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
+from langflow.services.database.models.folder.model import Folder
 from langflow.services.database.models.user.model import User
 from langflow.services.deps import get_session, get_settings_service
 from langflow.services.settings.service import SettingsService
@@ -35,6 +37,11 @@ def create_flow(
     db_flow = Flow.model_validate(flow, from_attributes=True)
     db_flow.updated_at = datetime.now(timezone.utc)
 
+    if db_flow.folder_id is None:
+        default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if default_folder:
+            db_flow.folder_id = default_folder.id
+
     session.add(db_flow)
     session.commit()
     session.refresh(db_flow)
@@ -67,7 +74,7 @@ def read_flows(
             example_flows = session.exec(
                 select(Flow).where(
                     Flow.user_id == None,  # noqa
-                    Flow.folder == STARTER_FOLDER_NAME,
+                    Flow.folder.has(Folder.name == STARTER_FOLDER_NAME),
                 )
             ).all()
             for example_flow in example_flows:
@@ -129,6 +136,10 @@ def update_flow(
         if value is not None:
             setattr(db_flow, key, value)
     db_flow.updated_at = datetime.now(timezone.utc)
+    if db_flow.folder_id is None:
+        default_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if default_folder:
+            db_flow.folder_id = default_folder.id
     session.add(db_flow)
     session.commit()
     session.refresh(db_flow)
@@ -208,3 +219,31 @@ async def download_file(
     """Download all flows as a file."""
     flows = read_flows(current_user=current_user, session=session, settings_service=settings_service)
     return FlowListRead(flows=flows)
+
+
+@router.post("/multiple_delete/")
+async def delete_multiple_flows(
+    flow_ids: FlowListIds, user: User = Depends(get_current_active_user), db: Session = Depends(get_session)
+):
+    """
+    Delete multiple flows by their IDs.
+
+    Args:
+        flow_ids (List[str]): The list of flow IDs to delete.
+        user (User, optional): The user making the request. Defaults to the current active user.
+
+    Returns:
+        dict: A dictionary containing the number of flows deleted.
+
+    """
+    try:
+        deleted_flows = db.exec(
+            select(Flow).where(col(Flow.id).in_(flow_ids.flow_ids)).where(Flow.user_id == user.id)
+        ).all()
+        for flow in deleted_flows:
+            db.delete(flow)
+        db.commit()
+        return {"deleted": len(deleted_flows)}
+    except Exception as exc:
+        logger.exception(exc)
+        raise HTTPException(status_code=500, detail=str(exc)) from exc

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

@@ -0,0 +1,243 @@
+from typing import List
+from uuid import UUID
+
+from fastapi import APIRouter, Depends, File, HTTPException, Response, UploadFile, status
+from langflow.api.v1.flows import create_flows
+from langflow.api.v1.schemas import FlowListCreate, FlowListReadWithFolderName
+from langflow.initial_setup.setup import STARTER_FOLDER_NAME
+from langflow.services.database.models.flow.model import Flow, FlowCreate, FlowRead
+from langflow.services.database.models.folder.constants import DEFAULT_FOLDER_NAME
+import orjson
+from sqlalchemy import update
+from sqlmodel import Session, select
+
+from langflow.services.auth.utils import get_current_active_user
+from langflow.services.database.models.folder.model import (
+    Folder,
+    FolderCreate,
+    FolderRead,
+    FolderReadWithFlows,
+    FolderUpdate,
+)
+from langflow.services.database.models.user.model import User
+from langflow.services.deps import get_session
+
+router = APIRouter(prefix="/folders", tags=["Folders"])
+
+
+@router.post("/", response_model=FolderRead, status_code=201)
+def create_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder: FolderCreate,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        new_folder = Folder.model_validate(folder, from_attributes=True)
+        new_folder.user_id = current_user.id
+        session.add(new_folder)
+        session.commit()
+        session.refresh(new_folder)
+
+        if folder.components_list.__len__() > 0:
+            update_statement_components = (
+                update(Flow).where(Flow.id.in_(folder.components_list)).values(folder_id=new_folder.id)
+            )
+            session.exec(update_statement_components)
+            session.commit()
+
+        if folder.flows_list.__len__() > 0:
+            update_statement_flows = update(Flow).where(Flow.id.in_(folder.flows_list)).values(folder_id=new_folder.id)
+            session.exec(update_statement_flows)
+            session.commit()
+
+        return new_folder
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/", response_model=List[FolderRead], status_code=200)
+def read_folders(
+    *,
+    session: Session = Depends(get_session),
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folders = session.exec(select(Folder).where(Folder.user_id == current_user.id)).all()
+        return folders
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/starter-projects", response_model=FolderReadWithFlows, status_code=200)
+def read_starter_folders(*, session: Session = Depends(get_session)):
+    try:
+        folders = session.exec(select(Folder).where(Folder.name == STARTER_FOLDER_NAME)).first()
+        return folders
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/{folder_id}", response_model=FolderReadWithFlows, status_code=200)
+def read_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folder = session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first()
+        if not folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        folder.flows = session.exec(select(Flow).where(Flow.folder_id == folder_id)).all()
+        return folder
+    except Exception as e:
+        if "No result found" in str(e):
+            raise HTTPException(status_code=404, detail="Folder not found")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.patch("/{folder_id}", response_model=FolderRead, status_code=200)
+def update_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    folder: FolderUpdate,  # Assuming FolderUpdate is a Pydantic model defining updatable fields
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        existing_folder = session.exec(
+            select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)
+        ).first()
+        if not existing_folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        folder_data = folder.model_dump(exclude_unset=True)
+        for key, value in folder_data.items():
+            if key != "components" and key != "flows":
+                setattr(existing_folder, key, value)
+        session.add(existing_folder)
+        session.commit()
+        session.refresh(existing_folder)
+
+        concat_folder_components = folder.components + folder.flows
+
+        flows_ids = session.exec(select(Flow.id).where(Flow.folder_id == existing_folder.id)).all()
+
+        excluded_flows = list(set(flows_ids) - set(concat_folder_components))
+
+        my_collection_folder = session.exec(select(Folder).where(Folder.name == DEFAULT_FOLDER_NAME)).first()
+        if my_collection_folder:
+            update_statement_my_collection = (
+                update(Flow).where(Flow.id.in_(excluded_flows)).values(folder_id=my_collection_folder.id)
+            )
+            session.exec(update_statement_my_collection)
+            session.commit()
+
+        if concat_folder_components.__len__() > 0:
+            update_statement_components = (
+                update(Flow).where(Flow.id.in_(concat_folder_components)).values(folder_id=existing_folder.id)
+            )
+            session.exec(update_statement_components)
+            session.commit()
+
+        return existing_folder
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.delete("/{folder_id}", status_code=204)
+def delete_folder(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    try:
+        folder = session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first()
+        if not folder:
+            raise HTTPException(status_code=404, detail="Folder not found")
+        session.delete(folder)
+        session.commit()
+        flows = session.exec(select(Flow).where(Flow.folder_id == folder_id, Folder.user_id == current_user.id)).all()
+        for flow in flows:
+            session.delete(flow)
+        session.commit()
+        return Response(status_code=status.HTTP_204_NO_CONTENT)
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/download/{folder_id}", response_model=FlowListReadWithFolderName, status_code=200)
+async def download_file(
+    *,
+    session: Session = Depends(get_session),
+    folder_id: UUID,
+    current_user: User = Depends(get_current_active_user),
+):
+    """Download all flows from folder."""
+    try:
+        flows = session.exec(
+            select(Flow).distinct().join(Folder).where(Flow.folder_id == folder_id, Folder.user_id == current_user.id)
+        ).all()
+        folder_name = (
+            session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id)).first().name
+        )
+        folder_description = (
+            session.exec(select(Folder).where(Folder.id == folder_id, Folder.user_id == current_user.id))
+            .first()
+            .description
+        )
+        if not flows:
+            flows = []
+        return FlowListReadWithFolderName(flows=flows, folder_name=folder_name, folder_description=folder_description)
+    except Exception as e:
+        if "No result found" in str(e):
+            raise HTTPException(status_code=404, detail="Folder not found")
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.post("/upload/", response_model=List[FlowRead], status_code=201)
+async def upload_file(
+    *,
+    session: Session = Depends(get_session),
+    file: UploadFile = File(...),
+    current_user: User = Depends(get_current_active_user),
+):
+    """Upload flows from a file."""
+    contents = await file.read()
+    data = orjson.loads(contents)
+
+    if data.__len__() == 0:
+        raise HTTPException(status_code=400, detail="No flows found in the file")
+
+    folder_results = session.exec(
+        select(Folder).where(Folder.name.like(f"{data['folder_name']}%"), Folder.user_id == current_user.id)
+    )
+    existing_folder_names = [folder.name for folder in folder_results]
+
+    if existing_folder_names.__len__() > 0:
+        data["folder_name"] = f"{data['folder_name']} ({existing_folder_names.__len__() + 1})"
+
+    folder = FolderCreate(name=data["folder_name"], description=data["folder_description"])
+
+    new_folder = Folder.model_validate(folder, from_attributes=True)
+    new_folder.id = None
+    new_folder.user_id = current_user.id
+    session.add(new_folder)
+    session.commit()
+    session.refresh(new_folder)
+
+    del data["folder_name"]
+    del data["folder_description"]
+
+    if "flows" in data:
+        flow_list = FlowListCreate(flows=[FlowCreate(**flow) for flow in data["flows"]])
+    else:
+        raise HTTPException(status_code=400, detail="No flows found in the data")
+    # Now we set the user_id for all flows
+    for flow in flow_list.flows:
+        flow.user_id = current_user.id
+        flow.folder_id = new_folder.id
+
+    return create_flows(session=session, flow_list=flow_list, current_user=current_user)

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

@@ -1,5 +1,7 @@
 from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
 from fastapi.security import OAuth2PasswordRequestForm
+from sqlmodel import Session
+
 from langflow.api.v1.schemas import Token
 from langflow.services.auth.utils import (
     authenticate_user,
@@ -7,14 +9,10 @@ from langflow.services.auth.utils import (
     create_user_longterm_token,
     create_user_tokens,
 )
-from langflow.services.deps import (
-    get_session,
-    get_settings_service,
-    get_variable_service,
-)
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
+from langflow.services.deps import get_session, get_settings_service, get_variable_service
 from langflow.services.settings.manager import SettingsService
 from langflow.services.variable.service import VariableService
-from sqlmodel import Session
 
 router = APIRouter(tags=["Login"])
 
@@ -58,6 +56,8 @@ async def login_to_get_access_token(
             expires=auth_settings.ACCESS_TOKEN_EXPIRE_SECONDS,
         )
         variable_service.initialize_user_variables(user.id, db)
+        # Create default folder for user if it doesn't exist
+        create_default_folder_if_it_doesnt_exist(db, user.id)
         return tokens
     else:
         raise HTTPException(
@@ -86,6 +86,7 @@ async def auto_login(
             expires=None,  # Set to None to make it a session cookie
         )
         variable_service.initialize_user_variables(user_id, db)
+        create_default_folder_if_it_doesnt_exist(db, user_id)
         return tokens
 
     raise HTTPException(
@@ -139,4 +140,3 @@ async def logout(response: Response):
     response.delete_cookie("refresh_token_lf")
     response.delete_cookie("access_token_lf")
     return {"message": "Logout successful"}
-    return {"message": "Logout successful"}

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

@@ -1,10 +1,13 @@
-from typing import Optional
+from typing import List, Optional
 
 from fastapi import APIRouter, Depends, HTTPException, Query
 
-
 from langflow.services.deps import get_monitor_service
-from langflow.services.monitor.schema import VertexBuildMapModel
+from langflow.services.monitor.schema import (
+    MessageModelResponse,
+    TransactionModelResponse,
+    VertexBuildMapModel,
+)
 from langflow.services.monitor.service import MonitorService
 
 router = APIRouter(prefix="/monitor", tags=["Monitor"])
@@ -40,8 +43,9 @@ async def delete_vertex_builds(
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@router.get("/messages")
+@router.get("/messages", response_model=List[MessageModelResponse])
 async def get_messages(
+    flow_id: Optional[str] = Query(None),
     session_id: Optional[str] = Query(None),
     sender: Optional[str] = Query(None),
     sender_name: Optional[str] = Query(None),
@@ -49,25 +53,32 @@ async def get_messages(
     monitor_service: MonitorService = Depends(get_monitor_service),
 ):
     try:
-        return monitor_service.get_messages(
+        df = monitor_service.get_messages(
+            flow_id=flow_id,
             sender=sender,
             sender_name=sender_name,
             session_id=session_id,
             order_by=order_by,
         )
+        dicts = df.to_dict(orient="records")
+        return [MessageModelResponse(**d) for d in dicts]
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
 
-@router.get("/transactions")
+@router.get("/transactions", response_model=List[TransactionModelResponse])
 async def get_transactions(
     source: Optional[str] = Query(None),
     target: Optional[str] = Query(None),
     status: Optional[str] = Query(None),
     order_by: Optional[str] = Query("timestamp"),
+    flow_id: Optional[str] = Query(None),
     monitor_service: MonitorService = Depends(get_monitor_service),
 ):
     try:
-        return monitor_service.get_transactions(source=source, target=target, status=status, order_by=order_by)
+        dicts = monitor_service.get_transactions(
+            source=source, target=target, status=status, order_by=order_by, flow_id=flow_id
+        )
+        return [TransactionModelResponse(**d) for d in dicts]
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))

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

@@ -139,10 +139,20 @@ class FlowListCreate(BaseModel):
     flows: List[FlowCreate]
 
 
+class FlowListIds(BaseModel):
+    flow_ids: List[str]
+
+
 class FlowListRead(BaseModel):
     flows: List[FlowRead]
 
 
+class FlowListReadWithFolderName(BaseModel):
+    flows: List[FlowRead]
+    folder_name: str
+    folder_description: str
+
+
 class InitResponse(BaseModel):
     flowId: str
 

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

@@ -13,6 +13,7 @@ from langflow.services.auth.utils import (
     get_password_hash,
     verify_password,
 )
+from langflow.services.database.models.folder.utils import create_default_folder_if_it_doesnt_exist
 from langflow.services.database.models.user import User, UserCreate, UserRead, UserUpdate
 from langflow.services.database.models.user.crud import get_user_by_id, update_user
 from langflow.services.deps import get_session, get_settings_service
@@ -36,6 +37,9 @@ def add_user(
         session.add(new_user)
         session.commit()
         session.refresh(new_user)
+        folder = create_default_folder_if_it_doesnt_exist(session, new_user.id)
+        if not folder:
+            raise HTTPException(status_code=500, detail="Error creating default folder")
     except IntegrityError as e:
         session.rollback()
         raise HTTPException(status_code=400, detail="This username is unavailable.") from e

src/backend/base/langflow/base/io/chat.py

@@ -54,6 +54,7 @@ class ChatComponent(CustomComponent):
             session_id=session_id,
             sender=sender,
             sender_name=sender_name,
+            flow_id=self.graph.flow_id,
         )
 
         self.status = records

src/backend/base/langflow/base/prompts/utils.py

@@ -1,3 +1,6 @@
+from copy import deepcopy
+
+
 from langchain_core.documents import Document
 
 from langflow.schema import Record
@@ -27,19 +30,20 @@ def dict_values_to_string(d: dict) -> dict:
         dict: The dictionary with values converted to strings.
     """
     # Do something similar to the above
-    for key, value in d.items():
+    d_copy = deepcopy(d)
+    for key, value in d_copy.items():
         # it could be a list of records or documents or strings
         if isinstance(value, list):
             for i, item in enumerate(value):
                 if isinstance(item, Record):
-                    d[key][i] = record_to_string(item)
+                    d_copy[key][i] = record_to_string(item)
                 elif isinstance(item, Document):
-                    d[key][i] = document_to_string(item)
+                    d_copy[key][i] = document_to_string(item)
         elif isinstance(value, Record):
-            d[key] = record_to_string(value)
+            d_copy[key] = record_to_string(value)
         elif isinstance(value, Document):
-            d[key] = document_to_string(value)
-    return d
+            d_copy[key] = document_to_string(value)
+    return d_copy
 
 
 def document_to_string(document: Document) -> str:

src/backend/base/langflow/components/agents/OpenAIConversationalAgent.py

@@ -8,7 +8,7 @@ from langchain.prompts import SystemMessagePromptTemplate
 from langchain.prompts.chat import MessagesPlaceholder
 from langchain.schema.memory import BaseMemory
 from langchain.tools import Tool
-from langchain_community.chat_models import ChatOpenAI
+from langchain_openai import ChatOpenAI
 
 from langflow.field_typing.range_spec import RangeSpec
 from langflow.interface.custom.custom_component import CustomComponent

src/backend/base/langflow/components/model_specs/ChatOpenAISpecs.py

@@ -1,6 +1,6 @@
 from typing import Optional
 
-from langchain_community.chat_models.openai import ChatOpenAI
+from langchain_openai import ChatOpenAI
 
 from langflow.base.models.openai_constants import MODEL_NAMES
 from langflow.field_typing import BaseLanguageModel, NestedDict

src/backend/base/langflow/components/outputs/RecordsOutput.py

@@ -0,0 +1,10 @@
+from langflow.base.io.text import TextComponent
+from langflow.schema import Record
+
+
+class RecordsOutput(TextComponent):
+    display_name = "Records Output"
+    description = "Display Records as a Table"
+
+    def build(self, input_value: Record) -> Record:
+        return input_value

src/backend/base/langflow/graph/edge/base.py

@@ -3,9 +3,8 @@ from typing import TYPE_CHECKING, Any, List, Optional
 from loguru import logger
 from pydantic import BaseModel, Field
 
-from langflow.graph.edge.utils import build_clean_params
+from langflow.graph.vertex.utils import log_transaction
 from langflow.schema.schema import INPUT_FIELD_NAME
-from langflow.services.deps import get_monitor_service
 from langflow.services.monitor.utils import log_message
 
 if TYPE_CHECKING:
@@ -157,26 +156,9 @@ class ContractEdge(Edge):
                 message=target.params.get(INPUT_FIELD_NAME, {}),
                 session_id=target.params.get("session_id", ""),
                 artifacts=target.artifacts,
+                flow_id=target.graph.flow_id,
             )
         return self.result
 
     def __repr__(self) -> str:
         return f"{self.source_id} -[{self.target_param}]-> {self.target_id}"
-
-
-def log_transaction(edge: ContractEdge, source: "Vertex", target: "Vertex", status, error=None):
-    try:
-        monitor_service = get_monitor_service()
-        clean_params = build_clean_params(target)
-        data = {
-            "source": source.vertex_type,
-            "target": target.vertex_type,
-            "target_args": clean_params,
-            "timestamp": monitor_service.get_timestamp(),
-            "status": status,
-            "error": error,
-        }
-        monitor_service.add_row(table_name="transactions", data=data)
-    except Exception as e:
-        logger.error(f"Error logging transaction: {e}")
-        logger.error(f"Error logging transaction: {e}")

src/backend/base/langflow/graph/edge/utils.py

@@ -1,19 +0,0 @@
-from typing import TYPE_CHECKING
-
-if TYPE_CHECKING:
-    from langflow.graph.vertex.base import Vertex
-
-
-def build_clean_params(target: "Vertex") -> dict:
-    """
-    Cleans the parameters of the target vertex.
-    """
-    # Removes all keys that the values aren't python types like str, int, bool, etc.
-    params = {
-        key: value for key, value in target.params.items() if isinstance(value, (str, int, bool, float, list, dict))
-    }
-    # if it is a list we need to check if the contents are python types
-    for key, value in params.items():
-        if isinstance(value, list):
-            params[key] = [item for item in value if isinstance(item, (str, int, bool, float, list, dict))]
-    return params

src/backend/base/langflow/graph/graph/base.py

@@ -14,7 +14,7 @@ from langflow.graph.graph.state_manager import GraphStateManager
 from langflow.graph.graph.utils import process_flow
 from langflow.graph.schema import InterfaceComponentTypes, RunOutputs
 from langflow.graph.vertex.base import Vertex
-from langflow.graph.vertex.types import ChatVertex, FileToolVertex, LLMVertex, StateVertex, ToolkitVertex
+from langflow.graph.vertex.types import FileToolVertex, InterfaceVertex, LLMVertex, StateVertex, ToolkitVertex
 from langflow.interface.tools.constants import FILE_TOOLS
 from langflow.schema import Record
 from langflow.schema.schema import INPUT_FIELD_NAME, InputType
@@ -994,8 +994,8 @@ class Graph:
         """Returns the node class based on the node type."""
         # First we check for the node_base_type
         node_name = node_id.split("-")[0]
-        if node_name in ["ChatOutput", "ChatInput"]:
-            return ChatVertex
+        if node_name in InterfaceComponentTypes:
+            return InterfaceVertex
         elif node_name in ["SharedState", "Notify", "Listen"]:
             return StateVertex
         elif node_base_type in lazy_load_vertex_dict.VERTEX_TYPE_MAP:

src/backend/base/langflow/graph/graph/constants.py

@@ -1,3 +1,4 @@
+from langflow.graph.schema import CHAT_COMPONENTS
 from langflow.graph.vertex import types
 from langflow.interface.agents.base import agent_creator
 from langflow.interface.custom.base import custom_component_creator
@@ -13,8 +14,6 @@ from langflow.interface.tools.base import tool_creator
 from langflow.interface.wrappers.base import wrapper_creator
 from langflow.utils.lazy_load import LazyLoadDictBase
 
-CHAT_COMPONENTS = ["ChatInput", "ChatOutput", "TextInput", "SessionID"]
-
 
 class VertexTypesDict(LazyLoadDictBase):
     def __init__(self):
@@ -47,7 +46,7 @@ class VertexTypesDict(LazyLoadDictBase):
             **{t: types.TextSplitterVertex for t in textsplitter_creator.to_list()},
             **{t: types.CustomComponentVertex for t in custom_component_creator.to_list()},
             **{t: types.RetrieverVertex for t in retriever_creator.to_list()},
-            **{t: types.ChatVertex for t in CHAT_COMPONENTS},
+            **{t: types.InterfaceVertex for t in CHAT_COMPONENTS},
         }
 
     def get_custom_component_vertex_type(self):

src/backend/base/langflow/graph/schema.py

@@ -30,6 +30,7 @@ class InterfaceComponentTypes(str, Enum, metaclass=ContainsEnumMeta):
     ChatOutput = "ChatOutput"
     TextInput = "TextInput"
     TextOutput = "TextOutput"
+    RecordsOutput = "RecordsOutput"
 
     def __contains__(cls, item):
         try:
@@ -40,6 +41,8 @@ class InterfaceComponentTypes(str, Enum, metaclass=ContainsEnumMeta):
             return True
 
 
+CHAT_COMPONENTS = [InterfaceComponentTypes.ChatInput, InterfaceComponentTypes.ChatOutput]
+RECORDS_COMPONENTS = [InterfaceComponentTypes.RecordsOutput]
 INPUT_COMPONENTS = [
     InterfaceComponentTypes.ChatInput,
     InterfaceComponentTypes.TextInput,

src/backend/base/langflow/graph/vertex/base.py

@@ -10,7 +10,7 @@ from loguru import logger
 
 from langflow.graph.schema import INPUT_COMPONENTS, OUTPUT_COMPONENTS, InterfaceComponentTypes, ResultData
 from langflow.graph.utils import UnbuiltObject, UnbuiltResult
-from langflow.graph.vertex.utils import generate_result
+from langflow.graph.vertex.utils import generate_result, log_transaction
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.schema.schema import INPUT_FIELD_NAME
@@ -440,7 +440,11 @@ class Vertex:
         # to the frontend
         self.set_artifacts()
         artifacts = self.artifacts
-        messages = self.extract_messages_from_artifacts(artifacts)
+        if isinstance(artifacts, dict):
+            messages = self.extract_messages_from_artifacts(artifacts)
+        else:
+            messages = []
+
         result_dict = ResultData(
             results=result_dict,
             artifacts=artifacts,
@@ -508,7 +512,7 @@ class Vertex:
             if not self._is_vertex(value):
                 self.params[key][sub_key] = value
             else:
-                result = await value.get_result()
+                result = await value.get_result(self)
                 self.params[key][sub_key] = result
 
     def _is_vertex(self, value):
@@ -523,9 +527,7 @@ class Vertex:
         """
         return all(self._is_vertex(vertex) for vertex in value)
 
-    async def get_result(
-        self,
-    ) -> Any:
+    async def get_result(self, requester: "Vertex") -> Any:
         """
         Retrieves the result of the vertex.
 
@@ -535,9 +537,9 @@ class Vertex:
             The result of the vertex.
         """
         async with self._lock:
-            return await self._get_result()
+            return await self._get_result(requester)
 
-    async def _get_result(self) -> Any:
+    async def _get_result(self, requester: "Vertex") -> Any:
         """
         Retrieves the result of the built component.
 
@@ -547,15 +549,19 @@ class Vertex:
             The built result if use_result is True, else the built object.
         """
         if not self._built:
+            log_transaction(source=self, target=requester, flow_id=self.graph.flow_id, status="error")
             raise ValueError(f"Component {self.display_name} has not been built yet")
-        return self._built_result if self.use_result else self._built_object
+
+        result = self._built_result if self.use_result else self._built_object
+        log_transaction(source=self, target=requester, flow_id=self.graph.flow_id, status="success")
+        return result
 
     async def _build_vertex_and_update_params(self, key, vertex: "Vertex"):
         """
         Builds a given vertex and updates the params dictionary accordingly.
         """
 
-        result = await vertex.get_result()
+        result = await vertex.get_result(self)
         self._handle_func(key, result)
         if isinstance(result, list):
             self._extend_params_list_with_result(key, result)
@@ -571,7 +577,7 @@ class Vertex:
         """
         self.params[key] = []
         for vertex in vertices:
-            result = await vertex.get_result()
+            result = await vertex.get_result(self)
             # Weird check to see if the params[key] is a list
             # because sometimes it is a Record and breaks the code
             if not isinstance(self.params[key], list):

src/backend/base/langflow/graph/vertex/types.py

@@ -6,14 +6,14 @@ import yaml
 from langchain_core.messages import AIMessage
 from loguru import logger
 
-from langflow.graph.schema import InterfaceComponentTypes
+from langflow.graph.schema import CHAT_COMPONENTS, RECORDS_COMPONENTS, InterfaceComponentTypes
 from langflow.graph.utils import UnbuiltObject, flatten_list, serialize_field
 from langflow.graph.vertex.base import Vertex
 from langflow.interface.utils import extract_input_variables_from_prompt
 from langflow.schema import Record
 from langflow.schema.schema import INPUT_FIELD_NAME
 from langflow.services.monitor.utils import log_vertex_build
-from langflow.utils.schemas import ChatOutputResponse
+from langflow.utils.schemas import ChatOutputResponse, RecordOutputResponse
 from langflow.utils.util import unescape_string
 
 
@@ -309,7 +309,7 @@ class CustomComponentVertex(Vertex):
             return self.artifacts["repr"] or super()._built_object_repr()
 
 
-class ChatVertex(Vertex):
+class InterfaceVertex(Vertex):
     def __init__(self, data: Dict, graph):
         super().__init__(data, graph=graph, base_type="custom_components", is_task=True)
         self.steps = [self._build, self._run]
@@ -325,56 +325,131 @@ class ChatVertex(Vertex):
                 return f"Task {self.task_id} is not running"
         if self.artifacts:
             # dump as a yaml string
-            artifacts = {k.title().replace("_", " "): v for k, v in self.artifacts.items() if v is not None}
+            if isinstance(self.artifacts, dict):
+                _artifacts = [self.artifacts]
+            elif hasattr(self.artifacts, "records"):
+                _artifacts = self.artifacts.records
+            else:
+                _artifacts = self.artifacts
+            artifacts = []
+            for artifact in _artifacts:
+                # artifacts = {k.title().replace("_", " "): v for k, v in self.artifacts.items() if v is not None}
+                artifact = {k.title().replace("_", " "): v for k, v in artifact.items() if v is not None}
+                artifacts.append(artifact)
             yaml_str = yaml.dump(artifacts, default_flow_style=False, allow_unicode=True)
             return yaml_str
         return super()._built_object_repr()
 
+    def _process_chat_component(self):
+        """
+        Process the chat component and return the message.
+
+        This method processes the chat component by extracting the necessary parameters
+        such as sender, sender_name, and message from the `params` dictionary. It then
+        performs additional operations based on the type of the `_built_object` attribute.
+        If `_built_object` is an instance of `AIMessage`, it creates a `ChatOutputResponse`
+        object using the `from_message` method. If `_built_object` is not an instance of
+        `UnbuiltObject`, it checks the type of `_built_object` and performs specific
+        operations accordingly. If `_built_object` is a dictionary, it converts it into a
+        code block. If `_built_object` is an instance of `Record`, it assigns the `text`
+        attribute to the `message` variable. If `message` is an instance of `AsyncIterator`
+        or `Iterator`, it builds a stream URL and sets `message` to an empty string. If
+        `_built_object` is not a string, it converts it to a string. If `message` is a
+        generator or iterator, it assigns it to the `message` variable. Finally, it creates
+        a `ChatOutputResponse` object using the extracted parameters and assigns it to the
+        `artifacts` attribute. If `artifacts` is not None, it calls the `model_dump` method
+        on it and assigns the result to the `artifacts` attribute. It then returns the
+        `message` variable.
+
+        Returns:
+            str: The processed message.
+        """
+        artifacts = None
+        sender = self.params.get("sender", None)
+        sender_name = self.params.get("sender_name", None)
+        message = self.params.get(INPUT_FIELD_NAME, None)
+        if isinstance(message, str):
+            message = unescape_string(message)
+        stream_url = None
+        if isinstance(self._built_object, AIMessage):
+            artifacts = ChatOutputResponse.from_message(
+                self._built_object,
+                sender=sender,
+                sender_name=sender_name,
+            )
+        elif not isinstance(self._built_object, UnbuiltObject):
+            if isinstance(self._built_object, dict):
+                # Turn the dict into a pleasing to
+                # read JSON inside a code block
+                message = dict_to_codeblock(self._built_object)
+            elif isinstance(self._built_object, Record):
+                message = self._built_object.text
+            elif isinstance(message, (AsyncIterator, Iterator)):
+                stream_url = self.build_stream_url()
+                message = ""
+            elif not isinstance(self._built_object, str):
+                message = str(self._built_object)
+            # if the message is a generator or iterator
+            # it means that it is a stream of messages
+            else:
+                message = self._built_object
+
+            artifacts = ChatOutputResponse(
+                message=message,
+                sender=sender,
+                sender_name=sender_name,
+                stream_url=stream_url,
+            )
+
+            self.will_stream = stream_url is not None
+        if artifacts:
+            self.artifacts = artifacts.model_dump(exclude_none=True)
+
+        return message
+
+    def _process_record_component(self):
+        """
+        Process the record component of the vertex.
+
+        If the built object is an instance of `Record`, it calls the `model_dump` method
+        and assigns the result to the `artifacts` attribute.
+
+        If the built object is a list, it iterates over each element and checks if it is
+        an instance of `Record`. If it is, it calls the `model_dump` method and appends
+        the result to the `artifacts` list. If it is not, it raises a `ValueError` if the
+        `ignore_errors` parameter is set to `False`, or logs an error message if it is set
+        to `True`.
+
+        Returns:
+            The built object.
+
+        Raises:
+            ValueError: If an element in the list is not an instance of `Record` and
+                `ignore_errors` is set to `False`.
+        """
+        if isinstance(self._built_object, Record):
+            artifacts = [self._built_object.data]
+        elif isinstance(self._built_object, list):
+            artifacts = []
+            ignore_errors = self.params.get("ignore_errors", False)
+            for record in self._built_object:
+                if isinstance(record, Record):
+                    artifacts.append(record.data)
+                elif ignore_errors:
+                    logger.error(f"Record expected, but got {record} of type {type(record)}")
+                else:
+                    raise ValueError(f"Record expected, but got {record} of type {type(record)}")
+        self.artifacts = RecordOutputResponse(records=artifacts)
+        return self._built_object
+
     async def _run(self, *args, **kwargs):
         if self.is_interface_component:
-            if self.vertex_type in ["ChatOutput", "ChatInput"]:
-                artifacts = None
-                sender = self.params.get("sender", None)
-                sender_name = self.params.get("sender_name", None)
-                message = self.params.get(INPUT_FIELD_NAME, None)
-                if isinstance(message, str):
-                    message = unescape_string(message)
-                stream_url = None
-                if isinstance(self._built_object, AIMessage):
-                    artifacts = ChatOutputResponse.from_message(
-                        self._built_object,
-                        sender=sender,
-                        sender_name=sender_name,
-                    )
-                elif not isinstance(self._built_object, UnbuiltObject):
-                    if isinstance(self._built_object, dict):
-                        # Turn the dict into a pleasing to
-                        # read JSON inside a code block
-                        message = dict_to_codeblock(self._built_object)
-                    elif isinstance(self._built_object, Record):
-                        message = self._built_object.text
-                    elif isinstance(message, (AsyncIterator, Iterator)):
-                        stream_url = self.build_stream_url()
-                        message = ""
-                    elif not isinstance(self._built_object, str):
-                        message = str(self._built_object)
-                    # if the message is a generator or iterator
-                    # it means that it is a stream of messages
-                    else:
-                        message = self._built_object
-
-                    artifacts = ChatOutputResponse(
-                        message=message,
-                        sender=sender,
-                        sender_name=sender_name,
-                        stream_url=stream_url,
-                    )
-
-                    self.will_stream = stream_url is not None
-                if artifacts:
-                    self.artifacts = artifacts.model_dump(exclude_none=True)
+            if self.vertex_type in CHAT_COMPONENTS:
+                message = self._process_chat_component()
+            elif self.vertex_type in RECORDS_COMPONENTS:
+                message = self._process_record_component()
             if isinstance(self._built_object, (AsyncIterator, Iterator)):
-                if self.params["return_record"]:
+                if self.params.get("return_record", False):
                     self._built_object = Record(text=message, data=self.artifacts)
                 else:
                     self._built_object = message

src/backend/base/langflow/graph/vertex/utils.py

@@ -1,11 +1,15 @@
-from typing import Any, Optional, Union
+from typing import Any, Optional, Union, TYPE_CHECKING
 
 from langchain_core.messages import BaseMessage
 from langchain_core.runnables import Runnable
 from loguru import logger
 
+from langflow.services.deps import get_monitor_service
 from langflow.utils.constants import PYTHON_BASIC_TYPES
 
+if TYPE_CHECKING:
+    from langflow.graph.vertex.base import Vertex
+
 
 def is_basic_type(obj):
     return type(obj) in PYTHON_BASIC_TYPES
@@ -63,3 +67,49 @@ async def generate_result(built_object: Any, inputs: dict, has_external_output:
     else:
         result = built_object
     return result
+
+
+def build_clean_params(target: "Vertex") -> dict:
+    """
+    Cleans the parameters of the target vertex.
+    """
+    # Removes all keys that the values aren't python types like str, int, bool, etc.
+    params = {
+        key: value for key, value in target.params.items() if isinstance(value, (str, int, bool, float, list, dict))
+    }
+    # if it is a list we need to check if the contents are python types
+    for key, value in params.items():
+        if isinstance(value, list):
+            params[key] = [item for item in value if isinstance(item, (str, int, bool, float, list, dict))]
+    return params
+
+
+def log_transaction(source: "Vertex", target: "Vertex", flow_id, status, error=None):
+    """
+    Logs a transaction between two vertices.
+
+    Args:
+        source (Vertex): The source vertex of the transaction.
+        target (Vertex): The target vertex of the transaction.
+        status: The status of the transaction.
+        error (Optional): Any error associated with the transaction.
+
+    Raises:
+        Exception: If there is an error while logging the transaction.
+
+    """
+    try:
+        monitor_service = get_monitor_service()
+        clean_params = build_clean_params(target)
+        data = {
+            "source": source.vertex_type,
+            "target": target.vertex_type,
+            "target_args": clean_params,
+            "timestamp": monitor_service.get_timestamp(),
+            "status": status,
+            "error": error,
+            "flow_id": flow_id,
+        }
+        monitor_service.add_row(table_name="transactions", data=data)
+    except Exception as e:
+        logger.error(f"Error logging transaction: {e}")

src/backend/base/langflow/initial_setup/setup.py

@@ -11,10 +11,11 @@ from sqlmodel import select
 from langflow.base.constants import FIELD_FORMAT_ATTRIBUTES, NODE_FORMAT_ATTRIBUTES
 from langflow.interface.types import get_all_components
 from langflow.services.database.models.flow.model import Flow, FlowCreate
+from langflow.services.database.models.folder.model import Folder, FolderCreate
 from langflow.services.deps import get_settings_service, session_scope
 
 STARTER_FOLDER_NAME = "Starter Projects"
-
+STARTER_FOLDER_DESCRIPTION = "Starter projects to help you get started in Langflow."
 
 # In the folder ./starter_projects we have a few JSON files that represent
 # starter projects. We want to load these into the database so that users
@@ -158,6 +159,7 @@ def create_new_project(
     project_data,
     project_icon,
     project_icon_bg_color,
+    new_folder_id
 ):
     logger.debug(f"Creating starter project {project_name}")
     new_project = FlowCreate(
@@ -168,33 +170,41 @@ def create_new_project(
         data=project_data,
         is_component=project_is_component,
         updated_at=updated_at_datetime,
-        folder=STARTER_FOLDER_NAME,
+        folder_id=new_folder_id,
     )
     db_flow = Flow.model_validate(new_project, from_attributes=True)
     session.add(db_flow)
 
 
-def get_all_flows_similar_to_project(session, project_name):
-    flows = session.exec(
-        select(Flow).where(
-            Flow.name == project_name,
-            Flow.folder == STARTER_FOLDER_NAME,
-        )
-    ).all()
+def get_all_flows_similar_to_project(session, folder_id):
+    flows = session.exec(select(Folder).where(Folder.id == folder_id)).first().flows
     return flows
 
 
-def delete_start_projects(session):
-    flows = session.exec(
-        select(Flow).where(
-            Flow.folder == STARTER_FOLDER_NAME,
-        )
-    ).all()
+def delete_start_projects(session, folder_id):
+    flows = session.exec(select(Folder).where(Folder.id == folder_id)).first().flows
     for flow in flows:
         session.delete(flow)
     session.commit()
 
 
+def folder_exists(session, folder_name):
+    folder = session.exec(select(Folder).where(Folder.name == folder_name)).first()
+    return folder is not None
+
+
+def create_starter_folder(session):
+    if not folder_exists(session, STARTER_FOLDER_NAME):
+        new_folder = FolderCreate(name=STARTER_FOLDER_NAME, description=STARTER_FOLDER_DESCRIPTION)
+        db_folder = Folder.model_validate(new_folder, from_attributes=True)
+        session.add(db_folder)
+        session.commit()
+        session.refresh(db_folder)
+        return db_folder
+    else:
+        return session.exec(select(Folder).where(Folder.name == STARTER_FOLDER_NAME)).first()
+
+
 def create_or_update_starter_projects():
     components_paths = get_settings_service().settings.COMPONENTS_PATH
     try:
@@ -203,8 +213,9 @@ def create_or_update_starter_projects():
         logger.exception(f"Error loading components: {e}")
         raise e
     with session_scope() as session:
+        new_folder = create_starter_folder(session)
         starter_projects = load_starter_projects()
-        delete_start_projects(session)
+        delete_start_projects(session, new_folder.id)
         for project_path, project in starter_projects:
             (
                 project_name,
@@ -224,7 +235,7 @@ def create_or_update_starter_projects():
 
                 update_project_file(project_path, project, updated_project_data)
             if project_name and project_data:
-                for existing_project in get_all_flows_similar_to_project(session, project_name):
+                for existing_project in get_all_flows_similar_to_project(session, new_folder.id):
                     session.delete(existing_project)
 
                 create_new_project(
@@ -236,4 +247,5 @@ def create_or_update_starter_projects():
                     project_data,
                     project_icon,
                     project_icon_bg_color,
+                    new_folder.id
                 )

src/backend/base/langflow/memory.py

@@ -1,5 +1,5 @@
 import warnings
-from typing import Optional, Union
+from typing import List, Optional, Union
 
 from loguru import logger
 
@@ -60,7 +60,7 @@ def get_messages(
     return records
 
 
-def add_messages(records: Union[list[Record], Record]):
+def add_messages(records: Union[list[Record], Record], flow_id: Optional[str] = None):
     """
     Add a message to the monitor service.
     """
@@ -76,7 +76,8 @@ def add_messages(records: Union[list[Record], Record]):
 
         messages: list[MessageModel] = []
         for record in records:
-            messages.append(MessageModel.from_record(record))
+            record.timestamp = monitor_service.get_timestamp()
+            messages.append(MessageModel.from_record(record, flow_id=flow_id))
 
         for message in messages:
             try:
@@ -107,7 +108,24 @@ def store_message(
     session_id: Optional[str] = None,
     sender: Optional[str] = None,
     sender_name: Optional[str] = None,
-) -> list[Record]:
+    flow_id: Optional[str] = None,
+) -> List[Record]:
+    """
+    Stores a message in the memory.
+
+    Args:
+        message (Union[str, Record]): The message to be stored. It can be either a string or a Record object.
+        session_id (Optional[str]): The session ID associated with the message.
+        sender (Optional[str]): The sender ID associated with the message.
+        sender_name (Optional[str]): The name of the sender associated with the message.
+        flow_id (Optional[str]): The flow ID associated with the message. When running from the CustomComponent you can access this using `self.graph.flow_id`.
+
+    Returns:
+        List[Record]: A list of records containing the stored message.
+
+    Raises:
+        ValueError: If any of the required parameters (session_id, sender, sender_name) is not provided.
+    """
     if not message:
         warnings.warn("No message provided.")
         return []
@@ -134,4 +152,4 @@ def store_message(
             },
         )
 
-    return add_messages([record])
+    return add_messages([record], flow_id=flow_id)

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

@@ -1,4 +1,5 @@
 import copy
+import json
 from typing import Literal, Optional, cast
 
 from langchain_core.documents import Document
@@ -162,23 +163,15 @@ class Record(BaseModel):
         # Create a new Record object with a deep copy of the data dictionary
         return Record(data=copy.deepcopy(self.data, memo), text_key=self.text_key, default_value=self.default_value)
 
-    def __str__(self) -> str:
-        """
-        Returns a string representation of the Record, including text and data.
-        """
-        # Assuming a method to dump model data as JSON string exists.
-        # If it doesn't, you might need to implement it or use json.dumps() directly.
-        # build the string considering all keys in the data dictionary
-        prefix = "Record("
-        suffix = ")"
-        text = f"text_key={self.text_key}, "
-        text += ", ".join([f"{k}={v}" for k, v in self.data.items()])
-        return prefix + text + suffix
-
     # check which attributes the Record has by checking the keys in the data dictionary
     def __dir__(self):
         return super().__dir__() + list(self.data.keys())
 
+    def __str__(self) -> str:
+        # return a JSON string representation of the Record atributes
+
+        return json.dumps(self.data)
+
 
 INPUT_FIELD_NAME = "input_value"
 

src/backend/base/langflow/services/database/models/__init__.py

@@ -1,6 +1,7 @@
 from .api_key import ApiKey
 from .flow import Flow
+from .folder import Folder
 from .user import User
 from .variable import Variable
 
-__all__ = ["Flow", "User", "ApiKey", "Variable"]
+__all__ = ["Flow", "User", "ApiKey", "Variable", "Folder"]

src/backend/base/langflow/services/database/models/flow/model.py

@@ -13,6 +13,7 @@ from sqlmodel import JSON, Column, Field, Relationship, SQLModel
 from langflow.schema.schema import Record
 
 if TYPE_CHECKING:
+    from langflow.services.database.models.folder import Folder
     from langflow.services.database.models.user import User
 
 
@@ -24,7 +25,7 @@ class FlowBase(SQLModel):
     data: Optional[Dict] = Field(default=None, nullable=True)
     is_component: Optional[bool] = Field(default=False, nullable=True)
     updated_at: Optional[datetime] = Field(default_factory=lambda: datetime.now(timezone.utc), nullable=True)
-    folder: Optional[str] = Field(default=None, nullable=True)
+    folder_id: Optional[UUID] = Field(default=None, nullable=True)
 
     @field_validator("icon_bg_color")
     def validate_icon_bg_color(cls, v):
@@ -112,6 +113,8 @@ class Flow(FlowBase, table=True):
     data: Optional[Dict] = Field(default=None, sa_column=Column(JSON))
     user_id: Optional[UUID] = Field(index=True, foreign_key="user.id", nullable=True)
     user: "User" = Relationship(back_populates="flows")
+    folder_id: Optional[UUID] = Field(default=None, foreign_key="folder.id", nullable=True, index=True)
+    folder: Optional["Folder"] = Relationship(back_populates="flows")
 
     def to_record(self):
         serialized = self.model_dump()
@@ -128,14 +131,17 @@ class Flow(FlowBase, table=True):
 
 class FlowCreate(FlowBase):
     user_id: Optional[UUID] = None
+    folder_id: Optional[UUID] = None
 
 
 class FlowRead(FlowBase):
     id: UUID
     user_id: Optional[UUID] = Field()
+    folder_id: Optional[UUID] = Field()
 
 
 class FlowUpdate(SQLModel):
     name: Optional[str] = None
     description: Optional[str] = None
     data: Optional[Dict] = None
+    folder_id: Optional[UUID] = None

src/backend/base/langflow/services/database/models/folder/__init__.py

@@ -0,0 +1,3 @@
+from .model import Folder, FolderCreate, FolderRead, FolderUpdate
+
+__all__ = ["Folder", "FolderCreate", "FolderRead", "FolderUpdate"]

src/backend/base/langflow/services/database/models/folder/constants.py

@@ -0,0 +1,2 @@
+DEFAULT_FOLDER_DESCRIPTION = "Manage your personal projects. Download and upload entire collections."
+DEFAULT_FOLDER_NAME = "My Projects"

src/backend/base/langflow/services/database/models/folder/model.py

@@ -0,0 +1,55 @@
+from typing import TYPE_CHECKING, List, Optional
+from uuid import UUID, uuid4
+
+from sqlmodel import Field, Relationship, SQLModel
+
+from langflow.services.database.models.flow.model import FlowRead
+
+if TYPE_CHECKING:
+    from langflow.services.database.models.flow.model import Flow
+    from langflow.services.database.models.user.model import User
+
+
+class FolderBase(SQLModel):
+    name: str = Field(index=True)
+    description: Optional[str] = Field(default=None)
+
+
+class Folder(FolderBase, table=True):
+    id: Optional[UUID] = Field(default_factory=uuid4, primary_key=True)
+    parent_id: Optional[UUID] = Field(default=None, foreign_key="folder.id")
+
+    parent: Optional["Folder"] = Relationship(
+        back_populates="children",
+        sa_relationship_kwargs=dict(remote_side="Folder.id"),
+    )
+    children: List["Folder"] = Relationship(back_populates="parent")
+    user_id: Optional[UUID] = Field(default=None, foreign_key="user.id")
+    user: "User" = Relationship(back_populates="folders")
+    flows: List["Flow"] = Relationship(
+        back_populates="folder", sa_relationship_kwargs={"cascade": "all, delete, delete-orphan"}
+    )
+
+
+class FolderCreate(FolderBase):
+    components_list: Optional[List[UUID]] = None
+    flows_list: Optional[List[UUID]] = None
+
+
+class FolderRead(FolderBase):
+    id: UUID
+    parent_id: Optional[UUID] = Field()
+
+
+class FolderReadWithFlows(FolderBase):
+    id: UUID
+    parent_id: Optional[UUID] = Field()
+    flows: List["FlowRead"] = Field(default=[])
+
+
+class FolderUpdate(SQLModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+    parent_id: Optional[UUID] = None
+    components: Optional[List[UUID]] = None
+    flows: Optional[List[UUID]] = None

src/backend/base/langflow/services/database/models/folder/utils.py

@@ -0,0 +1,26 @@
+from typing import TYPE_CHECKING
+from uuid import UUID
+
+from langflow.services.database.models.flow.model import Flow
+from sqlmodel import Session, select, update
+
+from .constants import DEFAULT_FOLDER_DESCRIPTION, DEFAULT_FOLDER_NAME
+from .model import Folder
+
+if TYPE_CHECKING:
+    from langflow.services.database.models.user.model import User
+
+
+def create_default_folder_if_it_doesnt_exist(session: Session, user_id: UUID):
+    if not session.exec(select(Folder).where(Folder.user_id == user_id)).first():
+        folder = Folder(name=DEFAULT_FOLDER_NAME, user_id=user_id, description=DEFAULT_FOLDER_DESCRIPTION)
+        session.add(folder)
+        session.commit()
+        session.refresh(folder)
+        session.exec(
+            update(Flow)
+            .where((Flow.folder_id == None) & (Flow.user_id == user_id))
+            .values(folder_id=folder.id)
+        )
+        session.commit()
+    return None

src/backend/base/langflow/services/database/models/user/model.py

@@ -8,6 +8,7 @@ if TYPE_CHECKING:
     from langflow.services.database.models.api_key import ApiKey
     from langflow.services.database.models.variable import Variable
     from langflow.services.database.models.flow import Flow
+    from langflow.services.database.models.folder import Folder
 
 
 class User(SQLModel, table=True):
@@ -30,6 +31,10 @@ class User(SQLModel, table=True):
         back_populates="user",
         sa_relationship_kwargs={"cascade": "delete"},
     )
+    folders: list["Folder"] = Relationship(
+        back_populates="user",
+        sa_relationship_kwargs={"cascade": "delete"},
+    )
 
 
 class UserCreate(SQLModel):

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

@@ -2,15 +2,16 @@ import json
 from datetime import datetime
 from typing import TYPE_CHECKING, Any, Optional
 
-from pydantic import BaseModel, Field, field_serializer, validator
+from pydantic import BaseModel, Field, field_serializer, field_validator
 
 if TYPE_CHECKING:
     from langflow.schema import Record
 
 
 class TransactionModel(BaseModel):
-    id: Optional[int] = Field(default=None, alias="id")
+    index: Optional[int] = Field(default=None)
     timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    flow_id: str
     source: str
     target: str
     target_args: dict
@@ -22,15 +23,53 @@ class TransactionModel(BaseModel):
         populate_by_name = True
 
     # validate target_args in case it is a JSON
-    @validator("target_args", pre=True)
+    @field_validator("target_args", mode="before")
     def validate_target_args(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
+    @field_serializer("target_args")
+    def serialize_target_args(v):
+        if isinstance(v, dict):
+            return json.dumps(v)
+        return v
+
+
+class TransactionModelResponse(BaseModel):
+    index: Optional[int] = Field(default=None)
+    timestamp: Optional[datetime] = Field(default_factory=datetime.now, alias="timestamp")
+    flow_id: str
+    source: str
+    target: str
+    target_args: dict
+    status: str
+    error: Optional[str] = None
+
+    class Config:
+        from_attributes = True
+        populate_by_name = True
+
+    # validate target_args in case it is a JSON
+    @field_validator("target_args", mode="before")
+    def validate_target_args(cls, v):
+        if isinstance(v, str):
+            return json.loads(v)
+        return v
+
+    @field_validator("index", mode="before")
+    def validate_id(cls, v):
+        if isinstance(v, float):
+            try:
+                return int(v)
+            except ValueError:
+                return None
+        return v
+
 
 class MessageModel(BaseModel):
-    id: Optional[int] = Field(default=None, alias="id")
+    index: Optional[int] = Field(default=None)
+    flow_id: Optional[str] = Field(default=None, alias="flow_id")
     timestamp: datetime = Field(default_factory=datetime.now)
     sender: str
     sender_name: str
@@ -42,14 +81,14 @@ class MessageModel(BaseModel):
         from_attributes = True
         populate_by_name = True
 
-    @validator("artifacts", pre=True)
+    @field_validator("artifacts", mode="before")
     def validate_target_args(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
     @classmethod
-    def from_record(cls, record: "Record"):
+    def from_record(cls, record: "Record", flow_id: Optional[str] = None):
         # first check if the record has all the required fields
         if not record.data or ("sender" not in record.data and "sender_name" not in record.data):
             raise ValueError("The record does not have the required fields 'sender' and 'sender_name' in the data.")
@@ -59,9 +98,30 @@ class MessageModel(BaseModel):
             message=record.text,
             session_id=record.session_id,
             artifacts=record.artifacts or {},
+            timestamp=record.timestamp,
+            flow_id=flow_id,
         )
 
 
+class MessageModelResponse(MessageModel):
+    index: Optional[int] = Field(default=None)
+
+    @field_validator("artifacts", mode="before")
+    def serialize_artifacts(v):
+        if isinstance(v, str):
+            return json.loads(v)
+        return v
+
+    @field_validator("index", mode="before")
+    def validate_id(cls, v):
+        if isinstance(v, float):
+            try:
+                return int(v)
+            except ValueError:
+                return None
+        return v
+
+
 class VertexBuildModel(BaseModel):
     index: Optional[int] = Field(default=None, alias="index", exclude=True)
     id: Optional[str] = Field(default=None, alias="id")
@@ -86,9 +146,11 @@ class VertexBuildModel(BaseModel):
                 elif isinstance(value, list) and all(isinstance(i, BaseModel) for i in value):
                     v[key] = [i.model_dump() for i in value]
             return json.dumps(v)
+        elif isinstance(v, BaseModel):
+            return v.model_dump_json()
         return v
 
-    @validator("params", pre=True)
+    @field_validator("params", mode="before")
     def validate_params(cls, v):
         if isinstance(v, str):
             try:
@@ -103,16 +165,18 @@ class VertexBuildModel(BaseModel):
             return json.dumps([i.model_dump() for i in v])
         return v
 
-    @validator("data", pre=True)
+    @field_validator("data", mode="before")
     def validate_data(cls, v):
         if isinstance(v, str):
             return json.loads(v)
         return v
 
-    @validator("artifacts", pre=True)
+    @field_validator("artifacts", mode="before")
     def validate_artifacts(cls, v):
         if isinstance(v, str):
             return json.loads(v)
+        elif isinstance(v, BaseModel):
+            return v.model_dump()
         return v
 
 

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

@@ -69,7 +69,7 @@ class MonitorService(Service):
         valid: Optional[bool] = None,
         order_by: Optional[str] = "timestamp",
     ):
-        query = "SELECT id, flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
+        query = "SELECT index,flow_id, valid, params, data, artifacts, timestamp FROM vertex_builds"
         conditions = []
         if flow_id:
             conditions.append(f"flow_id = '{flow_id}'")
@@ -109,6 +109,7 @@ class MonitorService(Service):
 
     def get_messages(
         self,
+        flow_id: Optional[str] = None,
         sender: Optional[str] = None,
         sender_name: Optional[str] = None,
         session_id: Optional[str] = None,
@@ -116,7 +117,7 @@ class MonitorService(Service):
         order: Optional[str] = "DESC",
         limit: Optional[int] = None,
     ):
-        query = "SELECT sender_name, sender, session_id, message, artifacts, timestamp FROM messages"
+        query = "SELECT index, flow_id, sender_name, sender, session_id, message, artifacts, timestamp FROM messages"
         conditions = []
         if sender:
             conditions.append(f"sender = '{sender}'")
@@ -124,6 +125,8 @@ class MonitorService(Service):
             conditions.append(f"sender_name = '{sender_name}'")
         if session_id:
             conditions.append(f"session_id = '{session_id}'")
+        if flow_id:
+            conditions.append(f"flow_id = '{flow_id}'")
 
         if conditions:
             query += " WHERE " + " AND ".join(conditions)
@@ -146,8 +149,9 @@ class MonitorService(Service):
         target: Optional[str] = None,
         status: Optional[str] = None,
         order_by: Optional[str] = "timestamp",
+        flow_id: Optional[str] = None,
     ):
-        query = "SELECT source, target, target_args, status, error, timestamp FROM transactions"
+        query = "SELECT index,flow_id, source, target, target_args, status, error, timestamp FROM transactions"
         conditions = []
         if source:
             conditions.append(f"source = '{source}'")
@@ -155,6 +159,8 @@ class MonitorService(Service):
             conditions.append(f"target = '{target}'")
         if status:
             conditions.append(f"status = '{status}'")
+        if flow_id:
+            conditions.append(f"flow_id = '{flow_id}'")
 
         if conditions:
             query += " WHERE " + " AND ".join(conditions)

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

@@ -61,7 +61,7 @@ def drop_and_create_table_if_schema_mismatch(db_path: str, table_name: str, mode
         if current_schema != desired_schema:
             # If they don't match, drop the existing table and create a new one
             conn.execute(f"DROP TABLE IF EXISTS {table_name}")
-            if "id" in desired_schema.keys():
+            if INDEX_KEY in desired_schema.keys():
                 # Create a sequence for the id column
                 try:
                     conn.execute(f"CREATE SEQUENCE seq_{table_name} START 1;")
@@ -91,7 +91,7 @@ def add_row_to_table(
     columns = ", ".join(keys)
 
     values_placeholders = ", ".join(["?" for _ in keys])
-    values = list(validated_dict.values())
+    values = [validated_dict[key] for key in keys]
 
     # Create the insert statement
     insert_sql = f"INSERT INTO {table_name} ({columns}) VALUES ({values_placeholders})"
@@ -104,7 +104,7 @@ def add_row_to_table(
         column_error_message = ""
         for key, value in validated_dict.items():
             logger.error(f"{key}: {type(value)}")
-            if value in str(e):
+            if str(value) in str(e):
                 column_error_message = f"Column: {key} Value: {value} Error: {e}"
 
         if column_error_message:
@@ -119,6 +119,7 @@ async def log_message(
     message: str,
     session_id: str,
     artifacts: Optional[dict] = None,
+    flow_id: Optional[str] = None,
 ):
     try:
         from langflow.graph.vertex.base import Vertex
@@ -134,6 +135,7 @@ async def log_message(
             "artifacts": artifacts or {},
             "session_id": session_id,
             "timestamp": monitor_service.get_timestamp(),
+            "flow_id": flow_id,
         }
         monitor_service.add_row(table_name="messages", data=row)
     except Exception as e:

src/backend/base/langflow/utils/schemas.py

@@ -45,6 +45,12 @@ class ChatOutputResponse(BaseModel):
         return self
 
 
+class RecordOutputResponse(BaseModel):
+    """Record output response schema."""
+
+    records: List[Optional[Dict]]
+
+
 class ContainsEnumMeta(enum.EnumMeta):
     def __contains__(cls, item):
         try:

src/backend/base/poetry.lock

@@ -131,13 +131,13 @@ tz = ["backports.zoneinfo"]
 
 [[package]]
 name = "annotated-types"
-version = "0.6.0"
+version = "0.7.0"
 description = "Reusable constraint types to use with typing.Annotated"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
-    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
+    {file = "annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53"},
+    {file = "annotated_types-0.7.0.tar.gz", hash = "sha256:aff07c09a53a08bc8cfccb9c85b05f1aa9a2a6f23728d790723543408344ce89"},
 ]
 
 [[package]]
@@ -632,17 +632,20 @@ gmpy2 = ["gmpy2"]
 
 [[package]]
 name = "emoji"
-version = "2.11.1"
+version = "2.12.1"
 description = "Emoji for Python"
 optional = false
-python-versions = "!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*,>=2.7"
+python-versions = ">=3.7"
 files = [
-    {file = "emoji-2.11.1-py2.py3-none-any.whl", hash = "sha256:b7ba25299bbf520cc8727848ae66b986da32aee27dc2887eaea2bff07226ce49"},
-    {file = "emoji-2.11.1.tar.gz", hash = "sha256:062ff0b3154b6219143f8b9f4b3e5c64c35bc2b146e6e2349ab5f29e218ce1ee"},
+    {file = "emoji-2.12.1-py3-none-any.whl", hash = "sha256:a00d62173bdadc2510967a381810101624a2f0986145b8da0cffa42e29430235"},
+    {file = "emoji-2.12.1.tar.gz", hash = "sha256:4aa0488817691aa58d83764b6c209f8a27c0b3ab3f89d1b8dceca1a62e4973eb"},
 ]
 
+[package.dependencies]
+typing-extensions = ">=4.7.0"
+
 [package.extras]
-dev = ["coverage", "coveralls", "pytest"]
+dev = ["coverage", "pytest (>=7.4.4)"]
 
 [[package]]
 name = "exceptiongroup"
@@ -1169,13 +1172,13 @@ types-requests = ">=2.31.0.2,<3.0.0.0"
 
 [[package]]
 name = "langsmith"
-version = "0.1.59"
+version = "0.1.60"
 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.59-py3-none-any.whl", hash = "sha256:445e3bc1d3baa1e5340cd979907a19483b9763a2ed37b863a01113d406f69345"},
-    {file = "langsmith-0.1.59.tar.gz", hash = "sha256:e748a89f4dd6aa441349143e49e546c03b5dfb43376a25bfef6a5ca792fe1437"},
+    {file = "langsmith-0.1.60-py3-none-any.whl", hash = "sha256:3c3520ea473de0a984237b3e9d638fdf23ef3acc5aec89a42e693225e72d6120"},
+    {file = "langsmith-0.1.60.tar.gz", hash = "sha256:6a145b5454437f9e0f81525f23c4dcdbb8c07b1c91553b8f697456c418d6a599"},
 ]
 
 [package.dependencies]
@@ -2329,13 +2332,13 @@ files = [
 
 [[package]]
 name = "requests"
-version = "2.31.0"
+version = "2.32.2"
 description = "Python HTTP for Humans."
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "requests-2.31.0-py3-none-any.whl", hash = "sha256:58cd2187c01e70e6e26505bca751777aa9f2ee0b7f4300988b709f44e013003f"},
-    {file = "requests-2.31.0.tar.gz", hash = "sha256:942c5a758f98d790eaed1a29cb6eefc7ffb0d1cf7af05c3d2791656dbd6ad1e1"},
+    {file = "requests-2.32.2-py3-none-any.whl", hash = "sha256:fc06670dd0ed212426dfeb94fc1b983d917c4f9847c863f313c9dfaaffb7c23c"},
+    {file = "requests-2.32.2.tar.gz", hash = "sha256:dd951ff5ecf3e3b3aa26b40703ba77495dab41da839ae72ef3c8e5d8e2433289"},
 ]
 
 [package.dependencies]
@@ -2583,13 +2586,13 @@ typing-extensions = ">=3.7.4.3"
 
 [[package]]
 name = "types-requests"
-version = "2.31.0.20240406"
+version = "2.32.0.20240521"
 description = "Typing stubs for requests"
 optional = false
 python-versions = ">=3.8"
 files = [
-    {file = "types-requests-2.31.0.20240406.tar.gz", hash = "sha256:4428df33c5503945c74b3f42e82b181e86ec7b724620419a2966e2de604ce1a1"},
-    {file = "types_requests-2.31.0.20240406-py3-none-any.whl", hash = "sha256:6216cdac377c6b9a040ac1c0404f7284bd13199c0e1bb235f4324627e8898cf5"},
+    {file = "types-requests-2.32.0.20240521.tar.gz", hash = "sha256:c5c4a0ae95aad51f1bf6dae9eed04a78f7f2575d4b171da37b622e08b93eb5d3"},
+    {file = "types_requests-2.32.0.20240521-py3-none-any.whl", hash = "sha256:ab728ba43ffb073db31f21202ecb97db8753ded4a9dc49cb480d8a5350c5c421"},
 ]
 
 [package.dependencies]

src/backend/base/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "langflow-base"
-version = "0.0.45"
+version = "0.0.47"
 description = "A Python package with a built-in web application"
 authors = ["Langflow <contact@langflow.org>"]
 maintainers = [

src/frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.2",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
+        "@hookform/resolvers": "^3.3.4",
         "@million/lint": "^0.0.73",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-checkbox": "^1.0.4",
@@ -55,6 +56,7 @@
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.21",
         "react-error-boundary": "^4.0.11",
+        "react-hook-form": "^7.51.4",
         "react-icons": "^5.0.1",
         "react-laag": "^2.0.5",
         "react-markdown": "^8.0.7",
@@ -73,10 +75,11 @@
         "uuid": "^9.0.0",
         "vite-plugin-svgr": "^3.2.0",
         "web-vitals": "^2.1.4",
+        "zod": "^3.23.7",
         "zustand": "^4.4.7"
       },
       "devDependencies": {
-        "@playwright/test": "^1.43.1",
+        "@playwright/test": "^1.44.0",
         "@swc/cli": "^0.1.62",
         "@swc/core": "^1.3.80",
         "@tailwindcss/typography": "^0.5.9",
@@ -150,6 +153,26 @@
         "nun": "bin/nun.mjs"
       }
     },
+    "node_modules/@axiomhq/js": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/@axiomhq/js/-/js-1.0.0-rc.3.tgz",
+      "integrity": "sha512-Zm10TczcMLounWqC42nMkXQ7XKLqjzLrd5ia022oBKDUZqAFVg2y9d1quQVNV4FlXyg9MKDdfMjpKQRmzEGaog==",
+      "dependencies": {
+        "fetch-retry": "^6.0.0",
+        "uuid": "^8.3.2"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@axiomhq/js/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.24.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
@@ -429,6 +452,40 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@clack/core": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.3.4.tgz",
+      "integrity": "sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.7.0.tgz",
+      "integrity": "sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==",
+      "bundleDependencies": [
+        "is-unicode-supported"
+      ],
+      "dependencies": {
+        "@clack/core": "^0.3.3",
+        "is-unicode-supported": "*",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -868,9 +925,9 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz",
-      "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
       "dependencies": {
         "@floating-ui/utils": "^0.2.0"
       }
@@ -885,9 +942,9 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
-      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0"
       },
@@ -917,6 +974,14 @@
         "react-dom": "^16 || ^17 || ^18"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.4.2.tgz",
+      "integrity": "sha512-1m9uAVIO8wVf7VCDAGsuGA0t6Z3m6jVGAN50HkV9vYLl0yixKK/Z1lr01vaRvYCkIKGoy1noVRxMzQYb4y/j1Q==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -999,6 +1064,17 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -1034,6 +1110,22 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -1109,6 +1201,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/@million/install": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@million/install/-/install-0.0.3.tgz",
+      "integrity": "sha512-yK8NgP+73+Tby/bmQ12B96bJ7RjsLazLtFgBed1Fg1WfTCCpHTILq79yQMSD/OWgm1tt1NYV4ELaTRM6wZOeAg==",
+      "dependencies": {
+        "@antfu/ni": "^0.21.12",
+        "@axiomhq/js": "1.0.0-rc.3",
+        "@babel/core": "^7.24.5",
+        "@babel/types": "^7.23.6",
+        "@clack/prompts": "^0.7.0",
+        "cli-high": "^0.4.1",
+        "diff": "^5.1.0",
+        "posthog-node": "^3.6.3",
+        "xycolors": "^0.1.1"
+      },
+      "bin": {
+        "install": "bin/index.js"
+      }
+    },
     "node_modules/@million/lint": {
       "version": "0.0.73",
       "resolved": "https://registry.npmjs.org/@million/lint/-/lint-0.0.73.tgz",
@@ -3232,14 +3343,14 @@
       }
     },
     "node_modules/@swc/core": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.6.tgz",
-      "integrity": "sha512-0UC0NkgWoqd9fkHPn1NTkTsQucW8iaA1fujK2OLGp40Zg5Vr7nrwBlqruX9expVMggS4rv/3vZSAGzRm80VQ/g==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.7.tgz",
+      "integrity": "sha512-U4qJRBefIJNJDRCCiVtkfa/hpiZ7w0R6kASea+/KLp+vkus3zcLSB8Ub8SvKgTIxjWpwsKcZlPf5nrv4ls46SQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@swc/counter": "^0.1.2",
-        "@swc/types": "^0.1.5"
+        "@swc/types": "0.1.7"
       },
       "engines": {
         "node": ">=10"
@@ -3249,16 +3360,16 @@
         "url": "https://opencollective.com/swc"
       },
       "optionalDependencies": {
-        "@swc/core-darwin-arm64": "1.5.6",
-        "@swc/core-darwin-x64": "1.5.6",
-        "@swc/core-linux-arm-gnueabihf": "1.5.6",
-        "@swc/core-linux-arm64-gnu": "1.5.6",
-        "@swc/core-linux-arm64-musl": "1.5.6",
-        "@swc/core-linux-x64-gnu": "1.5.6",
-        "@swc/core-linux-x64-musl": "1.5.6",
-        "@swc/core-win32-arm64-msvc": "1.5.6",
-        "@swc/core-win32-ia32-msvc": "1.5.6",
-        "@swc/core-win32-x64-msvc": "1.5.6"
+        "@swc/core-darwin-arm64": "1.5.7",
+        "@swc/core-darwin-x64": "1.5.7",
+        "@swc/core-linux-arm-gnueabihf": "1.5.7",
+        "@swc/core-linux-arm64-gnu": "1.5.7",
+        "@swc/core-linux-arm64-musl": "1.5.7",
+        "@swc/core-linux-x64-gnu": "1.5.7",
+        "@swc/core-linux-x64-musl": "1.5.7",
+        "@swc/core-win32-arm64-msvc": "1.5.7",
+        "@swc/core-win32-ia32-msvc": "1.5.7",
+        "@swc/core-win32-x64-msvc": "1.5.7"
       },
       "peerDependencies": {
         "@swc/helpers": "^0.5.0"
@@ -3270,9 +3381,9 @@
       }
     },
     "node_modules/@swc/core-darwin-arm64": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.6.tgz",
-      "integrity": "sha512-U4szqU03cvZOTXug5o+HQbbg16ZGwANtr7LELjw4hmWBqSTcbBVXgocyBMm1L4ngFIsqJc33D+urnnaae/NfMg==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.7.tgz",
+      "integrity": "sha512-bZLVHPTpH3h6yhwVl395k0Mtx8v6CGhq5r4KQdAoPbADU974Mauz1b6ViHAJ74O0IVE5vyy7tD3OpkQxL/vMDQ==",
       "cpu": [
         "arm64"
       ],
@@ -3286,9 +3397,9 @@
       }
     },
     "node_modules/@swc/core-darwin-x64": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.6.tgz",
-      "integrity": "sha512-k4jymBHYkbfGw8DT4bLtVsAckpp2dblyImQHRPScpvDyS4jUo4174mgy/dEnFmZVLTbuZAY876zBQyH+eJ3p4A==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.7.tgz",
+      "integrity": "sha512-RpUyu2GsviwTc2qVajPL0l8nf2vKj5wzO3WkLSHAHEJbiUZk83NJrZd1RVbEknIMO7+Uyjh54hEh8R26jSByaw==",
       "cpu": [
         "x64"
       ],
@@ -3302,9 +3413,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm-gnueabihf": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.6.tgz",
-      "integrity": "sha512-ijwGEdP18vS8YmvHUIfKYDFQ5mQ1GtCxhJp+IcJlrBJE+/eSJVvEVF5WwXFQ+Hzj6tr/OOub8UcRNUaQokjh3A==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.7.tgz",
+      "integrity": "sha512-cTZWTnCXLABOuvWiv6nQQM0hP6ZWEkzdgDvztgHI/+u/MvtzJBN5lBQ2lue/9sSFYLMqzqff5EHKlFtrJCA9dQ==",
       "cpu": [
         "arm"
       ],
@@ -3318,9 +3429,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-gnu": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.6.tgz",
-      "integrity": "sha512-6YD942jsDm64wgGNew4Q1Yh8CRI4QKWTqjzCkvlZCGV6aOw5B663WDSnUEKIoN4egeLcvSiqYYGlKMfbkkfNMw==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.7.tgz",
+      "integrity": "sha512-hoeTJFBiE/IJP30Be7djWF8Q5KVgkbDtjySmvYLg9P94bHg9TJPSQoC72tXx/oXOgXvElDe/GMybru0UxhKx4g==",
       "cpu": [
         "arm64"
       ],
@@ -3334,9 +3445,9 @@
       }
     },
     "node_modules/@swc/core-linux-arm64-musl": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.6.tgz",
-      "integrity": "sha512-Jntdd/HQAgRSQFUpmXjiU00BG08Yl5G1pgYDBXG2mPfkndGGgapRT8JPsnzfQujh9nOdWMIQDnCGU+mB4NY2Dg==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.7.tgz",
+      "integrity": "sha512-+NDhK+IFTiVK1/o7EXdCeF2hEzCiaRSrb9zD7X2Z7inwWlxAntcSuzZW7Y6BRqGQH89KA91qYgwbnjgTQ22PiQ==",
       "cpu": [
         "arm64"
       ],
@@ -3350,9 +3461,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-gnu": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.6.tgz",
-      "integrity": "sha512-cdaAyAZJvYCx0u9uadUVe4VVJOEC6GeVO5uTGo/vybCsKFn2Z8WVjGVTeHbxdp7pH2II9MRTySIv1eCCq70SOQ==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.7.tgz",
+      "integrity": "sha512-25GXpJmeFxKB+7pbY7YQLhWWjkYlR+kHz5I3j9WRl3Lp4v4UD67OGXwPe+DIcHqcouA1fhLhsgHJWtsaNOMBNg==",
       "cpu": [
         "x64"
       ],
@@ -3366,9 +3477,9 @@
       }
     },
     "node_modules/@swc/core-linux-x64-musl": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.6.tgz",
-      "integrity": "sha512-mGIs4d6/Hv/5EbP2d+2YNmIj9U5U/6CiPZsTyahQcEl+vJjNsmwDJoLex36LhxoGIUmVbbgk6cHj5DoHWNl0bQ==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.7.tgz",
+      "integrity": "sha512-0VN9Y5EAPBESmSPPsCJzplZHV26akC0sIgd3Hc/7S/1GkSMoeuVL+V9vt+F/cCuzr4VidzSkqftdP3qEIsXSpg==",
       "cpu": [
         "x64"
       ],
@@ -3382,9 +3493,9 @@
       }
     },
     "node_modules/@swc/core-win32-arm64-msvc": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.6.tgz",
-      "integrity": "sha512-ViiS2pUXy/J9RZWJXQJMuDKid0lqH9fu2piFi3IHnMWyyWPla5qHYijkeODwrdBsjc30NAHjV6jfka5SZduqiw==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.7.tgz",
+      "integrity": "sha512-RtoNnstBwy5VloNCvmvYNApkTmuCe4sNcoYWpmY7C1+bPR+6SOo8im1G6/FpNem8AR5fcZCmXHWQ+EUmRWJyuA==",
       "cpu": [
         "arm64"
       ],
@@ -3398,9 +3509,9 @@
       }
     },
     "node_modules/@swc/core-win32-ia32-msvc": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.6.tgz",
-      "integrity": "sha512-Ju5z65Nda8oYjt2Z4CGbuBLxM+98TcewLogutI69rBo5S70xunadp4ANIHcr9fZlTu/IX9mxZmUpOaHtb+/TfA==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.7.tgz",
+      "integrity": "sha512-Xm0TfvcmmspvQg1s4+USL3x8D+YPAfX2JHygvxAnCJ0EHun8cm2zvfNBcsTlnwYb0ybFWXXY129aq1wgFC9TpQ==",
       "cpu": [
         "ia32"
       ],
@@ -3414,9 +3525,9 @@
       }
     },
     "node_modules/@swc/core-win32-x64-msvc": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.6.tgz",
-      "integrity": "sha512-pkqJsdrgxyFYJA+g9a3zbl+AoxYoBtv+Rji1Fw4+Sq7CsSMWboayWNN5fKRiyi3u3nG8kxqyGi51PsKy2G4Vpg==",
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.7.tgz",
+      "integrity": "sha512-tp43WfJLCsKLQKBmjmY/0vv1slVywR5Q4qKjF5OIY8QijaEW7/8VwPyUyVoJZEnDgv9jKtUTG5PzqtIYPZGnyg==",
       "cpu": [
         "x64"
       ],
@@ -3436,9 +3547,9 @@
       "dev": true
     },
     "node_modules/@swc/types": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.6.tgz",
-      "integrity": "sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==",
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.7.tgz",
+      "integrity": "sha512-scHWahbHF0eyj3JsxG9CFJgFdFNaVQCNAimBlT6PzS3n/HptxqREjsm4OH6AN3lYcffZYSPxXW8ua2BEHp0lJQ==",
       "dev": true,
       "dependencies": {
         "@swc/counter": "^0.1.3"
@@ -4230,9 +4341,9 @@
       }
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.1.tgz",
-      "integrity": "sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==",
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
+      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
       "dev": true
     },
     "node_modules/@types/mathjax": {
@@ -4318,12 +4429,12 @@
       "dev": true
     },
     "node_modules/@vitejs/plugin-react-swc": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.6.0.tgz",
-      "integrity": "sha512-XFRbsGgpGxGzEV5i5+vRiro1bwcIaZDIdBRP16qwm+jP68ue/S8FJTBEgOeojtVDYrbSua3XFp71kC8VJE6v+g==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react-swc/-/plugin-react-swc-3.7.0.tgz",
+      "integrity": "sha512-yrknSb3Dci6svCd/qhHqhFPDSw0QtjumcqdKMoNNzmOl5lMXTTiqzjWtG4Qask2HdvvzaNgSunbQGet8/GrKdA==",
       "dev": true,
       "dependencies": {
-        "@swc/core": "^1.3.107"
+        "@swc/core": "^1.5.7"
       },
       "peerDependencies": {
         "vite": "^4 || ^5"
@@ -4342,9 +4453,9 @@
       "optional": true
     },
     "node_modules/ace-builds": {
-      "version": "1.33.2",
-      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.33.2.tgz",
-      "integrity": "sha512-uDqCe+XDIdnADaDrA8o+x+qAfbM6uqyDQ43QcE6qC7zBPTvQSMOSPcXW+HvjZhEc2YbVYSaxXJX1qQKPgYqi5w=="
+      "version": "1.34.0",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.34.0.tgz",
+      "integrity": "sha512-ZQqoV76wl4guDE5zvEnxCDrvy9gzLAwu7eD4ikYj/Gdlb4+qRLbb+aOFVnweZZRsHh089V0WVaw2NMNuiiEdTw=="
     },
     "node_modules/acorn": {
       "version": "8.11.3",
@@ -4384,16 +4495,16 @@
       }
     },
     "node_modules/ag-grid-community": {
-      "version": "31.3.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.1.tgz",
-      "integrity": "sha512-kKnNxY8UaVoF0aUSdtzK7oGr48Wj+VrdDY5l2p9+HdF0cAo/jBEasuUYR85QbkumNyilI6UbFpO6IyCrjNQ6Iw=="
+      "version": "31.3.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.3.2.tgz",
+      "integrity": "sha512-GxqFRD0OcjaVRE1gwLgoP0oERNPH8Lk8wKJ1txulsxysEQ5dZWHhiIoXXSiHjvOCVMkK/F5qzY6HNrn6VeDMTQ=="
     },
     "node_modules/ag-grid-react": {
-      "version": "31.3.1",
-      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.1.tgz",
-      "integrity": "sha512-MP5PhFeRhe1gWNx866Sr1C+IrJcrJ0yj8pM/ls+Be/GNmSyIcmGb0Gwbl19bOSdfL5btTkNmGY/RbwnIO4GoMQ==",
+      "version": "31.3.2",
+      "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.3.2.tgz",
+      "integrity": "sha512-SFHN05bsXp901rIT00Fa6iQLCtyavoJiKaXEDUtAU5LMu+GTkjs/FPQBQ8754omgdDFr4NsS3Ri6QbqBne3rug==",
       "dependencies": {
-        "ag-grid-community": "31.3.1",
+        "ag-grid-community": "31.3.2",
         "prop-types": "^15.8.1"
       },
       "peerDependencies": {
@@ -4508,6 +4619,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
       "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "deprecated": "This package is no longer supported.",
       "optional": true,
       "dependencies": {
         "delegates": "^1.0.0",
@@ -4621,9 +4733,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -4810,11 +4922,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -4963,9 +5075,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001618",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz",
-      "integrity": "sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==",
+      "version": "1.0.30001621",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz",
+      "integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5118,6 +5230,24 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-high": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cli-high/-/cli-high-0.4.1.tgz",
+      "integrity": "sha512-fPbkILfCVG6mfxbsJbJZQsKE5JmfgJNlfBxap52XHXjLwPDhs/OMFVFrNR7bqiavZt2r5A80+wiRHzJyzWqwEQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@clack/prompts": "^0.7.0",
+        "sugar-high": "^0.6.1",
+        "xycolors": "^0.1.1",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "cli-high": "bin/index.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/xinyao27"
+      }
+    },
     "node_modules/cli-spinners": {
       "version": "2.9.2",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
@@ -5134,6 +5264,19 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/clone": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
@@ -5787,9 +5930,9 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.3.tgz",
-      "integrity": "sha512-5sOWYSNPaxz6o2MUPvtyxTTqR4D3L77pr5rUQoWgD5ROQtVIZQgJkXbo1DLlK3vj11YGw5+LnF4SYti4gZmwng=="
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.4.tgz",
+      "integrity": "sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww=="
     },
     "node_modules/dot-case": {
       "version": "3.0.4",
@@ -5817,9 +5960,9 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.767",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.767.tgz",
-      "integrity": "sha512-nzzHfmQqBss7CE3apQHkHjXW77+8w3ubGCIoEijKCJebPufREaFETgGXWTkh32t259F3Kcq+R8MZdFdOJROgYw=="
+      "version": "1.4.778",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.778.tgz",
+      "integrity": "sha512-C6q/xcUJf/2yODRxAVCfIk4j3y3LMsD0ehiE2RQNV2cxc8XU62gR6vvYh3+etSUzlgTfil+qDHI1vubpdf0TOA=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -6554,6 +6697,11 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fetch-retry": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-6.0.0.tgz",
+      "integrity": "sha512-BUFj1aMubgib37I3v4q78fYo63Po7t4HUPTpQ6/QE6yK6cIQrP+W43FYToeTEyg5m2Y7eFUtijUuAv/PDlWuag=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -6618,9 +6766,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6779,9 +6927,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.0.tgz",
-      "integrity": "sha512-LRfLVPEwtO9IXJCAsWvtj3XZxrdZDcTxNNkZEq30aQ8p7/wimfUkDy67TDWdtzPiyKDkqOHDhaQC6XVrQ4Fh7A==",
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.6.tgz",
+      "integrity": "sha512-XUrjjBt57e5YoHQtjwc3eNchFBuHvIgN/cS8SC4oIaAn2J/0+bLanUxXizidJKZVeHJam/JrmMnPRjYMglVn5g==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -6885,6 +7033,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
       "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "deprecated": "This package is no longer supported.",
       "optional": true,
       "dependencies": {
         "aproba": "^1.0.3 || ^2.0.0",
@@ -6909,6 +7058,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -7885,9 +8042,9 @@
       }
     },
     "node_modules/jackspeak": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
-      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz",
+      "integrity": "sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==",
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -9309,11 +9466,11 @@
       ]
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -9321,12 +9478,13 @@
       }
     },
     "node_modules/million": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/million/-/million-3.0.6.tgz",
-      "integrity": "sha512-OLjRVASGOZdyZw2ctBSSOu5kb9PaxafqkueqVvw0iQtUUnTLVRk1EmtqcNAtJWCIm8wn+WGRpDbnp+5Hi8//Kg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/million/-/million-3.1.1.tgz",
+      "integrity": "sha512-vmI3lyA3IN4QKiB0/M3uDef3lZZvgVUokWtLkc5NvxEnykY+TdSR6xatMMNDJmzMHTneayIOpc/eQu4d9Z/r2w==",
       "dependencies": {
         "@babel/core": "^7.23.7",
         "@babel/types": "^7.23.6",
+        "@million/install": "^0.0.3",
         "@rollup/pluginutils": "^5.1.0",
         "kleur": "^4.1.5",
         "undici": "^6.3.0",
@@ -9650,6 +9808,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
       "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "deprecated": "This package is no longer supported.",
       "optional": true,
       "dependencies": {
         "are-we-there-yet": "^2.0.0",
@@ -10268,9 +10427,9 @@
       }
     },
     "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -10810,6 +10969,21 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz",
+      "integrity": "sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
@@ -11256,6 +11430,14 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -12130,12 +12312,12 @@
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "10.3.15",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.15.tgz",
-      "integrity": "sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==",
+      "version": "10.3.16",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.16.tgz",
+      "integrity": "sha512-JDKXl1DiuuHJ6fVS2FXjownaavciiHNUU4mOvV/B793RLh05vZL1rcPnCSaOgv1hDT6RDlY7AB7ZUvFYAtPgAw==",
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.6",
+        "jackspeak": "^3.1.2",
         "minimatch": "^9.0.1",
         "minipass": "^7.0.4",
         "path-scurry": "^1.11.0"
@@ -12158,6 +12340,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/sugar-high": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/sugar-high/-/sugar-high-0.6.1.tgz",
+      "integrity": "sha512-kg1qMW7WwJcueXIlHkChL/p2EWY3gf8rQmP6n5nUq2TWVqatqDTMLvViS9WgAjgyTKH5/3/b8sRwWPOOAo1zMA=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12253,9 +12440,9 @@
       }
     },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.0.16",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
-      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -12520,9 +12707,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.16.1",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.16.1.tgz",
-      "integrity": "sha512-NeNiTT7ixpeiL1qOIU/xTVpHpVP0svmI6PwoCKaMGaI5AsHOaRdwqU/f7Fi9eyU4u03nd5U/BC8wmRMnS9nqoA==",
+      "version": "6.18.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.18.1.tgz",
+      "integrity": "sha512-/0BWqR8rJNRysS5lqVmfc7eeOErcOP4tZpATVjJOojjHZ71gSYVAtFhEmadcIjwMIUehh5NFyKGsXCnXIajtbA==",
       "engines": {
         "node": ">=18.17"
       }
@@ -13462,16 +13649,16 @@
       }
     },
     "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
@@ -13524,62 +13711,35 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=8"
       },
       "funding": {
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi/node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
-    "node_modules/wrap-ansi/node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+    "node_modules/wrap-ansi/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
+        "color-name": "~1.1.4"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=7.0.0"
       }
     },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
+    "node_modules/wrap-ansi/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
@@ -13636,6 +13796,23 @@
         "node": ">=0.4"
       }
     },
+    "node_modules/xycolors": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/xycolors/-/xycolors-0.1.1.tgz",
+      "integrity": "sha512-BbRKWpz/87nNH4lXp6TbBFUT0QipzmJI7ksQpSpBb3ny8mGJgkiKk36bIr8VqfyTEhasEBsfbp/Cum37fIHnjA==",
+      "hasInstallScript": true,
+      "funding": {
+        "url": "https://github.com/sponsors/xinyao27"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -13652,6 +13829,31 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

src/frontend/package.json

@@ -1,134 +1,137 @@
 {
-    "name": "langflow",
-    "version": "0.1.2",
-    "private": true,
-    "dependencies": {
-        "@headlessui/react": "^1.7.17",
-        "@million/lint": "^0.0.73",
-        "@radix-ui/react-accordion": "^1.1.2",
-        "@radix-ui/react-checkbox": "^1.0.4",
-        "@radix-ui/react-dialog": "^1.0.4",
-        "@radix-ui/react-dropdown-menu": "^2.0.5",
-        "@radix-ui/react-form": "^0.0.3",
-        "@radix-ui/react-icons": "^1.3.0",
-        "@radix-ui/react-label": "^2.0.2",
-        "@radix-ui/react-menubar": "^1.0.3",
-        "@radix-ui/react-popover": "^1.0.6",
-        "@radix-ui/react-progress": "^1.0.3",
-        "@radix-ui/react-select": "^2.0.0",
-        "@radix-ui/react-separator": "^1.0.3",
-        "@radix-ui/react-slot": "^1.0.2",
-        "@radix-ui/react-switch": "^1.0.3",
-        "@radix-ui/react-tabs": "^1.0.4",
-        "@radix-ui/react-tooltip": "^1.0.6",
-        "@tabler/icons-react": "^2.32.0",
-        "@tailwindcss/forms": "^0.5.6",
-        "@tailwindcss/line-clamp": "^0.4.4",
-        "@types/axios": "^0.14.0",
-        "ace-builds": "^1.24.1",
-        "ag-grid-community": "^31.2.1",
-        "ag-grid-react": "^31.2.1",
-        "ansi-to-html": "^0.7.2",
-        "axios": "^1.5.0",
-        "base64-js": "^1.5.1",
-        "class-variance-authority": "^0.6.1",
-        "clsx": "^1.2.1",
-        "cmdk": "^1.0.0",
-        "dompurify": "^3.0.5",
-        "dotenv": "^16.4.5",
-        "esbuild": "^0.17.19",
-        "file-saver": "^2.0.5",
-        "framer-motion": "^11.0.6",
-        "lodash": "^4.17.21",
-        "lucide-react": "^0.331.0",
-        "million": "^3.0.6",
-        "moment": "^2.29.4",
-        "openseadragon": "^4.1.1",
-        "playwright": "^1.42.0",
-        "react": "^18.2.21",
-        "react-ace": "^10.1.0",
-        "react-cookie": "^4.1.1",
-        "react-dom": "^18.2.21",
-        "react-error-boundary": "^4.0.11",
-        "react-icons": "^5.0.1",
-        "react-laag": "^2.0.5",
-        "react-markdown": "^8.0.7",
-        "react-pdf": "^7.7.1",
-        "react-router-dom": "^6.15.0",
-        "react-syntax-highlighter": "^15.5.0",
-        "react18-json-view": "^0.2.3",
-        "reactflow": "^11.9.2",
-        "rehype-mathjax": "^4.0.3",
-        "remark-gfm": "^3.0.1",
-        "remark-math": "^5.1.1",
-        "shadcn-ui": "^0.2.3",
-        "short-unique-id": "^4.4.4",
-        "tailwind-merge": "^1.14.0",
-        "tailwindcss-animate": "^1.0.7",
-        "uuid": "^9.0.0",
-        "vite-plugin-svgr": "^3.2.0",
-        "web-vitals": "^2.1.4",
-        "zustand": "^4.4.7"
-    },
-    "scripts": {
-        "dev:docker": "vite --host 0.0.0.0",
-        "start": "vite",
-        "build": "vite build",
-        "serve": "vite preview",
-        "format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
-        "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
-    },
-    "simple-git-hooks": {
-        "pre-commit": "npx pretty-quick --staged"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "proxy": "http://127.0.0.1:7860",
-    "devDependencies": {
-        "@playwright/test": "^1.43.1",
-        "@swc/cli": "^0.1.62",
-        "@swc/core": "^1.3.80",
-        "@tailwindcss/typography": "^0.5.9",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.2",
-        "@types/lodash": "^4.14.197",
-        "@types/node": "^16.18.46",
-        "@types/react": "^18.2.21",
-        "@types/react-dom": "^18.2.7",
-        "@types/uuid": "^9.0.2",
-        "@vitejs/plugin-react-swc": "^3.3.2",
-        "autoprefixer": "^10.4.15",
-        "daisyui": "^4.0.4",
-        "eslint": "^8.57.0",
-        "eslint-plugin-node": "^11.1.0",
-        "postcss": "^8.4.29",
-        "prettier": "^2.8.8",
-        "prettier-plugin-organize-imports": "^3.2.3",
-        "prettier-plugin-tailwindcss": "^0.3.0",
-        "pretty-quick": "^3.1.3",
-        "simple-git-hooks": "^2.11.1",
-        "tailwindcss": "^3.3.3",
-        "tailwindcss-dotted-background": "^1.1.0",
-        "typescript": "^5.2.2",
-        "ua-parser-js": "^1.0.37",
-        "vite": "^4.5.2"
-    }
+  "name": "langflow",
+  "version": "0.1.2",
+  "private": true,
+  "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@hookform/resolvers": "^3.3.4",
+    "@million/lint": "^0.0.73",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.0.3",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@tabler/icons-react": "^2.32.0",
+    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/line-clamp": "^0.4.4",
+    "@types/axios": "^0.14.0",
+    "ace-builds": "^1.24.1",
+    "ag-grid-community": "^31.2.1",
+    "ag-grid-react": "^31.2.1",
+    "ansi-to-html": "^0.7.2",
+    "axios": "^1.5.0",
+    "base64-js": "^1.5.1",
+    "class-variance-authority": "^0.6.1",
+    "clsx": "^1.2.1",
+    "cmdk": "^1.0.0",
+    "dompurify": "^3.0.5",
+    "dotenv": "^16.4.5",
+    "esbuild": "^0.17.19",
+    "file-saver": "^2.0.5",
+    "framer-motion": "^11.0.6",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.331.0",
+    "million": "^3.0.6",
+    "moment": "^2.29.4",
+    "openseadragon": "^4.1.1",
+    "playwright": "^1.42.0",
+    "react": "^18.2.21",
+    "react-ace": "^10.1.0",
+    "react-cookie": "^4.1.1",
+    "react-dom": "^18.2.21",
+    "react-error-boundary": "^4.0.11",
+    "react-hook-form": "^7.51.4",
+    "react-icons": "^5.0.1",
+    "react-laag": "^2.0.5",
+    "react-markdown": "^8.0.7",
+    "react-pdf": "^7.7.1",
+    "react-router-dom": "^6.15.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "react18-json-view": "^0.2.3",
+    "reactflow": "^11.9.2",
+    "rehype-mathjax": "^4.0.3",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
+    "shadcn-ui": "^0.2.3",
+    "short-unique-id": "^4.4.4",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^9.0.0",
+    "vite-plugin-svgr": "^3.2.0",
+    "web-vitals": "^2.1.4",
+    "zod": "^3.23.7",
+    "zustand": "^4.4.7"
+  },
+  "scripts": {
+    "dev:docker": "vite --host 0.0.0.0",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "format": "npx prettier --write \"{docs,src}/**/*.{js,jsx,ts,tsx,json,md}\" --ignore-path .prettierignore",
+    "type-check": "tsc --noEmit --pretty --project tsconfig.json && vite"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx pretty-quick --staged"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://127.0.0.1:7860",
+  "devDependencies": {
+    "@playwright/test": "^1.44.0",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.80",
+    "@tailwindcss/typography": "^0.5.9",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^16.18.46",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/uuid": "^9.0.2",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "autoprefixer": "^10.4.15",
+    "daisyui": "^4.0.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-node": "^11.1.0",
+    "postcss": "^8.4.29",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "pretty-quick": "^3.1.3",
+    "simple-git-hooks": "^2.11.1",
+    "tailwindcss": "^3.3.3",
+    "tailwindcss-dotted-background": "^1.1.0",
+    "typescript": "^5.2.2",
+    "ua-parser-js": "^1.0.37",
+    "vite": "^4.5.2"
+  }
 }

src/frontend/src/App.css

@@ -11,6 +11,13 @@ body {
   text-align: center;
 }
 
+.label {
+  user-select: none;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none;
+}
+
 .react-flow__node {
   width: auto;
   height: auto;
@@ -76,6 +83,25 @@ body {
   height: 8px !important;
   border-radius: 10px;
 }
+*::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1 !important;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ccc !important;
+  border-radius: 999px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb !important;
+}
 
 .jv-indent::-webkit-scrollbar-track {
   background-color: #f1f1f1 !important;
@@ -111,3 +137,30 @@ body {
 .json-view-flow .json-view {
   background-color: #bbb !important;
 }
+
+.ag-body-horizontal-scroll-viewport,
+.ag-body-vertical-scroll-viewport {
+  cursor: auto;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 999px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}

src/frontend/src/App.tsx

@@ -19,6 +19,7 @@ import Router from "./routes";
 import useAlertStore from "./stores/alertStore";
 import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
+import { useFolderStore } from "./stores/foldersStore";
 import { useGlobalVariablesStore } from "./stores/globalVariablesStore/globalVariables";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
@@ -47,13 +48,13 @@ export default function App() {
   const setGlobalVariables = useGlobalVariablesStore(
     (state) => state.setGlobalVariables,
   );
-  const setUnavailableFields = useGlobalVariablesStore(
-    (state) => state.setUnavaliableFields,
-  );
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
   const navigate = useNavigate();
   const dark = useDarkStore((state) => state.dark);
 
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const loadingFolders = useFolderStore((state) => state.loading);
+
   const [isLoadingHealth, setIsLoadingHealth] = useState(false);
 
   useEffect(() => {
@@ -76,7 +77,7 @@ export default function App() {
           setUserData(user);
           setAutoLogin(true);
           setLoading(false);
-          await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+          fetchAllData();
         }
       })
       .catch(async (error) => {
@@ -84,7 +85,7 @@ export default function App() {
           setAutoLogin(false);
           if (isAuthenticated && !isLoginPage) {
             getUser();
-            await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+            fetchAllData();
           } else {
             setLoading(false);
             useFlowsManagerStore.setState({ isLoading: false });
@@ -100,6 +101,13 @@ export default function App() {
     return () => abortController.abort();
   }, []);
 
+  const fetchAllData = async () => {
+    setTimeout(async () => {
+      await Promise.all([refreshStars(), refreshVersion(), fetchData()]);
+      getFoldersApi();
+    }, 1000);
+  };
+
   const fetchData = async () => {
     return new Promise<void>(async (resolve, reject) => {
       if (isAuthenticated) {
@@ -157,7 +165,7 @@ export default function App() {
     setFetchError(false);
     //This condition is necessary to avoid infinite loop on starter page when the application is not healthy
     if (isLoading === true && window.location.pathname === "/") {
-      navigate("/flows");
+      navigate("/all");
       window.location.reload();
     }
   };
@@ -184,7 +192,7 @@ export default function App() {
             ></FetchErrorComponent>
           }
 
-          {isLoading ? (
+          {isLoading || loadingFolders ? (
             <div className="loading-page-panel">
               <LoadingComponent remSize={50} />
             </div>

src/frontend/src/components/accordionComponent/composite/folderAccordionComponent/index.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import IconComponent from "../../../../components/genericIconComponent";
+import { AccordionComponentType } from "../../../../types/components";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../../ui/custom-accordion";
+
+export default function FolderAccordionComponent({
+  trigger,
+  open = [],
+  keyValue,
+  options,
+}: AccordionComponentType): JSX.Element {
+  const [value, setValue] = useState(
+    open.length === 0 ? "" : getOpenAccordion(),
+  );
+
+  function getOpenAccordion(): string {
+    let value = "";
+    open.forEach((el) => {
+      if (el == trigger) {
+        value = trigger;
+      }
+    });
+
+    return value;
+  }
+
+  function handleClick(): void {
+    value === "" ? setValue(keyValue!) : setValue("");
+  }
+
+  return (
+    <>
+      <Accordion
+        type="single"
+        className="w-full"
+        value={value}
+        onValueChange={setValue}
+      >
+        <AccordionItem value={keyValue!} className="">
+          <AccordionTrigger
+            onClick={() => {
+              handleClick();
+            }}
+            className="px-2"
+          >
+            {trigger}
+          </AccordionTrigger>
+          <AccordionContent>
+            {options!.map((option, index) => (
+              <div
+                key={index}
+                className="flex cursor-pointer px-2 py-1 hover:bg-muted-foreground/10"
+              >
+                <IconComponent
+                  name={option.icon}
+                  className="relative top-[1.5px] mr-2 h-4 w-4"
+                  aria-hidden="true"
+                />
+                <span className="truncate">{option.title}</span>
+              </div>
+            ))}
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+}

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

@@ -130,8 +130,8 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           <InputComponent
             setSelectedOptions={(value) => setFields(value)}
             selectedOptions={fields}
-            password={false}
             options={availableFields()}
+            password={false}
             placeholder="Choose a field for the variable..."
             id={"apply-to-fields"}
           ></InputComponent>

src/frontend/src/components/arrayReaderComponent/index.tsx

@@ -0,0 +1,12 @@
+export default function ArrayReader({ array }: { array: any[] }): JSX.Element {
+  //TODO check array type
+  return (
+    <div>
+      <ul>
+        {array.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/frontend/src/components/cardComponent/components/dragCardComponent/index.tsx

@@ -0,0 +1,39 @@
+import { storeComponent } from "../../../../types/store";
+import { cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import ShadTooltip from "../../../shadTooltipComponent";
+import { Card, CardHeader, CardTitle } from "../../../ui/card";
+
+export default function DragCardComponent({ data }: { data: storeComponent }) {
+  return (
+    <>
+      <Card
+        draggable
+        //TODO check color schema
+        className={cn(
+          "group relative flex flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
+        )}
+      >
+        <div>
+          <CardHeader>
+            <div>
+              <CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
+                <ForwardedIconComponent
+                  className={cn(
+                    "visible flex-shrink-0",
+                    data.is_component
+                      ? "mx-0.5 h-6 w-6 text-component-icon"
+                      : "h-7 w-7 flex-shrink-0 text-flow-icon",
+                  )}
+                  name={data.is_component ? "ToyBrick" : "Group"}
+                />
+
+                <div className="w-full truncate pr-3">{data.name}</div>
+              </CardTitle>
+            </div>
+          </CardHeader>
+        </div>
+      </Card>
+    </>
+  );
+}

src/frontend/src/components/cardComponent/index.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Control } from "react-hook-form";
 import { getComponent, postLikeComponent } from "../../controllers/API";
 import IOModal from "../../modals/IOModal";
 import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
@@ -22,8 +24,11 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import { Checkbox } from "../ui/checkbox";
+import { FormControl, FormField } from "../ui/form";
 import Loading from "../ui/loading";
 import { convertTestName } from "./utils/convert-test-name";
+import DragCardComponent from "./components/dragCardComponent";
 
 export default function CollectionCardComponent({
   data,
@@ -33,6 +38,8 @@ export default function CollectionCardComponent({
   onClick,
   onDelete,
   playground,
+  control,
+  is_component,
 }: {
   data: storeComponent;
   authorized?: boolean;
@@ -41,6 +48,8 @@ export default function CollectionCardComponent({
   button?: JSX.Element;
   playground?: boolean;
   onDelete?: () => void;
+  control?: Control<any, any>;
+  is_component?: boolean;
 }) {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
@@ -70,6 +79,10 @@ export default function CollectionCardComponent({
   );
   const [loadingPlayground, setLoadingPlayground] = useState(false);
 
+  const selectedFlowsComponentsCards = useFlowsManagerStore(
+    (state) => state.selectedFlowsComponentsCards,
+  );
+
   const name = data.is_component ? "Component" : "Flow";
 
   async function getFlowData() {
@@ -83,7 +96,6 @@ export default function CollectionCardComponent({
       return false;
     }
     const { inputs, outputs } = getInputsAndOutputs(flow?.data?.nodes ?? []);
-    console.log(inputs, outputs);
     return inputs.length > 0 || outputs.length > 0;
   }
 
@@ -178,36 +190,59 @@ export default function CollectionCardComponent({
     }
   }
 
+  const isSelectedCard =
+    selectedFlowsComponentsCards?.includes(data?.id) ?? false;
+
+  function onDragStart(event: React.DragEvent<any>) {
+    let image: JSX.Element = <DragCardComponent data={data} />; // <== whatever you want here
+
+    var ghost = document.createElement("div");
+    ghost.style.transform = "translate(-10000px, -10000px)";
+    ghost.style.position = "absolute";
+    document.body.appendChild(ghost);
+    event.dataTransfer.setDragImage(ghost, 0, 0);
+    const root = createRoot(ghost);
+    root.render(image);
+    const flow = getFlowById(data.id);
+    if (flow) {
+      event.dataTransfer.setData("flow", JSON.stringify(data));
+    }
+  }
+
   return (
     <>
       <Card
+        onDragStart={onDragStart}
+        draggable
         data-testid={`card-${convertTestName(data.name)}`}
         //TODO check color schema
         className={cn(
           "group relative flex min-h-[11rem] flex-col justify-between overflow-hidden transition-all hover:bg-muted/50 hover:shadow-md hover:dark:bg-[#ffffff10]",
           disabled ? "pointer-events-none opacity-50" : "",
           onClick ? "cursor-pointer" : "",
+          isSelectedCard ? "border border-selected" : "",
         )}
         onClick={onClick}
       >
         <div>
           <CardHeader>
             <div>
-              <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
+              <CardTitle className="flex w-full items-start justify-between gap-3 text-xl">
                 <IconComponent
                   className={cn(
-                    "flex-shrink-0",
+                    "visible flex-shrink-0",
                     data.is_component
                       ? "mx-0.5 h-6 w-6 text-component-icon"
                       : "h-7 w-7 flex-shrink-0 text-flow-icon",
                   )}
                   name={data.is_component ? "ToyBrick" : "Group"}
                 />
+
                 <ShadTooltip content={data.name}>
-                  <div className="w-full truncate">{data.name}</div>
+                  <div className="w-full truncate pr-3">{data.name}</div>
                 </ShadTooltip>
                 {data?.metadata !== undefined && (
-                  <div className="flex gap-3">
+                  <div className="flex items-center gap-3">
                     {data.private && (
                       <ShadTooltip content="Private">
                         <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -250,19 +285,29 @@ export default function CollectionCardComponent({
                   </div>
                 )}
 
-                {onDelete && data?.metadata === undefined && (
-                  <button
-                    className="z-50"
+                {control && (
+                  <div
+                    className="flex"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setOpenDelete(true);
                     }}
                   >
-                    <IconComponent
-                      name="Trash2"
-                      className="h-5 w-5 text-primary opacity-0 transition-all hover:text-destructive group-hover:opacity-100"
+                    <FormField
+                      control={control}
+                      name={`${data.id}`}
+                      defaultValue={false}
+                      render={({ field }) => (
+                        <FormControl>
+                          <Checkbox
+                            aria-label="checkbox-component"
+                            checked={field.value}
+                            onCheckedChange={field.onChange}
+                            className="h-5 w-5 border border-ring data-[state=checked]:border-selected data-[state=checked]:bg-selected"
+                          />
+                        </FormControl>
+                      )}
                     />
-                  </button>
+                  </div>
                 )}
               </CardTitle>
             </div>
@@ -369,11 +414,7 @@ export default function CollectionCardComponent({
                         authorized ? "Delete" : "Please review your API key."
                       }
                     >
-                      <DeleteConfirmationModal
-                        onConfirm={() => {
-                          onDelete();
-                        }}
-                      >
+                      <DeleteConfirmationModal onConfirm={onDelete}>
                         <Button
                           variant="ghost"
                           size="icon"
@@ -541,6 +582,7 @@ export default function CollectionCardComponent({
           onConfirm={() => {
             if (onDelete) onDelete();
           }}
+          description={` ${is_component ? "component" : "flow"}`}
         >
           <></>
         </DeleteConfirmationModal>

src/frontend/src/components/cardsWrapComponent/index.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
+import { cn } from "../../utils/utils";
 
 export default function CardsWrapComponent({
   onFileDrop,
@@ -11,6 +12,23 @@ export default function CardsWrapComponent({
   dragMessage?: string;
 }) {
   const [isDragging, setIsDragging] = useState(false);
+  useEffect(() => {
+    // Function to handle visibility change
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "visible") {
+        // Reset hover state or perform any necessary actions when the tab becomes visible again
+        setIsDragging(false);
+      }
+    };
+
+    // Add event listener for visibility change
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
 
   const dragOver = (e) => {
     e.preventDefault();
@@ -43,12 +61,12 @@ export default function CardsWrapComponent({
       onDragEnter={dragEnter}
       onDragLeave={dragLeave}
       onDrop={onDrop}
-      className={
-        "h-full w-full " +
-        (isDragging
-          ? "mb-24 flex flex-col items-center justify-center gap-4 text-2xl font-light"
-          : "")
-      }
+      className={cn(
+        "h-full w-full",
+        isDragging
+          ? "mb-36 flex flex-col items-center justify-center gap-4 text-2xl font-light"
+          : "",
+      )}
     >
       {isDragging ? (
         <>

src/frontend/src/components/chatComponent/index.tsx

@@ -15,8 +15,8 @@ export default function FlowToolbar(): JSX.Element {
   const hasIO = useFlowStore((state) => state.hasIO);
   const hasStore = useStoreStore((state) => state.hasStore);
   const validApiKey = useStoreStore((state) => state.validApiKey);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/frontend/src/components/csvOutputComponent/index.tsx

@@ -1,7 +1,6 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
-import { AgGridReact } from "ag-grid-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   CSVError,
   CSVNoDataError,
@@ -11,6 +10,7 @@ import { useDarkStore } from "../../stores/darkStore";
 import { FlowPoolObjectType } from "../../types/chat";
 import { NodeType } from "../../types/flow";
 import ForwardedIconComponent from "../genericIconComponent";
+import TableComponent from "../tableComponent";
 import Loading from "../ui/loading";
 import { convertCSVToData } from "./helpers/convert-data-function";
 
@@ -54,8 +54,6 @@ function CsvOutputComponent({
   const [colDefs, setColDefs] = useState([]);
 
   const [status, setStatus] = useState("loading");
-  var currentRowHeight: number;
-  var minRowHeight = 25;
   const defaultColDef = useMemo(() => {
     return {
       width: 200,
@@ -82,48 +80,6 @@ function CsvOutputComponent({
     }
   }, [separator]);
 
-  const getRowHeight = useCallback(() => {
-    return currentRowHeight;
-  }, []);
-
-  const onGridReady = useCallback((params: any) => {
-    minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
-    currentRowHeight = minRowHeight;
-  }, []);
-
-  const updateRowHeight = (params: { api: any }) => {
-    const bodyViewport = document.querySelector(".ag-body-viewport");
-    if (!bodyViewport) {
-      return;
-    }
-    var gridHeight = bodyViewport.clientHeight;
-    var renderedRowCount = params.api.getDisplayedRowCount();
-
-    if (renderedRowCount * minRowHeight >= gridHeight) {
-      if (currentRowHeight !== minRowHeight) {
-        currentRowHeight = minRowHeight;
-        params.api.resetRowHeights();
-      }
-    } else {
-      currentRowHeight = Math.floor(gridHeight / renderedRowCount);
-      params.api.resetRowHeights();
-    }
-  };
-
-  const onFirstDataRendered = useCallback(
-    (params: any) => {
-      updateRowHeight(params);
-    },
-    [updateRowHeight],
-  );
-
-  const onGridSizeChanged = useCallback(
-    (params: any) => {
-      updateRowHeight(params);
-    },
-    [updateRowHeight],
-  );
-
   return (
     <div className=" h-full rounded-md border bg-muted">
       {status === "nodata" && (
@@ -158,14 +114,10 @@ function CsvOutputComponent({
           className={`${dark ? "ag-theme-balham-dark" : "ag-theme-balham"}`}
           style={{ height: "100%", width: "100%" }}
         >
-          <AgGridReact
+          <TableComponent
             rowData={rowData}
             columnDefs={colDefs}
             defaultColDef={defaultColDef}
-            getRowHeight={getRowHeight}
-            onGridReady={onGridReady}
-            onFirstDataRendered={onFirstDataRendered}
-            onGridSizeChanged={onGridSizeChanged}
             scrollbarWidth={8}
             overlayNoRowsTemplate="No data available"
           />

src/frontend/src/components/dateReaderComponent/index.tsx

@@ -0,0 +1,21 @@
+export default function DateReader({
+  date: dateString,
+}: {
+  date: string;
+}): JSX.Element {
+  const date = new Date(dateString);
+
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed in JavaScript
+  const day = String(date.getDate()).padStart(2, "0");
+
+  const hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+
+  const ampm = hours >= 12 ? "PM" : "AM";
+  const hours12 = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours; // Convert to 12-hour format
+
+  const formattedDate = `${year}-${month}-${day} ${hours12}:${minutes} ${ampm}`;
+
+  return <span>{formattedDate}</span>;
+}

src/frontend/src/components/genericIconComponent/index.tsx

@@ -7,7 +7,7 @@ import Loading from "../ui/loading";
 
 import { useEffect, useState } from "react";
 
-const ForwardedIconComponent = memo(
+export const ForwardedIconComponent = memo(
   forwardRef(
     (
       {
@@ -18,7 +18,7 @@ const ForwardedIconComponent = memo(
         strokeWidth,
         id = "",
       }: IconComponentProps,
-      ref
+      ref,
     ) => {
       const [showFallback, setShowFallback] = useState(false);
 
@@ -65,8 +65,8 @@ const ForwardedIconComponent = memo(
           />
         </Suspense>
       );
-    }
-  )
+    },
+  ),
 );
 
 export default ForwardedIconComponent;

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -12,6 +12,7 @@ import { Node } from "reactflow";
 import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
 import { SAVED_HOVER } from "../../../../constants/constants";
 import ExportModal from "../../../../modals/exportModal";
+import FlowLogsModal from "../../../../modals/flowLogsModal";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
@@ -34,6 +35,7 @@ export const MenuBar = ({
   const redo = useFlowsManagerStore((state) => state.redo);
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
+  const [openLogs, setOpenLogs] = useState(false);
   const nodes = useFlowStore((state) => state.nodes);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
   const navigate = useNavigate();
@@ -123,6 +125,18 @@ export const MenuBar = ({
               />
               Settings
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                setOpenLogs(true);
+              }}
+              className="cursor-pointer"
+            >
+              <IconComponent
+                name="ScrollText"
+                className="header-menu-options "
+              />
+              Logs
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="cursor-pointer"
               onClick={() => {
@@ -132,7 +146,7 @@ export const MenuBar = ({
                       title: UPLOAD_ERROR_ALERT,
                       list: [error],
                     });
-                  }
+                  },
                 );
               }}
             >
@@ -194,6 +208,7 @@ export const MenuBar = ({
           open={openSettings}
           setOpen={setOpenSettings}
         ></FlowSettingsModal>
+        <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
       {(currentFlow.updated_at || saveLoading) && (
         <ShadTooltip
@@ -213,7 +228,7 @@ export const MenuBar = ({
               name={isBuilding || saveLoading ? "Loader2" : "CheckCircle2"}
               className={cn(
                 "h-4 w-4",
-                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle"
+                isBuilding || saveLoading ? "animate-spin" : "animate-wiggle",
               )}
             />
             {printByBuildStatus()}

src/frontend/src/components/headerComponent/index.tsx

@@ -59,7 +59,7 @@ export default function Header(): JSX.Element {
           <Button
             className="gap-2"
             variant={
-              location.pathname === "/flows" ||
+              location.pathname === "/all" ||
               location.pathname === "/components"
                 ? "primary"
                 : "secondary"
@@ -73,18 +73,7 @@ export default function Header(): JSX.Element {
             <div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
-        {/* <Link to="/community">
-          <Button
-            className="gap-2"
-            variant={
-              location.pathname === "/community" ? "primary" : "secondary"
-            }
-            size="sm"
-          >
-            <IconComponent name="Users2" className="h-4 w-4" />
-            <div className="flex-1">Community Examples</div>
-          </Button>
-        </Link> */}
+
         {hasStore && (
           <Link to="/store">
             <Button

src/frontend/src/components/horizontalScrollFadeComponent/index.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function HorizontalScrollFadeComponent({
+  children,
+  isFolder = true,
+}) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const fadeContainerRef = useRef<HTMLDivElement>(null);
+  const [divWidth, setDivWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (scrollContainerRef.current) {
+        setDivWidth(scrollContainerRef.current.clientWidth);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // call the function at start to get the initial width
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!scrollContainerRef.current || !fadeContainerRef.current) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } =
+        scrollContainerRef.current;
+      const atStart = scrollLeft === 0;
+      const atEnd = scrollLeft === scrollWidth - clientWidth;
+      const isScrollable = scrollWidth > clientWidth;
+
+      fadeContainerRef.current.classList.toggle(
+        "fade-left",
+        isScrollable && !atStart,
+      );
+      fadeContainerRef.current.classList.toggle(
+        "fade-right",
+        isScrollable && !atEnd,
+      );
+    };
+
+    const scrollContainer = scrollContainerRef.current;
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", handleScroll);
+      // Delay the initial scroll event dispatch to ensure correct calculation
+      scrollContainer.dispatchEvent(new Event("scroll"));
+      return () => scrollContainer.removeEventListener("scroll", handleScroll);
+    }
+  }, [divWidth, children]); // Depend on divWidth
+
+  return isFolder ? (
+    <div className="hidden w-full flex-col gap-2 lg:flex">{children}</div>
+  ) : (
+    <div ref={fadeContainerRef} className="fade-container flex">
+      <div ref={scrollContainerRef} className="scroll-container flex gap-2">
+        {children}
+      </div>
+    </div>
+  );
+}

src/frontend/src/components/inputComponent/components/popover/index.tsx

@@ -0,0 +1,192 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import useAlertStore from "../../../../stores/alertStore";
+import { classNames, cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ui/command";
+import { Input } from "../../../ui/input";
+import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+const CustomInputPopover = ({
+  id,
+  refInput,
+  onInputLostFocus,
+  selectedOption,
+  setSelectedOption,
+  selectedOptions,
+  setSelectedOptions,
+  value,
+  autoFocus,
+  disabled,
+  setShowOptions,
+  required,
+  className,
+  password,
+  pwdVisible,
+  editNode,
+  placeholder,
+  onChange,
+  blurOnEnter,
+  options,
+  optionsPlaceholder,
+  optionButton,
+  optionsButton,
+  handleKeyDown,
+  showOptions,
+}) => {
+  const setErrorData = useAlertStore.getState().setErrorData;
+
+  const handleInputChange = (e) => {
+    if (password) {
+      if (
+        e.target.value.split("").every((char) => char === "•") &&
+        e.target.value !== ""
+      ) {
+        setErrorData({
+          title: `Invalid characters: ${e.target.value}`,
+          list: [
+            "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
+          ],
+        });
+      }
+    }
+    onChange && onChange(e.target.value);
+  };
+  return (
+    <Popover modal open={showOptions} onOpenChange={setShowOptions}>
+      <PopoverAnchor>
+        <Input
+          id={id}
+          ref={refInput}
+          type="text"
+          onBlur={onInputLostFocus}
+          value={
+            (selectedOption !== "" || !onChange) && setSelectedOption
+              ? selectedOption
+              : (selectedOptions?.length !== 0 || !onChange) &&
+                  setSelectedOptions
+                ? selectedOptions?.join(", ")
+                : value
+          }
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onClick={() => {
+            (((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)) &&
+              setShowOptions(true);
+          }}
+          required={required}
+          className={classNames(
+            password &&
+              (!setSelectedOption || selectedOption === "") &&
+              !pwdVisible &&
+              value !== ""
+              ? " text-clip password "
+              : "",
+            editNode ? " input-edit-node " : "",
+            password && (setSelectedOption || setSelectedOptions)
+              ? "pr-[62.9px]"
+              : "",
+            (!password && (setSelectedOption || setSelectedOptions)) ||
+              (password && !(setSelectedOption || setSelectedOptions))
+              ? "pr-8"
+              : "",
+            className!,
+          )}
+          placeholder={password && editNode ? "Key" : placeholder}
+          onChange={handleInputChange}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
+          }}
+          data-testid={editNode ? id + "-edit" : id}
+        />
+      </PopoverAnchor>
+      <PopoverContentWithoutPortal
+        className="nocopy nopan nodelete nodrag noundo p-0"
+        style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
+        side="bottom"
+        align="center"
+      >
+        <Command
+          filter={(value, search) => {
+            if (
+              value.toLowerCase().includes(search.toLowerCase()) ||
+              value.includes("doNotFilter-")
+            )
+              return 1;
+            return 0;
+          }}
+        >
+          <CommandInput placeholder={optionsPlaceholder} />
+          <CommandList>
+            <CommandGroup defaultChecked={false}>
+              {options.map((option, id) => (
+                <CommandItem
+                  className="group"
+                  key={option + id}
+                  value={option}
+                  onSelect={(currentValue) => {
+                    setSelectedOption &&
+                      setSelectedOption(
+                        currentValue === selectedOption ? "" : currentValue,
+                      );
+                    setSelectedOptions &&
+                      setSelectedOptions(
+                        selectedOptions?.includes(currentValue)
+                          ? selectedOptions.filter(
+                              (item) => item !== currentValue,
+                            )
+                          : [...selectedOptions, currentValue],
+                      );
+                    !setSelectedOptions && setShowOptions(false);
+                  }}
+                >
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="flex items-center">
+                      <div
+                        className={cn(
+                          "relative mr-2 h-4 w-4",
+                          selectedOption === option ||
+                            selectedOptions?.includes(option)
+                            ? "opacity-100"
+                            : "opacity-0",
+                        )}
+                      >
+                        <div className="absolute opacity-100 transition-all group-hover:opacity-0">
+                          <ForwardedIconComponent
+                            name="Check"
+                            className="mr-2 h-4 w-4 text-primary"
+                            aria-hidden="true"
+                          />
+                        </div>
+                        <div className="absolute opacity-0 transition-all group-hover:opacity-100">
+                          <ForwardedIconComponent
+                            name="X"
+                            className="mr-2 h-4 w-4 text-status-red"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      </div>
+
+                      {option}
+                    </div>
+                    {optionButton && optionButton(option)}
+                  </div>
+                </CommandItem>
+              ))}
+              {optionsButton && optionsButton}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContentWithoutPortal>
+    </Popover>
+  );
+};
+
+export default CustomInputPopover;

src/frontend/src/components/inputComponent/components/popoverObject/index.tsx

@@ -0,0 +1,167 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
+import { classNames, cn } from "../../../../utils/utils";
+import ForwardedIconComponent from "../../../genericIconComponent";
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ui/command";
+import { Input } from "../../../ui/input";
+import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+const CustomInputPopoverObject = ({
+  id,
+  refInput,
+  onInputLostFocus,
+  selectedOption,
+  setSelectedOption,
+  selectedOptions,
+  setSelectedOptions,
+  value,
+  autoFocus,
+  disabled,
+  setShowOptions,
+  required,
+  className,
+  placeholder,
+  onChange,
+  blurOnEnter,
+  options,
+  optionsPlaceholder,
+  optionButton,
+  optionsButton,
+  handleKeyDown,
+  showOptions,
+}) => {
+  const handleInputChange = (e) => {
+    onChange && onChange(e.target.value);
+  };
+
+  return (
+    <Popover modal open={showOptions} onOpenChange={setShowOptions}>
+      <PopoverAnchor>
+        <Input
+          id={id}
+          ref={refInput}
+          type="text"
+          onBlur={onInputLostFocus}
+          value={
+            (selectedOption !== "" || !onChange) && setSelectedOption
+              ? options.find((option) => option.id === selectedOption)?.name ||
+                ""
+              : (selectedOptions?.length !== 0 || !onChange) &&
+                  setSelectedOptions
+                ? selectedOptions
+                    .map(
+                      (optionId) =>
+                        options.find((option) => option.id === optionId)?.name,
+                    )
+                    .join(", ")
+                : value
+          }
+          autoFocus={autoFocus}
+          disabled={disabled}
+          onClick={() => {
+            (((selectedOption !== "" || !onChange) && setSelectedOption) ||
+              ((selectedOptions?.length !== 0 || !onChange) &&
+                setSelectedOptions)) &&
+              setShowOptions(true);
+          }}
+          required={required}
+          className={classNames(className!)}
+          placeholder={placeholder}
+          onChange={handleInputChange}
+          onKeyDown={(e) => {
+            handleKeyDown(e);
+            if (blurOnEnter && e.key === "Enter") refInput.current?.blur();
+          }}
+          data-testid={id}
+        />
+      </PopoverAnchor>
+      <PopoverContentWithoutPortal
+        className="nocopy nopan nodelete nodrag noundo p-0"
+        style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
+        side="bottom"
+        align="center"
+      >
+        <Command
+          filter={(value, search) => {
+            if (
+              value.toLowerCase().includes(search.toLowerCase()) ||
+              value.includes("doNotFilter-")
+            )
+              return 1;
+            return 0;
+          }}
+        >
+          <CommandInput placeholder={optionsPlaceholder} />
+          <CommandList>
+            <CommandGroup defaultChecked={false}>
+              {options.map((option, index) => (
+                <CommandItem
+                  className="group"
+                  key={option.id}
+                  value={option.id}
+                  onSelect={(currentValue) => {
+                    setSelectedOption &&
+                      setSelectedOption(
+                        currentValue === selectedOption ? "" : currentValue,
+                      );
+                    setSelectedOptions &&
+                      setSelectedOptions(
+                        selectedOptions?.includes(currentValue)
+                          ? selectedOptions.filter(
+                              (item) => item !== currentValue,
+                            )
+                          : [...selectedOptions, currentValue],
+                      );
+                    !setSelectedOptions && setShowOptions(false);
+                  }}
+                >
+                  <div className="group flex w-full items-center justify-between">
+                    <div className="flex items-center">
+                      <div
+                        className={cn(
+                          "relative mr-2 h-4 w-4",
+                          selectedOption === option.id ||
+                            selectedOptions?.includes(option.id)
+                            ? "opacity-100"
+                            : "opacity-0",
+                        )}
+                      >
+                        <div className="absolute opacity-100 transition-all group-hover:opacity-0">
+                          <ForwardedIconComponent
+                            name="Check"
+                            className="mr-2 h-4 w-4 text-primary"
+                            aria-hidden="true"
+                          />
+                        </div>
+                        <div className="absolute opacity-0 transition-all group-hover:opacity-100">
+                          <ForwardedIconComponent
+                            name="X"
+                            className="mr-2 h-4 w-4 text-status-red"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      </div>
+                      <span data-testid={`option-${index}`}>
+                        {option.name}{" "}
+                      </span>
+
+                      {/* Display the name property of the option */}
+                    </div>
+                    {optionButton && optionButton(option)}
+                  </div>
+                </CommandItem>
+              ))}
+              {optionsButton && optionsButton}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContentWithoutPortal>
+    </Popover>
+  );
+};
+
+export default CustomInputPopoverObject;

src/frontend/src/components/inputComponent/index.tsx

@@ -1,20 +1,12 @@
 import * as Form from "@radix-ui/react-form";
-import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useEffect, useRef, useState } from "react";
-import useAlertStore from "../../stores/alertStore";
 import { InputComponentType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
 import { classNames, cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
-import {
-  Command,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/command";
 import { Input } from "../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../ui/popover";
+import CustomInputPopover from "./components/popover";
+import CustomInputPopoverObject from "./components/popoverObject";
 
 export default function InputComponent({
   autoFocus = false,
@@ -39,13 +31,13 @@ export default function InputComponent({
   optionsPlaceholder = "Search options...",
   optionsButton,
   optionButton,
+  objectOptions,
+  isObjectOption = false,
 }: InputComponentType): JSX.Element {
-  const setErrorData = useAlertStore.getState().setErrorData;
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
   const [showOptions, setShowOptions] = useState<boolean>(false);
 
-  // Clear component state
   useEffect(() => {
     if (disabled && value && onChange && value !== "") {
       onChange("", true);
@@ -93,182 +85,61 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <>
-          <Popover modal open={showOptions} onOpenChange={setShowOptions}>
-            <PopoverAnchor>
-              <Input
-                id={id}
-                ref={refInput}
-                type="text"
-                onBlur={onInputLostFocus}
-                value={
-                  (selectedOption !== "" || !onChange) && setSelectedOption
-                    ? selectedOption
-                    : (selectedOptions?.length !== 0 || !onChange) &&
-                        setSelectedOptions
-                      ? selectedOptions?.join(", ")
-                      : value
-                }
-                autoFocus={autoFocus}
-                disabled={disabled}
-                onClick={() => {
-                  (((selectedOption !== "" || !onChange) &&
-                    setSelectedOption) ||
-                    ((selectedOptions?.length !== 0 || !onChange) &&
-                      setSelectedOptions)) &&
-                    setShowOptions(true);
-                }}
-                required={required}
-                className={classNames(
-                  password &&
-                    (!setSelectedOption || selectedOption === "") &&
-                    !pwdVisible &&
-                    value !== ""
-                    ? " text-clip password "
-                    : "",
-                  editNode ? " input-edit-node " : "",
-                  password && (setSelectedOption || setSelectedOptions)
-                    ? "pr-[62.9px]"
-                    : "",
-                  (!password && (setSelectedOption || setSelectedOptions)) ||
-                    (password && !(setSelectedOption || setSelectedOptions))
-                    ? "pr-8"
-                    : "",
-
-                  className!,
-                )}
-                placeholder={password && editNode ? "Key" : placeholder}
-                onChange={(e) => {
-                  // if the user copies a password from another input
-                  // it might come as ••••••••••• it causes errors
-                  // in ascii encoding, so we need to handle it
-                  if (password) {
-                    // check if all chars are •
-                    if (
-                      e.target.value.split("").every((char) => char === "•") &&
-                      e.target.value !== ""
-                    ) {
-                      setErrorData({
-                        title: `Invalid characters: ${e.target.value}`,
-                        list: [
-                          "It seems you are trying to paste a password. Make sure the value is visible before copying from another field.",
-                        ],
-                      });
-                    }
-                  }
-                  onChange && onChange(e.target.value);
-                }}
-                onKeyDown={(e) => {
-                  handleKeyDown(e, value, "");
-                  if (blurOnEnter && e.key === "Enter")
-                    refInput.current?.blur();
-                }}
-                data-testid={editNode ? id + "-edit" : id}
-              />
-            </PopoverAnchor>
-            <PopoverContentWithoutPortal
-              className="nocopy nopan nodelete nodrag noundo p-0"
-              style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
-              side="bottom"
-              avoidCollisions={false}
-              align="center"
-            >
-              <Command
-                filter={(value, search) => {
-                  if (
-                    value.toLowerCase().includes(search.toLowerCase()) ||
-                    value.includes("doNotFilter-")
-                  )
-                    return 1; // ensures items arent filtered
-                  return 0;
-                }}
-              >
-                <CommandInput placeholder={optionsPlaceholder} />
-                <CommandList>
-                  <CommandGroup defaultChecked={false}>
-                    {options.map((option, id) => (
-                      <CommandItem
-                        className="group"
-                        key={option + id}
-                        value={option}
-                        onSelect={(currentValue) => {
-                          setSelectedOption &&
-                            setSelectedOption(
-                              currentValue === selectedOption
-                                ? ""
-                                : currentValue,
-                            );
-                          setSelectedOptions &&
-                            setSelectedOptions(
-                              selectedOptions?.includes(currentValue)
-                                ? selectedOptions.filter(
-                                    (item) => item !== currentValue,
-                                  )
-                                : [...selectedOptions, currentValue],
-                            );
-                          !setSelectedOptions && setShowOptions(false);
-                        }}
-                      >
-                        <div className="group flex w-full items-center justify-between">
-                          <div className="flex items-center">
-                            <div
-                              className={cn(
-                                "relative mr-2 h-4 w-4",
-                                selectedOption === option ||
-                                  selectedOptions?.includes(option)
-                                  ? "opacity-100"
-                                  : "opacity-0",
-                              )}
-                            >
-                              <div className="absolute opacity-100 transition-all group-hover:opacity-0">
-                                <ForwardedIconComponent
-                                  name="Check"
-                                  className="mr-2 h-4 w-4 text-primary"
-                                  aria-hidden="true"
-                                />
-                              </div>
-                              <div className="absolute opacity-0 transition-all group-hover:opacity-100">
-                                <ForwardedIconComponent
-                                  name="X"
-                                  className="mr-2 h-4 w-4 text-status-red"
-                                  aria-hidden="true"
-                                />
-                              </div>
-                            </div>
-
-                            {option}
-                          </div>
-                          {optionButton && optionButton(option)}
-                        </div>
-                      </CommandItem>
-                    ))}
-                    {optionsButton && optionsButton}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContentWithoutPortal>
-          </Popover>
-          <div
-            data-testid={"popover-anchor-" + id}
-            className={cn(
-              "pointer-events-auto absolute inset-y-0 h-full w-full cursor-pointer",
-              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
-                ((selectedOptions?.length !== 0 || !onChange) &&
-                  setSelectedOptions)
-                ? ""
-                : "hidden",
-            )}
-            onClick={
-              ((selectedOption !== "" || !onChange) && setSelectedOption) ||
-              ((selectedOptions?.length !== 0 || !onChange) &&
-                setSelectedOptions)
-                ? (e) => {
-                    setShowOptions((old) => !old);
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
-                : () => {}
-            }
-          ></div>
+          {isObjectOption ? (
+            // Content to render when isObjectOption is true
+            <CustomInputPopoverObject
+              refInput={refInput}
+              handleKeyDown={handleKeyDown}
+              optionButton={optionButton}
+              optionsButton={optionsButton}
+              showOptions={showOptions}
+              onChange={onChange}
+              id={`object-${id}`}
+              onInputLostFocus={onInputLostFocus}
+              selectedOption={selectedOption}
+              setSelectedOption={setSelectedOption}
+              selectedOptions={selectedOptions}
+              setSelectedOptions={setSelectedOptions}
+              options={objectOptions}
+              value={value}
+              autoFocus={autoFocus}
+              disabled={disabled}
+              setShowOptions={setShowOptions}
+              required={required}
+              placeholder={placeholder}
+              blurOnEnter={blurOnEnter}
+              optionsPlaceholder={optionsPlaceholder}
+              className={className}
+            />
+          ) : (
+            <CustomInputPopover
+              refInput={refInput}
+              handleKeyDown={handleKeyDown}
+              optionButton={optionButton}
+              optionsButton={optionsButton}
+              showOptions={showOptions}
+              onChange={onChange}
+              id={`popover-anchor-${id}`}
+              onInputLostFocus={onInputLostFocus}
+              selectedOption={selectedOption}
+              setSelectedOption={setSelectedOption}
+              selectedOptions={selectedOptions}
+              setSelectedOptions={setSelectedOptions}
+              value={value}
+              autoFocus={autoFocus}
+              disabled={disabled}
+              setShowOptions={setShowOptions}
+              required={required}
+              password={password}
+              pwdVisible={pwdVisible}
+              editNode={editNode}
+              placeholder={placeholder}
+              blurOnEnter={blurOnEnter}
+              options={options}
+              optionsPlaceholder={optionsPlaceholder}
+              className={className}
+            />
+          )}
         </>
       )}
 
@@ -280,8 +151,10 @@ export default function InputComponent({
           )}
         >
           <button
-            onClick={() => {
+            onClick={(e) => {
               setShowOptions(!showOptions);
+              e.preventDefault();
+              e.stopPropagation();
             }}
             className={cn(
               selectedOption !== ""

src/frontend/src/components/numberReader/index.tsx

@@ -0,0 +1,7 @@
+export default function NumberReader({
+  number,
+}: {
+  number: number;
+}): JSX.Element {
+  return <span>{number}</span>;
+}

src/frontend/src/components/objectRender/index.tsx

@@ -0,0 +1,13 @@
+import DictAreaModal from "../../modals/dictAreaModal";
+
+export default function ObjectRender({ object }: { object: any }): JSX.Element {
+  //TODO check object type
+
+  return (
+    <DictAreaModal value={object}>
+      <div className="flex h-full w-full items-center align-middle transition-all hover:scale-105">
+        <div className="truncate">{JSON.stringify(object)}</div>
+      </div>
+    </DictAreaModal>
+  );
+}

src/frontend/src/components/recordsOutputComponent/index.tsx

@@ -0,0 +1,34 @@
+import { ColDef, ColGroupDef } from "ag-grid-community";
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-balham.css"; // Optional Theme applied to the grid
+import { FlowPoolObjectType } from "../../types/chat";
+import TableComponent from "../tableComponent";
+import { extractColumnsFromRows } from "../../utils/utils";
+
+function RecordsOutputComponent({
+  flowPool,
+  pagination,
+}: {
+  flowPool: FlowPoolObjectType;
+  pagination: boolean;
+}) {
+  const rows = flowPool?.data?.artifacts?.records ?? [];
+  const columns = extractColumnsFromRows(rows, "union");
+  const columnDefs = columns.map((col, idx) => ({
+    ...col,
+    resizable: idx !== columns.length - 1,
+    flex: idx !== columns.length - 1 ? 1 : 2,
+  })) as (ColDef<any> | ColGroupDef<any>)[];
+
+  return (
+    <TableComponent
+      overlayNoRowsTemplate="No data available"
+      suppressRowClickSelection={true}
+      pagination={pagination}
+      columnDefs={columnDefs}
+      rowData={rows}
+    />
+  );
+}
+
+export default RecordsOutputComponent;

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

@@ -0,0 +1,38 @@
+import { Link } from "react-router-dom";
+import { cn } from "../../../../utils/utils";
+import { buttonVariants } from "../../../ui/button";
+
+type SideBarButtonsComponentProps = {
+  items: {
+    href?: string;
+    title: string;
+    icon: React.ReactNode;
+  }[];
+  pathname: string;
+  handleOpenNewFolderModal?: () => void;
+};
+const SideBarButtonsComponent = ({
+  items,
+  handleOpenNewFolderModal,
+}: SideBarButtonsComponentProps) => {
+  return (
+    <>
+      {items.map((item) => (
+        <Link to={item.href!}>
+          <div
+            key={item.title}
+            data-testid={`sidebar-nav-${item.title}`}
+            className={cn(
+              buttonVariants({ variant: "ghost" }),
+              "!w-[200px] cursor-pointer justify-start gap-2 border border-transparent hover:border-border hover:bg-transparent",
+            )}
+            onClick={handleOpenNewFolderModal}
+          >
+            {item.title}
+          </div>
+        </Link>
+      ))}
+    </>
+  );
+};
+export default SideBarButtonsComponent;

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

@@ -0,0 +1,170 @@
+import { useLocation } from "react-router-dom";
+import { FolderType } from "../../../../pages/MainPage/entities";
+import { useFolderStore } from "../../../../stores/foldersStore";
+import { cn } from "../../../../utils/utils";
+import DropdownButton from "../../../dropdownButtonComponent";
+import IconComponent, {
+  ForwardedIconComponent,
+} from "../../../genericIconComponent";
+import { Button, buttonVariants } from "../../../ui/button";
+import useFileDrop from "../../hooks/use-on-file-drop";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { handleDownloadFolderFn } from "../../../../pages/MainPage/utils/handle-download-folder";
+import useAlertStore from "../../../../stores/alertStore";
+
+type SideBarFoldersButtonsComponentProps = {
+  folders: FolderType[];
+  pathname: string;
+  handleChangeFolder?: (id: string) => void;
+  handleEditFolder?: (item: FolderType) => void;
+  handleDeleteFolder?: (item: FolderType) => void;
+  handleAddFolder?: () => void;
+};
+const SideBarFoldersButtonsComponent = ({
+  folders,
+  pathname,
+  handleAddFolder,
+  handleChangeFolder,
+  handleEditFolder,
+  handleDeleteFolder,
+}: SideBarFoldersButtonsComponentProps) => {
+  const uploadFolder = useFolderStore((state) => state.uploadFolder);
+  const currentFolder = pathname.split("/");
+  const urlWithoutPath = pathname.split("/").length < 4;
+  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const allFlows = useFlowsManagerStore((state) => state.allFlows);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+
+  const checkPathName = (itemId: string) => {
+    if (urlWithoutPath && itemId === myCollectionId) {
+      return true;
+    }
+    return currentFolder.includes(itemId);
+  };
+  const location = useLocation();
+  const folderId = location?.state?.folderId ?? myCollectionId;
+  const getFolderById = useFolderStore((state) => state.getFolderById);
+
+  const handleFolderChange = (folderId: string) => {
+    getFolderById(folderId);
+  };
+
+  const { dragOver, dragEnter, dragLeave, onDrop } = useFileDrop(
+    folderId,
+    handleFolderChange,
+  );
+
+  const handleUploadFlowsToFolder = () => {
+    uploadFolder(folderId);
+  };
+
+  const handleDownloadFolder = (id: string) => {
+    handleDownloadFolderFn(id);
+  };
+
+  return (
+    <>
+      <div className="flex shrink-0 items-center justify-between">
+        <DropdownButton
+          firstButtonName="New Folder"
+          onFirstBtnClick={handleAddFolder!}
+          options={[]}
+          plusButton={true}
+          dropdownOptions={false}
+        />
+        <Button
+          variant="primary"
+          onClick={handleUploadFlowsToFolder}
+          className="px-7"
+        >
+          <ForwardedIconComponent
+            name="Upload"
+            className="main-page-nav-button"
+          />
+          Upload
+        </Button>
+      </div>
+
+      <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
+        <>
+          {folders.map((item, index) => (
+            <div
+              onDragOver={dragOver}
+              onDragEnter={dragEnter}
+              onDragLeave={dragLeave}
+              onDrop={(e) => onDrop(e, item.id!)}
+              key={item.id}
+              data-testid={`sidebar-nav-${item.name}`}
+              className={cn(
+                buttonVariants({ variant: "ghost" }),
+                checkPathName(item.id!)
+                  ? "border border-border bg-muted hover:bg-muted"
+                  : "border hover:bg-transparent lg:border-transparent lg:hover:border-border",
+                "group flex w-full shrink-0 cursor-pointer gap-2 opacity-100 lg:min-w-full",
+              )}
+              onClick={() => handleChangeFolder!(item.id!)}
+            >
+              <div className="flex w-full items-center gap-2">
+                <IconComponent
+                  name={"folder"}
+                  className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
+                />
+                <span className="block max-w-full truncate opacity-100">
+                  {item.name}
+                </span>
+                <div className="flex-1" />
+                {index > 0 && (
+                  <Button
+                    className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
+                    onClick={(e) => {
+                      handleDeleteFolder!(item);
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                    variant={"ghost"}
+                  >
+                    <IconComponent
+                      name={"trash"}
+                      className=" w-4 stroke-[1.5]"
+                    />
+                  </Button>
+                )}
+                {index > 0 && (
+                  <Button
+                    className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
+                    onClick={(e) => {
+                      handleEditFolder!(item);
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                    variant={"ghost"}
+                  >
+                    <IconComponent
+                      name={"pencil"}
+                      className="  w-4 stroke-[1.5] text-white  "
+                    />
+                  </Button>
+                )}
+                <Button
+                  className="hidden p-0 hover:bg-white group-hover:block hover:dark:bg-[#0c101a00]"
+                  onClick={(e) => {
+                    handleDownloadFolder(item.id!);
+                    e.stopPropagation();
+                    e.preventDefault();
+                  }}
+                  variant={"ghost"}
+                >
+                  <IconComponent
+                    name={"Download"}
+                    className="  w-4 stroke-[1.5] text-white  "
+                  />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </>
+      </div>
+    </>
+  );
+};
+export default SideBarFoldersButtonsComponent;

src/frontend/src/components/sidebarComponent/hooks/use-on-file-drop.tsx

@@ -0,0 +1,134 @@
+import {
+  UPLOAD_ALERT_LIST,
+  WRONG_FILE_ERROR_ALERT,
+} from "../../../constants/alerts_constants";
+import { updateFlowInDatabase } from "../../../controllers/API";
+import { uploadFlowsFromFolders } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+import { FlowType } from "../../../types/flow";
+
+const useFileDrop = (folderId, folderChangeCallback) => {
+  const setFolderDragging = useFolderStore((state) => state.setFolderDragging);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const refreshFlows = useFlowsManagerStore((state) => state.refreshFlows);
+  const flows = useFlowsManagerStore((state) => state.flows);
+
+  const triggerFolderChange = (folderId) => {
+    if (folderChangeCallback) {
+      folderChangeCallback(folderId);
+    }
+  };
+  const handleFileDrop = async (e) => {
+    if (e.dataTransfer.types.some((type) => type === "Files")) {
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const firstFile = e.dataTransfer.files[0];
+        if (firstFile.type === "application/json") {
+          uploadFormData(firstFile);
+        } else {
+          setErrorData({
+            title: WRONG_FILE_ERROR_ALERT,
+            list: [UPLOAD_ALERT_LIST],
+          });
+        }
+      }
+    }
+  };
+
+  const dragOver = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>,
+  ) => {
+    e.preventDefault();
+
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setFolderDragging(true);
+    }
+  };
+
+  const dragEnter = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>,
+  ) => {
+    if (e.dataTransfer.types.some((types) => types === "Files")) {
+      setFolderDragging(true);
+    }
+    e.preventDefault();
+  };
+
+  const dragLeave = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>,
+  ) => {
+    e.preventDefault();
+    if (e.target === e.currentTarget) {
+      setFolderDragging(false);
+    }
+  };
+
+  const onDrop = (
+    e:
+      | React.DragEvent<HTMLDivElement>
+      | React.DragEvent<HTMLButtonElement>
+      | React.DragEvent<HTMLAnchorElement>,
+    folderId: string,
+  ) => {
+    if (e?.dataTransfer?.getData("flow")) {
+      const data = JSON.parse(e?.dataTransfer?.getData("flow"));
+
+      if (data) {
+        uploadFromDragCard(data.id, folderId);
+        return;
+      }
+    }
+
+    e.preventDefault();
+    handleFileDrop(e);
+    setFolderDragging(false);
+  };
+
+  const uploadFromDragCard = (flowId, folderId) => {
+    const selectedFlow = flows.find((flow) => flow.id === flowId);
+
+    if (!selectedFlow) {
+      throw new Error("Flow not found");
+    }
+
+    const updatedFlow: FlowType = {
+      ...selectedFlow,
+      folder_id: folderId,
+    };
+    updateFlowInDatabase(updatedFlow).then(() => {
+      getFoldersApi(true);
+      triggerFolderChange(folderId);
+    });
+  };
+
+  const uploadFormData = (data) => {
+    const formData = new FormData();
+    formData.append("file", data);
+
+    uploadFlowsFromFolders(formData).then(() => {
+      getFoldersApi(true);
+      triggerFolderChange(folderId);
+      refreshFlows();
+    });
+  };
+
+  return {
+    dragOver,
+    dragEnter,
+    dragLeave,
+    onDrop,
+  };
+};
+
+export default useFileDrop;

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

@@ -1,48 +1,61 @@
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { FolderType } from "../../pages/MainPage/entities";
+import { useFolderStore } from "../../stores/foldersStore";
 import { cn } from "../../utils/utils";
-import { buttonVariants } from "../ui/button";
+import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
+import SideBarButtonsComponent from "./components/sideBarButtons";
+import SideBarFoldersButtonsComponent from "./components/sideBarFolderButtons";
 
-interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+type SidebarNavProps = {
   items: {
-    href: string;
+    href?: string;
     title: string;
     icon: React.ReactNode;
   }[];
-}
+  handleOpenNewFolderModal?: () => void;
+  handleChangeFolder?: (id: string) => void;
+  handleEditFolder?: (item: FolderType) => void;
+  handleDeleteFolder?: (item: FolderType) => void;
+  className?: string;
+};
 
 export default function SidebarNav({
   className,
   items,
+  handleOpenNewFolderModal,
+  handleChangeFolder,
+  handleEditFolder,
+  handleDeleteFolder,
   ...props
 }: SidebarNavProps) {
   const location = useLocation();
   const pathname = location.pathname;
+  const loadingFolders = useFolderStore((state) => state.loading);
+  const folders = useFolderStore((state) => state.folders);
+
+  const pathValues = ["folder", "components", "flows", "all"];
+  const isFolderPath = pathValues.some((value) => pathname.includes(value));
 
   return (
-    <nav
-      className={cn(
-        "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",
-        className
-      )}
-      {...props}
-    >
-      {items.map((item) => (
-        <Link
-          data-testid={`sidebar-nav-${item.title}`}
-          key={item.href}
-          to={item.href}
-          className={cn(
-            buttonVariants({ variant: "ghost" }),
-            pathname === item.href
-              ? "border border-border bg-muted hover:bg-muted"
-              : "border border-transparent hover:border-border hover:bg-transparent",
-            "justify-start gap-2"
-          )}
-        >
-          {item.icon}
-          {item.title}
-        </Link>
-      ))}
+    <nav className={cn(className)} {...props}>
+      <HorizontalScrollFadeComponent>
+        <SideBarButtonsComponent
+          items={items}
+          pathname={pathname}
+          handleOpenNewFolderModal={handleOpenNewFolderModal}
+        />
+
+        {!loadingFolders && folders?.length > 0 && isFolderPath && (
+          <SideBarFoldersButtonsComponent
+            folders={folders}
+            pathname={pathname}
+            handleChangeFolder={handleChangeFolder}
+            handleEditFolder={handleEditFolder}
+            handleDeleteFolder={handleDeleteFolder}
+            handleAddFolder={handleOpenNewFolderModal}
+          />
+        )}
+      </HorizontalScrollFadeComponent>
     </nav>
   );
 }

src/frontend/src/components/storeGuard/index.tsx

@@ -5,7 +5,7 @@ export const StoreGuard = ({ children }) => {
   const hasStore = useStoreStore((state) => state.hasStore);
 
   if (!hasStore) {
-    return <Navigate to="/flows" replace />;
+    return <Navigate to="/all" replace />;
   }
 
   return children;

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -0,0 +1,7 @@
+export default function StringReader({
+  string,
+}: {
+  string: string;
+}): JSX.Element {
+  return <span className="truncate">{string}</span>;
+}

src/frontend/src/components/tableAutoCellRender/index.tsx

@@ -0,0 +1,60 @@
+import { CustomCellRendererProps } from "ag-grid-react";
+import { cn, isTimeStampString } from "../../utils/utils";
+import ArrayReader from "../arrayReaderComponent";
+import DateReader from "../dateReaderComponent";
+import NumberReader from "../numberReader";
+import ObjectRender from "../objectRender";
+import StringReader from "../stringReaderComponent";
+import { Label } from "../ui/label";
+import { Badge } from "../ui/badge";
+
+export default function TableAutoCellRender({
+  value,
+}: CustomCellRendererProps) {
+  function getCellType() {
+    switch (typeof value) {
+      case "object":
+        if (value === null) {
+          return String(value);
+        } else if (Array.isArray(value)) {
+          return <ArrayReader array={value} />;
+        } else if (value.definitions) {
+          // use a custom render defined by the sender
+        } else {
+          return <ObjectRender object={value} />;
+        }
+        break;
+      case "string":
+        if (isTimeStampString(value)) {
+          return <DateReader date={value} />;
+        }
+        //TODO: REFACTOR FOR ANY LABEL NOT HARDCODED
+        else if (value === "success") {
+          return (
+            <Badge
+              variant="outline"
+              size="sq"
+              className={cn(
+                "min-w-min bg-success-background text-success-foreground hover:bg-success-background",
+              )}
+            >
+              {value}
+            </Badge>
+          );
+        } else {
+          return <StringReader string={value} />;
+        }
+        break;
+      case "number":
+        return <NumberReader number={value} />;
+      default:
+        return String(value);
+    }
+  }
+
+  return (
+    <div className="group flex h-full w-full items-center align-middle">
+      {getCellType()}
+    </div>
+  );
+}

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

@@ -1,27 +1,119 @@
 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 } from "ag-grid-react";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
+import { AgGridReact, AgGridReactProps } from "ag-grid-react";
+import { ElementRef, forwardRef, useCallback } 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 ForwardedIconComponent from "../genericIconComponent";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+
+interface TableComponentProps extends AgGridReactProps {
+  columnDefs: NonNullable<AgGridReactProps["columnDefs"]>;
+  rowData: NonNullable<AgGridReactProps["rowData"]>;
+  alertTitle?: string;
+  alertDescription?: string;
+}
 
 const TableComponent = forwardRef<
   ElementRef<typeof AgGridReact>,
-  ComponentPropsWithoutRef<typeof AgGridReact>
->(({ ...props }, ref) => {
-  const dark = useDarkStore((state) => state.dark);
+  TableComponentProps
+>(
+  (
+    {
+      alertTitle = DEFAULT_TABLE_ALERT_TITLE,
+      alertDescription = DEFAULT_TABLE_ALERT_MSG,
+      ...props
+    },
+    ref,
+  ) => {
+    const dark = useDarkStore((state) => state.dark);
+    var currentRowHeight: number;
+    var minRowHeight = 25;
 
-  return (
-    <div
-      className={cn(
-        dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
-        "ag-theme-shadcn flex h-full flex-col",
-      )} // applying the grid theme
-    >
-      <AgGridReact ref={ref} {...props} />
-    </div>
-  );
-});
+    const getRowHeight = useCallback(() => {
+      return currentRowHeight;
+    }, []);
+
+    const onGridReady = useCallback((params: any) => {
+      minRowHeight = params.api.getSizesForCurrentTheme().rowHeight;
+      currentRowHeight = minRowHeight;
+    }, []);
+
+    const updateRowHeight = (params: { api: any }) => {
+      const bodyViewport = document.querySelector(".ag-body-viewport");
+      if (!bodyViewport) {
+        return;
+      }
+      var gridHeight = bodyViewport.clientHeight;
+      var renderedRowCount = params.api.getDisplayedRowCount();
+
+      if (renderedRowCount * minRowHeight >= gridHeight) {
+        if (currentRowHeight !== minRowHeight) {
+          currentRowHeight = minRowHeight;
+          params.api.resetRowHeights();
+        }
+      } else {
+        currentRowHeight = Math.floor(gridHeight / renderedRowCount);
+        params.api.resetRowHeights();
+      }
+    };
+
+    const onFirstDataRendered = useCallback(
+      (params: any) => {
+        updateRowHeight(params);
+      },
+      [updateRowHeight],
+    );
+
+    const onGridSizeChanged = useCallback(
+      (params: any) => {
+        updateRowHeight(params);
+      },
+      [updateRowHeight],
+    );
+
+    if (props.rowData.length === 0) {
+      return (
+        <div className="flex h-full w-full items-center justify-center rounded-md border">
+          <Alert variant={"default"} className="w-fit">
+            <ForwardedIconComponent
+              name="AlertCircle"
+              className="h-5 w-5 text-primary"
+            />
+            <AlertTitle>{alertTitle}</AlertTitle>
+            <AlertDescription>{alertDescription}</AlertDescription>
+          </Alert>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          dark ? "ag-theme-quartz-dark" : "ag-theme-quartz",
+          "ag-theme-shadcn flex h-full flex-col",
+        )} // applying the grid theme
+      >
+        <AgGridReact
+          {...props}
+          className={cn(props.className, "custom-scroll")}
+          getRowHeight={getRowHeight}
+          onGridReady={onGridReady}
+          onFirstDataRendered={onFirstDataRendered}
+          onGridSizeChanged={onGridSizeChanged}
+          defaultColDef={{
+            minWidth: 100,
+          }}
+          ref={ref}
+        />
+      </div>
+    );
+  },
+);
 
 export default TableComponent;

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/utils";
+import HorizontalScrollFadeComponent from "../horizontalScrollFadeComponent";
 import { Badge } from "../ui/badge";
 
 export function TagsSelector({
@@ -24,87 +24,37 @@ export function TagsSelector({
     setSelectedTags(newArray);
   };
 
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const fadeContainerRef = useRef<HTMLDivElement>(null);
-  const [divWidth, setDivWidth] = useState<number>(0);
-
-  useEffect(() => {
-    const handleResize = () => {
-      if (scrollContainerRef.current) {
-        setDivWidth(scrollContainerRef.current.clientWidth);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-    handleResize(); // call the function at start to get the initial width
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!scrollContainerRef.current || !fadeContainerRef.current) return;
-
-      const { scrollLeft, scrollWidth, clientWidth } =
-        scrollContainerRef.current;
-      const atStart = scrollLeft === 0;
-      const atEnd = scrollLeft === scrollWidth - clientWidth;
-      const isScrollable = scrollWidth > clientWidth;
-
-      fadeContainerRef.current.classList.toggle(
-        "fade-left",
-        isScrollable && !atStart
-      );
-      fadeContainerRef.current.classList.toggle(
-        "fade-right",
-        isScrollable && !atEnd
-      );
-    };
-
-    const scrollContainer = scrollContainerRef.current;
-    if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll);
-      // Delay the initial scroll event dispatch to ensure correct calculation
-      scrollContainer.dispatchEvent(new Event("scroll"));
-      return () => scrollContainer.removeEventListener("scroll", handleScroll);
-    }
-  }, [divWidth, loadingTags]); // Depend on divWidth
-
   return (
-    <div ref={fadeContainerRef} className="fade-container">
-      <div
-        ref={scrollContainerRef}
-        className="scroll-container flex min-w-min gap-2"
-      >
-        {!loadingTags &&
-          tags.map((tag, idx) => (
-            <button
-              disabled={disabled}
-              className={
-                disabled
-                  ? "cursor-not-allowed"
-                  : " overflow-hidden whitespace-nowrap"
-              }
-              onClick={() => {
-                updateTags(tag.name);
-              }}
+    <HorizontalScrollFadeComponent isFolder={false}>
+      {!loadingTags &&
+        tags.map((tag, idx) => (
+          <button
+            disabled={disabled}
+            className={
+              disabled
+                ? "cursor-not-allowed"
+                : " overflow-hidden whitespace-nowrap"
+            }
+            onClick={() => {
+              updateTags(tag.name);
+            }}
+            key={idx}
+            data-testid={`tag-selector-${tag.name}`}
+          >
+            <Badge
               key={idx}
-              data-testid={`tag-selector-${tag.name}`}
+              variant="outline"
+              size="sq"
+              className={cn(
+                selectedTags.some((category) => category === tag.name)
+                  ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
+                  : "",
+              )}
             >
-              <Badge
-                key={idx}
-                variant="outline"
-                size="sq"
-                className={cn(
-                  selectedTags.some((category) => category === tag.name)
-                    ? "min-w-min bg-beta-foreground text-background hover:bg-beta-foreground"
-                    : ""
-                )}
-              >
-                {tag.name}
-              </Badge>
-            </button>
-          ))}
-      </div>
-    </div>
+              {tag.name}
+            </Badge>
+          </button>
+        ))}
+    </HorizontalScrollFadeComponent>
   );
 }

src/frontend/src/components/ui/alert.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

src/frontend/src/components/ui/checkbox.tsx

@@ -13,14 +13,14 @@ const Checkbox = React.forwardRef<
     ref={ref}
     className={cn(
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent name="Check" className="h-4 w-4" />
+      <IconComponent name="Check" className="h-4 w-4 stroke-2" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
@@ -37,7 +37,7 @@ const CheckBoxDiv = ({
     className={cn(
       className,
       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      checked ? "bg-primary text-primary-foreground" : ""
+      checked ? "bg-primary text-primary-foreground" : "",
     )}
   >
     {checked && (

src/frontend/src/components/ui/custom-accordion.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as React from "react";
+import { cn } from "../../utils/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger asChild ref={ref} {...props}>
+      <div
+        className={cn(
+          " flex flex-1 cursor-pointer items-center justify-between border-[1px] py-2 text-sm font-medium data-[state=closed]:rounded-md data-[state=open]:rounded-t-md data-[state=open]:border-b-0 data-[state=open]:bg-muted [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+      >
+        {children}
+        <ChevronDownIcon className="h-4 w-4 font-bold text-primary transition-transform duration-200" />
+      </div>
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden border-[1px] text-sm data-[state=open]:rounded-b-md data-[state=open]:border-t-0 data-[state=open]:bg-muted",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

src/frontend/src/components/ui/form.tsx

@@ -0,0 +1,176 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
+import { cn } from "../../utils/utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-sm font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

src/frontend/src/constants/constants.ts

@@ -95,6 +95,12 @@ export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
  */
 export const SETTINGS_DIALOG_SUBTITLE = "Edit details about your project.";
 
+/**
+ * The base text for subtitle of Flow Logs (Menubar)
+ * @constant
+ */
+export const LOGS_DIALOG_SUBTITLE = "Check out information about your flow.";
+
 /**
  * The base text for subtitle of Code Dialog (Toolbar)
  * @constant
@@ -125,7 +131,6 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 
 export const CODE_DICT_DIALOG_SUBTITLE =
   "Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
-
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
@@ -533,6 +538,8 @@ export const NOUNS: string[] = [
  */
 export const USER_PROJECTS_HEADER = "My Collection";
 
+export const DEFAULT_FOLDER = "My Projects";
+
 /**
  * Header text for admin page
  * @constant
@@ -727,6 +734,8 @@ export const OUTPUT_TYPES = new Set([
   "JsonOutput",
   "KeyPairOutput",
   "StringListOutput",
+  "RecordsOutput",
+  "TableOutput",
 ]);
 
 export const CHAT_FIRST_INITIAL_TEXT =
@@ -746,8 +755,8 @@ export const EDIT_TEXT_MODAL_TITLE = "Edit Text";
 export const EDIT_TEXT_PLACEHOLDER = "Type message here.";
 export const INPUT_HANDLER_HOVER = "Avaliable input components:";
 export const OUTPUT_HANDLER_HOVER = "Avaliable output components:";
-export const TEXT_INPUT_MODAL_TITLE = "Text Inputs";
-export const OUTPUTS_MODAL_TITLE = "Text Outputs";
+export const TEXT_INPUT_MODAL_TITLE = "Inputs";
+export const OUTPUTS_MODAL_TITLE = "Outputs";
 export const LANGFLOW_CHAT_TITLE = "Langflow Chat";
 export const CHAT_INPUT_PLACEHOLDER =
   "No chat input variables found. Click to run your flow.";
@@ -792,3 +801,7 @@ export const NATIVE_CATEGORIES = [
 ];
 
 export const SAVE_DEBOUNCE_TIME = 300;
+
+export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
+
+export const DEFAULT_TABLE_ALERT_TITLE = "No Data Available";

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

@@ -22,7 +22,10 @@ function ApiInterceptor() {
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
-        if (error.response?.status === 403 || error.response?.status === 401) {
+        if (
+          error?.response?.status === 403 ||
+          error?.response?.status === 401
+        ) {
           if (!autoLogin) {
             if (error?.config?.url?.includes("github")) {
               return Promise.reject(error);
@@ -44,7 +47,7 @@ function ApiInterceptor() {
         }
         await clearBuildVerticesState(error);
         return Promise.reject(error);
-      }
+      },
     );
 
     const isAuthorizedURL = (url) => {
@@ -61,10 +64,10 @@ function ApiInterceptor() {
         const parsedURL = new URL(url);
 
         const isDomainAllowed = authorizedDomains.some(
-          (domain) => parsedURL.origin === new URL(domain).origin
+          (domain) => parsedURL.origin === new URL(domain).origin,
         );
         const isEndpointAllowed = authorizedEndpoints.some((endpoint) =>
-          parsedURL.pathname.includes(endpoint)
+          parsedURL.pathname.includes(endpoint),
         );
 
         return isDomainAllowed || isEndpointAllowed;
@@ -77,6 +80,18 @@ function ApiInterceptor() {
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {
+        const lastUrl = localStorage.getItem("lastUrlCalled");
+
+        if (
+          config?.url === lastUrl &&
+          config?.url !== "/health" &&
+          config?.method === "get"
+        ) {
+          return Promise.reject("Duplicate request");
+        }
+
+        localStorage.setItem("lastUrlCalled", config.url ?? "");
+
         const accessToken = cookies.get("access_token_lf");
         if (accessToken && !isAuthorizedURL(config?.url)) {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
@@ -86,7 +101,7 @@ function ApiInterceptor() {
       },
       (error) => {
         return Promise.reject(error);
-      }
+      },
     );
 
     return () => {
@@ -118,7 +133,7 @@ function ApiInterceptor() {
       if (error?.config?.headers) {
         delete error.config.headers["Authorization"];
         error.config.headers["Authorization"] = `Bearer ${cookies.get(
-          "access_token_lf"
+          "access_token_lf",
         )}`;
         const response = await axios.request(error.config);
         return response;

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

@@ -1,3 +1,4 @@
+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";
@@ -18,6 +19,7 @@ import { UserInputType } from "../../types/components";
 import { FlowStyleType, FlowType } from "../../types/flow";
 import { StoreComponentResponse } from "../../types/store";
 import { FlowPoolType } from "../../types/zustand/flow";
+import { extractColumnsFromRows } from "../../utils/utils";
 import {
   APIClassType,
   BuildStatusTypeAPI,
@@ -119,6 +121,7 @@ export async function saveFlowToDatabase(newFlow: {
   description: string;
   style?: FlowStyleType;
   is_component?: boolean;
+  folder_id?: string;
 }): Promise<FlowType> {
   try {
     const response = await api.post(`${BASE_URL_API}flows/`, {
@@ -126,6 +129,7 @@ export async function saveFlowToDatabase(newFlow: {
       data: newFlow.data,
       description: newFlow.description,
       is_component: newFlow.is_component,
+      folder_id: newFlow.folder_id === "" ? null : newFlow.folder_id,
     });
 
     if (response.status !== 201) {
@@ -152,6 +156,7 @@ export async function updateFlowInDatabase(
       name: updatedFlow.name,
       data: updatedFlow.data,
       description: updatedFlow.description,
+      folder_id: updatedFlow.folder_id === "" ? null : updatedFlow.folder_id,
     });
 
     if (response?.status !== 200) {
@@ -992,3 +997,41 @@ export async function deleteFlowPool(
   config["params"] = { flow_id: flowId };
   return await api.delete(`${BASE_URL_API}monitor/builds`, config);
 }
+
+export async function multipleDeleteFlowsComponents(
+  flowIds: string[],
+): Promise<AxiosResponse<any>> {
+  return await api.post(`${BASE_URL_API}flows/multiple_delete/`, {
+    flow_ids: flowIds,
+  });
+}
+
+export async function getTransactionTable(
+  id: string,
+  mode: "intersection" | "union",
+  params = {},
+): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+  const config = {};
+  config["params"] = { flow_id: id };
+  if (params) {
+    config["params"] = { ...config["params"], ...params };
+  }
+  const rows = await api.get(`${BASE_URL_API}monitor/transactions`, config);
+  const columns = extractColumnsFromRows(rows.data, mode);
+  return { rows: rows.data, columns };
+}
+
+export async function getMessagesTable(
+  id: string,
+  mode: "intersection" | "union",
+  params = {},
+): Promise<{ rows: Array<object>; columns: Array<ColDef | ColGroupDef> }> {
+  const config = {};
+  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);
+  return { rows: rows.data, columns };
+}

src/frontend/src/modals/BundleModal/component/index.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useState } from "react";
+import InputComponent from "../../../components/inputComponent";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "../../../components/ui/form";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+
+type FolderFormsProps = {
+  control: any;
+  setValue: any;
+  folderToEdit: any;
+};
+
+export const FolderForms = ({
+  control,
+  setValue,
+  folderToEdit,
+}: FolderFormsProps): JSX.Element => {
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const [selectedComponents, setSelectedComponents] = useState<string[]>([]);
+  const [selectedFlows, setSelectedFlows] = useState<string[]>([]);
+
+  const componentsList = flows
+    .filter((flow) => flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  const flowsList = flows
+    .filter((flow) => !flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  useEffect(() => {
+    setValue("components", selectedComponents);
+    setValue("flows", selectedFlows);
+  }, [selectedComponents, selectedFlows]);
+
+  useEffect(() => {
+    if (folderToEdit) {
+      setValue("name", folderToEdit.name);
+      setValue("description", folderToEdit.description);
+      console.log(folderToEdit);
+
+      // setSelectedComponents(folderToEdit.components);
+      // setSelectedFlows(folderToEdit.flows);
+      return;
+    }
+    setValue("name", "");
+    setValue("description", "");
+    setSelectedComponents([]);
+    setSelectedFlows([]);
+  }, [folderToEdit]);
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col gap-4 align-middle">
+        <Label>Folder Name</Label>
+
+        <FormField
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  value={field.value}
+                  onChange={field.onChange}
+                  placeholder="Insert a name for the folder..."
+                ></Input>
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Label>Description (optional) </Label>
+
+        <FormField
+          control={control}
+          name="description"
+          render={({ field }) => (
+            <FormControl>
+              <Textarea
+                value={field.value}
+                onChange={field.onChange}
+                placeholder="Insert a description for the folder..."
+              ></Textarea>
+            </FormControl>
+          )}
+        />
+
+        <Label>Add Flows</Label>
+
+        <FormField
+          control={control}
+          name="flows"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={flowsList}
+                placeholder="Choose a flow to add..."
+                id="input-flow"
+                setSelectedOptions={(value: any) => setSelectedFlows(value)}
+                selectedOptions={selectedFlows}
+              ></InputComponent>
+            </FormControl>
+          )}
+        />
+
+        <Label>Add Components</Label>
+        <FormField
+          control={control}
+          name="components"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={componentsList}
+                placeholder="Choose a component to add..."
+                id="input-component"
+                setSelectedOptions={(value) => setSelectedComponents(value)}
+                selectedOptions={selectedComponents}
+              ></InputComponent>
+            </FormControl>
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+export default FolderForms;

src/frontend/src/modals/BundleModal/entities/index.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const FolderFormsSchema = z.object({
+  name: z.string().min(1, {
+    message: "Name must be at least 1 characters.",
+  }),
+  description: z.string().optional(),
+  components: z.array(z.string()),
+  flows: z.array(z.string()),
+});

src/frontend/src/modals/BundleModal/hooks/submit-folder.tsx

@@ -0,0 +1,53 @@
+import { addFolder, updateFolder } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFolderSubmit = (setOpen, folderToEdit) => {
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+
+  const onSubmit = (data) => {
+    if (folderToEdit) {
+      updateFolder(data, folderToEdit?.id!).then(
+        () => {
+          setSuccessData({
+            title: "Folder updated successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+        },
+        (reason) => {
+          if (reason) {
+            setErrorData({
+              title: `Error updating folder.`,
+            });
+            console.error(reason);
+          } else {
+            getFoldersApi(true);
+            setOpen(false);
+          }
+        },
+      );
+    } else {
+      addFolder(data).then(
+        () => {
+          setSuccessData({
+            title: "Folder created successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+        },
+        () => {
+          setErrorData({
+            title: `Error creating folder.`,
+          });
+        },
+      );
+    }
+  };
+
+  return { onSubmit, open, setOpen };
+};
+
+export default useFolderSubmit;

src/frontend/src/modals/BundleModal/index.tsx

@@ -0,0 +1,79 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+import { Form } from "../../components/ui/form";
+import { useFolderStore } from "../../stores/foldersStore";
+import BaseModal from "../baseModal";
+import FolderForms from "./component";
+import { FolderFormsSchema } from "./entities";
+import useFolderSubmit from "./hooks/submit-folder";
+
+type FoldersModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+export default function FoldersModal({
+  open,
+  setOpen,
+}: FoldersModalProps): JSX.Element {
+  const form = useForm<z.infer<typeof FolderFormsSchema>>({
+    resolver: zodResolver(FolderFormsSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      components: [],
+      flows: [],
+    },
+    mode: "all",
+  });
+
+  const folderToEdit = useFolderStore((state) => state.folderToEdit);
+  const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
+
+  const onSubmit = (data) => {
+    onSubmitFolder(data);
+  };
+
+  return (
+    <>
+      <BaseModal size="x-small" open={open} setOpen={setOpen}>
+        <BaseModal.Header
+          description={`${folderToEdit ? "Edit a folder" : "Add a new folder"}`}
+        >
+          <span className="pr-2" data-testid="modal-title">
+            {folderToEdit ? "Edit" : "New"} Folder
+          </span>
+          <ForwardedIconComponent
+            name="Plus"
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <div>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <FolderForms
+                  folderToEdit={folderToEdit}
+                  control={form.control}
+                  setValue={form.setValue}
+                />
+
+                <Button
+                  className="float-right mt-6"
+                  type="submit"
+                  disabled={!form.formState.isValid}
+                >
+                  {folderToEdit ? "Edit" : "Save"} Folder
+                </Button>
+              </form>
+            </Form>
+          </div>
+        </BaseModal.Content>
+      </BaseModal>
+    </>
+  );
+}

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

@@ -4,6 +4,7 @@ import ImageViewer from "../../../../components/ImageViewer";
 import CsvOutputComponent from "../../../../components/csvOutputComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import PdfViewer from "../../../../components/pdfViewer";
+import RecordsOutputComponent from "../../../../components/recordsOutputComponent";
 import {
   Select,
   SelectContent,
@@ -47,6 +48,7 @@ export default function IOFieldView({
       }
     }
   };
+
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   function handleOutputType() {
@@ -204,7 +206,7 @@ export default function IOFieldView({
                             <SelectItem key={separator} value={separator}>
                               {separator}
                             </SelectItem>
-                          )
+                          ),
                         )}
                       </SelectGroup>
                     </SelectContent>
@@ -280,6 +282,15 @@ export default function IOFieldView({
                 />
               </>
             );
+          case "RecordsOutput":
+            return (
+              <div className={left ? "h-56" : "h-full"}>
+                <RecordsOutputComponent
+                  flowPool={flowPoolNode}
+                  pagination={!left}
+                />
+              </div>
+            );
 
           default:
             return (

src/frontend/src/modals/baseModal/index.tsx

@@ -25,15 +25,21 @@ type TriggerProps = {
   children: ReactNode;
   asChild?: boolean;
   disable?: boolean;
+  className?: string;
 };
 
 const Content: React.FC<ContentProps> = ({ children }) => {
   return <div className="flex h-full w-full flex-col">{children}</div>;
 };
-const Trigger: React.FC<TriggerProps> = ({ children, asChild, disable }) => {
+const Trigger: React.FC<TriggerProps> = ({
+  children,
+  asChild,
+  disable,
+  className,
+}) => {
   return (
     <DialogTrigger
-      className={asChild ? "" : "w-full"}
+      className={asChild ? "" : cn("w-full", className)}
       hidden={children ? false : true}
       disabled={disable}
       asChild={asChild}
@@ -113,7 +119,7 @@ function BaseModal({
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = " ";
+      height = "h-full";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -129,6 +135,7 @@ function BaseModal({
       break;
     case "small-h-full":
       minWidth = "min-w-[40vw]";
+      height = "h-full";
       break;
     case "medium":
       minWidth = "min-w-[60vw]";
@@ -136,6 +143,8 @@ function BaseModal({
       break;
     case "medium-h-full":
       minWidth = "min-w-[60vw]";
+      height = "h-full";
+
       break;
     case "large":
       minWidth = "min-w-[85vw]";
@@ -162,6 +171,7 @@ function BaseModal({
 
     case "large-h-full":
       minWidth = "min-w-[80vw]";
+      height = "h-full";
       break;
     default:
       minWidth = "min-w-[80vw]";
@@ -186,7 +196,7 @@ function BaseModal({
               {headerChild}
             </div>
             <div
-              className={`flex flex-col ${height!} w-full transition-all duration-300`}
+              className={`flex flex-col ${height} w-full transition-all duration-300`}
             >
               {ContentChild}
             </div>
@@ -203,7 +213,7 @@ function BaseModal({
               {headerChild}
             </div>
             <div
-              className={`flex flex-col ${height!} w-full transition-all duration-300`}
+              className={`flex flex-col ${height} w-full transition-all duration-300`}
             >
               {ContentChild}
             </div>

src/frontend/src/modals/deleteConfirmationModal/index.tsx

@@ -17,6 +17,7 @@ export default function DeleteConfirmationModal({
   asChild,
   open,
   setOpen,
+  note = "",
 }: {
   children: JSX.Element;
   onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -24,6 +25,7 @@ export default function DeleteConfirmationModal({
   asChild?: boolean;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  note?: string;
 }) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -43,7 +45,14 @@ export default function DeleteConfirmationModal({
           </DialogTitle>
         </DialogHeader>
         <span>
-          Confirm deletion of {description ?? "component"}?<br></br>
+          Are you sure you want to delete the selected{" "}
+          {description ?? "component"}?<br></br>
+          {note && (
+            <>
+              {note}
+              <br></br>
+            </>
+          )}
           Note: This action is irreversible.
         </span>
         <DialogFooter>

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -18,6 +18,10 @@ export default function DictAreaModal({
   children,
   onChange,
   value,
+}: {
+  children: JSX.Element;
+  onChange?: (value: Object) => void;
+  value: Object;
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const isDark = useDarkStore((state) => state.dark);
@@ -29,9 +33,13 @@ export default function DictAreaModal({
 
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
-      <BaseModal.Header description={CODE_DICT_DIALOG_SUBTITLE}>
-        <span className="pr-2">Edit Dictionary</span>
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
+      >
+        <span className="pr-2">
+          {onChange ? "Edit Dictionary" : "View Dictionary"}
+        </span>
         <IconComponent
           name="BookMarked"
           className="h-6 w-6 pl-1 text-primary "
@@ -44,7 +52,7 @@ export default function DictAreaModal({
             theme="vscode"
             dark={isDark}
             className={!isDark ? "json-view-white" : "json-view-dark"}
-            editable
+            editable={!!onChange}
             enableClipboard
             onEdit={(edit) => {
               ref.current = edit["src"];
@@ -54,19 +62,21 @@ export default function DictAreaModal({
             }}
             src={ref.current}
           />
-          <div className="flex h-fit w-full justify-end">
-            <Button
-              data-testid="save-dict-button"
-              className="mt-3"
-              type="submit"
-              onClick={() => {
-                onChange(ref.current);
-                setOpen(false);
-              }}
-            >
-              Save
-            </Button>
-          </div>
+          {onChange && (
+            <div className="flex h-fit w-full justify-end">
+              <Button
+                data-testid="save-dict-button"
+                className="mt-3"
+                type="submit"
+                onClick={() => {
+                  onChange(ref.current);
+                  setOpen(false);
+                }}
+              >
+                Save
+              </Button>
+            </div>
+          )}
         </div>
       </BaseModal.Content>
     </BaseModal>

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import { Tabs, TabsList, TabsTrigger } from "../../components/ui/tabs";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { FlowSettingsPropsType } from "../../types/components";
+import { FlowType } from "../../types/flow";
+import BaseModal from "../baseModal";
+import TableComponent from "../../components/tableComponent";
+import { getMessagesTable, getTransactionTable } from "../../controllers/API";
+import {
+  ColDef,
+  ColGroupDef,
+  SizeColumnsToFitGridStrategy,
+} from "ag-grid-community";
+
+export default function FlowLogsModal({
+  open,
+  setOpen,
+}: FlowSettingsPropsType): JSX.Element {
+  const saveFlow = useFlowsManagerStore((state) => state.saveFlow);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
+  const flows = useFlowsManagerStore((state) => state.flows);
+  useEffect(() => {
+    setName(currentFlow!.name);
+    setDescription(currentFlow!.description);
+  }, [currentFlow!.name, currentFlow!.description, open]);
+
+  const [name, setName] = useState(currentFlow!.name);
+  const [description, setDescription] = useState(currentFlow!.description);
+  const [columns, setColumns] = useState<Array<ColDef | ColGroupDef>>([]);
+  const [rows, setRows] = useState<any>([]);
+  const [activeTab, setActiveTab] = useState("Executions");
+
+  function handleClick(): void {
+    currentFlow!.name = name;
+    currentFlow!.description = description;
+    saveFlow(currentFlow!);
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    if (activeTab === "Executions") {
+      getTransactionTable(currentFlowId, "union").then((data) => {
+        const { columns, rows } = data;
+        setColumns(columns.map((col) => ({ ...col, editable: true })));
+        setRows(rows);
+      });
+    } else if (activeTab === "Messages") {
+      getMessagesTable(currentFlowId, "union").then((data) => {
+        const { columns, rows } = data;
+        setColumns(columns.map((col) => ({ ...col, editable: true })));
+        setRows(rows);
+      });
+    }
+  }, [open, activeTab]);
+
+  const [nameLists, setNameList] = useState<string[]>([]);
+
+  useEffect(() => {
+    const tempNameList: string[] = [];
+    flows.forEach((flow: FlowType) => {
+      if ((flow.is_component ?? false) === false) tempNameList.push(flow.name);
+    });
+    setNameList(tempNameList.filter((name) => name !== currentFlow!.name));
+  }, [flows]);
+
+  return (
+    <BaseModal open={open} setOpen={setOpen} size="large">
+      <BaseModal.Header description="Inspect component executions and monitor sent messages in the playground.">
+        <div className="flex w-full justify-between">
+          <div className="flex h-fit w-32 items-center">
+            <span className="pr-2">Logs</span>
+            <IconComponent name="ScrollText" className="mr-2 h-4 w-4 " />
+          </div>
+          <div className="flex h-fit w-32 items-center"></div>
+        </div>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className={
+            "text-center; inset-0 m-0 mb-2 flex flex-col self-center overflow-hidden rounded-md border bg-muted pb-1"
+          }
+        >
+          <TabsList>
+            <TabsTrigger value={"Executions"}>Executions</TabsTrigger>
+            <TabsTrigger value={"Messages"}>Messages</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <TableComponent
+          readOnlyEdit
+          className="h-max-full h-full w-full"
+          pagination={rows.length === 0 ? false : true}
+          columnDefs={columns}
+          autoSizeStrategy={{ type: "fitGridWidth" }}
+          rowData={rows}
+          headerHeight={rows.length === 0 ? 0 : undefined}
+        ></TableComponent>
+      </BaseModal.Content>
+    </BaseModal>
+  );
+}

src/frontend/src/modals/foldersModal/component/index.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import InputComponent from "../../../components/inputComponent";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "../../../components/ui/form";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { Textarea } from "../../../components/ui/textarea";
+import useFlowsManagerStore from "../../../stores/flowsManagerStore";
+
+type FolderFormsProps = {
+  control: any;
+  setValue: any;
+  folderToEdit: any;
+};
+
+export const FolderForms = ({
+  control,
+  setValue,
+  folderToEdit,
+}: FolderFormsProps): JSX.Element => {
+  const flows = useFlowsManagerStore((state) => state.flows);
+  const [selectedComponents, setSelectedComponents] = useState<string[]>([]);
+  const [selectedFlows, setSelectedFlows] = useState<string[]>([]);
+  const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+  const componentsList = flows
+    .filter((flow) => flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  const flowsList = flows
+    .filter((flow) => !flow.is_component && flow.folder_id !== null)
+    .map((flow) => ({ id: flow.id, name: flow.name }));
+
+  const componentsOnFolder = allFlows
+    .filter((flow) => flow.is_component && flow.folder_id === folderToEdit?.id)
+    .map((flow) => flow.id);
+
+  const flowsOnFolder = allFlows
+    .filter((flow) => !flow.is_component && flow.folder_id === folderToEdit?.id)
+    .map((flow) => flow.id);
+
+  useEffect(() => {
+    setValue("components", selectedComponents);
+    setValue("flows", selectedFlows);
+  }, [selectedComponents, selectedFlows]);
+
+  useEffect(() => {
+    if (folderToEdit) {
+      setValue("name", folderToEdit.name);
+      setValue("description", folderToEdit.description);
+
+      setSelectedComponents(componentsOnFolder);
+      setSelectedFlows(flowsOnFolder);
+      return;
+    }
+    setValue("name", "");
+    setValue("description", "");
+    setSelectedComponents([]);
+    setSelectedFlows([]);
+  }, [folderToEdit]);
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col gap-4 align-middle">
+        <Label>Folder Name</Label>
+
+        <FormField
+          control={control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  value={field.value}
+                  onChange={field.onChange}
+                  placeholder="Insert a name for the folder..."
+                ></Input>
+              </FormControl>
+
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Label>Description (optional) </Label>
+
+        <FormField
+          control={control}
+          name="description"
+          render={({ field }) => (
+            <FormControl>
+              <Textarea
+                value={field.value}
+                onChange={field.onChange}
+                placeholder="Insert a description for the folder..."
+              ></Textarea>
+            </FormControl>
+          )}
+        />
+        {/*
+        <Label>Add Flows</Label>
+
+        <FormField
+          control={control}
+          name="flows"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={flowsList}
+                placeholder="Choose a flow to add..."
+                id="input-flow"
+                setSelectedOptions={(value: any) => setSelectedFlows(value)}
+                selectedOptions={selectedFlows}
+              ></InputComponent>
+            </FormControl>
+          )}
+        />
+
+        <Label>Add Components</Label>
+        <FormField
+          control={control}
+          name="components"
+          render={() => (
+            <FormControl>
+              <InputComponent
+                isObjectOption
+                password={false}
+                objectOptions={componentsList}
+                placeholder="Choose a component to add..."
+                id="input-component"
+                setSelectedOptions={(value) => setSelectedComponents(value)}
+                selectedOptions={selectedComponents}
+              ></InputComponent>
+            </FormControl>
+          )}
+        /> */}
+      </div>
+    </>
+  );
+};
+
+export default FolderForms;

src/frontend/src/modals/foldersModal/entities/index.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const FolderFormsSchema = z.object({
+  name: z.string().min(1, {
+    message: "Name must be at least 1 characters.",
+  }),
+  description: z.string().optional(),
+  components: z.array(z.string()),
+  flows: z.array(z.string()),
+});

src/frontend/src/modals/foldersModal/hooks/submit-folder.tsx

@@ -0,0 +1,60 @@
+import { useNavigate } from "react-router-dom";
+import { addFolder, updateFolder } from "../../../pages/MainPage/services";
+import useAlertStore from "../../../stores/alertStore";
+import { useFolderStore } from "../../../stores/foldersStore";
+
+const useFolderSubmit = (setOpen, folderToEdit) => {
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const navigate = useNavigate();
+
+  const onSubmit = (data) => {
+    if (folderToEdit) {
+      updateFolder(data, folderToEdit?.id!).then(
+        () => {
+          setSuccessData({
+            title: "Folder updated successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+          navigate(`all/folder/${folderToEdit.id}`, {
+            state: { folderId: folderToEdit.id },
+          });
+        },
+        //TODO: LOOK THIS ERRO MORE CAREFULLY
+        (reason) => {
+          if (reason) {
+            setErrorData({
+              title: `Error updating folder.`,
+            });
+            console.error(reason);
+          } else {
+            getFoldersApi(true);
+            setOpen(false);
+          }
+        },
+      );
+    } else {
+      addFolder(data).then(
+        (res) => {
+          setSuccessData({
+            title: "Folder created successfully.",
+          });
+          getFoldersApi(true);
+          setOpen(false);
+          navigate(`all/folder/${res.id}`, { state: { folderId: res.id } });
+        },
+        () => {
+          setErrorData({
+            title: `Error creating folder.`,
+          });
+        },
+      );
+    }
+  };
+
+  return { onSubmit, open, setOpen };
+};
+
+export default useFolderSubmit;

src/frontend/src/modals/foldersModal/index.tsx

@@ -0,0 +1,79 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import ForwardedIconComponent from "../../components/genericIconComponent";
+import { Button } from "../../components/ui/button";
+import { Form } from "../../components/ui/form";
+import { useFolderStore } from "../../stores/foldersStore";
+import BaseModal from "../baseModal";
+import FolderForms from "./component";
+import { FolderFormsSchema } from "./entities";
+import useFolderSubmit from "./hooks/submit-folder";
+
+type FoldersModalProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+export default function FoldersModal({
+  open,
+  setOpen,
+}: FoldersModalProps): JSX.Element {
+  const form = useForm<z.infer<typeof FolderFormsSchema>>({
+    resolver: zodResolver(FolderFormsSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      components: [],
+      flows: [],
+    },
+    mode: "all",
+  });
+
+  const folderToEdit = useFolderStore((state) => state.folderToEdit);
+  const { onSubmit: onSubmitFolder } = useFolderSubmit(setOpen, folderToEdit);
+
+  const onSubmit = (data) => {
+    onSubmitFolder(data);
+  };
+
+  return (
+    <>
+      <BaseModal size="x-small" open={open} setOpen={setOpen}>
+        <BaseModal.Header
+          description={`${folderToEdit ? "Edit a folder" : "Add a new folder"}`}
+        >
+          <span className="pr-2" data-testid="modal-title">
+            {folderToEdit ? "Edit" : "New"} Folder
+          </span>
+          <ForwardedIconComponent
+            name={folderToEdit ? "Pencil" : "Plus"}
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </BaseModal.Header>
+        <BaseModal.Content>
+          <div>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(onSubmit)}>
+                <FolderForms
+                  folderToEdit={folderToEdit}
+                  control={form.control}
+                  setValue={form.setValue}
+                />
+
+                <Button
+                  className="float-right mt-6"
+                  type="submit"
+                  disabled={!form.formState.isValid}
+                >
+                  {folderToEdit ? "Edit" : "Save"} Folder
+                </Button>
+              </form>
+            </Form>
+          </div>
+        </BaseModal.Content>
+      </BaseModal>
+    </>
+  );
+}

src/frontend/src/modals/newFlowModal/components/NewFlowCardComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import {
   Card,
   CardContent,
@@ -6,15 +6,21 @@ import {
   CardTitle,
 } from "../../../../components/ui/card";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
 
 export default function NewFlowCardComponent() {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const navigate = useNavigate();
+  const location = useLocation();
+  const folderId = location?.state?.folderId;
+  const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+
   return (
     <Card
       onClick={() => {
         addFlow(true).then((id) => {
-          navigate("/flow/" + id);
+          setFolderUrl(folderId ?? "");
+          navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"

src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx

@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 /// <reference types="vite-plugin-svgr/client" />
 //@ts-ignore
 import { ReactComponent as TransferFiles } from "../../../../assets/undraw_transfer_files_re_a2a9.svg";
@@ -22,6 +22,7 @@ import {
   CardTitle,
 } from "../../../../components/ui/card";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
 import { UndrawCardComponentProps } from "../../../../types/components";
 import { updateIds } from "../../../../utils/reactflowUtils";
 
@@ -30,6 +31,9 @@ export default function UndrawCardComponent({
 }: UndrawCardComponentProps): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const navigate = useNavigate();
+  const location = useLocation();
+  const folderId = location?.state?.folderId;
+  const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
 
   function selectImage() {
     switch (flow.name) {
@@ -111,7 +115,8 @@ export default function UndrawCardComponent({
       onClick={() => {
         updateIds(flow.data!);
         addFlow(true, flow).then((id) => {
-          navigate("/flow/" + id);
+          setFolderUrl(folderId ?? "");
+          navigate(`/flow/${id}${folderId ? `/folder/${folderId}` : ""}`);
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"

src/frontend/src/modals/newFlowModal/index.tsx

@@ -10,7 +10,7 @@ export default function NewFlowModal({
 }: newFlowModalPropsType): JSX.Element {
   const examples = useFlowsManagerStore((state) => state.examples);
 
-  examples.forEach((example) => {
+  examples?.forEach((example) => {
     if (example.name === "Blog Writter") {
       example.name = "Blog Writer";
     }
@@ -22,24 +22,17 @@ export default function NewFlowModal({
         <span className="pr-2" data-testid="modal-title">
           Get Started
         </span>
-        {/* <IconComponent
-            name="Group"
-            className="h-6 w-6 stroke-2 text-primary "
-            aria-hidden="true"
-          /> */}
       </BaseModal.Header>
       <BaseModal.Content>
         <div className=" mb-5 grid h-fit w-full grid-cols-3 gap-4 overflow-auto pb-6 custom-scroll">
           <NewFlowCardComponent />
-          {/* {examples.map((example, idx) => {
-            return <UndrawCardComponent key={idx} flow={example} />;
-          })} */}
+
           {examples.find((e) => e.name == "Basic Prompting (Hello, World)") && (
             <UndrawCardComponent
-              key={1}
+              key={0}
               flow={
                 examples.find(
-                  (e) => e.name == "Basic Prompting (Hello, World)"
+                  (e) => e.name == "Basic Prompting (Hello, World)",
                 )!
               }
             />
@@ -52,19 +45,19 @@ export default function NewFlowModal({
           )}
           {examples.find((e) => e.name == "Document QA") && (
             <UndrawCardComponent
-              key={1}
+              key={2}
               flow={examples.find((e) => e.name == "Document QA")!}
             />
           )}
           {examples.find((e) => e.name == "Blog Writer") && (
             <UndrawCardComponent
-              key={1}
+              key={3}
               flow={examples.find((e) => e.name == "Blog Writer")!}
             />
           )}
           {examples.find((e) => e.name == "Vector Store RAG") && (
             <UndrawCardComponent
-              key={1}
+              key={4}
               flow={examples.find((e) => e.name == "Vector Store RAG")!}
             />
           )}

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -1,207 +0,0 @@
-import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import CollectionCardComponent from "../../../../components/cardComponent";
-import CardsWrapComponent from "../../../../components/cardsWrapComponent";
-import IconComponent from "../../../../components/genericIconComponent";
-import PaginatorComponent from "../../../../components/paginatorComponent";
-import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
-import { Button } from "../../../../components/ui/button";
-import {
-  CONSOLE_ERROR_MSG,
-  UPLOAD_ALERT_LIST,
-  WRONG_FILE_ERROR_ALERT,
-} from "../../../../constants/alerts_constants";
-import useAlertStore from "../../../../stores/alertStore";
-import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { FlowType } from "../../../../types/flow";
-export default function ComponentsComponent({
-  is_component = true,
-}: {
-  is_component?: boolean;
-}) {
-  const addFlow = useFlowsManagerStore((state) => state.addFlow);
-  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
-  const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
-  const isLoading = useFlowsManagerStore((state) => state.isLoading);
-  const flows = useFlowsManagerStore((state) => state.flows);
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const [pageSize, setPageSize] = useState(20);
-  const [pageIndex, setPageIndex] = useState(1);
-
-  const navigate = useNavigate();
-  const all: FlowType[] = flows
-    .filter((f) => (f.is_component ?? false) === is_component)
-    .sort((a, b) => {
-      if (a?.updated_at && b?.updated_at) {
-        return (
-          new Date(b?.updated_at!).getTime() -
-          new Date(a?.updated_at!).getTime()
-        );
-      } else if (a?.updated_at && !b?.updated_at) {
-        return 1;
-      } else if (!a?.updated_at && b?.updated_at) {
-        return -1;
-      } else {
-        return (
-          new Date(b?.date_created!).getTime() -
-          new Date(a?.date_created!).getTime()
-        );
-      }
-    });
-  const start = (pageIndex - 1) * pageSize;
-  const end = start + pageSize;
-  const data: FlowType[] = all.slice(start, end);
-
-  const name = is_component ? "Component" : "Flow";
-
-  const onFileDrop = (e) => {
-    e.preventDefault();
-    if (e.dataTransfer.types.some((types) => types === "Files")) {
-      if (e.dataTransfer.files.item(0).type === "application/json") {
-        uploadFlow({
-          newProject: true,
-          file: e.dataTransfer.files.item(0)!,
-          isComponent: is_component,
-        })
-          .then(() => {
-            setSuccessData({
-              title: `${
-                is_component ? "Component" : "Flow"
-              } uploaded successfully`,
-            });
-          })
-          .catch((error) => {
-            setErrorData({
-              title: CONSOLE_ERROR_MSG,
-              list: [error],
-            });
-          });
-      } else {
-        setErrorData({
-          title: WRONG_FILE_ERROR_ALERT,
-          list: [UPLOAD_ALERT_LIST],
-        });
-      }
-    }
-  };
-  function resetFilter() {
-    setPageIndex(1);
-    setPageSize(20);
-  }
-  return (
-    <CardsWrapComponent
-      onFileDrop={onFileDrop}
-      dragMessage={`Drag your ${name} here`}
-    >
-      <div className="flex h-full w-full flex-col justify-between">
-        <div className="flex w-full flex-col gap-4">
-          {!isLoading && data.length === 0 ? (
-            <div className="mt-6 flex w-full items-center justify-center text-center">
-              <div className="flex-max-width h-full flex-col">
-                <div className="flex w-full flex-col gap-4">
-                  <div className="grid w-full gap-4">
-                    Flows and components can be created using Langflow.
-                  </div>
-                  <div className="align-center flex w-full justify-center gap-1">
-                    <span>New?</span>
-                    <span className="transition-colors hover:text-muted-foreground">
-                      <button
-                        onClick={() => {
-                          addFlow(true).then((id) => {
-                            navigate("/flow/" + id);
-                          });
-                        }}
-                        className="underline"
-                      >
-                        Start Here
-                      </button>
-                      .
-                    </span>
-                    <span className="animate-pulse">🚀</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
-              {isLoading === false && data?.length > 0 ? (
-                data?.map((item, idx) => (
-                  <CollectionCardComponent
-                    onDelete={() => {
-                      removeFlow(item.id);
-                      setSuccessData({
-                        title: `${
-                          item.is_component ? "Component" : "Flow"
-                        } deleted successfully!`,
-                      });
-                      resetFilter();
-                    }}
-                    key={idx}
-                    data={{ is_component: item.is_component ?? false, ...item }}
-                    disabled={isLoading}
-                    data-testid={"edit-flow-button-" + item.id + "-" + idx}
-                    button={
-                      !is_component ? (
-                        <Link to={"/flow/" + item.id}>
-                          <Button
-                            tabIndex={-1}
-                            variant="outline"
-                            size="sm"
-                            className="whitespace-nowrap "
-                            data-testid={
-                              "edit-flow-button-" + item.id + "-" + idx
-                            }
-                          >
-                            <IconComponent
-                              name="ExternalLink"
-                              className="main-page-nav-button select-none"
-                            />
-                            Edit Flow
-                          </Button>
-                        </Link>
-                      ) : (
-                        <></>
-                      )
-                    }
-                    onClick={
-                      !is_component
-                        ? () => {
-                            navigate("/flow/" + item.id);
-                          }
-                        : undefined
-                    }
-                    playground={!is_component}
-                  />
-                ))
-              ) : (
-                <>
-                  <SkeletonCardComponent />
-                  <SkeletonCardComponent />
-                </>
-              )}
-            </div>
-          )}
-        </div>
-        {!isLoading && data.length > 0 && (
-          <div className="relative py-6">
-            <PaginatorComponent
-              storeComponent={true}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              rowsCount={[10, 20, 50, 100]}
-              totalRowsCount={
-                flows.filter((f) => (f.is_component ?? false) === is_component)
-                  .length
-              }
-              paginate={(pageSize, pageIndex) => {
-                setPageIndex(pageIndex);
-                setPageSize(pageSize);
-              }}
-            ></PaginatorComponent>
-          </div>
-        )}
-      </div>
-    </CardsWrapComponent>
-  );
-}

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -0,0 +1,303 @@
+import { cloneDeep } from "lodash";
+import { useEffect, useMemo, useState } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import CollectionCardComponent from "../../../../components/cardComponent";
+import CardsWrapComponent from "../../../../components/cardsWrapComponent";
+import IconComponent from "../../../../components/genericIconComponent";
+import PaginatorComponent from "../../../../components/paginatorComponent";
+import { SkeletonCardComponent } from "../../../../components/skeletonCardComponent";
+import { Button } from "../../../../components/ui/button";
+import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
+import useAlertStore from "../../../../stores/alertStore";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+import { useFolderStore } from "../../../../stores/foldersStore";
+import { FlowType } from "../../../../types/flow";
+import useFileDrop from "../../hooks/use-on-file-drop";
+import { getNameByType } from "../../utils/get-name-by-type";
+import { sortFlows } from "../../utils/sort-flows";
+import EmptyComponent from "../emptyComponent";
+import HeaderComponent from "../headerComponent";
+
+export default function ComponentsComponent({
+  type = "all",
+}: {
+  type?: string;
+}) {
+  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const removeFlow = useFlowsManagerStore((state) => state.removeFlow);
+  const isLoading = useFlowsManagerStore((state) => state.isLoading);
+  const setAllFlows = useFlowsManagerStore((state) => state.setAllFlows);
+  const allFlows = useFlowsManagerStore((state) => state.allFlows);
+
+  const flowsFromFolder = useFolderStore(
+    (state) => state.selectedFolder?.flows,
+  );
+
+  const setSuccessData = useAlertStore((state) => state.setSuccessData);
+  const setErrorData = useAlertStore((state) => state.setErrorData);
+  const [openDelete, setOpenDelete] = useState(false);
+  const searchFlowsComponents = useFlowsManagerStore(
+    (state) => state.searchFlowsComponents,
+  );
+
+  const setSelectedFlowsComponentsCards = useFlowsManagerStore(
+    (state) => state.setSelectedFlowsComponentsCards,
+  );
+
+  const selectedFlowsComponentsCards = useFlowsManagerStore(
+    (state) => state.selectedFlowsComponentsCards,
+  );
+
+  const [handleFileDrop] = useFileDrop(uploadFlow, type)!;
+  const [pageSize, setPageSize] = useState(20);
+  const [pageIndex, setPageIndex] = useState(1);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const all: FlowType[] = sortFlows(allFlows, type);
+  const start = (pageIndex - 1) * pageSize;
+  const end = start + pageSize;
+  const data: FlowType[] = all?.slice(start, end);
+
+  const name = getNameByType(type);
+
+  const folderId = location?.state?.folderId;
+  const getFolderById = useFolderStore((state) => state.getFolderById);
+  const myCollectionId = useFolderStore((state) => state.myCollectionId);
+  const getFoldersApi = useFolderStore((state) => state.getFoldersApi);
+  const setFolderUrl = useFolderStore((state) => state.setFolderUrl);
+
+  useEffect(() => {
+    setFolderUrl(folderId ?? "");
+    setSelectedFlowsComponentsCards([]);
+    handleSelectAll(false);
+    getFolderById(folderId ? folderId : myCollectionId);
+  }, [location]);
+
+  useEffect(() => {
+    const newFlows = cloneDeep(flowsFromFolder!);
+    const filteredFlows = newFlows?.filter(
+      (f) =>
+        f.name.toLowerCase().includes(searchFlowsComponents.toLowerCase()) ||
+        f.description
+          .toLowerCase()
+          .includes(searchFlowsComponents.toLowerCase()),
+    );
+
+    if (searchFlowsComponents === "") {
+      setAllFlows(flowsFromFolder!);
+    }
+
+    setAllFlows(filteredFlows);
+  }, [searchFlowsComponents]);
+
+  const resetFilter = () => {
+    setPageIndex(1);
+    setPageSize(20);
+  };
+
+  const { getValues, control, setValue } = useForm();
+  const entireFormValues = useWatch({ control });
+
+  const methods = useForm();
+  const handleSelectAll = (select) => {
+    const flowsFromFolderIds = flowsFromFolder?.map((f) => f.id);
+    if (select) {
+      Object.keys(getValues()).forEach((key) => {
+        if (!flowsFromFolderIds?.includes(key)) return;
+        setValue(key, true);
+      });
+      return;
+    }
+
+    Object.keys(getValues()).forEach((key) => {
+      setValue(key, false);
+    });
+  };
+
+  const handleSelectOptionsChange = () => {
+    const hasSelected = selectedFlowsComponentsCards?.length > 0;
+    if (!hasSelected) {
+      setErrorData({
+        title: "No items selected",
+        list: ["Please select items to delete"],
+      });
+      return;
+    }
+    setOpenDelete(true);
+  };
+
+  const handleDeleteMultiple = () => {
+    removeFlow(selectedFlowsComponentsCards)
+      .then(() => {
+        resetFilter();
+        getFoldersApi(true);
+        if (!folderId || folderId === myCollectionId) {
+          getFolderById(folderId ? folderId : myCollectionId);
+        }
+        setSuccessData({
+          title: "Selected items deleted successfully!",
+        });
+      })
+      .catch(() => {
+        setErrorData({
+          title: "Error deleting items",
+          list: ["Please try again"],
+        });
+      });
+  };
+
+  useEffect(() => {
+    if (!entireFormValues || Object.keys(entireFormValues).length === 0) return;
+    const selectedFlows: string[] = Object.keys(entireFormValues).filter(
+      (key) => {
+        if (entireFormValues[key] === true) {
+          return true;
+        }
+        return false;
+      },
+    );
+
+    setSelectedFlowsComponentsCards(selectedFlows);
+  }, [entireFormValues]);
+
+  const getDescriptionModal = useMemo(() => {
+    const getTypeLabel = (type) => {
+      const labels = {
+        all: "item",
+        component: "component",
+        flow: "flow",
+      };
+      return labels[type] || "";
+    };
+
+    const getPluralizedLabel = (type) => {
+      const labels = {
+        all: "items",
+        component: "components",
+        flow: "flows",
+      };
+      return labels[type] || "";
+    };
+
+    if (selectedFlowsComponentsCards?.length === 1) {
+      return getTypeLabel(type);
+    }
+    return getPluralizedLabel(type);
+  }, [selectedFlowsComponentsCards, type]);
+
+  const getTotalRowsCount = () => {
+    if (type === "all") return allFlows?.length;
+
+    return allFlows?.filter(
+      (f) => (f.is_component ?? false) === (type === "component"),
+    )?.length;
+  };
+
+  return (
+    <>
+      {allFlows?.length > 0 && (
+        <HeaderComponent
+          handleDelete={handleSelectOptionsChange}
+          handleSelectAll={handleSelectAll}
+          disableDelete={!(selectedFlowsComponentsCards?.length > 0)}
+        />
+      )}
+
+      <CardsWrapComponent
+        onFileDrop={handleFileDrop}
+        dragMessage={`Drag your ${name} here`}
+      >
+        <div className="flex h-full w-full flex-col justify-between">
+          <div className="flex w-full flex-col gap-4">
+            {!isLoading && data?.length === 0 ? (
+              <EmptyComponent />
+            ) : (
+              <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
+                {isLoading === false && data?.length > 0 ? (
+                  <>
+                    {data?.map((item) => (
+                      <FormProvider {...methods} key={item.id}>
+                        <form>
+                          <CollectionCardComponent
+                            is_component={type === "component"}
+                            data={{
+                              is_component: item.is_component ?? false,
+                              ...item,
+                            }}
+                            disabled={isLoading}
+                            data-testid={"edit-flow-button-" + item.id}
+                            button={
+                              !item.is_component ? (
+                                <Link to={"/flow/" + item.id}>
+                                  <Button
+                                    tabIndex={-1}
+                                    variant="outline"
+                                    size="sm"
+                                    className="whitespace-nowrap"
+                                    data-testid={"edit-flow-button-" + item.id}
+                                  >
+                                    <IconComponent
+                                      name="ExternalLink"
+                                      className="main-page-nav-button select-none"
+                                    />
+                                    Edit Flow
+                                  </Button>
+                                </Link>
+                              ) : (
+                                <></>
+                              )
+                            }
+                            onClick={
+                              !item.is_component
+                                ? () => {
+                                    navigate("/flow/" + item.id);
+                                  }
+                                : undefined
+                            }
+                            playground={!item.is_component}
+                            control={control}
+                          />
+                        </form>
+                      </FormProvider>
+                    ))}
+                  </>
+                ) : (
+                  <>
+                    <SkeletonCardComponent />
+                    <SkeletonCardComponent />
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          {!isLoading && data?.length > 0 && (
+            <div className="relative py-6">
+              <PaginatorComponent
+                storeComponent={true}
+                pageIndex={pageIndex}
+                pageSize={pageSize}
+                rowsCount={[10, 20, 50, 100]}
+                totalRowsCount={getTotalRowsCount()}
+                paginate={(pageSize, pageIndex) => {
+                  setPageIndex(pageIndex);
+                  setPageSize(pageSize);
+                }}
+              ></PaginatorComponent>
+            </div>
+          )}
+        </div>
+      </CardsWrapComponent>
+      {openDelete && (
+        <DeleteConfirmationModal
+          open={openDelete}
+          setOpen={setOpenDelete}
+          onConfirm={handleDeleteMultiple}
+          description={getDescriptionModal}
+        >
+          <></>
+        </DeleteConfirmationModal>
+      )}
+    </>
+  );
+}

src/frontend/src/pages/MainPage/components/emptyComponent/index.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router-dom";
+import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
+
+type EmptyComponentProps = {};
+
+const EmptyComponent = ({}: EmptyComponentProps) => {
+  const addFlow = useFlowsManagerStore((state) => state.addFlow);
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <div className="mt-6 flex w-full items-center justify-center text-center">
+        <div className="flex-max-width h-full flex-col">
+          <div className="flex w-full flex-col gap-4">
+            <div className="grid w-full gap-4 text-muted-foreground">
+              Flows and components can be created using Langflow.
+            </div>
+            <div className="align-center flex w-full justify-center gap-1 ">
+              <span className="text-muted-foreground">New?</span>
+              <span className="transition-colors hover:text-muted-foreground">
+                <button
+                  onClick={() => {
+                    addFlow(true).then((id) => {
+                      navigate("/flow/" + id);
+                    });
+                  }}
+                  className="underline"
+                >
+                  Start Here
+                </button>
+                .
+              </span>
+              <span className="animate-pulse">🚀</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default EmptyComponent;