Merge branch 'dev' into dev_to_main

.github/workflows/typescript_test.yml

@@ -60,7 +60,7 @@ jobs:
         if: ${{ steps.setup-node.outputs.cache-hit != 'true' }}
       - name: Get Playwright version
         run: echo "PLAYWRIGHT_VERSION=$(jq '.devDependencies["@playwright/test"]' src/frontend/package.json -r)" >> $GITHUB_ENV
-      - name:  Cache Playwright binaries
+      - name: Cache Playwright binaries
         id: playwright-cache
         uses: actions/cache@v4
         with:

src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx

@@ -54,7 +54,7 @@ export default function HandleRenderComponent({
         side={left ? "left" : "right"}
       >
         <Handle
-          data-testid={`handle-${title.toLowerCase()}-${
+          data-testid={`handle-${testIdComplement}-${title.toLowerCase()}-${
             !showNode ? (left ? "target" : "source") : left ? "left" : "right"
           }`}
           type={left ? "target" : "source"}

src/frontend/tests/end-to-end/actionsMainPage-shard-0.spec.ts

@@ -0,0 +1,134 @@
+import { test } from "@playwright/test";
+
+test("user should be able to download a flow or a component", 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(5000);
+    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", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.waitForTimeout(3000);
+
+  if (await page.getByTestId("replace-button").isVisible()) {
+    await page.getByTestId("replace-button").click();
+  }
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("icon-ChevronLeft").last().click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items exported successfully").isVisible();
+
+  await page.getByText("Flows", { exact: true }).click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items exported successfully").isVisible();
+
+  await page.getByText("Components", { exact: true }).click();
+  await page.getByRole("checkbox").nth(1).click();
+  await page.getByTestId("icon-FileDown").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Components exported successfully").isVisible();
+});
+
+test("user should be able to upload a flow or a component", 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;
+  }
+
+  await page.getByTestId("upload-folder-button").last().click();
+});
+
+test("user should be able to duplicate a flow or a component", 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(5000);
+    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", { exact: true }).click();
+  await page.getByTestId("more-options-modal").click();
+
+  await page.getByTestId("icon-SaveAll").first().click();
+  await page.waitForTimeout(3000);
+
+  if (await page.getByTestId("replace-button").isVisible()) {
+    await page.getByTestId("replace-button").click();
+  }
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("icon-ChevronLeft").last().click();
+  await page.getByRole("checkbox").nth(1).click();
+
+  await page.getByTestId("icon-Copy").last().click();
+  await page.waitForTimeout(1000);
+  await page.getByText("Items duplicated successfully").isVisible();
+});

src/frontend/tests/end-to-end/actionsMainPage-shard-1.spec.ts

@@ -137,136 +137,3 @@ test("search components", async ({ page }) => {
   await page.getByText("Prompt", { exact: true }).isHidden();
   await page.getByText("OpenAI", { exact: true }).isHidden();
 });
-
-test("user should be able to download a flow or a component", 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(5000);
-    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", { exact: true }).click();
-  await page.getByTestId("more-options-modal").click();
-
-  await page.getByTestId("icon-SaveAll").first().click();
-  await page.waitForTimeout(3000);
-
-  if (await page.getByTestId("replace-button").isVisible()) {
-    await page.getByTestId("replace-button").click();
-  }
-  await page.waitForTimeout(3000);
-
-  await page.getByTestId("icon-ChevronLeft").last().click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items exported successfully").isVisible();
-
-  await page.getByText("Flows", { exact: true }).click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items exported successfully").isVisible();
-
-  await page.getByText("Components", { exact: true }).click();
-  await page.getByRole("checkbox").nth(1).click();
-  await page.getByTestId("icon-FileDown").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Components exported successfully").isVisible();
-});
-
-test("user should be able to upload a flow or a component", 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;
-  }
-
-  await page.getByTestId("upload-folder-button").last().click();
-});
-
-test("user should be able to duplicate a flow or a component", 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(5000);
-    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", { exact: true }).click();
-  await page.getByTestId("more-options-modal").click();
-
-  await page.getByTestId("icon-SaveAll").first().click();
-  await page.waitForTimeout(3000);
-
-  if (await page.getByTestId("replace-button").isVisible()) {
-    await page.getByTestId("replace-button").click();
-  }
-  await page.waitForTimeout(3000);
-
-  await page.getByTestId("icon-ChevronLeft").last().click();
-  await page.getByRole("checkbox").nth(1).click();
-
-  await page.getByTestId("icon-Copy").last().click();
-  await page.waitForTimeout(1000);
-  await page.getByText("Items duplicated successfully").isVisible();
-});

src/frontend/tests/end-to-end/chatInputOutput.spec.ts

@@ -26,11 +26,9 @@ test("chat_io_teste", async ({ page }) => {
   });
 
   await page.getByTestId("blank-flow").click();
-
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
-
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("chat output");

src/frontend/tests/end-to-end/chatInputOutputUser-shard-0.spec.ts

@@ -0,0 +1,112 @@
+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 }) => {
+  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(5000);
+    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();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-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("Save Changes").click();
+
+  await page.getByText("Playground", { exact: true }).click();
+
+  // Read the image file as a binary string
+  const filePath = "tests/end-to-end/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/end-to-end/chatInputOutputUser-shard-1.spec.ts

@@ -0,0 +1,67 @@
+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 see output inspection", async ({ page }) => {
+  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(5000);
+    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();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByTestId("button_run_chat output").last().click();
+
+  await page.waitForTimeout(5000);
+
+  await page.waitForSelector('[data-testid="icon-ScanEye"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("icon-ScanEye").nth(4).click();
+
+  await page.getByText("Sender", { exact: true }).isVisible();
+  await page.getByText("Type", { exact: true }).isVisible();
+  await page.getByText("User", { exact: true }).last().isVisible();
+});

src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts

@@ -0,0 +1,139 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+
+test("user must interact with chat with Input/Output", async ({ page }) => {
+  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(5000);
+    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();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("dropdown-model_name").click();
+  await page.getByTestId("gpt-4o-0-option").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Playground", { exact: true }).click();
+
+  await page.waitForSelector('[data-testid="input-chat-playground"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("input-chat-playground").fill("Hello, how are you?");
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+  let valueUser = await page.getByTestId("sender_name_user").textContent();
+
+  await page.waitForSelector('[data-testid="sender_name_ai"]', {
+    timeout: 100000,
+  });
+
+  let valueAI = await page.getByTestId("sender_name_ai").textContent();
+
+  expect(valueUser).toBe("User");
+  expect(valueAI).toBe("AI");
+
+  await page.keyboard.press("Escape");
+
+  await page
+    .getByTestId("textarea-input_value")
+    .nth(0)
+    .fill(
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+    );
+  await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+  await page.getByText("Close", { exact: true }).click();
+  await page.getByText("Chat Input", { exact: true }).click();
+  await page.getByTestId("advanced-button-modal").click();
+  await page.getByTestId("showsender_name").click();
+  await page.getByText("Save Changes", { exact: true }).click();
+
+  await page.getByText("Chat Output", { exact: true }).click();
+  await page.getByTestId("advanced-button-modal").click();
+  await page.getByTestId("showsender_name").click();
+  await page.getByText("Save Changes", { exact: true }).click();
+
+  await page
+    .getByTestId("popover-anchor-input-sender_name")
+    .nth(1)
+    .fill("TestSenderNameUser");
+  await page
+    .getByTestId("popover-anchor-input-sender_name")
+    .nth(0)
+    .fill("TestSenderNameAI");
+
+  await page.getByText("Playground", { exact: true }).last().click();
+
+  await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTestId("icon-LucideSend").click();
+
+  valueUser = await page
+    .getByTestId("sender_name_testsendernameuser")
+    .textContent();
+  valueAI = await page
+    .getByTestId("sender_name_testsendernameai")
+    .textContent();
+
+  expect(valueUser).toBe("TestSenderNameUser");
+  expect(valueAI).toBe("TestSenderNameAI");
+
+  expect(
+    await page
+      .getByText(
+        "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
+        { exact: true },
+      )
+      .isVisible(),
+  );
+});

src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts

@@ -25,11 +25,9 @@ test("CodeAreaModalComponent", async ({ page }) => {
   });
 
   await page.getByTestId("blank-flow").click();
-
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
-
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("python function");

src/frontend/tests/end-to-end/deleteComponentFlows.spec.ts

@@ -1,18 +1,37 @@
 import { test } from "@playwright/test";
 
+test("should add API-KEY", async ({ page }) => {
+  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("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  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(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
 test("should delete a flow", async ({ page }) => {
   await page.goto("/");
   await page.waitForTimeout(2000);
-  await page.getByText("Store").nth(0).click();
-
-  await page.getByText("API Key", { exact: true }).click();
-  await page
-    .getByPlaceholder("Insert your API Key", { exact: true })
-    .fill(process.env.STORE_API_KEY ?? "");
-
-  await page.waitForSelector("text=Save", { timeout: 30000 });
-
-  await page.getByText("Save").last().click();
 
   await page.waitForSelector("text=Store", { timeout: 30000 });
 

src/frontend/tests/end-to-end/dropdownComponent.spec.ts

@@ -25,8 +25,9 @@ test("dropDownComponent", async ({ page }) => {
 
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
+
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");

src/frontend/tests/end-to-end/fileUploadComponent.spec.ts

@@ -25,7 +25,7 @@ test("should be able to upload a file", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
 
   await page.getByTestId("extended-disclosure").click();

src/frontend/tests/end-to-end/floatComponent.spec.ts

@@ -24,7 +24,7 @@ test("FloatComponent", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/flowPage.spec.ts

@@ -23,7 +23,7 @@ test.describe("Flow Page tests", () => {
 
     await page.getByTestId("blank-flow").click();
     await page.waitForSelector('[data-testid="extended-disclosure"]', {
-      timeout: 100000,
+      timeout: 30000,
     });
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/generalBugs-shard-0.spec.ts

@@ -23,7 +23,7 @@ test("should interact with api request", async ({ page }) => {
   }
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/globalVariables.spec.ts

@@ -24,7 +24,7 @@ test("GlobalVariables", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/inputComponent.spec.ts

@@ -24,7 +24,7 @@ test("InputComponent", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/inputListComponent.spec.ts

@@ -22,7 +22,7 @@ test("InputListComponent", async ({ page }) => {
 
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/intComponent.spec.ts

@@ -24,7 +24,7 @@ test("IntComponent", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/langflowShortcuts.spec.ts

@@ -3,8 +3,6 @@ import uaParser from "ua-parser-js";
 test("LangflowShortcuts", async ({ page }) => {
   await page.goto("/");
 
-  await page.waitForTimeout(1000);
-
   let modalCount = 0;
   try {
     const modalTitleElement = await page?.getByTestId("modal-title");
@@ -29,10 +27,15 @@ test("LangflowShortcuts", async ({ page }) => {
     control = "Meta";
   }
 
-  await page.getByTestId("blank-flow").click();
-  await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+  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");

src/frontend/tests/end-to-end/nestedComponent.spec.ts

@@ -24,7 +24,7 @@ test("NestedComponent", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/promptModalComponent.spec.ts

@@ -24,7 +24,7 @@ test("PromptTemplateComponent", async ({ page }) => {
   });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/saveComponents.spec.ts

@@ -96,7 +96,7 @@ test.describe("save component tests", () => {
       await page.getByTestId("replace-button").click();
     }
     await page.waitForSelector('[data-testid="extended-disclosure"]', {
-      timeout: 100000,
+      timeout: 30000,
     });
     await page.getByTestId("extended-disclosure").click();
     await page.getByPlaceholder("Search").click();

src/frontend/tests/end-to-end/textInputOutput.spec.ts

@@ -70,33 +70,41 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  const component1 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]',
-  );
+  let visibleElementHandle;
 
-  const element1 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[5]/button/div[1]',
-  );
+  const elementsTextInputOutput = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .all();
 
-  const component2 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]',
-  );
+  for (const element of elementsTextInputOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
 
-  const element2 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-  );
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
-  // ensure elements popups are not blocking
-  component1.blur();
-  component2.blur();
-
-  await page.mouse.up();
-
-  await element1.hover();
+  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 element2.hover();
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();
@@ -121,29 +129,44 @@ test("TextInputOutputComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  const component3 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]',
-  );
+  const elementsOpenAiOutput = await page
+    .getByTestId("handle-openaimodel-shownode-text-right")
+    .all();
 
-  const element3 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[3]/div/div[2]/div[3]/div/button/div[1]',
-  );
+  for (const element of elementsOpenAiOutput) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
 
-  const element4 = await page.locator(
-    '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[16]/button/div[1]',
-  );
+  await visibleElementHandle.waitFor({
+    state: "visible",
+    timeout: 30000,
+  });
 
-  // ensure elements popups are not blocking
-  component2.blur();
-  component3.blur();
-
-  await page.mouse.up();
-
-  await element4.hover();
+  // 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 element3.hover();
+  await visibleElementHandle.hover();
 
   // Release the mouse
   await page.mouse.up();

src/frontend/tests/end-to-end/tweaksTest.spec.ts

@@ -86,7 +86,7 @@ test("check if tweaks are updating when someothing on the flow changes", async (
 
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
   await page.getByTestId("extended-disclosure").click();
   await page.getByPlaceholder("Search").click();

src/frontend/tsconfig.json

@@ -20,10 +20,10 @@
   "include": [
     "src",
     "tests/end-to-end/saveComponents.spec.ts",
-    "tests/end-to-end/actionsMainPage.spec.ts",
+    "tests/end-to-end/actionsMainPage-shard-1.spec.ts",
     "tests/end-to-end/auto_login.spec.ts",
     "tests/end-to-end/chatInputOutput.spec.ts",
-    "tests/end-to-end/chatInputOutputUser - Interact.spec.ts",
+    "tests/end-to-end/chatInputOutputUser-shard-2.spec.ts",
     "tests/end-to-end/codeAreaModalComponent.spec.ts",
     "tests/end-to-end/curlApiGeneration.spec.ts",
     "tests/end-to-end/deleteComponentFlows.spec.ts",