tests: new tests folders organization (#3716)

* new tests folders organizations

* 📝 (nightly_build.yml): update tests_folder path from "tests/scheduled" to "tests/core" to reflect the correct location of the tests folder

* renaming test folder

* changing e2e to integrations folder

* 📝 (frontend/tsconfig.json): update test file paths to reflect changes in folder structure for better organization and clarity

* change assets folder

* 📝 (frontend): update file paths to remove redundant 'core' directory in test assets

* 📝 (Document QA.spec.ts, Vector Store.spec.ts, fileUploadComponent.spec.ts): Update file paths to correctly reference test assets in integration and unit tests.

* github suggestions

src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts

@@ -0,0 +1,227 @@
+import { test } from "@playwright/test";
+
+test("select and delete all", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByText("Select All").click();
+  await page.getByText("Unselect All").isVisible();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("Delete").last().click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Selected items deleted successfully").isVisible();
+});
+
+test("select and delete a flow", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByTestId("checkbox-component").first().click();
+  await page.getByTestId("icon-Trash2").click();
+  await page.getByText("Delete").last().click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Selected items deleted successfully").isVisible();
+});
+
+test("search flows", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByText("Select All").isVisible();
+  await page.getByText("New Project", { exact: true }).click();
+  await page.getByRole("heading", { name: "Memory Chatbot" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+  await page.getByText("New Project", { exact: true }).click();
+  await page.getByRole("heading", { name: "Document QA" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+  await page.getByPlaceholder("Search flows").fill("Memory Chatbot");
+  await page.getByText("Memory Chatbot", { exact: true }).isVisible();
+  await page.getByText("Document QA", { exact: true }).isHidden();
+  await page.getByText("Basic Prompting", { exact: true }).isHidden();
+});
+
+test("search components", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByText("Chat Input").first().click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.keyboard.press("Escape");
+  await page
+    .getByText("Prompt", {
+      exact: true,
+    })
+    .first()
+    .click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByText("OpenAI", {
+      exact: true,
+    })
+    .first()
+    .click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.keyboard.press("Escape");
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  const exitButton = await page.getByText("Exit", { exact: true }).count();
+
+  if (exitButton > 0) {
+    await page.getByText("Exit", { exact: true }).click();
+  }
+
+  await page
+    .getByText("Components", {
+      exact: true,
+    })
+    .click();
+
+  await page.getByPlaceholder("Search components").fill("Chat Input");
+  await page.getByText("Chat Input", { exact: true }).isVisible();
+  await page.getByText("Prompt", { exact: true }).isHidden();
+  await page.getByText("OpenAI", { exact: true }).isHidden();
+});

src/frontend/tests/core/features/auto-login-off.spec.ts

@@ -0,0 +1,255 @@
+import { expect, test } from "@playwright/test";
+
+test("when auto_login is false, admin can CRUD user's and should see just your own flows", async ({
+  page,
+}) => {
+  await page.route("**/api/v1/auto_login", (route) => {
+    route.fulfill({
+      status: 500,
+      contentType: "application/json",
+      body: JSON.stringify({
+        detail: { auto_login: false },
+      }),
+    });
+  });
+
+  const randomName = Math.random().toString(36).substring(5);
+  const randomPassword = Math.random().toString(36).substring(5);
+  const secondRandomName = Math.random().toString(36).substring(5);
+  const randomFlowName = Math.random().toString(36).substring(5);
+  const secondRandomFlowName = Math.random().toString(36).substring(5);
+
+  await page.goto("/");
+
+  await page.waitForSelector("text=sign in to langflow", { timeout: 30000 });
+
+  await page.getByPlaceholder("Username").fill("langflow");
+  await page.getByPlaceholder("Password").fill("langflow");
+
+  await page.getByRole("button", { name: "Sign In" }).click();
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("user-profile-settings").click();
+
+  await page.getByText("Admin Page", { exact: true }).click();
+
+  //CRUD an user
+  await page.getByText("New User", { exact: true }).click();
+
+  await page.getByPlaceholder("Username").last().fill(randomName);
+  await page.locator('input[name="password"]').fill(randomPassword);
+  await page.locator('input[name="confirmpassword"]').fill(randomPassword);
+
+  await page.waitForTimeout(1000);
+
+  await page.locator("#is_active").click();
+
+  await page.getByText("Save", { exact: true }).click();
+
+  await page.waitForSelector("text=new user added", { timeout: 30000 });
+
+  expect(await page.getByText(randomName, { exact: true }).isVisible()).toBe(
+    true,
+  );
+
+  await page.getByTestId("icon-Trash2").last().click();
+  await page.getByText("Delete", { exact: true }).last().click();
+
+  await page.waitForSelector("text=user deleted", { timeout: 30000 });
+
+  expect(await page.getByText(randomName, { exact: true }).isVisible()).toBe(
+    false,
+  );
+
+  await page.getByText("New User", { exact: true }).click();
+
+  await page.getByPlaceholder("Username").last().fill(randomName);
+  await page.locator('input[name="password"]').fill(randomPassword);
+  await page.locator('input[name="confirmpassword"]').fill(randomPassword);
+
+  await page.waitForTimeout(1000);
+
+  await page.locator("#is_active").click();
+
+  await page.getByText("Save", { exact: true }).click();
+
+  await page.waitForSelector("text=new user added", { timeout: 30000 });
+
+  await page.getByPlaceholder("Username").last().fill(randomName);
+
+  await page.getByTestId("icon-Pencil").last().click();
+
+  await page.getByPlaceholder("Username").last().fill(secondRandomName);
+
+  await page.getByText("Save", { exact: true }).click();
+
+  await page.waitForSelector("text=user edited", { timeout: 30000 });
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await page.getByText(secondRandomName, { exact: true }).isVisible(),
+  ).toBe(true);
+
+  //user must see just your own flows
+  await page.getByText("My Collection", { exact: true }).last().click();
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings", { exact: true }).last().click();
+
+  await page.getByPlaceholder("Flow Name").fill(randomFlowName);
+
+  await page.getByText("Save", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.waitForSelector('[data-testid="search-store-input"]:enabled', {
+    timeout: 30000,
+  });
+
+  expect(
+    await page.getByText(randomFlowName, { exact: true }).last().isVisible(),
+  ).toBe(true);
+
+  await page.getByTestId("user-profile-settings").click();
+
+  await page.getByText("Log Out", { exact: true }).click();
+
+  await page.waitForSelector("text=sign in to langflow", { timeout: 30000 });
+
+  await page.getByPlaceholder("Username").fill(secondRandomName);
+  await page.getByPlaceholder("Password").fill(randomPassword);
+  await page.waitForTimeout(1000);
+
+  await page.getByRole("button", { name: "Sign In" }).click();
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  expect(
+    (
+      await page.waitForSelector("text=this folder is empty", {
+        timeout: 30000,
+      })
+    ).isVisible(),
+  );
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  await page.getByText("New Project", { exact: true }).click();
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings", { exact: true }).last().click();
+
+  await page.getByPlaceholder("Flow Name").fill(secondRandomFlowName);
+
+  await page.getByText("Save", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.waitForSelector('[data-testid="search-store-input"]:enabled', {
+    timeout: 30000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
+  ).toBe(true);
+
+  expect(
+    await page.getByText(randomFlowName, { exact: true }).isVisible(),
+  ).toBe(false);
+
+  await page.getByTestId("user-profile-settings").click();
+
+  await page.getByText("Log Out", { exact: true }).click();
+
+  await page.waitForSelector("text=sign in to langflow", { timeout: 30000 });
+
+  await page.getByPlaceholder("Username").fill("langflow");
+  await page.getByPlaceholder("Password").fill("langflow");
+
+  await page.getByRole("button", { name: "Sign In" }).click();
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[data-testid="search-store-input"]:enabled', {
+    timeout: 30000,
+  });
+
+  expect(
+    await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
+  ).toBe(false);
+  expect(
+    await page.getByText(randomFlowName, { exact: true }).isVisible(),
+  ).toBe(true);
+});

src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts

@@ -0,0 +1,120 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must be able to send an image on chat", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForSelector("text=Chat Input", { timeout: 30000 });
+
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByText("Close").last().click();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  // Read the image file as a binary string
+  const filePath = "tests/assets/chain.png";
+  const fileContent = readFileSync(filePath, "base64");
+
+  // Create the DataTransfer and File objects within the browser context
+  const dataTransfer = await page.evaluateHandle(
+    ({ fileContent }) => {
+      const dt = new DataTransfer();
+      const byteCharacters = atob(fileContent);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const file = new File([byteArray], "chain.png", { type: "image/png" });
+      dt.items.add(file);
+      return dt;
+    },
+    { fileContent },
+  );
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  // Locate the target element
+  const element = await page.getByTestId("input-chat-playground");
+
+  // Dispatch the drop event on the target element
+  await element.dispatchEvent("drop", { dataTransfer });
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=chain.png", { timeout: 30000 });
+
+  await page.getByText("chain.png").isVisible();
+
+  await page.getByText("Close", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Restart").isHidden();
+});

src/frontend/tests/core/features/filterEdge-shard-0.spec.ts

@@ -0,0 +1,157 @@
+import { expect, test } from "@playwright/test";
+
+test("user must see on handle hover a tooltip with possibility connections", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("retrievalqa");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsRetrieval QA")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const outputElements = await page
+    .getByTestId("handle-retrievalqa-shownode-text-right")
+    .all();
+  let visibleElementHandle;
+
+  for (const element of outputElements) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    const testIds = [
+      "available-output-inputs",
+      "available-output-chains",
+      "available-output-textsplitters",
+      "available-output-retrievers",
+      "available-output-prototypes",
+      "available-output-embeddings",
+      "available-output-data",
+      "available-output-vectorstores",
+      "available-output-memories",
+      "available-output-models",
+      "available-output-outputs",
+      "available-output-agents",
+      "available-output-helpers",
+    ];
+
+    await Promise.all(
+      testIds.map((id) => expect(page.getByTestId(id).first()).toBeVisible()),
+    );
+
+    await page.getByTestId("icon-X").click();
+    await page.waitForTimeout(500);
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const rqaChainInputElements1 = await page
+    .getByTestId("handle-retrievalqa-shownode-language model-left")
+    .all();
+
+  for (const element of rqaChainInputElements1) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-input-models").first(),
+    ).toBeVisible();
+    await page.waitForTimeout(1000);
+
+    await page.getByTestId("icon-Search").click();
+
+    await page.waitForTimeout(500);
+  });
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const rqaChainInputElements0 = await page
+    .getByTestId("handle-retrievalqa-shownode-retriever-left")
+    .all();
+
+  for (const element of rqaChainInputElements0) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await page.waitForTimeout(2500);
+
+    await expect(
+      page.getByTestId("available-input-retrievers").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-vectorstores").first(),
+    ).toBeVisible();
+
+    await page.waitForTimeout(500);
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const rqaChainInputElements2 = await page
+    .getByTestId("handle-retrievalqa-shownode-memory-left")
+    .all();
+
+  for (const element of rqaChainInputElements2) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-input-helpers").first(),
+    ).toBeVisible();
+  });
+});

src/frontend/tests/core/features/filterSidebar.spec.ts

@@ -0,0 +1,154 @@
+import { expect, test } from "@playwright/test";
+
+test("user must see on handle click the possibility connections - LLMChain", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(3000);
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("api request");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("dataAPI Request")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.waitForTimeout(500);
+
+  await page.getByTestId("handle-apirequest-shownode-urls-left").click();
+
+  let disclosureTestIds = [
+    "disclosure-inputs",
+    "disclosure-outputs",
+    "disclosure-prompts",
+    "disclosure-models",
+    "disclosure-helpers",
+    "disclosure-agents",
+    "disclosure-chains",
+    "disclosure-prototypes",
+  ];
+
+  let specificTestIds = [
+    "inputsChat Input",
+    "outputsChat Output",
+    "promptsPrompt",
+    "modelsAmazon Bedrock",
+    "helpersChat Memory",
+    "agentsCSVAgent",
+    "chainsConversationChain",
+    "prototypesConditional Router",
+  ];
+
+  await Promise.all(
+    disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
+  );
+
+  await Promise.all(
+    specificTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
+  );
+
+  await page.getByPlaceholder("Search").click();
+
+  let notVisibleTestIds = [
+    "inputsChat Input",
+    "outputsChat Output",
+    "promptsPrompt",
+    "modelsAmazon Bedrock",
+    "helpersChat Memory",
+    "agentsTool Calling Agent",
+    "chainsConversationChain",
+    "prototypesConditional Router",
+  ];
+
+  await Promise.all(
+    notVisibleTestIds.map((id) =>
+      expect(page.getByTestId(id)).not.toBeVisible(),
+    ),
+  );
+
+  await page.getByTestId("handle-apirequest-shownode-headers-left").click();
+
+  disclosureTestIds = [
+    "disclosure-data",
+    "disclosure-helpers",
+    "disclosure-vector stores",
+    "disclosure-utilities",
+    "disclosure-prototypes",
+    "disclosure-retrievers",
+    "disclosure-text splitters",
+    "disclosure-tools",
+  ];
+
+  specificTestIds = [
+    "dataAPI Request",
+    "helpersChat Memory",
+    "vectorstoresAstra DB",
+    "toolsSearch API",
+    "prototypesSub Flow",
+    "retrieversSelf Query Retriever",
+    "textsplittersCharacterTextSplitter",
+  ];
+
+  await Promise.all(
+    disclosureTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
+  );
+
+  await Promise.all(
+    specificTestIds.map((id) => expect(page.getByTestId(id)).toBeVisible()),
+  );
+
+  await page.getByPlaceholder("Search").click();
+
+  notVisibleTestIds = [
+    "dataAPI Request",
+    "helpersChat Memory",
+    "vectorstoresAstra DB",
+    "toolsSearch API",
+    "prototypesSub Flow",
+    "retrieversSelf Query Retriever",
+    "textsplittersCharacterTextSplitter",
+  ];
+
+  await Promise.all(
+    notVisibleTestIds.map((id) =>
+      expect(page.getByTestId(id)).not.toBeVisible(),
+    ),
+  );
+});

src/frontend/tests/core/features/folders.spec.ts

@@ -0,0 +1,184 @@
+import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test("CRUD folders", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByText("My Collection").nth(2).isVisible();
+  await page.getByPlaceholder("Search flows").isVisible();
+  await page.getByText("Flows").isVisible();
+  await page.getByText("Components").isVisible();
+  await page.getByText("All").first().isVisible();
+  await page.getByText("Select All").isVisible();
+
+  await page.getByTestId("add-folder-button").click();
+  await page.getByText("New Folder").last().isVisible();
+  await page.waitForTimeout(1000);
+  await page.getByText("New Folder").last().dblclick();
+
+  const element = await page.getByTestId("input-folder");
+  await element.fill("new folder test name");
+
+  await page.getByText("My Projects").last().click({
+    force: true,
+  });
+
+  await page.getByText("new folder test name").last().waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  await page
+    .getByText("new folder test name")
+    .last()
+    .hover()
+    .then(async () => {
+      await page.getByTestId("btn-delete-folder").last().click();
+    });
+
+  await page.getByText("Delete").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Folder deleted successfully").isVisible();
+});
+
+test("add a flow into a folder by drag and drop", async ({ page }) => {
+  await page.goto("/");
+
+  await page.waitForSelector("text=my collection", {
+    timeout: 50000,
+  });
+
+  const jsonContent = readFileSync("tests/assets/collection.json", "utf-8");
+
+  // Wait for the target element to be available before evaluation
+
+  await page.waitForSelector('[data-testid="sidebar-nav-My Projects"]', {
+    timeout: 100000,
+  });
+  // Create the DataTransfer and File
+  const dataTransfer = await page.evaluateHandle((data) => {
+    const dt = new DataTransfer();
+    // Convert the buffer to a hex array
+    const file = new File([data], "flowtest.json", {
+      type: "application/json",
+    });
+    dt.items.add(file);
+    return dt;
+  }, jsonContent);
+
+  // Now dispatch
+  await page.getByTestId("sidebar-nav-My Projects").dispatchEvent("drop", {
+    dataTransfer,
+  });
+
+  await page.waitForTimeout(3000);
+
+  const genericNode = page.getByTestId("div-generic-node");
+  const elementCount = await genericNode?.count();
+  if (elementCount > 0) {
+    expect(true).toBeTruthy();
+  }
+
+  await page.getByTestId("sidebar-nav-My Projects").click();
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await page.locator("text=Getting Started:").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Inquisitive Pike").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Dreamy Bassi").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.locator("text=Furious Faraday").last().isVisible(),
+  ).toBeTruthy();
+});
+
+test("change flow folder", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-ChevronLeft").first().click();
+
+  await page.getByText("My Collection").nth(2).isVisible();
+  await page.getByPlaceholder("Search flows").isVisible();
+  await page.getByText("Flows").isVisible();
+  await page.getByText("Components").isVisible();
+  await page.getByText("All").first().isVisible();
+  await page.getByText("Select All").isVisible();
+
+  await page.getByTestId("add-folder-button").click();
+  await page.getByText("New Folder").last().isVisible();
+  await page.waitForTimeout(1000);
+  await page.getByText("New Folder").last().dblclick();
+  await page.getByTestId("input-folder").fill("new folder test name");
+  await page.keyboard.press("Enter");
+  await page.getByText("new folder test name").last().isVisible();
+
+  await page.getByText("My Projects").last().click();
+  await page.getByText("Basic Prompting").first().hover();
+  await page.mouse.down();
+  await page.getByText("test").first().hover();
+  await page.mouse.up();
+  await page.getByText("Basic Prompting").first().isVisible();
+});

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -0,0 +1,151 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("user must be able to freeze a path", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("textarea_str_input_value")
+    .first()
+    .fill(
+      "say a random number between 1 and 100000 and a random animal that lives in the sea",
+    );
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("float-input").fill("1.0");
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByTestId("output-inspection-text").first().click();
+
+  const randomTextGeneratedByAI = await page
+    .getByPlaceholder("Empty")
+    .first()
+    .inputValue();
+
+  await page.getByText("Close").first().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("float-input").fill("1.2");
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByTestId("output-inspection-text").first().click();
+
+  const secondRandomTextGeneratedByAI = await page
+    .getByPlaceholder("Empty")
+    .first()
+    .inputValue();
+
+  await page.getByText("Close").first().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("openai").first().click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("icon-FreezeAll").click();
+
+  await page.waitForTimeout(1000);
+
+  expect(await page.getByTestId("icon-Snowflake").count()).toBeGreaterThan(0);
+
+  await page.waitForTimeout(1000);
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByTestId("output-inspection-text").first().click();
+
+  const thirdRandomTextGeneratedByAI = await page
+    .getByPlaceholder("Empty")
+    .first()
+    .inputValue();
+
+  await page.getByText("Close").first().click();
+
+  expect(randomTextGeneratedByAI).not.toEqual(secondRandomTextGeneratedByAI);
+  expect(randomTextGeneratedByAI).not.toEqual(thirdRandomTextGeneratedByAI);
+  expect(secondRandomTextGeneratedByAI).toEqual(thirdRandomTextGeneratedByAI);
+});

src/frontend/tests/core/features/freeze.spec.ts

@@ -0,0 +1,340 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("user must be able to freeze a component", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Blank Flow" }).click();
+
+  //first component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //second component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("url");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataURL")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //third component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("split text");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersSplit Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fourth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fifth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat output");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page.getByTitle("fit view").click();
+
+  //connection 1
+  const urlOutput = await page
+    .getByTestId("handle-url-shownode-data-right")
+    .nth(0);
+  await urlOutput.hover();
+  await page.mouse.down();
+  const splitTextInputData = await page.getByTestId(
+    "handle-splittext-shownode-data inputs-left",
+  );
+  await splitTextInputData.hover();
+  await page.mouse.up();
+
+  //connection 2
+  const textOutput = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(0);
+  await textOutput.hover();
+  await page.mouse.down();
+  const splitTextInput = await page.getByTestId(
+    "handle-splittext-shownode-separator-left",
+  );
+  await splitTextInput.hover();
+  await page.mouse.up();
+
+  await page.getByTitle("fit view").click();
+
+  //connection 3
+  const splitTextOutput = await page
+    .getByTestId("handle-splittext-shownode-chunks-right")
+    .nth(0);
+  await splitTextOutput.hover();
+  await page.mouse.down();
+  const parseDataInput = await page.getByTestId(
+    "handle-parsedata-shownode-data-left",
+  );
+  await parseDataInput.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const parseDataOutput = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(0);
+  await parseDataOutput.hover();
+  await page.mouse.down();
+  const chatOutputInput = await page.getByTestId(
+    "handle-chatoutput-shownode-text-left",
+  );
+  await chatOutputInput.hover();
+  await page.mouse.up();
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .getByTestId("textarea_str_input_value")
+    .first()
+    .fill("lorem ipsum");
+
+  await page
+    .getByTestId("inputlist_str_urls_0")
+    .fill("https://www.lipsum.com/");
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("output-inspection-message").first().click();
+
+  await page.getByRole("gridcell").first().click();
+
+  const firstRunWithoutFreezing = await page
+    .getByPlaceholder("Empty")
+    .textContent();
+
+  await page.getByText("Close").last().click();
+  await page.getByText("Close").last().click();
+
+  await page.getByTestId("textarea_str_input_value").first().fill(",");
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("output-inspection-message").first().click();
+
+  await page.getByRole("gridcell").first().click();
+
+  const secondRunWithoutFreezing = await page
+    .getByPlaceholder("Empty")
+    .textContent();
+
+  await page.getByText("Close").last().click();
+  await page.getByText("Close").last().click();
+
+  await page.getByText("Split Text", { exact: true }).click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("more-options-modal").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("icon-Snowflake").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.keyboard.press("Escape");
+
+  await page.locator('//*[@id="react-flow-id"]').click();
+
+  await page
+    .getByTestId("textarea_str_input_value")
+    .first()
+    .fill("lorem ipsum");
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("output-inspection-message").first().click();
+
+  await page.getByRole("gridcell").first().click();
+
+  const firstTextFreezed = await page.getByPlaceholder("Empty").textContent();
+
+  await page.getByText("Close").last().click();
+  await page.getByText("Close").last().click();
+
+  await page.getByText("Split Text", { exact: true }).click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("more-options-modal").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("icon-Snowflake").last().click();
+
+  await page.waitForTimeout(1000);
+
+  await page.keyboard.press("Escape");
+
+  await page.locator('//*[@id="react-flow-id"]').click();
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("output-inspection-message").first().click();
+
+  await page.getByRole("gridcell").first().click();
+
+  const thirdTextWithoutFreezing = await page
+    .getByPlaceholder("Empty")
+    .textContent();
+
+  expect(secondRunWithoutFreezing).toBe(firstTextFreezed);
+
+  expect(firstRunWithoutFreezing).not.toBe(firstTextFreezed);
+  expect(firstRunWithoutFreezing).not.toBe(secondRunWithoutFreezing);
+  expect(firstRunWithoutFreezing).not.toBe(firstTextFreezed);
+  expect(thirdTextWithoutFreezing).not.toBe(firstTextFreezed);
+});

src/frontend/tests/core/features/globalVariables.spec.ts

@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to save or delete a global variable", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const genericName = Math.random().toString();
+  const credentialName = Math.random().toString();
+
+  await page.getByTestId("icon-Globe").nth(0).click();
+  await page.getByText("Add New Variable", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(genericName);
+  await page.getByTestId("icon-ChevronsUpDown").nth(1).click();
+  await page.getByText("Generic", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("This is a test of generic variable value");
+  await page.getByText("Save Variable", { exact: true }).click();
+  expect(page.getByText(genericName, { exact: true })).not.toBeNull();
+  await page.getByText(genericName, { exact: true }).isVisible();
+
+  await page.getByText("Add New Variable", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(credentialName);
+  await page.getByTestId("icon-ChevronsUpDown").nth(1).click();
+  await page.getByText("Credential", { exact: true }).click();
+  await page
+    .getByPlaceholder("Insert a value for the variable...")
+    .fill("This is a test of credential variable value");
+  await page.getByText("Save Variable", { exact: true }).click();
+  expect(page.getByText(credentialName, { exact: true })).not.toBeNull();
+  await page.getByText(credentialName, { exact: true }).isVisible();
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByText(credentialName, { exact: true })
+    .hover()
+    .then(async () => {
+      await page.getByTestId("icon-Trash2").last().click();
+      await page.getByText("Delete", { exact: true }).nth(1).click();
+    });
+});

src/frontend/tests/core/features/group.spec.ts

@@ -0,0 +1,46 @@
+import { test } from "@playwright/test";
+
+test.describe("group node test", () => {
+  /// <reference lib="dom"/>
+  test("group and ungroup updating values", async ({ page }) => {
+    await page.goto("/");
+
+    let modalCount = 0;
+    try {
+      const modalTitleElement = await page?.getByTestId("modal-title");
+      if (modalTitleElement) {
+        modalCount = await modalTitleElement.count();
+      }
+    } catch (error) {
+      modalCount = 0;
+    }
+
+    while (modalCount === 0) {
+      await page.getByText("New Project", { exact: true }).click();
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
+
+    await page
+      .getByRole("heading", { name: "Basic Prompting" })
+      .first()
+      .click();
+    await page.waitForTimeout(1000);
+    await page.getByLabel("fit view").first().click();
+
+    await page.getByTestId("title-OpenAI").click();
+    await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
+    await page.getByTestId("title-Prompt").click({ modifiers: ["Control"] });
+    await page.getByTestId("title-OpenAI").click({ modifiers: ["Control"] });
+
+    await page.getByRole("button", { name: "Group" }).click();
+    await page.getByTestId("title-Group").dblclick();
+    await page
+      .getByTestId("popover-anchor-input-title-Group")
+      .first()
+      .fill("test");
+    await page.getByTestId("icon-Ungroup").first().click();
+    await page.keyboard.press("Control+g");
+    await page.getByTestId("title-OpenAI").isVisible();
+    await page.getByTestId("title-Prompt").isVisible();
+  });
+});

src/frontend/tests/core/features/logs.spec.ts

@@ -0,0 +1,104 @@
+import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should able to see and interact with logs", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page.getByTestId("icon-ChevronDown").click();
+  await page.getByText("Logs").click();
+  await page.getByText("No Data Available", { exact: true }).isVisible();
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+  await page.getByTestId("button_run_chat output").first().click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page
+    .getByText("Chat Output built successfully", { exact: true })
+    .isVisible();
+  await page.getByTestId("icon-ChevronDown").click();
+  await page.getByText("Logs").click();
+
+  await page.getByText("timestamp").first().isVisible();
+  await page.getByText("flow_id").first().isVisible();
+  await page.getByText("source").first().isVisible();
+  await page.getByText("target", { exact: true }).first().isVisible();
+  await page.getByText("target_args", { exact: true }).first().isVisible();
+  await page.getByRole("gridcell").first().isVisible();
+
+  await page.keyboard.press("Escape");
+
+  await page.getByTestId("user-profile-settings").first().click();
+  await page.getByText("Settings", { exact: true }).click();
+
+  await page.getByText("Messages", { exact: true }).click();
+  await page.getByText("index", { exact: true }).last().isVisible();
+  await page.getByText("timestamp", { exact: true }).isVisible();
+  await page.getByText("flow_id", { exact: true }).isVisible();
+  await page.getByText("source", { exact: true }).isVisible();
+  await page.getByText("target", { exact: true }).isVisible();
+  await page.getByText("vertex_id", { exact: true }).isVisible();
+  await page.getByText("status", { exact: true }).isVisible();
+  await page.getByText("error", { exact: true }).isVisible();
+  await page.getByText("outputs", { exact: true }).isVisible();
+  await page.getByText("inputs", { exact: true }).isVisible();
+
+  await page.getByRole("gridcell").first().isVisible();
+});

src/frontend/tests/core/features/saveComponents.spec.ts

@@ -0,0 +1,136 @@
+import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
+
+test.describe("save component tests", () => {
+  /// <reference lib="dom"/>
+  test("save group component tests", async ({ page }) => {
+    await page.goto("/");
+    let modalCount = 0;
+    try {
+      const modalTitleElement = await page?.getByTestId("modal-title");
+      if (modalTitleElement) {
+        modalCount = await modalTitleElement.count();
+      }
+    } catch (error) {
+      modalCount = 0;
+    }
+
+    while (modalCount === 0) {
+      await page.getByText("New Project", { exact: true }).click();
+      await page.waitForTimeout(3000);
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(1000);
+
+    // Read your file into a buffer.
+    const jsonContent = readFileSync(
+      "tests/assets/flow_group_test.json",
+      "utf-8",
+    );
+
+    // Create the DataTransfer and File
+    const dataTransfer = await page.evaluateHandle((data) => {
+      const dt = new DataTransfer();
+      // Convert the buffer to a hex array
+      const file = new File([data], "flow_group_test.json", {
+        type: "application/json",
+      });
+      dt.items.add(file);
+      return dt;
+    }, jsonContent);
+
+    page.waitForTimeout(1000);
+
+    // Now dispatch
+    await page.dispatchEvent(
+      "//*[@id='react-flow-id']/div[1]/div[1]/div",
+      "drop",
+      {
+        dataTransfer,
+      },
+    );
+
+    const genericNoda = page.getByTestId("div-generic-node");
+    const elementCount = await genericNoda?.count();
+    if (elementCount > 0) {
+      expect(true).toBeTruthy();
+    }
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[3]')
+      .click();
+
+    await page.getByTestId("title-ChatOpenAI").click({
+      modifiers: ["Control"],
+    });
+
+    await page.getByTestId("title-Agent Initializer").click({
+      modifiers: ["Control"],
+    });
+
+    await page.getByRole("button", { name: "Group" }).click();
+
+    await page
+      .locator('//*[@id="react-flow-id"]')
+      .first()
+      .click({ button: "left" });
+
+    let textArea = page.getByTestId("div-textarea-description");
+    let elementCountText = await textArea?.count();
+    if (elementCountText > 0) {
+      expect(true).toBeTruthy();
+    }
+
+    let groupNode = page.getByTestId("title-Group");
+    let elementGroup = await groupNode?.count();
+    if (elementGroup > 0) {
+      expect(true).toBeTruthy();
+    }
+
+    await page.getByTestId("title-Group").click();
+    await page.getByTestId("more-options-modal").click();
+
+    await page.getByTestId("icon-SaveAll").click();
+
+    await page.waitForTimeout(1000);
+
+    const replaceButton = await page.getByTestId("replace-button").isVisible();
+
+    if (replaceButton) {
+      await page.getByTestId("replace-button").click();
+    }
+
+    await page.waitForSelector('[data-testid="extended-disclosure"]', {
+      timeout: 30000,
+    });
+    await page.getByPlaceholder("Search").click();
+    await page.getByPlaceholder("Search").fill("group");
+    await page.waitForTimeout(1000);
+
+    await page
+      .getByText("Group")
+      .first()
+      .dragTo(page.locator('//*[@id="react-flow-id"]'));
+    await page.mouse.up();
+    await page.mouse.down();
+    await page.getByTitle("fit view").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
+    await page.getByTitle("zoom out").click();
+    textArea = page.getByTestId("div-textarea-description");
+    elementCountText = await textArea?.count();
+    if (elementCountText > 0) {
+      expect(true).toBeTruthy();
+    }
+
+    groupNode = page.getByTestId("title-Group");
+    elementGroup = await groupNode?.count();
+    if (elementGroup > 0) {
+      expect(true).toBeTruthy();
+    }
+  });
+});

src/frontend/tests/core/features/stop-building.spec.ts

@@ -0,0 +1,297 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to stop a building", async ({ page }) => {
+  await page.goto("/");
+  // await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Blank Flow" }).click();
+
+  //first component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text input");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //second component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("url");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataURL")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //third component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("split text");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersSplit Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fourth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fifth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat output");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    // await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page.getByTitle("fit view").click();
+
+  //connection 1
+  const urlOutput = await page
+    .getByTestId("handle-url-shownode-data-right")
+    .nth(0);
+  await urlOutput.hover();
+  await page.mouse.down();
+  const splitTextInputData = await page.getByTestId(
+    "handle-splittext-shownode-data inputs-left",
+  );
+  await splitTextInputData.hover();
+  await page.mouse.up();
+
+  //connection 2
+  const textOutput = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(0);
+  await textOutput.hover();
+  await page.mouse.down();
+  const splitTextInput = await page.getByTestId(
+    "handle-splittext-shownode-separator-left",
+  );
+  await splitTextInput.hover();
+  await page.mouse.up();
+
+  await page.getByTitle("fit view").click();
+
+  //connection 3
+  const splitTextOutput = await page
+    .getByTestId("handle-splittext-shownode-chunks-right")
+    .nth(0);
+  await splitTextOutput.hover();
+  await page.mouse.down();
+  const parseDataInput = await page.getByTestId(
+    "handle-parsedata-shownode-data-left",
+  );
+  await parseDataInput.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const parseDataOutput = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(0);
+  await parseDataOutput.hover();
+  await page.mouse.down();
+  const chatOutputInput = await page.getByTestId(
+    "handle-chatoutput-shownode-text-left",
+  );
+  await chatOutputInput.hover();
+  await page.mouse.up();
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTestId("textarea_str_input_value").first().fill(",");
+
+  await page
+    .getByTestId("inputlist_str_urls_0")
+    .fill("https://www.nature.com/articles/d41586-023-02870-5");
+
+  await page.getByTestId("int_int_chunk_size").fill("2");
+  await page.getByTestId("int_int_chunk_overlap").fill("1");
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=Building", {
+    timeout: 100000,
+  });
+
+  await page.waitForSelector('[data-testid="loading_icon"]', {
+    timeout: 100000,
+  });
+
+  expect(
+    await page.getByTestId("loading_icon").last().isVisible(),
+  ).toBeTruthy();
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeTruthy();
+
+  await page.getByTestId("stop_building_button").click();
+
+  await page.waitForTimeout(1000);
+
+  expect(await page.getByTestId("loading_icon").isHidden()).toBeTruthy();
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeFalsy();
+
+  await page.waitForSelector("text=Saved", {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector("text=Building", {
+    timeout: 100000,
+  });
+
+  await page.waitForSelector('[data-testid="loading_icon"]', {
+    timeout: 100000,
+  });
+
+  await page.waitForSelector("text=Building", {
+    timeout: 100000,
+  });
+
+  expect(await page.getByText("Building").isVisible()).toBeTruthy();
+
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeTruthy();
+
+  await page.waitForSelector("text=Building", {
+    timeout: 100000,
+  });
+
+  expect(await page.getByText("Building").isVisible()).toBeTruthy();
+
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeTruthy();
+
+  await page.getByTestId("stop_building_button").click();
+
+  await page.waitForSelector("text=Saved", {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("button_run_chat output").click();
+
+  await page.waitForSelector('[data-testid="loading_icon"]', {
+    timeout: 100000,
+  });
+
+  await page.waitForSelector("text=Building", {
+    timeout: 100000,
+  });
+
+  expect(await page.getByText("Building").isVisible()).toBeTruthy();
+
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeTruthy();
+
+  await page.getByTestId("stop_building_button").click();
+
+  await page.waitForSelector("text=Saved", {
+    timeout: 100000,
+  });
+
+  expect(
+    await page.getByTestId("stop_building_button").isEnabled(),
+  ).toBeFalsy();
+});

src/frontend/tests/core/features/store-shard-2.spec.ts

@@ -0,0 +1,143 @@
+import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should filter by tag", async ({ page }) => {
+  test.skip(
+    !process?.env?.STORE_API_KEY,
+    "STORE_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("File Loader").isVisible();
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("Album Cover Builder").isVisible();
+
+  await page.getByTestId("tag-selector-Memory").click();
+  await page.getByText("MP3 QA12").isVisible();
+
+  await page.getByTestId("tag-selector-Chain").click();
+  await page.getByText("There are no").isVisible();
+  await page.getByTestId("tag-selector-Chain").click();
+
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByText("MP3 QA12").isVisible();
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByTestId("tag-selector-Memory").click();
+
+  await page.getByText("Basic RAG").isVisible();
+});
+
+test("should share component with share button", async ({ page }) => {
+  test.skip(
+    !process?.env?.STORE_API_KEY,
+    "STORE_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill(process.env.STORE_API_KEY ?? "");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.getByText("My Collection").click();
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForTimeout(1000);
+
+  const randomName = Math.random().toString(36).substring(2);
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+  const flowName = await page.getByTestId("flow_name").innerText();
+  await page.getByTestId("flow_name").click();
+  await page.getByText("Settings").click();
+  const flowDescription = await page
+    .getByPlaceholder("Flow description")
+    .inputValue();
+  await page.getByPlaceholder("Flow name").fill(randomName);
+  await page.getByText("Save").last().click();
+
+  await page.waitForSelector('[data-testid="shared-button-flow"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("shared-button-flow").first().click();
+  await page.getByText("Name:").isVisible();
+  await page.getByText("Description:").isVisible();
+  await page.getByText("Set workflow status to public").isVisible();
+  await page
+    .getByText(
+      "Attention: API keys in specified fields are automatically removed upon sharing.",
+    )
+    .isVisible();
+  await page.getByText("Export").first().isVisible();
+  await page.getByText("Share Flow").first().isVisible();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("Agent").first().isVisible();
+  await page.getByText("Memory").first().isVisible();
+  await page.getByText("Chain").first().isVisible();
+  await page.getByText("Vector Store").first().isVisible();
+  await page.getByText("Prompt").last().isVisible();
+  await page.getByTestId("public-checkbox").isChecked();
+  await page.getByText(flowName).last().isVisible();
+  await page.getByText(flowDescription).last().isVisible();
+  await page.waitForTimeout(1000);
+  await page.getByText("Flow shared successfully").last().isVisible();
+});

src/frontend/tests/core/features/tweaksTest.spec.ts

@@ -0,0 +1,145 @@
+import { expect, test } from "@playwright/test";
+
+test("curl_api_generation", async ({ page, context }) => {
+  await page.goto("/");
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+  await page.getByText("API", { exact: true }).click();
+  await page.getByRole("tab", { name: "cURL" }).click();
+  await page.getByTestId("icon-Copy").click();
+  const handle = await page.evaluateHandle(() =>
+    navigator.clipboard.readText(),
+  );
+  const clipboardContent = await handle.jsonValue();
+  const oldValue = clipboardContent;
+  expect(clipboardContent.length).toBeGreaterThan(0);
+  await page.getByRole("tab", { name: "Tweaks" }).click();
+  await page
+    .getByRole("heading", { name: "OpenAi" })
+    .locator("div")
+    .first()
+    .click();
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_base-edit")
+    .first()
+    .fill("teste");
+
+  await page.getByRole("tab", { name: "cURL" }).click();
+  await page.getByTestId("icon-Copy").click();
+  const handle2 = await page.evaluateHandle(() =>
+    navigator.clipboard.readText(),
+  );
+  const clipboardContent2 = await handle2.jsonValue();
+  const newValue = clipboardContent2;
+  expect(oldValue).not.toBe(newValue);
+  expect(clipboardContent2.length).toBeGreaterThan(clipboardContent.length);
+});
+
+test("check if tweaks are updating when someothing on the flow changes", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("Chroma");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("vectorstoresChroma DB")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("popover-anchor-input-collection_name").click();
+  await page
+    .getByTestId("popover-anchor-input-collection_name")
+    .fill("collection_name_test_123123123!@#$&*(&%$@");
+
+  await page.getByTestId("popover-anchor-input-persist_directory").click();
+  await page
+    .getByTestId("popover-anchor-input-persist_directory")
+    .fill("persist_directory_123123123!@#$&*(&%$@");
+
+  const focusElementsOnBoard = async ({ page }) => {
+    await page.waitForSelector("text=API", { timeout: 30000 });
+    const focusElements = await page.getByText("API", { exact: true }).first();
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
+  await page.getByText("Tweaks").nth(1).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
+
+  await page.getByText("Python API", { exact: true }).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
+
+  await page.getByText("Python Code", { exact: true }).click();
+
+  await page.getByText("collection_name_test_123123123!@#$&*(&%$@").isVisible();
+  await page.getByText("persist_directory_123123123!@#$&*(&%$@").isVisible();
+});

src/frontend/tests/core/integrations/Basic Prompting.spec.ts

@@ -0,0 +1,117 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Basic Prompting (Hello, World)", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("Say hello as a pirate");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector("text=matey", {
+    timeout: 100000,
+  });
+
+  await page.getByText("matey").last().isVisible();
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});

src/frontend/tests/core/integrations/Blog Writer.spec.ts

@@ -0,0 +1,127 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Blog Writer", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Blog Writer" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("inputlist_str_urls_0")
+    .nth(0)
+    .fill(
+      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
+    );
+  await page
+    .getByTestId("inputlist_str_urls_1")
+    .nth(0)
+    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");
+
+  await page
+    .getByTestId("textarea_str_input_value")
+    .fill(
+      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+    );
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForTimeout(5000);
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByPlaceholder(
+      "No chat input variables found. Click to run your flow.",
+      { exact: true },
+    )
+    .last()
+    .isVisible();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("turtles").last().isVisible();
+  await page.getByText("sea").last().isVisible();
+  await page.getByText("survival").last().isVisible();
+
+  await page.getByText("Instructions").last().click();
+
+  const value = await page
+    .getByPlaceholder("Enter text...")
+    .last()
+    .inputValue();
+
+  expect(value).toBe(
+    "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+  );
+
+  await page.getByTestId("icon-ExternalLink").last().click();
+
+  const count = await page
+    .getByText(
+      "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
+    )
+    .count();
+
+  if (count <= 1) {
+    expect(false).toBe(true);
+  }
+});

src/frontend/tests/core/integrations/Document QA.spec.ts

@@ -0,0 +1,117 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Document QA", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Document QA" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(
+    path.join(__dirname, "../../assets/test_file.txt"),
+  );
+  await page.getByText("test_file.txt").isVisible();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("whats the text in the file?");
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("this is a test file").last().isVisible();
+
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});

src/frontend/tests/core/integrations/Dynamic Agent.spec.ts

@@ -0,0 +1,108 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Dynamic Agent", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  test.skip(
+    !process?.env?.BRAVE_SEARCH_API_KEY,
+    "BRAVE_SEARCH_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Dynamic Agent" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .last()
+    .fill(process.env.BRAVE_SEARCH_API_KEY ?? "");
+
+  await page.waitForTimeout(1000);
+
+  let openAiLlms = await page.getByText("OpenAI", { exact: true }).count();
+
+  for (let i = 0; i < openAiLlms; i++) {
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(i)
+      .fill(process.env.OPENAI_API_KEY ?? "");
+
+    await page.getByTestId("dropdown_str_model_name").nth(i).click();
+    await page.getByTestId("gpt-4o-1-option").last().click();
+
+    await page.waitForTimeout(1000);
+  }
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 60000 * 3 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    page.getByText("Could you search info about AAPL?", { exact: true }).last(),
+  ).toBeVisible();
+
+  const textContents = await page
+    .getByTestId("div-chat-message")
+    .allTextContents();
+
+  const concatAllText = textContents.join(" ");
+  expect(concatAllText.toLocaleLowerCase()).toContain("apple");
+  const allTextLength = concatAllText.length;
+  expect(allTextLength).toBeGreaterThan(100);
+});

src/frontend/tests/core/integrations/Memory Chatbot.spec.ts

@@ -0,0 +1,123 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Memory Chatbot", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Memory Chatbot" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.waitForTimeout(1000);
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page
+    .getByText("No input message provided.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("Remember that I'm a lion");
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByTestId("input-chat-playground")
+    .last()
+    .fill("try reproduce the sound I made in words");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page.waitForSelector("text=roar", { timeout: 30000 });
+  await page.getByText("roar").last().isVisible();
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});

src/frontend/tests/core/integrations/Simple Agent.spec.ts

@@ -0,0 +1,106 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Simple Agent", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Simple Agent" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector(
+    "text=write short python scsript to say hello world",
+    {
+      timeout: 30000,
+    },
+  );
+
+  await page.waitForTimeout(1000);
+
+  expect(await page.getByText("User")).toBeVisible();
+
+  expect(await page.locator(".language-python")).toBeVisible();
+
+  let pythonWords = await page.getByText("Hello, World!").count();
+
+  expect(pythonWords).toBe(2);
+
+  await page.getByTestId("icon-Copy").last().click();
+
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Send a message...").click();
+  await page.keyboard.press("Control+V");
+
+  await page.waitForTimeout(500);
+
+  pythonWords = await page.getByText("Hello, World!").count();
+
+  expect(pythonWords).toBe(3);
+});

src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts

@@ -0,0 +1,152 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("Travel Planning Agent", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Travel Planning Agents" }).click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("yahoo finance");
+  await page.waitForTimeout(1000);
+
+  await page.getByText("SearchAPI").last().click();
+  await page.waitForTimeout(1000);
+  await page.keyboard.press("Backspace");
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-100, 100);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("toolsYahoo Finance News Tool")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  //connection 1
+  const yahooElementOutput = await page
+    .getByTestId("handle-yfinancetool-shownode-tool-right")
+    .nth(0);
+  await yahooElementOutput.hover();
+  await page.mouse.down();
+  const agentOne = await page
+    .getByTestId("handle-toolcallingagent-shownode-tools-left")
+    .nth(0);
+  await agentOne.hover();
+  await page.mouse.up();
+
+  //connection 2
+  await yahooElementOutput.hover();
+  await page.mouse.down();
+  const agentTwo = await page
+    .getByTestId("handle-toolcallingagent-shownode-tools-left")
+    .nth(1);
+  await agentTwo.hover();
+  await page.mouse.up();
+
+  //connection 3
+  await yahooElementOutput.hover();
+  await page.mouse.down();
+  const agentThree = await page
+    .getByTestId("handle-toolcallingagent-shownode-tools-left")
+    .nth(2);
+  await agentThree.hover();
+  await page.mouse.up();
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .first()
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 60000 * 3 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector("text=default session", {
+    timeout: 30000,
+  });
+
+  await page.waitForTimeout(1000);
+
+  const output = await page.getByTestId("div-chat-message").allTextContents();
+  const outputText = output.join("\n");
+
+  expect(outputText.toLowerCase()).toContain("weather");
+  expect(outputText.toLowerCase()).toContain("budget");
+
+  expect(outputText.toLowerCase()).toContain("uberlândia");
+  expect(outputText.toLowerCase()).toContain("pão de queijo");
+});

src/frontend/tests/core/integrations/Vector Store.spec.ts

@@ -0,0 +1,160 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Vector Store RAG", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  test.skip(
+    !process?.env?.ASTRA_DB_API_ENDPOINT,
+    "ASTRA_DB_API_ENDPOINT required to run this test",
+  );
+
+  test.skip(
+    !process?.env?.ASTRA_DB_APPLICATION_TOKEN,
+    "ASTRA_DB_APPLICATION_TOKEN required to run this test",
+  );
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .nth(0)
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .nth(0)
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .nth(1)
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("popover-anchor-input-token")
+    .nth(0)
+    .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+  await page
+    .getByTestId("popover-anchor-input-token")
+    .nth(1)
+    .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+  await page
+    .getByTestId("popover-anchor-input-api_endpoint")
+    .nth(0)
+    .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+  await page
+    .getByTestId("popover-anchor-input-api_endpoint")
+    .nth(1)
+    .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").last().click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(
+    path.join(__dirname, "../../assets/test_file.txt"),
+  );
+  await page.getByText("test_file.txt").isVisible();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button_run_astra db").first().click();
+  await page.waitForSelector("text=built successfully", { timeout: 60000 * 2 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });
+
+  await page.getByTestId("button_run_chat output").click();
+  await page.waitForSelector("text=built successfully", { timeout: 60000 * 2 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });
+
+  await page.getByTestId("button_run_astra db").last().click();
+  await page.waitForSelector("text=built successfully", { timeout: 60000 * 2 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 30000,
+  });
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().fill("hello");
+
+  await page.getByTestId("icon-LucideSend").last().click();
+
+  await page
+    .getByText("This is a test file.", { exact: true })
+    .last()
+    .isVisible();
+
+  await page.getByText("Memories", { exact: true }).last().click();
+  await page.getByText("Default Session").last().click();
+
+  await page.getByText("timestamp", { exact: true }).last().isVisible();
+  await page.getByText("text", { exact: true }).last().isVisible();
+  await page.getByText("sender", { exact: true }).last().isVisible();
+  await page.getByText("sender_name", { exact: true }).last().isVisible();
+  await page.getByText("session_id", { exact: true }).last().isVisible();
+  await page.getByText("files", { exact: true }).last().isVisible();
+
+  await page.getByRole("gridcell").last().isVisible();
+  await page.getByTestId("icon-Trash2").first().click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").last().isVisible();
+});

src/frontend/tests/core/integrations/decisionFlow.spec.ts

@@ -0,0 +1,584 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should create a flow with decision", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsChat Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("create list");
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersCreate List")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("input-list-plus-btn_texts-0").click();
+  await page.getByTestId("input-list-plus-btn_texts-0").click();
+
+  await page
+    .getByTestId("inputlist_str_texts_0")
+    .first()
+    .fill("big news! langflow 1.0 is out");
+  await page
+    .getByTestId("inputlist_str_texts_1")
+    .first()
+    .fill("uhul that movie was awesome");
+  await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe");
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersCreate List")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+  await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+
+  await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died");
+  await page
+    .getByTestId("inputlist_str_texts_1")
+    .last()
+    .fill("No one loves me");
+  await page.getByTestId("inputlist_str_texts_2").last().fill("not cool..");
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("prompt");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("promptsPrompt")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("conditional router");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("prototypesConditional Router")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("pass");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("prototypesPass")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chatoutput");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("zoom out").click();
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  //connection 1
+  const elementCreateListOutput0 = await page
+    .getByTestId("handle-createlist-shownode-data list-right")
+    .nth(2);
+  await elementCreateListOutput0.hover();
+  await page.mouse.down();
+  const elementParseDataInput0 = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .nth(0);
+  await elementParseDataInput0.hover();
+  await page.mouse.up();
+
+  //connection 2
+  const elementCreateListOutput1 = await page
+    .getByTestId("handle-createlist-shownode-data list-right")
+    .first();
+  await elementCreateListOutput1.hover();
+  await page.mouse.down();
+  const elementParseDataInput1 = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .last();
+  await elementParseDataInput1.hover();
+  await page.mouse.up();
+
+  //connection 3
+  const elementChatInputOutput = await page
+    .getByTestId("handle-chatinput-shownode-message-right")
+    .first();
+  await elementChatInputOutput.hover();
+  await page.mouse.down();
+  const elementPassInput3 = await page
+    .getByTestId("handle-pass-shownode-input message-left")
+    .last();
+  await elementPassInput3.hover();
+  await page.mouse.up();
+
+  //edit prompt
+  await page.getByTestId("promptarea_prompt_template").first().click();
+  await page.getByTestId("modal-promptarea_prompt_template").first().fill(`
+    {Condition}
+
+Answer with either TRUE or FALSE (and nothing else).
+
+TRUE Examples:
+{true_examples}
+
+FALSE Examples:
+{false_examples}
+
+
+User: {user_message}
+AI:
+
+    `);
+
+  await page.getByText("Check & Save").last().click();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 4
+  const elementPassOutput3 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .nth(4);
+  await elementPassOutput3.hover();
+  await page.mouse.down();
+  const elementPromptInputUserMessage = await page
+    .getByTestId("handle-prompt-shownode-user_message-left")
+    .first();
+  await elementPromptInputUserMessage.hover();
+  await page.mouse.up();
+
+  //connection 5
+  const elementParseDataOutput0 = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(0);
+  await elementParseDataOutput0.hover();
+  await page.mouse.down();
+  const elementPromptInput = await page
+    .getByTestId("handle-prompt-shownode-false_examples-left")
+    .first();
+  await elementPromptInput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 6
+  const elementParseDataOutput1 = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(2);
+  await elementParseDataOutput1.hover();
+  await page.mouse.down();
+  const elementPromptInput1 = await page
+    .getByTestId("handle-prompt-shownode-true_examples-left")
+    .first();
+  await elementPromptInput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 7
+  elementPassOutput3.hover();
+  await page.mouse.down();
+  const elementPromptInput2 = await page
+    .getByTestId("handle-prompt-shownode-user_message-left")
+    .first();
+  await elementPromptInput2.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 8
+  const elementPromptOutput = await page
+    .getByTestId("handle-prompt-shownode-prompt message-right")
+    .first();
+  await elementPromptOutput.hover();
+  await page.mouse.down();
+  const elementOpenAiInput = await page
+    .getByTestId("handle-openaimodel-shownode-input-left")
+    .first();
+  await elementOpenAiInput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 9
+  const elementPassOutput1 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .nth(2);
+  await elementPassOutput1.hover();
+  await page.mouse.down();
+  const elementChatOutput = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .last();
+  await elementChatOutput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 10
+  const elementPassOutput2 = await page
+    .getByTestId("handle-pass-shownode-output message-right")
+    .first();
+  await elementPassOutput2.hover();
+  await page.mouse.down();
+  const elementChatOutput1 = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .first();
+  await elementChatOutput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 11
+  const elementOpenAiOutput = await page
+    .getByTestId("handle-openaimodel-shownode-text-right")
+    .first();
+  await elementOpenAiOutput.hover();
+  await page.mouse.down();
+  const elementConditionalRouterInput1 = await page
+    .getByTestId("handle-conditionalrouter-shownode-input text-left")
+    .first();
+  await elementConditionalRouterInput1.hover();
+  await page.mouse.up();
+
+  await page.getByTestId("icon-arrow-right").nth(1).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  let showIgnoredMessageCheckbox = await page.getByTestId(
+    "showignored_message",
+  );
+
+  if (!(await showIgnoredMessageCheckbox.isChecked())) {
+    await showIgnoredMessageCheckbox.click();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-input_message-edit")
+    .nth(0)
+    .fill("You're Happy! 🤪");
+  await page.getByText("Close").last().click();
+
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+  await page.getByTitle("zoom in").click();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  await page.getByTestId("icon-arrow-right").nth(0).click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  showIgnoredMessageCheckbox = await page.getByTestId("showignored_message");
+
+  if (!(await showIgnoredMessageCheckbox.isChecked())) {
+    await showIgnoredMessageCheckbox.click();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-input_message-edit")
+    .nth(0)
+    .fill("You're Sad! 🥲");
+  await page.getByText("Close").last().click();
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  await page.getByTestId("popover-anchor-input-match_text").fill("TRUE");
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 12
+  const elementConditionalRouterOutput1 = await page
+    .getByTestId("handle-conditionalrouter-shownode-true route-right")
+    .first();
+  await elementConditionalRouterOutput1.hover();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  const elementPassInput1 = await page
+    .getByTestId("handle-pass-shownode-ignored message-left")
+    .nth(1);
+  await elementPassInput1.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  //connection 13
+  const elementConditionalRouterOutput2 = await page
+    .getByTestId("handle-conditionalrouter-shownode-false route-right")
+    .first();
+  await elementConditionalRouterOutput2.hover();
+  await page.mouse.down();
+  const elementPassInput2 = await page
+    .getByTestId("handle-pass-shownode-ignored message-left")
+    .first();
+  await elementPassInput2.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.getByLabel("fit view").click();
+  await page.getByText("Playground", { exact: true }).click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+
+  await page
+    .getByTestId("input-chat-playground")
+    .fill("my dog is alive and happy!");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=🤪", {
+    timeout: 1200000,
+  });
+
+  await page.getByText("🤪").isVisible();
+});

src/frontend/tests/core/integrations/similarity.spec.ts

@@ -0,0 +1,336 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to check similarity between embedding texts", async ({
+  page,
+}) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  await page.goto("/");
+  // await page.waitForTimeout(2000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Blank Flow" }).click();
+
+  //first component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("embeddingsOpenAI Embeddings")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //second component
+
+  await page
+    .getByTestId("embeddingsOpenAI Embeddings")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //third component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text embedder");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("embeddingsText Embedder")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fourth component
+
+  await page
+    .getByTestId("embeddingsText Embedder")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //fifth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("embedding similarity");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("embeddingsEmbedding Similarity")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //sisxth component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersParse Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  //seventh component
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsText Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("filter data");
+  // await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersFilter Data")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 300);
+    });
+
+  await page.mouse.up();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    // await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .getByTestId("textarea_str_template")
+    .last()
+    .fill("{similarity_score}");
+
+  await page
+    .getByTestId("popover-anchor-input-message")
+    .last()
+    .fill("datastax");
+  await page
+    .getByTestId("popover-anchor-input-message")
+    .first()
+    .fill("langflow");
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .nth(0)
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .nth(1)
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page
+    .getByTestId("inputlist_str_filter_criteria_0")
+    .nth(0)
+    .fill("similarity_score");
+
+  //connection 1
+  const openAiEmbeddingOutput_0 = await page
+    .getByTestId("handle-openaiembeddings-shownode-embeddings-right")
+    .nth(2);
+  await openAiEmbeddingOutput_0.hover();
+  await page.mouse.down();
+  const textEmbedderInput_0 = await page
+    .getByTestId("handle-textembeddercomponent-shownode-embedding model-left")
+    .nth(0);
+  await textEmbedderInput_0.hover();
+  await page.mouse.up();
+
+  //connection 2
+  const openAiEmbeddingOutput_1 = await page
+    .getByTestId("handle-openaiembeddings-shownode-embeddings-right")
+    .nth(0);
+  await openAiEmbeddingOutput_1.hover();
+  await page.mouse.down();
+  const textEmbedderInput_1 = await page
+    .getByTestId("handle-textembeddercomponent-shownode-embedding model-left")
+    .nth(1);
+  await textEmbedderInput_1.hover();
+  await page.mouse.up();
+
+  //connection 3
+  const textEmbedderOutput_0 = await page
+    .getByTestId("handle-textembeddercomponent-shownode-embedding data-right")
+    .nth(0);
+  await textEmbedderOutput_0.hover();
+  await page.mouse.down();
+  const embeddingSimilarityInput = await page
+    .getByTestId(
+      "handle-embeddingsimilaritycomponent-shownode-embedding vectors-left",
+    )
+    .nth(0);
+  await embeddingSimilarityInput.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const textEmbedderOutput_1 = await page
+    .getByTestId("handle-textembeddercomponent-shownode-embedding data-right")
+    .nth(2);
+  await textEmbedderOutput_1.hover();
+  await page.mouse.down();
+  await embeddingSimilarityInput.hover();
+  await page.mouse.up();
+
+  //connection 5
+  const embeddingSimilarityOutput = await page
+    .getByTestId(
+      "handle-embeddingsimilaritycomponent-shownode-similarity data-right",
+    )
+    .nth(0);
+  await embeddingSimilarityOutput.hover();
+  await page.mouse.down();
+  const filterDataInput = await page
+    .getByTestId("handle-filterdata-shownode-data-left")
+    .nth(0);
+  await filterDataInput.hover();
+  await page.mouse.up();
+
+  //connection 6
+  const filterDataOutput = await page
+    .getByTestId("handle-filterdata-shownode-filtered data-right")
+    .nth(0);
+  await filterDataOutput.hover();
+  await page.mouse.down();
+  const parseDataInput = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .nth(0);
+  await parseDataInput.hover();
+  await page.mouse.up();
+
+  //connection 7
+  const parseDataOutput = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .nth(0);
+  await parseDataOutput.hover();
+  await page.mouse.down();
+  const textOutputInput = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .nth(0);
+  await textOutputInput.hover();
+  await page.mouse.up();
+
+  await page.getByTestId("button_run_text output").click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Playground", { exact: true }).click();
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByPlaceholder("Empty")
+    .waitFor({ state: "visible", timeout: 30000 });
+
+  const valueSimilarity = await page.getByPlaceholder("Empty").textContent();
+  expect(valueSimilarity).toContain("cosine_similarity");
+  const valueLength = valueSimilarity!.length;
+  expect(valueLength).toBeGreaterThan(20);
+});

src/frontend/tests/core/integrations/starter-projects.spec.ts

@@ -0,0 +1,91 @@
+const { test, expect } = require("@playwright/test");
+
+test("vector store from starter projects should have its connections and nodes on the flow", async ({
+  page,
+  request,
+}) => {
+  const response = await request.get("/api/v1/starter-projects");
+  expect(response.status()).toBe(200);
+  const responseBody = await response.json();
+
+  const astraStarterProject = responseBody.find((project) => {
+    if (project.data.nodes) {
+      return project.data.nodes.some((node) => node.id.includes("Astra"));
+    }
+  });
+
+  await page.route("**/api/v1/flows/", async (route) => {
+    if (route.request().method() === "GET") {
+      try {
+        const response = await route.fetch();
+        const flowsData = await response.json();
+
+        const modifiedFlows = flowsData.map((flow) => {
+          if (flow.name === "Vector Store RAG" && flow.user_id === null) {
+            return {
+              ...flow,
+              data: astraStarterProject?.data,
+            };
+          }
+          return flow;
+        });
+
+        const modifiedResponse = JSON.stringify(modifiedFlows);
+
+        route.fulfill({
+          status: response.status(),
+          headers: response.headers(),
+          body: modifiedResponse,
+        });
+      } catch (error) {
+        console.error("Error in route handler:", error);
+      }
+    } else {
+      // If not a GET request, continue without modifying
+      await route.continue();
+    }
+  });
+
+  await page.goto("/");
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+
+  const edges = await page.locator(".react-flow__edge-interaction").count();
+  const nodes = await page.getByTestId("div-generic-node").count();
+
+  const edgesFromServer = astraStarterProject?.data.edges.length;
+  const nodesFromServer = astraStarterProject?.data.nodes.length;
+
+  expect(edges).toBe(edgesFromServer);
+  expect(nodes).toBe(nodesFromServer);
+});

src/frontend/tests/core/integrations/textInputOutput.spec.ts

@@ -0,0 +1,239 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("TextInputOutputComponent", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let visibleElementHandle;
+
+  const elementsTextInputOutput = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .all();
+
+  for (const element of elementsTextInputOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  for (const element of elementsTextInputOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  // Move to the second element
+  await visibleElementHandle.hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+
+  await page
+    .getByTestId("outputsText Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const elementsOpenAiOutput = await page
+    .getByTestId("handle-openaimodel-shownode-text-right")
+    .all();
+
+  for (const element of elementsOpenAiOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  // Click and hold on the first element
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  const elementTextOutputInput = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .all();
+
+  for (const element of elementTextOutputInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
+
+  // Move to the second element
+  await visibleElementHandle.hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page
+    .getByTestId(/^rf__node-TextInput-[a-zA-Z0-9]+$/)
+    .getByTestId("textarea_str_input_value")
+    .fill("This is a test!");
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Playground", { exact: true }).click();
+  await page.getByText("Run Flow", { exact: true }).click();
+
+  await page.waitForTimeout(5000);
+
+  let textInputContent = await page
+    .getByPlaceholder("Enter text...")
+    .textContent();
+  expect(textInputContent).toBe("This is a test!");
+
+  await page.getByText("Outputs", { exact: true }).nth(1).click();
+  await page.getByText("Text Output", { exact: true }).nth(2).click();
+  let contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
+  expect(contentOutput).not.toBe(null);
+
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByTestId(/^rf__node-TextInput-[a-zA-Z0-9]+$/)
+    .getByTestId("textarea_str_input_value")
+    .fill("This is a test, again just to be sure!");
+  await page.getByText("Playground", { exact: true }).click();
+  await page.getByText("Run Flow", { exact: true }).click();
+
+  await page.waitForTimeout(5000);
+
+  textInputContent = await page.getByPlaceholder("Enter text...").textContent();
+  expect(textInputContent).toBe("This is a test, again just to be sure!");
+
+  await page.getByText("Outputs", { exact: true }).nth(1).click();
+  await page.getByText("Text Output", { exact: true }).nth(2).click();
+  contentOutput = await page.getByPlaceholder("Enter text...").inputValue();
+  expect(contentOutput).not.toBe(null);
+});

src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts

@@ -0,0 +1,131 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("should be able to move flow from folder, rename it and be displayed on correct folder", async ({
+  page,
+}) => {
+  const randomName = Math.random().toString(36).substring(2);
+  const secondRandomName = Math.random().toString(36).substring(2);
+
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings").click();
+  await page.getByPlaceholder("Flow name").fill(randomName);
+  await page.getByText("Save").last().click();
+  await page.getByTestId("icon-ChevronLeft").last().click();
+
+  await page.getByTestId("add-folder-button").click();
+
+  let countFolders = await page.getByText("New Folder").count();
+
+  while (countFolders > 1) {
+    await page.getByText("New Folder").first().hover();
+
+    await page.getByTestId("btn-delete-folder").first().click();
+    await page.getByText("Delete").last().click();
+    countFolders--;
+    await page.waitForTimeout(1000);
+  }
+
+  // Get the bounding boxes of the elements
+  const sourceElement = await page.getByTestId(`card-${randomName}`).first();
+  const targetElement = await page.getByText("New Folder").last();
+
+  const sourceBox = await sourceElement.boundingBox();
+  const targetBox = await targetElement.boundingBox();
+
+  // Perform the drag and drop
+  await page.mouse.move(
+    sourceBox!.x + sourceBox!.width / 2,
+    sourceBox!.y + sourceBox!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    targetBox!.x + targetBox!.width / 2,
+    targetBox!.y + targetBox!.height / 2,
+  );
+  await page.mouse.up();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("New Folder").last().click();
+
+  expect(await page.getByTestId(`card-${randomName}`).first().isVisible());
+
+  await page.getByTestId(`card-${randomName}`).first().click();
+
+  await page.getByTestId("flow-configuration-button").click();
+  await page.getByText("Settings").click();
+  await page.getByPlaceholder("Flow name").fill(secondRandomName);
+  await page.getByText("Save").last().click();
+  await page.getByTestId("icon-ChevronLeft").last().click();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("New Folder").last().click();
+  expect(
+    await page.getByTestId(`card-${secondRandomName}`).first().isVisible(),
+  );
+
+  // Get the bounding boxes of the elements
+  const secondSourceElement = await page
+    .getByTestId(`card-${secondRandomName}`)
+    .first();
+  const secondTargetElement = await page.getByText("New Folder").last();
+
+  const secondSourceBox = await secondSourceElement.boundingBox();
+  const secondTargetBox = await secondTargetElement.boundingBox();
+
+  // Perform the drag and drop
+  await page.mouse.move(
+    secondSourceBox!.x + secondSourceBox!.width / 2,
+    secondSourceBox!.y + secondSourceBox!.height / 2,
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    secondTargetBox!.x + secondTargetBox!.width / 2,
+    secondTargetBox!.y + secondTargetBox!.height / 2,
+  );
+  await page.mouse.up();
+
+  await page.waitForTimeout(3000);
+
+  await page.getByText("My Projects").last().click();
+
+  expect(
+    await page.getByTestId(`card-${secondRandomName}`).first().isVisible(),
+  );
+});

src/frontend/tests/core/regression/generalBugs-shard-5.spec.ts

@@ -0,0 +1,256 @@
+import { expect, test } from "@playwright/test";
+
+test("should be able to see output preview from grouped components", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  let modalCount = 0;
+  const randomName = Math.random().toString(36).substring(2);
+  const secondRandomName = Math.random().toString(36).substring(2);
+  const thirdRandomName = Math.random().toString(36).substring(2);
+
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-1000, 500);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("combine text");
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-1000, 800);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("helpersCombine Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 800);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("helpersCombine Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-200, 800);
+      await page.waitForTimeout(200);
+    });
+
+  await page.mouse.up();
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-200, 500);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("outputsText Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  //connection 1
+  const elementCombineTextOutput0 = await page
+    .getByTestId("handle-combinetext-shownode-combined text-right")
+    .nth(0);
+  await elementCombineTextOutput0.hover();
+  await page.mouse.down();
+  const elementCombineTextInput1 = await page
+    .getByTestId("handle-combinetext-shownode-first text-left")
+    .nth(1);
+  await elementCombineTextInput1.hover();
+  await page.mouse.up();
+
+  await page
+    .getByTestId("title-Combine Text")
+    .first()
+    .click({ modifiers: ["Control"] });
+  await page
+    .getByTestId("title-Combine Text")
+    .last()
+    .click({ modifiers: ["Control"] });
+
+  await page.getByRole("button", { name: "Group" }).click();
+
+  //connection 2
+  const elementTextOutput0 = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(0);
+  await elementTextOutput0.hover();
+  await page.mouse.down();
+  const elementGroupInput0 = await page.getByTestId(
+    "handle-groupnode-shownode-first text-left",
+  );
+
+  await elementGroupInput0.hover();
+  await page.mouse.up();
+
+  //connection 3
+  const elementTextOutput1 = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(2);
+  await elementTextOutput1.hover();
+  await page.mouse.down();
+  const elementGroupInput1 = await page
+    .getByTestId("handle-groupnode-shownode-second text-left")
+    .nth(1);
+
+  await elementGroupInput1.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const elementGroupOutput = await page
+    .getByTestId("handle-groupnode-shownode-combined text-right")
+    .nth(0);
+  await elementGroupOutput.hover();
+  await page.mouse.down();
+  const elementTextOutputInput = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .nth(0);
+
+  await elementTextOutputInput.hover();
+  await page.mouse.up();
+
+  await page.getByTestId("textarea_str_input_value").nth(0).fill(randomName);
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("textarea_str_input_value")
+    .nth(1)
+    .fill(secondRandomName);
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(6)
+    .fill(thirdRandomName);
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(3)
+    .fill("-");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(4)
+    .fill("-");
+
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("button_run_text output").last().click();
+
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  await page.getByText("built successfully").last().click({
+    timeout: 15000,
+  });
+  await page.waitForTimeout(3000);
+
+  expect(
+    await page.getByTestId("output-inspection-combined text").first(),
+  ).not.toBeDisabled();
+  await page.getByTestId("output-inspection-combined text").first().click();
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Component Output").isVisible();
+
+  const text = await page.getByPlaceholder("Empty").textContent();
+
+  const permutations = [
+    `${randomName}-${secondRandomName}-${thirdRandomName}`,
+    `${randomName}-${thirdRandomName}-${secondRandomName}`,
+    `${thirdRandomName}-${randomName}-${secondRandomName}`,
+    `${thirdRandomName}-${secondRandomName}-${randomName}`,
+    `${secondRandomName}-${randomName}-${thirdRandomName}`,
+    `${secondRandomName}-${thirdRandomName}-${randomName}`,
+  ];
+
+  const isPermutationIncluded = permutations.some((permutation) =>
+    text!.includes(permutation),
+  );
+
+  expect(isPermutationIncluded).toBe(true);
+});

src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts

@@ -0,0 +1,171 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+
+test("memory should work as expect", async ({ page }) => {
+  test.skip(
+    !process?.env?.OPENAI_API_KEY,
+    "OPENAI_API_KEY required to run this test",
+  );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat memory");
+
+  // Locate the canvas element
+  const canvas = page.locator("#react-flow-id"); // Update the selector if needed
+
+  // Get the bounding box of the canvas to determine its position
+  const canvasBox = await canvas.boundingBox();
+  if (!canvasBox) {
+    throw new Error("Canvas element bounding box not found");
+  }
+
+  // Starting point (center of the canvas)
+  const startX = canvasBox.x + canvasBox.width / 2;
+  const startY = canvasBox.y + canvasBox.height / 2;
+
+  // End point (move 300 pixels to the right)
+  const endX = startX + 300;
+  const endY = startY;
+
+  // Hover over the canvas to focus it
+  await canvas.hover();
+
+  // Start the drag operation
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+
+  // Move to the new position
+  await page.mouse.move(endX, endY);
+
+  // Release the mouse button to finish the drag
+  await page.mouse.up();
+
+  await page
+    .getByTestId("helpersChat Memory")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForTimeout;
+
+  await page.getByTitle("fit view").click();
+
+  let outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+
+  while (outdatedComponents > 0) {
+    await page.getByTestId("icon-AlertTriangle").first().click();
+    await page.waitForTimeout(1000);
+    outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown_str_model_name").click();
+  await page.getByTestId("gpt-4o-1-option").click();
+
+  const prompt = `
+{context}
+
+User: {user_input}
+
+AI:
+  `;
+
+  await page
+    .getByTestId("promptarea_prompt_template-ExternalLink")
+    .nth(0)
+    .click();
+
+  await page.getByTestId("modal-promptarea_prompt_template").fill(prompt);
+  await page.getByText("Edit Prompt", { exact: true }).click();
+  await page.getByText("Check & Save").last().click();
+
+  //connection 1
+  const elementChatMemoryOutput = await page
+    .getByTestId("handle-memory-shownode-messages (text)-right")
+    .first();
+  await elementChatMemoryOutput.hover();
+  await page.mouse.down();
+
+  const promptInput = await page.getByTestId(
+    "handle-prompt-shownode-context-left",
+  );
+
+  await promptInput.hover();
+  await page.mouse.up();
+
+  await page.locator('//*[@id="react-flow-id"]').hover();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page
+    .getByPlaceholder("Send a message...")
+    .fill("hi, my car is blue and I like to eat pizza");
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForSelector("text=AI", { timeout: 30000 });
+
+  await page
+    .getByPlaceholder("Send a message...")
+    .fill("what color is my car and what do I like to eat?");
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  await page.waitForTimeout(400);
+
+  const textLocator = page.locator("text=AI");
+  await textLocator.nth(6).waitFor({ timeout: 30000 });
+  await expect(textLocator.nth(1)).toBeVisible();
+
+  await page.waitForTimeout(3000);
+
+  const memoryResponseText = await page
+    .locator(".form-modal-chat-text")
+    .nth(1)
+    .allTextContents();
+
+  expect(memoryResponseText[0].includes("pizza")).toBeTruthy();
+  expect(memoryResponseText[0].includes("blue")).toBeTruthy();
+});

src/frontend/tests/core/unit/chatInputOutput.spec.ts

@@ -0,0 +1,119 @@
+import { expect, test } from "@playwright/test";
+
+test("chat_io_teste", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat output");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("outputsChat Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("chat input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsChat Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  const elementsChatInput = await page
+    .locator('[data-testid="handle-chatinput-shownode-message-right"]')
+    .all();
+
+  let visibleElementHandle;
+
+  for (const element of elementsChatInput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  // Click and hold on the first element
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  // Move to the second element
+
+  const elementsChatOutput = await page
+    .getByTestId("handle-chatoutput-shownode-text-left")
+    .all();
+
+  for (const element of elementsChatOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page.getByLabel("fit view").click();
+  await page.getByText("Playground", { exact: true }).click();
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+  await page.getByTestId("input-chat-playground").click();
+  await page.getByTestId("input-chat-playground").fill("teste");
+  await page.getByRole("button").nth(1).click();
+  const chat_output = page.getByTestId("chat-message-AI-teste");
+  const chat_input = page.getByTestId("chat-message-User-teste");
+  await expect(chat_output).toHaveText("teste");
+  await expect(chat_input).toHaveText("teste");
+});

src/frontend/tests/core/unit/codeAreaModalComponent.spec.ts

@@ -0,0 +1,83 @@
+import { test } from "@playwright/test";
+
+test("CodeAreaModalComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("python function");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("prototypesPython Function")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("div-generic-node").click();
+
+  await page.getByTestId("code-button-modal").click();
+
+  const wCode =
+    'def python_function(text: str) -> st:    """This is a default python function that returns the input text"""    return text';
+
+  const customComponentCode = `from typing import Callable
+from langflow.field_typing import Code
+from langflow.interface.custom.custom_component import CustomComponent
+from langflow.interface.custom.utils import get_function
+
+class PythonFunctionComponent(CustomComponent):
+    def python_function(text: str) -> str:
+        """This is a default python function that returns the input text"""
+        return text`;
+
+  await page
+    .locator("#CodeEditor div")
+    .filter({ hasText: "PythonFunctionComponent" })
+    .nth(1)
+    .click();
+  await page.locator("textarea").press("Control+a");
+  await page.locator("textarea").fill(wCode);
+  await page.locator('//*[@id="checkAndSaveBtn"]').click();
+  await page.waitForTimeout(1000);
+  await page.locator("textarea").press("Control+a");
+  await page.locator("textarea").fill(wCode);
+  await page.locator("textarea").fill(customComponentCode);
+  await page.locator('//*[@id="checkAndSaveBtn"]').click();
+  await page.waitForTimeout(1000);
+});

src/frontend/tests/core/unit/dropdownComponent.spec.ts

@@ -0,0 +1,258 @@
+import { expect, test } from "@playwright/test";
+
+test("dropDownComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("amazon");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsAmazon Bedrock")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("title-Amazon Bedrock").click();
+
+  await page.getByTestId("dropdown_str_model_id").click();
+
+  await page
+    .getByTestId("anthropic.claude-3-haiku-20240307-v1:0-10-option")
+    .click();
+
+  let value = await page
+    .getByTestId("anthropic.claude-3-haiku-20240307-v1:0-10-option")
+    .first()
+    .innerText();
+  if (value !== "anthropic.claude-3-haiku-20240307-v1:0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("dropdown_str_model_id").click();
+  await page.getByText("anthropic.claude-v2").last().click();
+
+  value = await page.getByTestId("dropdown_str_model_id").innerText();
+  if (value !== "anthropic.claude-v2:1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  value = await page
+    .getByTestId("value-dropdown-dropdown_str_edit_model_id")
+    .innerText();
+  if (value !== "anthropic.claude-v2:1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="showregion_name"]').click();
+  expect(
+    await page.locator('//*[@id="showregion_name"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showregion_name"]').click();
+  expect(
+    await page.locator('//*[@id="showregion_name"]').isChecked(),
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showregion_name"]').click();
+  expect(
+    await page.locator('//*[@id="showregion_name"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showregion_name"]').click();
+  expect(
+    await page.locator('//*[@id="showregion_name"]').isChecked(),
+  ).toBeTruthy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(await page.locator('//*[@id="showmodel_id"]').isChecked()).toBeFalsy();
+
+  // showmodel_id
+  await page.locator('//*[@id="showmodel_id"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_id"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("value-dropdown-dropdown_str_edit_model_id").click();
+  await page.getByText("cohere").last().click();
+
+  value = await page
+    .getByTestId("value-dropdown-dropdown_str_edit_model_id")
+    .innerText();
+  if (value !== "cohere.embed-multilingual-v3") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByText("Close").last().click();
+
+  value = await page
+    .getByTestId("value-dropdown-dropdown_str_model_id")
+    .innerText();
+  if (value !== "cohere.embed-multilingual-v3") {
+    expect(false).toBeTruthy();
+  }
+  await page.getByTestId("code-button-modal").click();
+  await page.waitForTimeout(1000);
+
+  await page.locator("textarea").press("Control+a");
+  const emptyOptionsCode = `from langchain_community.chat_models.bedrock import BedrockChat
+
+from langflow.base.constants import STREAM_INFO_TEXT
+from langflow.base.models.model import LCModelComponent
+from langflow.field_typing import BaseLanguageModel, Text
+from langflow.io import BoolInput, DictInput, DropdownInput, StrInput
+from langflow.io import MessageInput
+from langflow.io import Output
+
+
+class AmazonBedrockComponent(LCModelComponent):
+    display_name: str = "Amazon Bedrock"
+    description: str = "Generate text using Amazon Bedrock LLMs."
+    icon = "Amazon"
+
+    inputs = [
+        MessageInput(name="input_value", display_name="Input"),
+        DropdownInput(
+            name="model_id",
+            display_name="Model Id",
+            options=[
+                "amazon.titan-text-express-v1",
+                "amazon.titan-text-lite-v1",
+                "amazon.titan-text-premier-v1:0",
+                "amazon.titan-embed-text-v1",
+                "amazon.titan-embed-text-v2:0",
+                "amazon.titan-embed-image-v1",
+                "amazon.titan-image-generator-v1",
+                "anthropic.claude-v2",
+                "anthropic.claude-v2:1",
+                "anthropic.claude-3-sonnet-20240229-v1:0",
+                "anthropic.claude-3-haiku-20240307-v1:0",
+                "anthropic.claude-3-opus-20240229-v1:0",
+                "anthropic.claude-instant-v1",
+                "ai21.j2-mid-v1",
+                "ai21.j2-ultra-v1",
+                "cohere.command-text-v14",
+                "cohere.command-light-text-v14",
+                "cohere.command-r-v1:0",
+                "cohere.command-r-plus-v1:0",
+                "cohere.embed-english-v3",
+                "cohere.embed-multilingual-v3",
+                "meta.llama2-13b-chat-v1",
+                "meta.llama2-70b-chat-v1",
+                "meta.llama3-8b-instruct-v1:0",
+                "meta.llama3-70b-instruct-v1:0",
+                "mistral.mistral-7b-instruct-v0:2",
+                "mistral.mixtral-8x7b-instruct-v0:1",
+                "mistral.mistral-large-2402-v1:0",
+                "mistral.mistral-small-2402-v1:0",
+                "stability.stable-diffusion-xl-v0",
+                "stability.stable-diffusion-xl-v1",
+            ],
+            value="anthropic.claude-3-haiku-20240307-v1:0",
+        ),
+        StrInput(name="credentials_profile_name", display_name="Credentials Profile Name"),
+        StrInput(name="region_name", display_name="Region Name"),
+        DictInput(name="model_kwargs", display_name="Model Kwargs", advanced=True),
+        StrInput(name="endpoint_url", display_name="Endpoint URL"),
+        BoolInput(name="cache", display_name="Cache"),
+        StrInput(
+            name="system_message",
+            display_name="System Message",
+            info="System message to pass to the model.",
+            advanced=True,
+        ),
+        BoolInput(name="stream", display_name="Stream", info=STREAM_INFO_TEXT, advanced=True),
+    ]
+    outputs = [
+        Output(display_name="Text", name="text_output", method="text_response"),
+        Output(display_name="Language Model", name="model_output", method="build_model"),
+    ]
+
+    def text_response(self) -> Text:
+        input_value = self.input_value
+        stream = self.stream
+        system_message = self.system_message
+        output = self.build_model()
+        result = self.get_chat_result(output, stream, input_value, system_message)
+        self.status = result
+        return result
+
+    def build_model(self) -> BaseLanguageModel:
+        model_id = self.model_id
+        credentials_profile_name = self.credentials_profile_name
+        region_name = self.region_name
+        model_kwargs = self.model_kwargs
+        endpoint_url = self.endpoint_url
+        cache = self.cache
+        stream = self.stream
+        try:
+            output = BedrockChat(
+                credentials_profile_name=credentials_profile_name,
+                model_id=model_id,
+                region_name=region_name,
+                model_kwargs=model_kwargs,
+                endpoint_url=endpoint_url,
+                streaming=stream,
+                cache=cache,
+            )
+        except Exception as e:
+            raise ValueError("Could not connect to AmazonBedrock API.") from e
+        return output
+  `;
+  await page.locator("textarea").fill(emptyOptionsCode);
+  await page.getByRole("button", { name: "Check & Save" }).click();
+  await page.getByText("No parameters are available for display.").isVisible();
+});

src/frontend/tests/core/unit/fileUploadComponent.spec.ts

@@ -0,0 +1,170 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("should be able to upload a file", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("file");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataFile")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  const fileChooserPromise = page.waitForEvent("filechooser");
+  await page.getByTestId("icon-FileSearch2").click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(
+    path.join(__dirname, "../../assets/test_file.txt"),
+  );
+  await page.getByText("test_file.txt").isVisible();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+
+  await page
+    .getByTestId("outputsText Output")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("parse data");
+  await page
+    .getByTestId("helpersParse Data")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  let visibleElementHandle;
+
+  const elementsFile = await page
+    .getByTestId("handle-file-shownode-data-right")
+    .all();
+
+  for (const element of elementsFile) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  // Click and hold on the first element
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  // Move to the second element
+
+  const parseDataElement = await page
+    .getByTestId("handle-parsedata-shownode-data-left")
+    .all();
+
+  for (const element of parseDataElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  // Click and hold on the first element
+
+  const parseDataOutputElement = await page
+    .getByTestId("handle-parsedata-shownode-text-right")
+    .all();
+
+  for (const element of parseDataOutputElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+  await page.mouse.down();
+
+  // Move to the second element
+  const textOutputElement = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .all();
+
+  for (const element of textOutputElement) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover();
+
+  // Release the mouse
+  await page.mouse.up();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector("text=Run Flow", {
+    timeout: 30000,
+  });
+
+  await page.getByText("Run Flow", { exact: true }).click();
+
+  await page.waitForTimeout(3000);
+
+  const textOutput = await page.getByPlaceholder("Empty").first().inputValue();
+
+  expect(textOutput).toContain("this is a test file");
+});

src/frontend/tests/core/unit/floatComponent.spec.ts

@@ -0,0 +1,143 @@
+import { expect, test } from "@playwright/test";
+
+test("FloatComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("ollama");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOllama")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.waitForTimeout(1000);
+  await page.locator('//*[@id="float-input"]').click();
+  await page.locator('//*[@id="float-input"]').fill("");
+  await page.waitForTimeout(1000);
+  await page.locator('//*[@id="float-input"]').fill("3");
+
+  let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+  if (value != "2") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.waitForTimeout(1000);
+  await page.locator('//*[@id="float-input"]').click();
+  await page.locator('//*[@id="float-input"]').fill("");
+  await page.waitForTimeout(1000);
+  await page.locator('//*[@id="float-input"]').fill("-3");
+
+  value = await page.locator('//*[@id="float-input"]').inputValue();
+
+  if (value != "-2") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.getByTestId("showmirostat_eta").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("showmirostat_eta").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.getByTestId("showmirostat_eta").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("showmirostat_eta").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_eta"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.getByTestId("showmirostat_tau").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("showmirostat_tau").click();
+  expect(
+    await page.locator('//*[@id="showmirostat_tau"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.getByText("Close").last().click();
+
+  const plusButtonLocator = page.locator('//*[@id="float-input"]');
+  const elementCount = await plusButtonLocator?.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
+
+    // showtemperature
+    await page.locator('//*[@id="showtemperature"]').click();
+    expect(
+      await page.locator('//*[@id="showtemperature"]').isChecked(),
+    ).toBeTruthy();
+
+    await page.getByText("Close").last().click();
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill("3");
+
+    let value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "1") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="float-input"]').click();
+    await page.locator('//*[@id="float-input"]').fill("-3");
+
+    value = await page.locator('//*[@id="float-input"]').inputValue();
+
+    if (value != "-1") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

src/frontend/tests/core/unit/inputComponent.spec.ts

@@ -0,0 +1,161 @@
+import { expect, test } from "@playwright/test";
+
+test("InputComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("Chroma");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("vectorstoresChroma DB")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("popover-anchor-input-collection_name").click();
+  await page
+    .getByTestId("popover-anchor-input-collection_name")
+    .fill("collection_name_test_123123123!@#$&*(&%$@");
+
+  let value = await page
+    .getByTestId("popover-anchor-input-collection_name")
+    .inputValue();
+
+  if (value != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("div-generic-node").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked(),
+  ).toBeFalsy();
+
+  let valueEditNode = await page
+    .getByTestId("popover-anchor-input-collection_name-edit")
+    .inputValue();
+
+  if (valueEditNode != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-collection_name-edit")
+    .fill("NEW_collection_name_test_123123123!@#$&*(&%$@ÇÇÇÀõe");
+
+  await page.waitForTimeout(1000);
+  await page.getByText("Close").last().click();
+
+  const plusButtonLocator = page.getByTestId("input-collection_name");
+  const elementCount = await plusButtonLocator?.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
+
+    await page.getByText("Close").last().click();
+
+    let value = await page
+      .getByTestId("popover-anchor-input-collection_name")
+      .inputValue();
+
+    if (value != "NEW_collection_name_test_123123123!@#$&*(&%$@ÇÇÇÀõe") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

src/frontend/tests/core/unit/inputListComponent.spec.ts

@@ -0,0 +1,161 @@
+import { expect, test } from "@playwright/test";
+
+test("InputListComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("url");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("dataURL")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("inputlist_str_urls_0").fill("test test test test");
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page
+    .getByTestId("inputlist_str_urls_1")
+    .fill("test1 test1 test1 test1");
+
+  await page
+    .getByTestId("inputlist_str_urls_2")
+    .fill("test2 test2 test2 test2");
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  const value0 = await page.getByTestId("inputlist_str_urls_0").inputValue();
+  const value1 = await page.getByTestId("inputlist_str_urls_1").inputValue();
+
+  const value2 = await page.getByTestId("inputlist_str_urls_2").inputValue();
+
+  if (
+    value0 !== "test test test test" ||
+    value1 !== "test1 test1 test1 test1" ||
+    value2 !== "test2 test2 test2 test2"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+
+  const plusButtonLocator = page.getByTestId(
+    "input-list-minus-btn-edit_urls-1",
+  );
+  const elementCount = await plusButtonLocator?.count();
+
+  if (elementCount > 1) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByText("Close").last().click();
+
+  await page.getByTestId("input-list-minus-btn_urls-2").isHidden();
+
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+  await page.getByTestId("input-list-plus-btn_urls-0").click();
+
+  await page.getByTestId("inputlist_str_urls_0").fill("test test test test");
+  await page
+    .getByTestId("inputlist_str_urls_1")
+    .fill("test1 test1 test1 test1");
+  await page
+    .getByTestId("inputlist_str_urls_2")
+    .fill("test2 test2 test2 test2");
+  await page
+    .getByTestId("inputlist_str_urls_3")
+    .fill("test3 test3 test3 test3");
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  const value0Edit = await page
+    .getByTestId("inputlist_str_edit_urls_0")
+    .inputValue();
+  const value1Edit = await page
+    .getByTestId("inputlist_str_edit_urls_1")
+    .inputValue();
+  const value2Edit = await page
+    .getByTestId("inputlist_str_edit_urls_2")
+    .inputValue();
+  const value3Edit = await page
+    .getByTestId("inputlist_str_edit_urls_3")
+    .inputValue();
+
+  if (
+    value0Edit !== "test test test test" ||
+    value1Edit !== "test1 test1 test1 test1" ||
+    value2Edit !== "test2 test2 test2 test2" ||
+    value3Edit !== "test3 test3 test3 test3"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+  await page.getByTestId("input-list-minus-btn-edit_urls-1").click();
+
+  const plusButtonLocatorEdit0 = await page.getByTestId(
+    "input-list-plus-btn-edit_urls-0",
+  );
+  const elementCountEdit0 = await plusButtonLocatorEdit0?.count();
+
+  const plusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-plus-btn-edit_urls-1",
+  );
+  const elementCountEdit2 = await plusButtonLocatorEdit2?.count();
+
+  if (elementCountEdit0 > 1 || elementCountEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+
+  const minusButtonLocatorEdit1 = await page.getByTestId(
+    "input-list-minus-btn-edit_urls-1",
+  );
+
+  const elementCountMinusEdit1 = await minusButtonLocatorEdit1?.count();
+
+  const minusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-minus-btn-edit_urls-2",
+  );
+
+  const elementCountMinusEdit2 = await minusButtonLocatorEdit2?.count();
+
+  if (elementCountMinusEdit1 > 1 || elementCountMinusEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/core/unit/intComponent.spec.ts

@@ -0,0 +1,200 @@
+import { expect, test } from "@playwright/test";
+
+test("IntComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("openai");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsOpenAI")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByTestId("showmax_tokens").click();
+
+  await page.getByText("Close").last().click();
+  await page.getByTestId("int_int_max_tokens").click();
+  await page.getByTestId("int_int_max_tokens").fill("1020304050");
+
+  let value = await page.getByTestId("int_int_max_tokens").inputValue();
+
+  if (value != "1020304050") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("int_int_max_tokens").click();
+  await page.getByTestId("int_int_max_tokens").fill("0");
+
+  value = await page.getByTestId("int_int_max_tokens").inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("title-OpenAI").click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  value = await page.getByTestId("int_int_edit_max_tokens").inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("int_int_edit_max_tokens").click();
+  await page.getByTestId("int_int_edit_max_tokens").fill("60708090");
+
+  await page.locator('//*[@id="showmodel_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showmodel_name"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showopenai_api_base"]').click();
+  expect(
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showtemperature"]').click();
+  expect(
+    await page.locator('//*[@id="showtemperature"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmodel_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmodel_name"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showopenai_api_base"]').click();
+  expect(
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showtemperature"]').click();
+  expect(
+    await page.locator('//*[@id="showtemperature"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showmodel_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_kwargs"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showmodel_name"]').click();
+  expect(
+    await page.locator('//*[@id="showmodel_name"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showopenai_api_base"]').click();
+  expect(
+    await page.locator('//*[@id="showopenai_api_base"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showtemperature"]').click();
+  expect(
+    await page.locator('//*[@id="showtemperature"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.getByText("Close").last().click();
+
+  const plusButtonLocator = page.getByTestId("int-input-max_tokens");
+  const elementCount = await plusButtonLocator?.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
+
+    const valueEditNode = await page
+      .getByTestId("int_int_max_tokens")
+      .inputValue();
+
+    if (valueEditNode != "128000") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.getByText("Close").last().click();
+    await page.getByTestId("int_int_max_tokens").click();
+    await page.getByTestId("int_int_max_tokens").fill("3");
+
+    let value = await page.getByTestId("int_int_max_tokens").inputValue();
+
+    if (value != "3") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.getByTestId("int_int_max_tokens").click();
+    await page.getByTestId("int_int_max_tokens").fill("-3");
+    await page.getByTestId("div-generic-node").click();
+
+    value = await page.getByTestId("int_int_max_tokens").inputValue();
+
+    if (value != "0") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

src/frontend/tests/core/unit/keyPairListComponent.spec.ts

@@ -0,0 +1,137 @@
+import { expect, test } from "@playwright/test";
+
+test("KeypairListComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("amazon bedrock");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("modelsAmazon Bedrock")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.getByTestId("showmodel_kwargs").click();
+  expect(await page.getByTestId("showmodel_kwargs").isChecked()).toBeTruthy();
+  await page.getByText("Close").last().click();
+
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
+  await page.locator('//*[@id="keypair100"]').click();
+  await page
+    .locator('//*[@id="keypair100"]')
+    .fill("test test test test test test");
+
+  await page.getByTestId("div-generic-node").click();
+
+  const valueWithSpace = await page.getByTestId("keypair100").inputValue();
+  await page.getByTestId("div-generic-node").click();
+
+  if (valueWithSpace !== "test test test test test test") {
+    expect(false).toBeTruthy();
+  }
+
+  const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
+  const elementCountNode = await plusButtonLocatorNode?.count();
+  if (elementCountNode > 0) {
+    await plusButtonLocatorNode.click();
+  }
+  await page.getByTestId("div-generic-node").click();
+
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest1");
+  await page.getByTestId("div-generic-node").click();
+
+  const keyPairVerification = page.locator('//*[@id="keypair100"]');
+  const elementKeyCount = await keyPairVerification?.count();
+
+  if (elementKeyCount === 1) {
+    expect(true).toBeTruthy();
+  } else {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.getByText("Close").last().click();
+
+  const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+  const elementCount = await plusButtonLocator?.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
+
+    await page.locator('//*[@id="editNodekeypair0"]').click();
+    await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
+
+    const keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
+    const elementKeyCount = await keyPairVerification?.count();
+
+    if (elementKeyCount === 1) {
+      await page.getByText("Close").last().click();
+
+      await page.getByTestId("div-generic-node").click();
+
+      const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
+      const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
+      await page.getByTestId("div-generic-node").click();
+
+      if (
+        key1 === "testtesttesttest" &&
+        value1 === "test test test test test test"
+      ) {
+        expect(true).toBeTruthy();
+      } else {
+        expect(false).toBeTruthy();
+      }
+    } else {
+      expect(false).toBeTruthy();
+    }
+  } else {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/core/unit/nestedComponent.spec.ts

@@ -0,0 +1,106 @@
+import { expect, test } from "@playwright/test";
+
+test("NestedComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("api request");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("dataAPI Request")
+    .first()
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.click('//*[@id="react-flow-id"]');
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("dict_nesteddict_headers").first().click();
+  await page
+    .getByText("{")
+    .last()
+    .hover()
+    .then(async () => {
+      await page.locator(".json-view--edit").first().click();
+      await page.locator(".json-view--input").first().fill("keytest");
+      await page.locator(".json-view--edit").first().click();
+
+      await page.locator(".json-view--edit").first().click();
+      await page.locator(".json-view--input").first().fill("keytest1");
+      await page.locator(".json-view--edit").first().click();
+
+      await page.locator(".json-view--edit").first().click();
+      await page.locator(".json-view--input").first().fill("keytest2");
+      await page.locator(".json-view--edit").first().click();
+    });
+
+  await page
+    .locator(".json-view--pair")
+    .first()
+    .hover()
+    .then(async () => {
+      await page.locator(".json-view--edit").nth(2).click();
+      await page.locator(".json-view--null").first().fill("proptest1");
+      await page.locator(".json-view--edit").nth(2).click();
+    });
+
+  await page.getByText("Save").last().click();
+
+  await page.getByTestId("div-generic-node").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.getByTestId("dict_nesteddict_edit_headers").first().click();
+
+  expect(await page.getByText("keytest", { exact: true }).count()).toBe(1);
+  expect(await page.getByText("keytest1", { exact: true }).count()).toBe(1);
+  expect(await page.getByText("keytest2", { exact: true }).count()).toBe(1);
+  expect(await page.getByText("proptest1").count()).toBe(1);
+
+  await page
+    .locator(".json-view--pair")
+    .first()
+    .hover()
+    .then(async () => {
+      await page.locator(".json-view--edit").nth(3).click();
+      await page.locator(".json-view--edit").nth(2).click();
+    });
+
+  expect(await page.getByText("keytest", { exact: true }).count()).toBe(0);
+  expect(await page.getByText("proptest1").count()).toBe(0);
+});

src/frontend/tests/core/unit/promptModalComponent.spec.ts

@@ -0,0 +1,216 @@
+import { expect, test } from "@playwright/test";
+
+test("PromptTemplateComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("prompt");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="promptsPrompt"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("promptarea_prompt_template").click();
+
+  await page
+    .getByTestId("modal-promptarea_prompt_template")
+    .fill("{prompt} example {prompt1}");
+
+  let value = await page
+    .getByTestId("modal-promptarea_prompt_template")
+    .inputValue();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+
+  let valueBadgeOne = await page.locator('//*[@id="badge0"]').innerText();
+  if (valueBadgeOne != "prompt") {
+    expect(false).toBeTruthy();
+  }
+
+  let valueBadgeTwo = await page.locator('//*[@id="badge1"]').innerText();
+  if (valueBadgeTwo != "prompt1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page.getByTestId("textarea_str_prompt").click();
+  await page.getByTestId("textarea_str_prompt").fill("prompt_value_!@#!@#");
+
+  value = await page.getByTestId("textarea_str_prompt").inputValue();
+
+  if (value != "prompt_value_!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("div-generic-node").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("save-button-modal").click();
+
+  const replace = await page.getByTestId("replace-button").isVisible();
+
+  if (replace) {
+    await page.getByTestId("replace-button").click();
+  }
+
+  await page.getByTestId("textarea_str_prompt1").click();
+  await page
+    .getByTestId("textarea_str_prompt1")
+    .fill("prompt_name_test_123123!@#!@#");
+
+  value = await page.getByTestId("textarea_str_prompt1").inputValue();
+
+  if (value != "prompt_name_test_123123!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  value =
+    (await page.locator('//*[@id="textarea_str_edit_prompt"]').inputValue()) ??
+    "";
+
+  if (value != "prompt_value_!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  value =
+    (await page.locator('//*[@id="textarea_str_edit_prompt1"]').inputValue()) ??
+    "";
+
+  if (value != "prompt_name_test_123123!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  value = await page
+    .locator('//*[@id="promptarea_prompt_edit_template"]')
+    .innerText();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("textarea_str_edit_prompt1-ExternalLink").click();
+  await page
+    .getByTestId("text-area-modal")
+    .fill("prompt_edit_test_12312312321!@#$");
+
+  await page.getByText("Finish Editing", { exact: true }).click();
+
+  await page.getByTestId("textarea_str_edit_prompt-ExternalLink").click();
+  await page
+    .getByTestId("text-area-modal")
+    .fill("prompt_edit_test_44444444444!@#$");
+
+  await page.getByText("Finish Editing", { exact: true }).click();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(await page.locator('//*[@id="showtemplate"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(
+    await page.locator('//*[@id="showtemplate"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(await page.locator('//*[@id="showtemplate"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(
+    await page.locator('//*[@id="showtemplate"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
+
+  await page.getByText("Close").last().click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeTruthy();
+
+  value =
+    (await page.locator('//*[@id="textarea_str_edit_prompt"]').inputValue()) ??
+    "";
+
+  if (value != "prompt_edit_test_44444444444!@#$") {
+    expect(false).toBeTruthy();
+  }
+
+  value =
+    (await page.locator('//*[@id="textarea_str_edit_prompt1"]').inputValue()) ??
+    "";
+
+  if (value != "prompt_edit_test_12312312321!@#$") {
+    expect(false).toBeTruthy();
+  }
+
+  value = await page
+    .locator('//*[@id="promptarea_prompt_edit_template"]')
+    .innerText();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/core/unit/tableInputComponent.spec.ts

@@ -0,0 +1,192 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to interact with table input component", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  const randomText = Math.random().toString(36).substring(7);
+  const secondRandomText = Math.random().toString(36).substring(7);
+  const thirdRandomText = Math.random().toString(36).substring(7);
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("custom component");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("helpersCustom Component")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("code-button-modal").click();
+
+  const customCodeWithError = `
+# from langflow.field_typing import Data
+from langflow.custom import Component
+from langflow.io import TableInput, Output
+from langflow.schema import Data
+
+
+class CustomComponent(Component):
+    display_name = "Custom Component"
+    description = "Use as a template to create your own component."
+    documentation: str = "http://docs.langflow.org/components/custom"
+    icon = "custom_components"
+    name = "CustomComponent"
+
+    inputs = [
+        TableInput(
+    name="input_value",
+    display_name="Input Value",
+    value=[
+        {"alpha": "X1", "bravo": "Y2", "charlie": "Z3", "delta": "W4", "echo": "V5"},
+        {"alpha": "A6", "bravo": "B7", "charlie": "C8", "delta": "D9", "echo": "E0"},
+        {"alpha": "F1", "bravo": "G2", "charlie": "H3", "delta": "I4", "echo": "J5"},
+        {"alpha": "K6", "bravo": "L7", "charlie": "M8", "delta": "N9", "echo": "O0"},
+        {"alpha": "P1", "bravo": "Q2", "charlie": "R3", "delta": "S4", "echo": "T5"}
+    ],
+    table_schema=[
+        {"name": "alpha", "display_name": "Alpha"},
+        {"name": "bravo", "display_name": "Bravo"},
+        {"name": "charlie", "display_name": "Charlie"},
+        {"name": "delta", "display_name": "Delta"},
+        {"name": "echo", "display_name": "Echo"}
+    ]
+)
+    ]
+
+    outputs = [
+        Output(display_name="Output", name="output", method="build_output"),
+    ]
+
+    def build_output(self) -> Data:
+        data = Data(value=self.input_value)
+        self.status = data
+        return data
+  `;
+
+  await page.locator("textarea").press("Control+a");
+  await page.locator("textarea").fill(customCodeWithError);
+
+  await page.getByText("Check & Save").last().click();
+
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Open Table").click();
+
+  await page.waitForTimeout(1000);
+
+  const visibleTextsGroup1 = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
+  const visibleTextsGroup2 = ["X1", "Y2", "Z3", "W4", "V5"];
+  const visibleTextsGroup3 = ["P1", "Q2", "R3", "S4", "T5"];
+  const visibleTextsGroup4 = ["F1", "G2", "H3", "I4", "J5"];
+
+  const allVisibleTexts = [
+    ...visibleTextsGroup1,
+    ...visibleTextsGroup2,
+    ...visibleTextsGroup3,
+    ...visibleTextsGroup4,
+  ];
+
+  for (const text of allVisibleTexts) {
+    await expect(page.getByText(text)).toBeVisible();
+  }
+
+  await page.locator(".ag-cell-value").first().click();
+
+  await page.getByPlaceholder("Empty").fill(randomText);
+  await page.getByText("Save").last().click();
+  await page.waitForTimeout(500);
+
+  await page.locator(".ag-cell-value").nth(12).click();
+
+  await page.getByPlaceholder("Empty").fill(secondRandomText);
+  await page.getByText("Save").last().click();
+  await page.waitForTimeout(500);
+
+  await page.locator(".ag-cell-value").nth(24).click();
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Empty").fill(thirdRandomText);
+  await page.getByText("Save").last().click();
+
+  await page.waitForTimeout(500);
+
+  expect(page.getByText(randomText)).toBeVisible();
+  expect(page.getByText(secondRandomText)).toBeVisible();
+  expect(page.getByText(thirdRandomText)).toBeVisible();
+
+  await page.locator('input[type="checkbox"]').last().click();
+
+  await page.getByTestId("icon-Copy").click();
+
+  await page.waitForTimeout(500);
+
+  let numberOfCopiedRows = await page.getByText(thirdRandomText).count();
+  expect(numberOfCopiedRows).toBe(2);
+
+  await page.locator('input[type="checkbox"]').last().click();
+  await page.getByTestId("icon-Trash2").click();
+
+  await page.waitForTimeout(500);
+
+  await page.locator('input[type="checkbox"]').last().click();
+  await page.getByTestId("icon-Trash2").click();
+
+  numberOfCopiedRows = await page.getByText(thirdRandomText).count();
+  expect(numberOfCopiedRows).toBe(0);
+
+  await page.getByText("Close").last().click();
+
+  await page.waitForTimeout(500);
+
+  await page.getByText("Open Table").click();
+
+  await page.waitForTimeout(1000);
+
+  const visibleTexts = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
+  const notVisibleTexts = ["X1", "thirdRandomText"];
+
+  await Promise.all(
+    visibleTexts.map((text) => expect(page.getByText(text)).toBeVisible()),
+  );
+  await Promise.all(
+    notVisibleTexts.map((text) =>
+      expect(page.getByText(text)).not.toBeVisible(),
+    ),
+  );
+});

src/frontend/tests/core/unit/textAreaModalComponent.spec.ts

@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+
+test("TextAreaModalComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    await focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("prompt");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="promptsPrompt"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTestId("promptarea_prompt_template").click();
+
+  await page.getByTestId("modal-promptarea_prompt_template").fill("{text}");
+
+  let valueBadgeOne = await page.locator('//*[@id="badge0"]').innerText();
+  if (valueBadgeOne != "text") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page
+    .getByTestId("textarea_str_text")
+    .fill(
+      "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!",
+    );
+
+  await page.getByTestId("textarea_str_text-ExternalLink").click();
+
+  await page.waitForTimeout(500);
+
+  const value = await page.getByTestId("text-area-modal").inputValue();
+
+  if (
+    value !=
+    "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("text-area-modal").fill("test123123");
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  const valueTextArea = await page
+    .getByTestId("textarea_str_text")
+    .inputValue();
+
+  if (valueTextArea != "test123123") {
+    expect(false).toBeTruthy();
+  }
+});

src/frontend/tests/core/unit/toggleComponent.spec.ts

@@ -0,0 +1,221 @@
+import { expect, test } from "@playwright/test";
+
+test("ToggleComponent", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+  await page.getByTestId("blank-flow").click();
+
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+  const focusElementsOnBoard = async ({ page }) => {
+    const focusElements = await page.getByTestId("extended-disclosure");
+    focusElements.click();
+  };
+
+  await focusElementsOnBoard({ page });
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("directory");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("dataDirectory")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("div-generic-node").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.getByText("Close").last().click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+
+  await page.getByTestId("toggle_bool_load_hidden").click();
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("toggle_bool_load_hidden").click();
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeFalsy();
+
+  await page.getByTestId("toggle_bool_load_hidden").click();
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("toggle_bool_load_hidden").click();
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeFalsy();
+
+  await page.getByTestId("toggle_bool_load_hidden").click();
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeTruthy();
+
+  await page.getByTestId("div-generic-node").click();
+
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  expect(
+    await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmax_concurrency"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showpath"]').click();
+  expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked(),
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showmax_concurrency"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showpath"]').click();
+  expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked(),
+  ).toBeFalsy();
+
+  await page.getByText("Close").last().click();
+
+  const plusButtonLocator = page.getByTestId("toggle_bool_load_hidden");
+  const elementCount = await plusButtonLocator?.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page.getByTestId("div-generic-node").click();
+
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
+
+    await page.locator('//*[@id="showload_hidden"]').click();
+    expect(
+      await page.locator('//*[@id="showload_hidden"]').isChecked(),
+    ).toBeTruthy();
+
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeTruthy();
+
+    await page.getByText("Close").last().click();
+
+    await page.getByTestId("toggle_bool_load_hidden").click();
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeFalsy();
+
+    await page.getByTestId("toggle_bool_load_hidden").click();
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeTruthy();
+
+    await page.getByTestId("toggle_bool_load_hidden").click();
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeFalsy();
+
+    await page.getByTestId("toggle_bool_load_hidden").click();
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeTruthy();
+
+    await page.getByTestId("toggle_bool_load_hidden").click();
+    expect(
+      await page.getByTestId("toggle_bool_load_hidden").isChecked(),
+    ).toBeFalsy();
+  }
+});