Merge branch 'dev' into fixGroupLogs

.github/workflows/typescript_test.yml

@@ -8,7 +8,6 @@ on:
         required: true
         type: string
 
-
 env:
   POETRY_VERSION: "1.8.2"
   NODE_VERSION: "21"
@@ -24,8 +23,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
+    env:
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      STORE_API_KEY: ${{ secrets.STORE_API_KEY }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4

src/frontend/playwright.config.ts

@@ -19,9 +19,9 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 3,
   /* Opt out of parallel tests on CI. */
-  workers: 1,
+  workers: 2,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [

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

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

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

@@ -229,6 +229,7 @@ export default function CollectionCardComponent({
                       render={({ field }) => (
                         <FormControl>
                           <Checkbox
+                            data-testid={`checkbox-component`}
                             aria-label="checkbox-component"
                             checked={field.value}
                             onCheckedChange={field.onChange}

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

@@ -67,6 +67,7 @@ export default function FlowToolbar(): JSX.Element {
               ? "button-disable text-muted-foreground"
               : "",
           )}
+          data-testid="shared-button-flow"
         >
           <ForwardedIconComponent
             name="Share3"

src/frontend/src/logs.spec.ts

@@ -0,0 +1,75 @@
+import { test } from "@playwright/test";
+
+test("should able to see and interact with logs", 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.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(2000);
+
+  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-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").first().click();
+
+  await page.waitForTimeout(2000);
+  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/src/modals/IOModal/components/chatView/chatInput/components/textAreaWrapper/index.tsx

@@ -45,6 +45,7 @@ const TextAreaWrapper = ({
 
   return (
     <Textarea
+      data-testid="input-chat-playground"
       onFocus={(e) => {
         setInputFocus(true);
         e.target.style.borderTopWidth = "0";

src/frontend/tests/end-to-end/Basic Prompting.ts

@@ -0,0 +1,90 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Basic Prompting (Hello, World)", async ({ page }) => {
+  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.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
+    .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").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.getByTestId("icon-LucideSend").last().click();
+  await page.waitForTimeout(3000);
+
+  await page.getByText("Ahoy").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/end-to-end/Blog Writer.spec.ts

@@ -0,0 +1,109 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Blog Writer", async ({ page }) => {
+  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.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: "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();
+
+  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("input-list-input_urls-0")
+    .nth(0)
+    .fill(
+      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
+    );
+  await page
+    .getByTestId("input-list-input_urls-1")
+    .nth(0)
+    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");
+
+  await page
+    .getByTestId("popover-anchor-input-input_value")
+    .nth(0)
+    .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/end-to-end/Document QA.spec.ts

@@ -0,0 +1,96 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Document QA", async ({ page }) => {
+  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.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: "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();
+
+  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);
+  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(2000);
+
+  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/end-to-end/Memory Chatbot.spec.ts

@@ -0,0 +1,102 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Memory Chatbot", async ({ page }) => {
+  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.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: "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
+    .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").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/end-to-end/Vector Store.spec.ts

@@ -0,0 +1,129 @@
+import { expect, test } from "@playwright/test";
+import path from "path";
+
+test("Vector Store RAG", 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: "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();
+
+  // if (
+  //   !process.env.OPENAI_API_KEY ||
+  //   !process.env.ASTRA_DB_API_ENDPOINT ||
+  //   !process.env.ASTRA_DB_APPLICATION_TOKEN
+  // ) {
+  //   //You must set the OPENAI_API_KEY, ASTRA_DB_API_ENDPOINT and ASTRA_DB_APPLICATION_TOKEN on .env file to run this test
+  //   expect(false).toBe(true);
+  // }
+
+  // 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-openai_api_key")
+  //   .nth(2)
+  //   .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.getByTestId("button_run_astra db").first().click();
+  // await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+  // await page.getByText("built successfully").last().click({
+  //   timeout: 30000,
+  // });
+
+  // await page.getByTestId("button_run_chat output").click();
+  // 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.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/end-to-end/actionsMainPage.spec.ts

@@ -89,6 +89,10 @@ test("search components", async ({ page }) => {
   }
   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();
@@ -157,6 +161,11 @@ test("user should be able to download a flow or a component", async ({
   }
 
   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();
@@ -234,6 +243,9 @@ test("user should be able to duplicate a flow or a component", async ({
   }
 
   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();

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

@@ -1,440 +0,0 @@
-import { expect, test } from "@playwright/test";
-import path from "path";
-
-test("Basic Prompting (Hello, World)", 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.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();
-
-  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("button_run_chat output").click();
-  await page.waitForTimeout(1000);
-  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
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("Say hello as a pirate");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-
-  await page.getByText("Ahoy").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.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Memory Chatbot", 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: "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();
-
-  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("button_run_chat output").click();
-  await page.waitForTimeout(1000);
-  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
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("Remember that I'm a lion");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-  await page
-    .getByPlaceholder("Send a message...")
-    .last()
-    .fill("try reproduce the sound I made in words");
-  await page.getByTestId("icon-LucideSend").last().click();
-  await page.waitForTimeout(3000);
-  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.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Document QA", 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: "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();
-
-  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 ?? "");
-
-  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(2000);
-
-  await page.getByTestId("button_run_chat output").click();
-  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
-    .getByPlaceholder("Send a message...")
-    .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.getByPlaceholder("Send a message...").last().isVisible();
-});
-
-test("Blog Writer", 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: "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();
-
-  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("input-list-input_urls-0")
-    .nth(0)
-    .fill(
-      "https://www.natgeokids.com/uk/discover/animals/sea-life/turtle-facts/",
-    );
-  await page
-    .getByTestId("input-list-input_urls-1")
-    .nth(0)
-    .fill("https://www.originaldiving.com/blog/top-ten-turtle-facts");
-
-  await page
-    .getByTestId("popover-anchor-input-input_value")
-    .nth(0)
-    .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.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);
-  }
-});
-
-test("Vector Store RAG", 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: "Vector Store RAG" }).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();
-
-  if (
-    !process.env.OPENAI_API_KEY ||
-    !process.env.ASTRA_DB_API_ENDPOINT ||
-    !process.env.ASTRA_DB_APPLICATION_TOKEN
-  ) {
-    //You must set the OPENAI_API_KEY, ASTRA_DB_API_ENDPOINT and ASTRA_DB_APPLICATION_TOKEN on .env file to run this test
-    expect(false).toBe(true);
-  }
-
-  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-openai_api_key")
-    .nth(2)
-    .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(2000);
-
-  await page.getByTestId("button_run_astra db").first().click();
-  await page.getByText("built successfully").last().click({
-    timeout: 30000,
-  });
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.getByText("built successfully").last().click({
-    timeout: 30000,
-  });
-
-  await page.getByText("Playground", { exact: true }).click();
-
-  await page.getByPlaceholder("Send a message...").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.getByPlaceholder("Send a message...").last().isVisible();
-});

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

@@ -28,7 +28,11 @@ test("chat_io_teste", async ({ page }) => {
   );
 
   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("chat output");
@@ -50,6 +54,10 @@ test("chat_io_teste", async ({ page }) => {
   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();
@@ -79,8 +87,11 @@ test("chat_io_teste", async ({ page }) => {
 
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();
-  await page.getByPlaceholder("Send a message...").click();
-  await page.getByPlaceholder("Send a message...").fill("teste");
+  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");

src/frontend/tests/end-to-end/chatInputOutputUser - Images.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 - Inspection.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 - Interact.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

@@ -23,7 +23,11 @@ test("CodeAreaModalComponent", async ({ page }) => {
   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("python function");

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

@@ -0,0 +1,30 @@
+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(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(2000);
+  await page.getByText("API", { exact: true }).click();
+  await page.getByRole("tab", { name: "cURL" }).click();
+  await page.getByTestId("icon-Copy").last().click();
+  const handle = await page.evaluateHandle(() =>
+    navigator.clipboard.readText(),
+  );
+  const clipboardContent = await handle.jsonValue();
+  expect(clipboardContent.length).toBeGreaterThan(0);
+});