Merge branch 'dev' into update_components

.github/workflows/typescript_test.yml

@@ -50,7 +50,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

@@ -21,6 +21,7 @@ export default function HandleRenderComponent({
   colors,
   setFilterEdge,
   showNode,
+  testIdComplement,
 }: {
   left: boolean;
   nodes: any;
@@ -33,6 +34,7 @@ export default function HandleRenderComponent({
   colors: string[];
   setFilterEdge: any;
   showNode: any;
+  testIdComplement?: string;
 }) {
   return (
     <Button
@@ -52,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/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -264,6 +264,7 @@ export default function ParameterComponent({
         colors={colors}
         setFilterEdge={setFilterEdge}
         showNode={showNode}
+        testIdComplement={`${data?.type?.toLowerCase()}-noshownode`}
       />
     )
   ) : (
@@ -390,6 +391,7 @@ export default function ParameterComponent({
             colors={colors}
             setFilterEdge={setFilterEdge}
             showNode={showNode}
+            testIdComplement={`${data?.type?.toLowerCase()}-shownode`}
           />
         )}
 

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

@@ -43,10 +43,6 @@ export const FolderForms = ({
     if (folderToEdit) {
       setValue("name", folderToEdit.name);
       setValue("description", folderToEdit.description);
-      console.log(folderToEdit);
-
-      // setSelectedComponents(folderToEdit.components);
-      // setSelectedFlows(folderToEdit.flows);
       return;
     }
     setValue("name", "");

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

@@ -63,8 +63,6 @@ export default function ChatView({
       )
       .map((output, index) => {
         try {
-          console.log("output:", output);
-
           const messageOutput = output.data.message;
           const hasMessageValue =
             messageOutput?.message ||

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

@@ -0,0 +1,139 @@
+import { test } from "@playwright/test";
+
+test("select and delete all", 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.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("search flows", 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.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.getByTestId("icon-ChevronLeft").first().click();
+  await page.getByText("New Project", { exact: true }).click();
+  await page.getByRole("heading", { name: "Document QA" }).click();
+  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.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").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.getByTestId("icon-ChevronLeft").first().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/end-to-end/autoLogin.spec.ts

@@ -0,0 +1,26 @@
+import { test } from "@playwright/test";
+
+test.describe("Auto_login tests", () => {
+  test("auto_login sign in", async ({ page }) => {
+    await page.goto("/");
+    await page.getByText("New Project", { exact: true }).click();
+  });
+
+  test("auto_login block_admin", async ({ page }) => {
+    await page.goto("/");
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+
+    await page.goto("/login");
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+
+    await page.goto("/admin");
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+
+    await page.goto("/admin/login");
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+  });
+});

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

@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import { readFileSync } from "fs";
 
 test("chat_io_teste", async ({ page }) => {
   await page.goto("/");
@@ -22,17 +21,14 @@ test("chat_io_teste", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
-    "utf-8",
-  );
-
-  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("chat output");
@@ -67,20 +63,37 @@ test("chat_io_teste", async ({ page }) => {
   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 page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[2]/div/div[2]/div[9]/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div/div/div[2]/div[1]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+
+  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();

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

@@ -0,0 +1,108 @@
+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 },
+  );
+
+  // 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

@@ -20,14 +20,14 @@ test("CodeAreaModalComponent", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  await page.waitForTimeout(1000);
-
-  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("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

@@ -19,12 +19,15 @@ test("dropDownComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
 
   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

@@ -20,11 +20,12 @@ test("should be able to upload a file", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   await page.getByTestId("blank-flow").click();
   await page.waitForSelector('[data-testid="extended-disclosure"]', {
-    timeout: 100000,
+    timeout: 30000,
   });
 
   await page.getByTestId("extended-disclosure").click();
@@ -77,38 +78,70 @@ test("should be able to upload a file", async ({ page }) => {
   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 page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[1]/div/div[2]/div[6]/button/div[1]',
-    )
-    .hover();
+  await visibleElementHandle.hover();
   await page.mouse.down();
 
   // Move to the second element
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[4]/div/button/div[1]',
-    )
-    .hover();
+
+  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
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[3]/div/div[2]/div[7]/button/div[1]',
-    )
-    .hover();
+
+  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
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div/div[1]/div[1]/div/div[2]/div[2]/div/div[2]/div[3]/div/button/div[1]',
-    )
-    .hover();
+  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();

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

@@ -0,0 +1,175 @@
+import { expect, test } from "@playwright/test";
+
+test("LLMChain - Tooltip", 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(5000);
+    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("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .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 llmChainOutputElements = await page
+    .getByTestId("handle-llmchain-shownode-text-right")
+    .all();
+  let visibleElementHandle;
+
+  for (const element of llmChainOutputElements) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-output-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-textsplitters").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-retrievers").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-prototypes").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-tools").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-memories").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-toolkits").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-agents").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-helpers").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-output-langchain_utilities").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 llmChainInputElements1 = await page
+    .getByTestId("handle-llmchain-shownode-llm-left")
+    .all();
+
+  for (const element of llmChainInputElements1) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("available-input-models").first(),
+    ).toBeVisible();
+    await page.waitForTimeout(2000);
+
+    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 llmChainInputElements0 = await page
+    .getByTestId("handle-llmchain-shownode-template-left")
+    .all();
+
+  for (const element of llmChainInputElements0) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await page.waitForTimeout(2000);
+
+    await expect(
+      page.getByTestId("available-input-chains").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-prototypes").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-agents").first(),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("available-input-helpers").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 llmChainInputElements2 = await page
+    .getByTestId("handle-llmchain-shownode-memory-left")
+    .all();
+
+  for (const element of llmChainInputElements2) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.hover().then(async () => {
+    await expect(
+      page.getByTestId("empty-tooltip-filter").first(),
+    ).toBeVisible();
+  });
+});

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

@@ -0,0 +1,148 @@
+import { expect, test } from "@playwright/test";
+
+test("LLMChain - Filter", 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.waitForTimeout(1000);
+
+  await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-2",
+  );
+
+  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("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .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);
+
+  let visibleElementHandle;
+
+  const llmChainOutputElements = await page
+    .getByTestId("handle-llmchain-shownode-text-right")
+    .all();
+
+  for (const element of llmChainOutputElements) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.click({
+    force: true,
+  });
+
+  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
+  await expect(page.getByTestId("disclosure-utilities")).toBeVisible();
+  await expect(page.getByTestId("disclosure-memories")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
+  await expect(page.getByTestId("disclosure-retrievers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-text splitters")).toBeVisible();
+  await expect(page.getByTestId("disclosure-toolkits")).toBeVisible();
+  await expect(page.getByTestId("disclosure-tools")).toBeVisible();
+
+  await expect(page.getByTestId("chainsLLMChain").first()).toBeVisible();
+  await expect(
+    page.getByTestId("langchain_utilitiesSearchApi").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesAstra DB Message Reader").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("prototypesFlow as Tool").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("retrieversAmazon Kendra Retriever").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("textsplittersCharacterTextSplitter").first(),
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("toolkitsVectorStoreInfo").first(),
+  ).toBeVisible();
+  await expect(page.getByTestId("toolsSearchApi").first()).toBeVisible();
+
+  await page.getByPlaceholder("Search").click();
+
+  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
+  await expect(page.getByTestId("modelsAzure OpenAI")).not.toBeVisible();
+  await expect(
+    page.getByTestId("model_specsAzureChatOpenAI"),
+  ).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
+
+  const llmChainInputElements1 = await page
+    .getByTestId("handle-llmchain-shownode-llm-left")
+    .all();
+
+  for (const element of llmChainInputElements1) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.blur();
+
+  await visibleElementHandle.click({
+    force: true,
+  });
+
+  await expect(page.getByTestId("disclosure-models")).toBeVisible();
+
+  const llmChainInputElements0 = await page
+    .getByTestId("handle-llmchain-shownode-template-left")
+    .all();
+
+  for (const element of llmChainInputElements0) {
+    if (await element.isVisible()) {
+      visibleElementHandle = element;
+      break;
+    }
+  }
+
+  await visibleElementHandle.click();
+
+  await expect(page.getByTestId("disclosure-helpers")).toBeVisible();
+  await expect(page.getByTestId("disclosure-agents")).toBeVisible();
+  await expect(page.getByTestId("disclosure-chains")).toBeVisible();
+  await expect(page.getByTestId("disclosure-prototypes")).toBeVisible();
+});

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

@@ -19,11 +19,12 @@ test("FloatComponent", async ({ page }) => {
     await page.waitForTimeout(5000);
     modalCount = await page.getByTestId("modal-title")?.count();
   }
-  await page.waitForTimeout(1000);
-
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
   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();