feat!: replace Agent starter projects with simpler ones (#3612)

* Add initial setup for "Simple Agent" starter project

- Introduced a new JSON configuration for the "Simple Agent" starter project.
- The flow includes nodes for Chat Input, Chat Output, OpenAI Model, Tool Calling Agent, Calculator Tool, and Python REPL Tool.
- Configured edges to connect these nodes, enabling interaction between different components.
- Added detailed descriptions and configurations for each node to facilitate easy setup and usage.

* Add Travel Planning Agents starter project JSON file

- Introduced a new JSON file for Travel Planning Agents in the starter projects directory.
- The JSON file includes configurations for various nodes such as ChatInput, ChatOutput, OpenAIModel, ToolCallingAgent, SearchAPI, URL Content Fetcher, and CalculatorTool.
- Defined connections between nodes to create a multi-agent system for planning trips.
- Added detailed prompts and configurations for each node to facilitate travel itinerary creation and information retrieval.

* Update example names in newFlowModal to match updated project terminology

* Update agent names in undrawCards component for consistency

* Rename "Complex Agent" to "Dynamic Agent" across frontend and backend components

* format project

* ✨ (Dynamic Agent.spec.ts): Add end-to-end test for Dynamic Agent functionality
✨ (Simple Agent.spec.ts): Add end-to-end test for Simple Agent functionality
✨ (Travel Planning Agent.spec.ts): Add end-to-end test for Travel Planning Agent functionality

* ✨ (Travel Planning Agent.spec.ts): Update end-to-end test for Travel Planning Agent to include new interactions and connections for improved test coverage and functionality.

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/backend/base/langflow/initial_setup/starter_projects/Complex Agent.json

@@ -4179,5 +4179,5 @@
   "id": "07cd68d7-d864-4cfe-9901-0ccc61d6e80d",
   "is_component": false,
   "last_tested_version": "1.0.9",
-  "name": "Complex Agent"
+  "name": "Dynamic Agent"
 }

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

@@ -94,7 +94,7 @@ export default function UndrawCardComponent({
             preserveAspectRatio="xMidYMid meet"
           />
         );
-      case "Sequential Tasks Agent":
+      case "Simple Agent":
         return (
           <SequentialTasks
             style={{
@@ -104,7 +104,7 @@ export default function UndrawCardComponent({
             preserveAspectRatio="xMidYMid meet"
           />
         );
-      case "Hierarchical Tasks Agent":
+      case "Travel Planning Agents":
         return (
           <HierarchicalTasks
             style={{
@@ -114,7 +114,7 @@ export default function UndrawCardComponent({
             preserveAspectRatio="xMidYMid meet"
           />
         );
-      case "Complex Agent":
+      case "Dynamic Agent":
         return (
           <ComplexAgent
             style={{

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

@@ -58,24 +58,22 @@ export default function NewFlowModal({
                 flow={examples.find((e) => e.name == "Vector Store RAG")!}
               />
             )}
-            {examples.find((e) => e.name == "Sequential Tasks Agent") && (
+            {examples.find((e) => e.name == "Simple Agent") && (
               <UndrawCardComponent
                 key={5}
-                flow={examples.find((e) => e.name == "Sequential Tasks Agent")!}
+                flow={examples.find((e) => e.name == "Simple Agent")!}
               />
             )}
-            {examples.find((e) => e.name == "Hierarchical Tasks Agent") && (
+            {examples.find((e) => e.name == "Travel Planning Agents") && (
               <UndrawCardComponent
                 key={6}
-                flow={
+                flow={examples.find((e) => e.name == "Travel Planning Agents")!}
-                  examples.find((e) => e.name == "Hierarchical Tasks Agent")!
-                }
               />
             )}
-            {examples.find((e) => e.name == "Complex Agent") && (
+            {examples.find((e) => e.name == "Dynamic Agent") && (
               <UndrawCardComponent
                 key={7}
-                flow={examples.find((e) => e.name == "Complex Agent")!}
+                flow={examples.find((e) => e.name == "Dynamic Agent")!}
               />
             )}
           </div>

src/frontend/tests/end-to-end/Dynamic Agent.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 
-test("Complex Agent", async ({ page }) => {
+test("Dynamic Agent", async ({ page }) => {
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",
@@ -42,7 +42,7 @@ test("Complex Agent", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  await page.getByRole("heading", { name: "Complex Agent" }).click();
+  await page.getByRole("heading", { name: "Dynamic Agent" }).click();
 
   await page.waitForSelector('[title="fit view"]', {
     timeout: 100000,
@@ -104,5 +104,5 @@ test("Complex Agent", async ({ page }) => {
   const concatAllText = textContents.join(" ");
   expect(concatAllText.toLocaleLowerCase()).toContain("apple");
   const allTextLength = concatAllText.length;
-  expect(allTextLength).toBeGreaterThan(500);
+  expect(allTextLength).toBeGreaterThan(100);
 });

src/frontend/tests/end-to-end/Hierarchical Tasks Agent.spec.ts

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

src/frontend/tests/end-to-end/Simple Agent.spec.ts

@@ -2,17 +2,12 @@ import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 
-test("Sequential Tasks Agent", async ({ page }) => {
+test("Simple Agent", async ({ page }) => {
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",
   );
 
-  test.skip(
-    !process?.env?.BRAVE_SEARCH_API_KEY,
-    "BRAVE_SEARCH_API_KEY required to run this test",
-  );
-
   if (!process.env.CI) {
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
@@ -42,7 +37,7 @@ test("Sequential Tasks Agent", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
-  await page.getByRole("heading", { name: "Sequential Tasks Agent" }).click();
+  await page.getByRole("heading", { name: "Simple Agent" }).click();
 
   await page.waitForSelector('[title="fit view"]', {
     timeout: 100000,
@@ -63,7 +58,6 @@ test("Sequential Tasks Agent", async ({ page }) => {
 
   await page
     .getByTestId("popover-anchor-input-api_key")
-    .first()
     .fill(process.env.OPENAI_API_KEY ?? "");
 
   await page.getByTestId("dropdown_str_model_name").click();
@@ -71,15 +65,8 @@ test("Sequential Tasks Agent", async ({ page }) => {
 
   await page.waitForTimeout(1000);
 
-  await page
-    .getByTestId("popover-anchor-input-api_key")
-    .last()
-    .fill(process.env.BRAVE_SEARCH_API_KEY ?? "");
-
-  await page.waitForTimeout(1000);
-
   await page.getByTestId("button_run_chat output").click();
-  await page.waitForSelector("text=built successfully", { timeout: 60000 * 3 });
+  await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
   await page.getByText("built successfully").last().click({
     timeout: 15000,
@@ -87,26 +74,33 @@ test("Sequential Tasks Agent", async ({ page }) => {
 
   await page.getByText("Playground", { exact: true }).click();
 
-  await page.waitForTimeout(1000);
+  await page.waitForSelector(
-
+    "text=write short python scsript to say hello world",
-  expect(
+    {
-    page
+      timeout: 30000,
-      .getByPlaceholder("No chat input variables found. Click to run your flow")
+    },
-      .last(),
-  ).toBeVisible();
-
-  await page.getByText("Topic", { exact: true }).nth(1).isVisible();
-  await page.getByText("Topic", { exact: true }).nth(1).click();
-  expect(await page.getByPlaceholder("Enter text...").inputValue()).toBe(
-    "Agile",
   );
 
-  const textContents = await page
+  await page.waitForTimeout(1000);
-    .getByTestId("div-chat-message")
-    .allTextContents();
 
-  const concatAllText = textContents.join(" ");
+  expect(await page.getByText("User")).toBeVisible();
-  expect(concatAllText.toLocaleLowerCase()).toContain("agile");
+
-  const allTextLength = concatAllText.length;
+  expect(await page.locator(".language-python")).toBeVisible();
-  expect(allTextLength).toBeGreaterThan(500);
+
+  let pythonWords = await page.getByText("Hello, World!").count();
+
+  expect(pythonWords).toBe(2);
+
+  await page.getByTestId("icon-Copy").last().click();
+
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Send a message...").click();
+  await page.keyboard.press("Control+V");
+
+  await page.waitForTimeout(500);
+
+  pythonWords = await page.getByText("Hello, World!").count();
+
+  expect(pythonWords).toBe(3);
 });

src/frontend/tests/end-to-end/Travel Planning Agent.spec.ts

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