feat!: replace Agent starter projects with simpler ones (langflow-ai#…

…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 <[email protected]>
viniciossilva3 · Aug 29, 2024 · f596cc4 · f596cc4
1 parent 59b6d8a
commit f596cc4
Show file tree

Hide file tree

Showing 9 changed files with 3,954 additions and 158 deletions.
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Agent Flow.json b/src/backend/base/langflow/initial_setup/starter_projects/Agent Flow.json
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Complex Agent.json b/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"
 }
diff --git a/src/backend/base/langflow/initial_setup/starter_projects/Travel Planning Agents.json b/src/backend/base/langflow/initial_setup/starter_projects/Travel Planning Agents.json
diff --git a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx b/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={{

diff --git a/src/frontend/src/modals/newFlowModal/index.tsx b/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={
-                  examples.find((e) => e.name == "Hierarchical Tasks Agent")!
-                }
+                flow={examples.find((e) => e.name == "Travel Planning Agents")!}
               />
             )}
-            {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>

diff --git a/...nd/tests/end-to-end/Complex Agent.spec.ts → ...nd/tests/end-to-end/Dynamic Agent.spec.ts b/...nd/tests/end-to-end/Complex Agent.spec.ts → ...nd/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);
 });
diff --git a/src/frontend/tests/end-to-end/Hierarchical Tasks Agent.spec.ts b/src/frontend/tests/end-to-end/Hierarchical Tasks Agent.spec.ts
diff --git a/...end-to-end/Sequential Tasks Agent.spec.ts → ...end/tests/end-to-end/Simple Agent.spec.ts b/...end-to-end/Sequential Tasks Agent.spec.ts → ...end/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,50 +58,49 @@ 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();
   await page.getByTestId("gpt-4o-1-option").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.waitForSelector("text=built successfully", { timeout: 30000 });
 
   await page.getByText("built successfully").last().click({
     timeout: 15000,
   });
 
   await page.getByText("Playground", { exact: true }).click();
 
+  await page.waitForSelector(
+    "text=write short python scsript to say hello world",
+    {
+      timeout: 30000,
+    },
+  );
+
   await page.waitForTimeout(1000);
 
-  expect(
-    page
-      .getByPlaceholder("No chat input variables found. Click to run your flow")
-      .last(),
-  ).toBeVisible();
+  expect(await page.getByText("User")).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",
-  );
+  expect(await page.locator(".language-python")).toBeVisible();
+
+  let pythonWords = await page.getByText("Hello, World!").count();
+
+  expect(pythonWords).toBe(2);
+
+  await page.getByTestId("icon-Copy").last().click();
+
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Send a message...").click();
+  await page.keyboard.press("Control+V");
+
+  await page.waitForTimeout(500);
 
-  const textContents = await page
-    .getByTestId("div-chat-message")
-    .allTextContents();
+  pythonWords = await page.getByText("Hello, World!").count();
 
-  const concatAllText = textContents.join(" ");
-  expect(concatAllText.toLocaleLowerCase()).toContain("agile");
-  const allTextLength = concatAllText.length;
-  expect(allTextLength).toBeGreaterThan(500);
+  expect(pythonWords).toBe(3);
 });