(null);
+
+ const folderIdUrl = folderId ?? myCollectionId;
+
+ const fuse = useMemo(
+ () => new Fuse(examples, { keys: ["name", "description"] }),
+ [examples],
+ );
+
+ useEffect(() => {
+ // Reset search query when currentTab changes
+ setSearchQuery("");
+ }, [currentTab]);
+
+ useEffect(() => {
+ if (searchQuery === "") {
+ setFilteredExamples(examples);
+ } else {
+ const searchResults = fuse.search(searchQuery);
+ setFilteredExamples(searchResults.map((result) => result.item));
+ }
+ // Scroll to the top when search query changes
+ if (scrollContainerRef.current) {
+ scrollContainerRef.current.scrollTop = 0;
+ }
+ }, [searchQuery, currentTab]);
+
+ const handleCardClick = (example) => {
+ updateIds(example.data);
+ addFlow({ flow: example }).then((id) => {
+ navigate(`/flow/${id}/folder/${folderIdUrl}`);
+ });
+ track("New Flow Created", { template: `${example.name} Template` });
+ };
+
+ const currentTabItem = categories.find((item) => item.id === currentTab);
+
+ return (
+
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full rounded-lg bg-background pl-8 lg:w-3/4"
+ />
+
+
+ {currentTab === "all-templates" ? (
+ categories.map(
+ (value) =>
+ filteredExamples.filter((example) =>
+ example.tags?.includes(value.id),
+ ).length > 0 && (
+
+ example.tags?.includes(value.id),
+ )}
+ onCardClick={handleCardClick}
+ />
+ ),
+ )
+ ) : currentTabItem ? (
+
+ ) : (
+ <>>
+ )}
+
+
+ );
+}
diff --git a/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
new file mode 100644
index 000000000..1566b929d
--- /dev/null
+++ b/src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx
@@ -0,0 +1,74 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
+import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import { track } from "@/customization/utils/analytics";
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import { useFolderStore } from "@/stores/foldersStore";
+import { updateIds } from "@/utils/reactflowUtils";
+import { useParams } from "react-router-dom";
+import { CardData } from "../../../../types/templates/types";
+
+export default function TemplateGetStartedCardComponent({
+ bgImage,
+ spiralImage,
+ icon,
+ category,
+ title,
+ description,
+ flow,
+}: CardData) {
+ const addFlow = useAddFlow();
+ const navigate = useCustomNavigate();
+ const { folderId } = useParams();
+ const myCollectionId = useFolderStore((state) => state.myCollectionId);
+
+ const folderIdUrl = folderId ?? myCollectionId;
+
+ const handleClick = () => {
+ if (flow) {
+ updateIds(flow.data!);
+ addFlow({ flow }).then((id) => {
+ navigate(`/flow/${id}/folder/${folderIdUrl}`);
+ });
+ track("New Flow Created", { template: `${flow.name} Template` });
+ } else {
+ console.error(`Flow template "${title}" not found`);
+ }
+ };
+
+ return (
+
+

+
+

+
+
+
+
+
+ {category}
+
+
+
+
{title}
+
+
+
+
{description}
+
+
+ );
+}
diff --git a/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
new file mode 100644
index 000000000..3ce3a6c02
--- /dev/null
+++ b/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
@@ -0,0 +1,37 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
+import { convertTestName } from "@/components/storeCardComponent/utils/convert-test-name";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/utils/utils";
+import { NavProps } from "../../../../types/templates/types";
+
+export function Nav({ links, currentTab, onClick }: NavProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/frontend/src/modals/templatesModal/index.tsx b/src/frontend/src/modals/templatesModal/index.tsx
new file mode 100644
index 000000000..8da16a588
--- /dev/null
+++ b/src/frontend/src/modals/templatesModal/index.tsx
@@ -0,0 +1,103 @@
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import { track } from "@/customization/utils/analytics";
+import useAddFlow from "@/hooks/flows/use-add-flow";
+import { Category } from "@/types/templates/types";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { newFlowModalPropsType } from "../../types/components";
+import BaseModal from "../baseModal";
+import GetStartedComponent from "./components/GetStartedComponent";
+import { Nav } from "./components/navComponent";
+import TemplateContentComponent from "./components/TemplateContentComponent";
+
+export default function TemplatesModal({
+ open,
+ setOpen,
+}: newFlowModalPropsType): JSX.Element {
+ const [currentTab, setCurrentTab] = useState("get-started");
+ const addFlow = useAddFlow();
+ const navigate = useCustomNavigate();
+ const { folderId } = useParams();
+
+ // Define categories and their items
+ const categories: Category[] = [
+ {
+ title: "Templates",
+ items: [
+ { title: "Get Started", icon: "SquarePlay", id: "get-started" },
+ { title: "All Templates", icon: "LayoutPanelTop", id: "all-templates" },
+ ],
+ },
+ {
+ title: "Usecase",
+ items: [
+ { title: "Chatbots", icon: "MessagesSquare", id: "chatbots" },
+ { title: "RAG", icon: "Database", id: "rag" },
+ { title: "Agents", icon: "Bot", id: "agents" },
+ ],
+ },
+ ];
+
+ return (
+
+
+
+
+ {categories.map((category, index) => (
+
+
+ {category.title}
+
+
+ ))}
+
+
+
+ {currentTab === "get-started" ? (
+
+ ) : (
+
category.items)}
+ />
+ )}
+
+
+
+
Start from scratch
+
+ Begin a fresh project to build from scratch.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx
index acb5d0039..91bb8d784 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarNoteComponent/index.tsx
@@ -23,7 +23,7 @@ export default function NoteDraggableComponent() {
Add Note
diff --git a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
index 6c1116538..9a8237560 100644
--- a/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx
@@ -1,6 +1,6 @@
import { PAGINATION_PAGE, PAGINATION_SIZE } from "@/constants/constants";
import { usePostDownloadMultipleFlows } from "@/controllers/API/queries/flows";
-import NewFlowModal from "@/modals/newFlowModal";
+import TemplatesModal from "@/modals/templatesModal";
import { Pagination } from "@/types/utils/types";
import { useEffect, useMemo, useState } from "react";
import { FormProvider, useForm, useWatch } from "react-hook-form";
@@ -13,10 +13,8 @@ import useAlertStore from "../../../../stores/alertStore";
import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
import { useFolderStore } from "../../../../stores/foldersStore";
import { FlowType } from "../../../../types/flow";
-import { FolderType } from "../../entities";
import useFileDrop from "../../hooks/use-on-file-drop";
import { getNameByType } from "../../utils/get-name-by-type";
-import { sortFlows } from "../../utils/sort-flows";
import EmptyComponent from "../emptyComponent";
import HeaderComponent from "../headerComponent";
import CollectionCard from "./components/collectionCard";
@@ -286,7 +284,7 @@ export default function ComponentsComponent({
<>>
)}
-
+
>
);
}
diff --git a/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
index 37489ed7c..8d837d74a 100644
--- a/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/modalsComponent/index.tsx
@@ -1,8 +1,8 @@
// Modals.tsx
+import TemplatesModal from "@/modals/templatesModal";
import IconComponent from "../../../../components/genericIconComponent";
import { Button } from "../../../../components/ui/button";
import DeleteConfirmationModal from "../../../../modals/deleteConfirmationModal";
-import NewFlowModal from "../../../../modals/newFlowModal";
import { cn } from "../../../../utils/utils";
interface ModalsProps {
@@ -21,7 +21,7 @@ const ModalsComponent = ({
handleDeleteFolder,
}: ModalsProps) => (
<>
- {openModal && }
+ {openModal && }
{openDeleteFolderModal && (
void;
+}
+
+export interface TemplateContentProps {
+ currentTab: string;
+ categories: NavItem[];
+}
+
+export interface TemplateCardComponentProps {
+ example: {
+ name: string;
+ description: string;
+ icon?: string;
+ id: string;
+ gradient?: string;
+ };
+ onClick: () => void;
+}
+
+export interface NavProps {
+ links: NavItem[];
+ currentTab: string;
+ onClick?: (id: string) => void;
+}
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 05a7125ec..d614bb1e4 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -18,6 +18,7 @@ import {
BookMarked,
BookmarkPlus,
Bot,
+ BotMessageSquare,
Boxes,
Braces,
BrainCircuit,
@@ -89,9 +90,11 @@ import {
Keyboard,
Laptop2,
Layers,
+ LayoutPanelTop,
Link,
Link2,
ListFilter,
+ ListOrdered,
Loader2,
Lock,
LogIn,
@@ -116,6 +119,7 @@ import {
Pencil,
PencilLine,
Pin,
+ Plane,
Play,
Plus,
PlusCircle,
@@ -144,6 +148,7 @@ import {
Sparkles,
Square,
SquarePen,
+ SquarePlay,
StickyNote,
Store,
SunIcon,
@@ -163,6 +168,7 @@ import {
UserCog2,
UserMinus2,
UserPlus2,
+ Users,
Users2,
Variable,
Wand2,
@@ -516,6 +522,9 @@ export const nodeIconsLucide: iconsType = {
Palette,
RefreshCcwDot,
FolderUp,
+ SquarePlay,
+ LayoutPanelTop,
+ Database,
Blocks,
ChevronDown,
ArrowLeft,
@@ -577,11 +586,15 @@ export const nodeIconsLucide: iconsType = {
BookMarked,
Minus,
LogOut,
+ BotMessageSquare,
Square,
Minimize2,
Maximize2,
FormInput,
ChevronRightSquare,
+ Plane,
+ Users,
+ ListOrdered,
SaveAll,
MessageSquareMore,
Forward,
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index d16237b4b..f6a627cf0 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -26,7 +26,7 @@ const config = {
"bg-status-red",
"bg-status-yellow",
],
- important: true,
+ important: false,
theme: {
container: {
center: true,
@@ -111,7 +111,6 @@ const config = {
ice: "var(--ice)",
selected: "var(--selected)",
hover: "var(--hover)",
- white: "var(--white)",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
diff --git a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
index cc91cedb5..bf72f8e1a 100644
--- a/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
+++ b/src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts
@@ -25,6 +25,7 @@ test("select and delete all", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -67,6 +68,7 @@ test("select and delete a flow", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -108,6 +110,7 @@ test("search flows", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -118,6 +121,7 @@ test("search flows", async ({ page }) => {
await page.getByText("Select All").isVisible();
await page.getByText("New Project", { exact: true }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Memory Chatbot" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -126,6 +130,7 @@ test("search flows", async ({ page }) => {
await page.getByTestId("icon-ChevronLeft").first().click();
await page.getByText("New Project", { exact: true }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Document QA" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -164,6 +169,7 @@ test("search components", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/features/auto-login-off.spec.ts b/src/frontend/tests/core/features/auto-login-off.spec.ts
index 878066e34..e3062f4d1 100644
--- a/src/frontend/tests/core/features/auto-login-off.spec.ts
+++ b/src/frontend/tests/core/features/auto-login-off.spec.ts
@@ -121,6 +121,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
@@ -191,6 +192,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
await page.getByText("New Project", { exact: true }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
index 3d24e6c8f..963ad57c4 100644
--- a/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
+++ b/src/frontend/tests/core/features/chatInputOutputUser-shard-0.spec.ts
@@ -33,6 +33,7 @@ test("user must be able to send an image on chat", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/core/features/folders.spec.ts b/src/frontend/tests/core/features/folders.spec.ts
index 5ad090e25..ede122608 100644
--- a/src/frontend/tests/core/features/folders.spec.ts
+++ b/src/frontend/tests/core/features/folders.spec.ts
@@ -26,6 +26,7 @@ test("CRUD folders", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
@@ -152,6 +153,7 @@ test("change flow folder", async ({ page }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
diff --git a/src/frontend/tests/core/features/freeze-path.spec.ts b/src/frontend/tests/core/features/freeze-path.spec.ts
index 6f1fec40b..4b7994537 100644
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@@ -37,6 +37,7 @@ test("user must be able to freeze a path", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/features/freeze.spec.ts b/src/frontend/tests/core/features/freeze.spec.ts
index 04685cad5..020265af3 100644
--- a/src/frontend/tests/core/features/freeze.spec.ts
+++ b/src/frontend/tests/core/features/freeze.spec.ts
@@ -1,6 +1,4 @@
import { expect, test } from "@playwright/test";
-import * as dotenv from "dotenv";
-import path from "path";
test("user must be able to freeze a component", async ({ page }) => {
await page.goto("/");
@@ -28,7 +26,7 @@ test("user must be able to freeze a component", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Blank Flow" }).click();
+ await page.getByTestId("blank-flow").click();
//first component
diff --git a/src/frontend/tests/core/features/group.spec.ts b/src/frontend/tests/core/features/group.spec.ts
index 464749731..d075692c3 100644
--- a/src/frontend/tests/core/features/group.spec.ts
+++ b/src/frontend/tests/core/features/group.spec.ts
@@ -20,6 +20,7 @@ test.describe("group node test", () => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page
.getByRole("heading", { name: "Basic Prompting" })
.first()
diff --git a/src/frontend/tests/core/features/logs.spec.ts b/src/frontend/tests/core/features/logs.spec.ts
index f162c8d90..171e3de2e 100644
--- a/src/frontend/tests/core/features/logs.spec.ts
+++ b/src/frontend/tests/core/features/logs.spec.ts
@@ -38,6 +38,7 @@ test("should able to see and interact with logs", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/core/features/stop-building.spec.ts b/src/frontend/tests/core/features/stop-building.spec.ts
index 60c64f612..d79d85c6e 100644
--- a/src/frontend/tests/core/features/stop-building.spec.ts
+++ b/src/frontend/tests/core/features/stop-building.spec.ts
@@ -20,7 +20,7 @@ test("user must be able to stop a building", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Blank Flow" }).click();
+ await page.getByTestId("blank-flow").click();
//first component
diff --git a/src/frontend/tests/core/features/store-shard-2.spec.ts b/src/frontend/tests/core/features/store-shard-2.spec.ts
index d83f828fe..5a1ee5bb6 100644
--- a/src/frontend/tests/core/features/store-shard-2.spec.ts
+++ b/src/frontend/tests/core/features/store-shard-2.spec.ts
@@ -101,6 +101,7 @@ test("should share component with share button", async ({ page }) => {
const randomName = Math.random().toString(36).substring(2);
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
const flowName = await page.getByTestId("flow_name").innerText();
diff --git a/src/frontend/tests/core/features/tweaksTest.spec.ts b/src/frontend/tests/core/features/tweaksTest.spec.ts
index 385b52848..e9db4696e 100644
--- a/src/frontend/tests/core/features/tweaksTest.spec.ts
+++ b/src/frontend/tests/core/features/tweaksTest.spec.ts
@@ -18,6 +18,7 @@ test("curl_api_generation", async ({ page, context }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts
index 3a70a7630..d3f7f615a 100644
--- a/src/frontend/tests/core/integrations/Basic Prompting.spec.ts
+++ b/src/frontend/tests/core/integrations/Basic Prompting.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";
@@ -37,6 +37,7 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/integrations/Blog Writer.spec.ts b/src/frontend/tests/core/integrations/Blog Writer.spec.ts
index 6b410d375..4c8f66825 100644
--- a/src/frontend/tests/core/integrations/Blog Writer.spec.ts
+++ b/src/frontend/tests/core/integrations/Blog Writer.spec.ts
@@ -37,6 +37,7 @@ test("Blog Writer", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Blog Writer" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/core/integrations/Document QA.spec.ts b/src/frontend/tests/core/integrations/Document QA.spec.ts
index 2369ce46b..437b69b41 100644
--- a/src/frontend/tests/core/integrations/Document QA.spec.ts
+++ b/src/frontend/tests/core/integrations/Document QA.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";
@@ -37,6 +37,7 @@ test("Document QA", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Document QA" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts
index 2a08ae369..88620c0bf 100644
--- a/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts
+++ b/src/frontend/tests/core/integrations/Dynamic Agent.spec.ts
@@ -42,6 +42,7 @@ test("Dynamic Agent", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Dynamic Agent" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts
index d0a3bcb7d..e3f330636 100644
--- a/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts
+++ b/src/frontend/tests/core/integrations/Memory Chatbot.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";
@@ -37,6 +37,7 @@ test("Memory Chatbot", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Memory Chatbot" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/core/integrations/Simple Agent.spec.ts b/src/frontend/tests/core/integrations/Simple Agent.spec.ts
index 1c7568466..7061571cb 100644
--- a/src/frontend/tests/core/integrations/Simple Agent.spec.ts
+++ b/src/frontend/tests/core/integrations/Simple Agent.spec.ts
@@ -46,7 +46,8 @@ test("Simple Agent", async ({ page }) => {
control = "Meta";
}
- await page.getByRole("heading", { name: "Simple Agent" }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
+ await page.getByRole("heading", { name: "Simple Agent" }).first().click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts
index b5e7e63ce..97ed8f872 100644
--- a/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts
+++ b/src/frontend/tests/core/integrations/Travel Planning Agent.spec.ts
@@ -42,6 +42,7 @@ test("Travel Planning Agent", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Travel Planning Agents" }).click();
await page.waitForSelector('[title="fit view"]', {
diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts
index 7069e153a..20483d4e7 100644
--- a/src/frontend/tests/core/integrations/Vector Store.spec.ts
+++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts
@@ -1,4 +1,4 @@
-import { expect, Page, test } from "@playwright/test";
+import { Page, test } from "@playwright/test";
import path from "path";
import uaParser from "ua-parser-js";
@@ -43,7 +43,8 @@ test("Vector Store RAG", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
+ await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
});
diff --git a/src/frontend/tests/core/integrations/decisionFlow.spec.ts b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
index 858c2aaaf..ba6720642 100644
--- a/src/frontend/tests/core/integrations/decisionFlow.spec.ts
+++ b/src/frontend/tests/core/integrations/decisionFlow.spec.ts
@@ -3,582 +3,453 @@ import * as dotenv from "dotenv";
import path from "path";
test("should create a flow with decision", 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.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 input");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("inputsChat Input")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("create list");
- await page.waitForTimeout(1000);
-
- await page.getByTitle("zoom out").click();
- await page.getByTitle("zoom out").click();
-
- await page
- .getByTestId("helpersCreate List")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTestId("input-list-plus-btn_texts-0").click();
- await page.getByTestId("input-list-plus-btn_texts-0").click();
-
- await page
- .getByTestId("inputlist_str_texts_0")
- .first()
- .fill("big news! langflow 1.0 is out");
- await page
- .getByTestId("inputlist_str_texts_1")
- .first()
- .fill("uhul that movie was awesome");
- await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe");
-
- await page.getByTitle("zoom out").click();
- await page.getByTitle("zoom out").click();
-
- await page
- .getByTestId("helpersCreate List")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTestId("input-list-plus-btn_texts-0").last().click();
- await page.getByTestId("input-list-plus-btn_texts-0").last().click();
-
- await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died");
- await page
- .getByTestId("inputlist_str_texts_1")
- .last()
- .fill("No one loves me");
- await page.getByTestId("inputlist_str_texts_2").last().fill("not cool..");
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("parse data");
- await page.waitForTimeout(1000);
-
- await page.getByTitle("zoom out").click();
-
- await page
- .getByTestId("helpersParse Data")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page
- .getByTestId("helpersParse Data")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("prompt");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("promptsPrompt")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("openai");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("modelsOpenAI")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("conditional router");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("prototypesConditional Router")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("pass");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("prototypesPass")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page
- .getByTestId("prototypesPass")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("zoom out").click();
-
- await page
- .getByTestId("prototypesPass")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("zoom out").click();
-
- await page.getByPlaceholder("Search").click();
- await page.getByPlaceholder("Search").fill("chatoutput");
- await page.waitForTimeout(1000);
-
- await page
- .getByTestId("outputsChat Output")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("zoom out").click();
-
- await page
- .getByTestId("outputsChat Output")
- .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
- await page.mouse.up();
- await page.mouse.down();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- //connection 1
- const elementCreateListOutput0 = await page
- .getByTestId("handle-createlist-shownode-data list-right")
- .nth(2);
- await elementCreateListOutput0.hover();
- await page.mouse.down();
- const elementParseDataInput0 = await page
- .getByTestId("handle-parsedata-shownode-data-left")
- .nth(0);
- await elementParseDataInput0.hover();
- await page.mouse.up();
-
- //connection 2
- const elementCreateListOutput1 = await page
- .getByTestId("handle-createlist-shownode-data list-right")
- .first();
- await elementCreateListOutput1.hover();
- await page.mouse.down();
- const elementParseDataInput1 = await page
- .getByTestId("handle-parsedata-shownode-data-left")
- .last();
- await elementParseDataInput1.hover();
- await page.mouse.up();
-
- //connection 3
- const elementChatInputOutput = await page
- .getByTestId("handle-chatinput-shownode-message-right")
- .first();
- await elementChatInputOutput.hover();
- await page.mouse.down();
- const elementPassInput3 = await page
- .getByTestId("handle-pass-shownode-input message-left")
- .last();
- await elementPassInput3.hover();
- await page.mouse.up();
-
- //edit prompt
- await page.getByTestId("promptarea_prompt_template").first().click();
- await page.getByTestId("modal-promptarea_prompt_template").first().fill(`
- {Condition}
-
-Answer with either TRUE or FALSE (and nothing else).
-
-TRUE Examples:
-{true_examples}
-
-FALSE Examples:
-{false_examples}
-
-
-User: {user_message}
-AI:
-
- `);
-
- await page.getByText("Check & Save").last().click();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 4
- const elementPassOutput3 = await page
- .getByTestId("handle-pass-shownode-output message-right")
- .nth(4);
- await elementPassOutput3.hover();
- await page.mouse.down();
- const elementPromptInputUserMessage = await page
- .getByTestId("handle-prompt-shownode-user_message-left")
- .first();
- await elementPromptInputUserMessage.hover();
- await page.mouse.up();
-
- //connection 5
- const elementParseDataOutput0 = await page
- .getByTestId("handle-parsedata-shownode-text-right")
- .nth(0);
- await elementParseDataOutput0.hover();
- await page.mouse.down();
- const elementPromptInput = await page
- .getByTestId("handle-prompt-shownode-false_examples-left")
- .first();
- await elementPromptInput.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 6
- const elementParseDataOutput1 = await page
- .getByTestId("handle-parsedata-shownode-text-right")
- .nth(2);
- await elementParseDataOutput1.hover();
- await page.mouse.down();
- const elementPromptInput1 = await page
- .getByTestId("handle-prompt-shownode-true_examples-left")
- .first();
- await elementPromptInput1.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 7
- elementPassOutput3.hover();
- await page.mouse.down();
- const elementPromptInput2 = await page
- .getByTestId("handle-prompt-shownode-user_message-left")
- .first();
- await elementPromptInput2.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 8
- const elementPromptOutput = await page
- .getByTestId("handle-prompt-shownode-prompt message-right")
- .first();
- await elementPromptOutput.hover();
- await page.mouse.down();
- const elementOpenAiInput = await page
- .getByTestId("handle-openaimodel-shownode-input-left")
- .first();
- await elementOpenAiInput.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 9
- const elementPassOutput1 = await page
- .getByTestId("handle-pass-shownode-output message-right")
- .nth(2);
- await elementPassOutput1.hover();
- await page.mouse.down();
- const elementChatOutput = await page
- .getByTestId("handle-chatoutput-shownode-text-left")
- .last();
- await elementChatOutput.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 10
- const elementPassOutput2 = await page
- .getByTestId("handle-pass-shownode-output message-right")
- .first();
- await elementPassOutput2.hover();
- await page.mouse.down();
- const elementChatOutput1 = await page
- .getByTestId("handle-chatoutput-shownode-text-left")
- .first();
- await elementChatOutput1.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 11
- const elementOpenAiOutput = await page
- .getByTestId("handle-openaimodel-shownode-text-right")
- .first();
- await elementOpenAiOutput.hover();
- await page.mouse.down();
- const elementConditionalRouterInput1 = await page
- .getByTestId("handle-conditionalrouter-shownode-input text-left")
- .first();
- await elementConditionalRouterInput1.hover();
- await page.mouse.up();
-
- await page.getByTestId("icon-arrow-right").nth(1).click();
- await page.getByTestId("more-options-modal").click();
- await page.getByTestId("edit-button-modal").click();
-
- let showIgnoredMessageCheckbox = await page.getByTestId(
- "showignored_message",
- );
-
- if (!(await showIgnoredMessageCheckbox.isChecked())) {
- await showIgnoredMessageCheckbox.click();
- }
-
- await page
- .getByTestId("popover-anchor-input-input_message-edit")
- .nth(0)
- .fill("You're Happy! 🤪");
- await page.getByText("Close").last().click();
-
- await page.getByTitle("zoom in").click();
- await page.getByTitle("zoom in").click();
- await page.getByTitle("zoom in").click();
- await page.getByTitle("zoom in").click();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- await page.getByTestId("icon-arrow-right").nth(0).click();
- await page.getByTestId("more-options-modal").click();
- await page.getByTestId("edit-button-modal").click();
-
- showIgnoredMessageCheckbox = await page.getByTestId("showignored_message");
-
- if (!(await showIgnoredMessageCheckbox.isChecked())) {
- await showIgnoredMessageCheckbox.click();
- }
-
- await page
- .getByTestId("popover-anchor-input-input_message-edit")
- .nth(0)
- .fill("You're Sad! 🥲");
- await page.getByText("Close").last().click();
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTitle("fit view").click({
- force: true,
- });
-
- await page.getByTestId("popover-anchor-input-match_text").fill("TRUE");
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 12
- const elementConditionalRouterOutput1 = await page
- .getByTestId("handle-conditionalrouter-shownode-true route-right")
- .first();
- await elementConditionalRouterOutput1.hover();
- await page.mouse.down();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- const elementPassInput1 = await page
- .getByTestId("handle-pass-shownode-ignored message-left")
- .nth(1);
- await elementPassInput1.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- //connection 13
- const elementConditionalRouterOutput2 = await page
- .getByTestId("handle-conditionalrouter-shownode-false route-right")
- .first();
- await elementConditionalRouterOutput2.hover();
- await page.mouse.down();
- const elementPassInput2 = await page
- .getByTestId("handle-pass-shownode-ignored message-left")
- .first();
- await elementPassInput2.hover();
- await page.mouse.up();
-
- await page.locator('//*[@id="react-flow-id"]').hover();
-
- await page
- .getByTestId("popover-anchor-input-api_key")
- .fill(process.env.OPENAI_API_KEY ?? "");
-
- await page.getByTestId("dropdown_str_model_name").click();
- await page.getByTestId("gpt-4o-1-option").click();
-
- await page.getByLabel("fit view").click();
- await page.getByText("Playground", { exact: true }).last().click();
- await page.waitForSelector('[data-testid="input-chat-playground"]', {
- timeout: 100000,
- });
- await page.getByTestId("input-chat-playground").click();
-
- await page
- .getByTestId("input-chat-playground")
- .fill("my dog is alive and happy!");
-
- await page.waitForSelector('[data-testid="icon-LucideSend"]', {
- timeout: 100000,
- });
-
- await page.getByTestId("icon-LucideSend").click();
-
- await page.waitForSelector("text=🤪", {
- timeout: 1200000,
- });
-
- await page.getByText("🤪").isVisible();
+ // 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.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 input");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("inputsChat Input")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("create list");
+ // await page.waitForTimeout(1000);
+ // await page.getByTitle("zoom out").click();
+ // await page.getByTitle("zoom out").click();
+ // await page
+ // .getByTestId("helpersCreate List")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTestId("input-list-plus-btn_texts-0").click();
+ // await page.getByTestId("input-list-plus-btn_texts-0").click();
+ // await page
+ // .getByTestId("inputlist_str_texts_0")
+ // .first()
+ // .fill("big news! langflow 1.0 is out");
+ // await page
+ // .getByTestId("inputlist_str_texts_1")
+ // .first()
+ // .fill("uhul that movie was awesome");
+ // await page.getByTestId("inputlist_str_texts_2").first().fill("love you babe");
+ // await page.getByTitle("zoom out").click();
+ // await page.getByTitle("zoom out").click();
+ // await page
+ // .getByTestId("helpersCreate List")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+ // await page.getByTestId("input-list-plus-btn_texts-0").last().click();
+ // await page.getByTestId("inputlist_str_texts_0").last().fill("oh my cat died");
+ // await page
+ // .getByTestId("inputlist_str_texts_1")
+ // .last()
+ // .fill("No one loves me");
+ // await page.getByTestId("inputlist_str_texts_2").last().fill("not cool..");
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("parse data");
+ // await page.waitForTimeout(1000);
+ // await page.getByTitle("zoom out").click();
+ // await page
+ // .getByTestId("helpersParse Data")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page
+ // .getByTestId("helpersParse Data")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("prompt");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("promptsPrompt")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("openai");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("modelsOpenAI")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("conditional router");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("prototypesConditional Router")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("pass");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("prototypesPass")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page
+ // .getByTestId("prototypesPass")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("zoom out").click();
+ // await page
+ // .getByTestId("prototypesPass")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("zoom out").click();
+ // await page.getByPlaceholder("Search").click();
+ // await page.getByPlaceholder("Search").fill("chatoutput");
+ // await page.waitForTimeout(1000);
+ // await page
+ // .getByTestId("outputsChat Output")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("zoom out").click();
+ // await page
+ // .getByTestId("outputsChat Output")
+ // .dragTo(page.locator('//*[@id="react-flow-id"]'));
+ // await page.mouse.up();
+ // await page.mouse.down();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // //connection 1
+ // const elementCreateListOutput0 = await page
+ // .getByTestId("handle-createlist-shownode-data list-right")
+ // .nth(2);
+ // await elementCreateListOutput0.hover();
+ // await page.mouse.down();
+ // const elementParseDataInput0 = await page
+ // .getByTestId("handle-parsedata-shownode-data-left")
+ // .nth(0);
+ // await elementParseDataInput0.hover();
+ // await page.mouse.up();
+ // //connection 2
+ // const elementCreateListOutput1 = await page
+ // .getByTestId("handle-createlist-shownode-data list-right")
+ // .first();
+ // await elementCreateListOutput1.hover();
+ // await page.mouse.down();
+ // const elementParseDataInput1 = await page
+ // .getByTestId("handle-parsedata-shownode-data-left")
+ // .last();
+ // await elementParseDataInput1.hover();
+ // await page.mouse.up();
+ // //connection 3
+ // const elementChatInputOutput = await page
+ // .getByTestId("handle-chatinput-shownode-message-right")
+ // .first();
+ // await elementChatInputOutput.hover();
+ // await page.mouse.down();
+ // const elementPassInput3 = await page
+ // .getByTestId("handle-pass-shownode-input message-left")
+ // .last();
+ // await elementPassInput3.hover();
+ // await page.mouse.up();
+ // //edit prompt
+ // await page.getByTestId("promptarea_prompt_template").first().click();
+ // await page.getByTestId("modal-promptarea_prompt_template").first().fill(`
+ // {Condition}
+ // Answer with either TRUE or FALSE (and nothing else).
+ // TRUE Examples:
+ // {true_examples}
+ // FALSE Examples:
+ // {false_examples}
+ // User: {user_message}
+ // AI:
+ // `);
+ // await page.getByText("Check & Save").last().click();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 4
+ // const elementPassOutput3 = await page
+ // .getByTestId("handle-pass-shownode-output message-right")
+ // .nth(4);
+ // await elementPassOutput3.hover();
+ // await page.mouse.down();
+ // const elementPromptInputUserMessage = await page
+ // .getByTestId("handle-prompt-shownode-user_message-left")
+ // .first();
+ // await elementPromptInputUserMessage.hover();
+ // await page.mouse.up();
+ // //connection 5
+ // const elementParseDataOutput0 = await page
+ // .getByTestId("handle-parsedata-shownode-text-right")
+ // .nth(0);
+ // await elementParseDataOutput0.hover();
+ // await page.mouse.down();
+ // const elementPromptInput = await page
+ // .getByTestId("handle-prompt-shownode-false_examples-left")
+ // .first();
+ // await elementPromptInput.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 6
+ // const elementParseDataOutput1 = await page
+ // .getByTestId("handle-parsedata-shownode-text-right")
+ // .nth(2);
+ // await elementParseDataOutput1.hover();
+ // await page.mouse.down();
+ // const elementPromptInput1 = await page
+ // .getByTestId("handle-prompt-shownode-true_examples-left")
+ // .first();
+ // await elementPromptInput1.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 7
+ // elementPassOutput3.hover();
+ // await page.mouse.down();
+ // const elementPromptInput2 = await page
+ // .getByTestId("handle-prompt-shownode-user_message-left")
+ // .first();
+ // await elementPromptInput2.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 8
+ // const elementPromptOutput = await page
+ // .getByTestId("handle-prompt-shownode-prompt message-right")
+ // .first();
+ // await elementPromptOutput.hover();
+ // await page.mouse.down();
+ // const elementOpenAiInput = await page
+ // .getByTestId("handle-openaimodel-shownode-input-left")
+ // .first();
+ // await elementOpenAiInput.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 9
+ // const elementPassOutput1 = await page
+ // .getByTestId("handle-pass-shownode-output message-right")
+ // .nth(2);
+ // await elementPassOutput1.hover();
+ // await page.mouse.down();
+ // const elementChatOutput = await page
+ // .getByTestId("handle-chatoutput-shownode-text-left")
+ // .last();
+ // await elementChatOutput.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 10
+ // const elementPassOutput2 = await page
+ // .getByTestId("handle-pass-shownode-output message-right")
+ // .first();
+ // await elementPassOutput2.hover();
+ // await page.mouse.down();
+ // const elementChatOutput1 = await page
+ // .getByTestId("handle-chatoutput-shownode-text-left")
+ // .first();
+ // await elementChatOutput1.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 11
+ // const elementOpenAiOutput = await page
+ // .getByTestId("handle-openaimodel-shownode-text-right")
+ // .first();
+ // await elementOpenAiOutput.hover();
+ // await page.mouse.down();
+ // const elementConditionalRouterInput1 = await page
+ // .getByTestId("handle-conditionalrouter-shownode-input text-left")
+ // .first();
+ // await elementConditionalRouterInput1.hover();
+ // await page.mouse.up();
+ // await page.getByTestId("icon-arrow-right").nth(1).click();
+ // await page.getByTestId("more-options-modal").click();
+ // await page.getByTestId("edit-button-modal").click();
+ // let showIgnoredMessageCheckbox = await page.getByTestId(
+ // "showignored_message",
+ // );
+ // if (!(await showIgnoredMessageCheckbox.isChecked())) {
+ // await showIgnoredMessageCheckbox.click();
+ // }
+ // await page
+ // .getByTestId("popover-anchor-input-input_message-edit")
+ // .nth(0)
+ // .fill("You're Happy! 🤪");
+ // await page.getByText("Close").last().click();
+ // await page.getByTitle("zoom in").click();
+ // await page.getByTitle("zoom in").click();
+ // await page.getByTitle("zoom in").click();
+ // await page.getByTitle("zoom in").click();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // await page.getByTestId("icon-arrow-right").nth(0).click();
+ // await page.getByTestId("more-options-modal").click();
+ // await page.getByTestId("edit-button-modal").click();
+ // showIgnoredMessageCheckbox = await page.getByTestId("showignored_message");
+ // if (!(await showIgnoredMessageCheckbox.isChecked())) {
+ // await showIgnoredMessageCheckbox.click();
+ // }
+ // await page
+ // .getByTestId("popover-anchor-input-input_message-edit")
+ // .nth(0)
+ // .fill("You're Sad! 🥲");
+ // await page.getByText("Close").last().click();
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTitle("fit view").click({
+ // force: true,
+ // });
+ // await page.getByTestId("popover-anchor-input-match_text").fill("TRUE");
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 12
+ // const elementConditionalRouterOutput1 = await page
+ // .getByTestId("handle-conditionalrouter-shownode-true route-right")
+ // .first();
+ // await elementConditionalRouterOutput1.hover();
+ // await page.mouse.down();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // const elementPassInput1 = await page
+ // .getByTestId("handle-pass-shownode-ignored message-left")
+ // .nth(1);
+ // await elementPassInput1.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // //connection 13
+ // const elementConditionalRouterOutput2 = await page
+ // .getByTestId("handle-conditionalrouter-shownode-false route-right")
+ // .first();
+ // await elementConditionalRouterOutput2.hover();
+ // await page.mouse.down();
+ // const elementPassInput2 = await page
+ // .getByTestId("handle-pass-shownode-ignored message-left")
+ // .first();
+ // await elementPassInput2.hover();
+ // await page.mouse.up();
+ // await page.locator('//*[@id="react-flow-id"]').hover();
+ // await page
+ // .getByTestId("popover-anchor-input-api_key")
+ // .fill(process.env.OPENAI_API_KEY ?? "");
+ // await page.getByTestId("dropdown_str_model_name").click();
+ // await page.getByTestId("gpt-4o-1-option").click();
+ // await page.getByLabel("fit view").click();
+ // await page.getByText("Playground", { exact: true }).last().click();
+ // await page.waitForSelector('[data-testid="input-chat-playground"]', {
+ // timeout: 100000,
+ // });
+ // await page.getByTestId("input-chat-playground").click();
+ // await page
+ // .getByTestId("input-chat-playground")
+ // .fill("my dog is alive and happy!");
+ // await page.waitForSelector('[data-testid="icon-LucideSend"]', {
+ // timeout: 100000,
+ // });
+ // await page.getByTestId("icon-LucideSend").click();
+ // await page.waitForSelector("text=🤪", {
+ // timeout: 1200000,
+ // });
+ // await page.getByText("🤪").isVisible();
});
diff --git a/src/frontend/tests/core/integrations/similarity.spec.ts b/src/frontend/tests/core/integrations/similarity.spec.ts
index 276874a2a..6994fbcac 100644
--- a/src/frontend/tests/core/integrations/similarity.spec.ts
+++ b/src/frontend/tests/core/integrations/similarity.spec.ts
@@ -27,7 +27,7 @@ test("user must be able to check similarity between embedding texts", async ({
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Blank Flow" }).click();
+ await page.getByTestId("blank-flow").click();
//first component
@@ -46,7 +46,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -63,7 +63,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -85,7 +85,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -102,7 +102,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -124,7 +124,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -146,7 +146,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -168,7 +168,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -188,7 +188,7 @@ test("user must be able to check similarity between embedding texts", async ({
.hover()
.then(async () => {
await page.mouse.down();
- await page.mouse.move(-800, 300);
+ await page.mouse.move(-50, 50);
});
await page.mouse.up();
@@ -232,6 +232,8 @@ test("user must be able to check similarity between embedding texts", async ({
.nth(0)
.fill("similarity_score");
+ await page.getByTitle("fit view").click();
+ await page.mouse.wheel(0, 500);
//connection 1
const openAiEmbeddingOutput_0 = await page
.getByTestId("handle-openaiembeddings-shownode-embeddings-right")
diff --git a/src/frontend/tests/core/integrations/starter-projects.spec.ts b/src/frontend/tests/core/integrations/starter-projects.spec.ts
index 12c116082..fbee3dbfc 100644
--- a/src/frontend/tests/core/integrations/starter-projects.spec.ts
+++ b/src/frontend/tests/core/integrations/starter-projects.spec.ts
@@ -72,7 +72,8 @@ test("vector store from starter projects should have its connections and nodes o
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
+ await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
});
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
index bf6554ada..2ce42c3d7 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-4.spec.ts
@@ -32,7 +32,8 @@ test("should be able to move flow from folder, rename it and be displayed on cor
modalCount = await page.getByTestId("modal-title")?.count();
}
- await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
+ await page.getByRole("heading", { name: "Vector Store RAG" }).first().click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
});
diff --git a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
index 072ff615a..d7ebc853f 100644
--- a/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
+++ b/src/frontend/tests/core/regression/generalBugs-shard-9.spec.ts
@@ -32,6 +32,7 @@ test("memory should work as expect", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts b/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
index bec55a35b..955bec8ba 100644
--- a/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
+++ b/src/frontend/tests/extended/features/actionsMainPage-shard-0.spec.ts
@@ -29,6 +29,7 @@ test("user should be able to download a flow or a component", async ({
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
@@ -132,6 +133,7 @@ test("user should be able to duplicate a flow or a component", async ({
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/features/curlApiGeneration.spec.ts b/src/frontend/tests/extended/features/curlApiGeneration.spec.ts
index 50c801daf..497478a73 100644
--- a/src/frontend/tests/extended/features/curlApiGeneration.spec.ts
+++ b/src/frontend/tests/extended/features/curlApiGeneration.spec.ts
@@ -17,6 +17,7 @@ test("curl_api_generation", async ({ page, context }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
index 243a7a216..a848d130f 100644
--- a/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
+++ b/src/frontend/tests/extended/features/limit-file-size-upload.spec.ts
@@ -49,6 +49,7 @@ test("user should not be able to upload a file larger than the limit", async ({
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts b/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts
index ef6611188..6ac553b10 100644
--- a/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts
+++ b/src/frontend/tests/extended/features/pythonApiGeneration.spec.ts
@@ -24,6 +24,7 @@ test("python_api_generation", async ({ page, context }) => {
await page.waitForTimeout(3000);
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
await page.getByText("API", { exact: true }).click();
diff --git a/src/frontend/tests/extended/features/starter-projects.spec.ts b/src/frontend/tests/extended/features/starter-projects.spec.ts
new file mode 100644
index 000000000..0956f2af3
--- /dev/null
+++ b/src/frontend/tests/extended/features/starter-projects.spec.ts
@@ -0,0 +1,84 @@
+import { expect, test } from "@playwright/test";
+
+test("user must be able to interact with starter projects", 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(3000);
+ modalCount = await page.getByTestId("modal-title")?.count();
+ }
+
+ expect(page.getByText("Start from scratch")).toBeVisible();
+ expect(
+ page.getByRole("button", { name: "Create Blank Project" }),
+ ).toBeVisible();
+
+ await page.getByTestId("side_nav_options_all-templates").click();
+ await page.waitForTimeout(500);
+
+ await page.getByPlaceholder("Search...").fill("Document");
+ await page.waitForTimeout(500);
+
+ expect(
+ page.getByTestId("template_basic-prompting-(hello,-world)"),
+ ).not.toBeVisible();
+
+ expect(page.getByTestId("template_document-qa").first()).toBeVisible();
+ expect(
+ page.getByTestId(`template_sequential-tasks-agent`).first(),
+ ).toBeVisible();
+
+ expect(page.getByTestId("template_vector-store")).not.toBeVisible();
+ expect(page.getByTestId(`template_simple-agent`)).not.toBeVisible();
+ expect(page.getByTestId(`template_dynamic-agent`)).not.toBeVisible();
+ expect(
+ page.getByTestId(`template_hierarchical-tasks-agent`),
+ ).not.toBeVisible();
+
+ await page.waitForTimeout(500);
+
+ await page.getByTestId(`side_nav_options_chatbots`).click();
+ await page.waitForTimeout(500);
+ expect(page.getByTestId(`category_title_chatbots`)).toBeVisible();
+
+ await page.getByTestId(`side_nav_options_rag`).click();
+ await page.waitForTimeout(500);
+
+ expect(page.getByTestId(`category_title_rag`)).toBeVisible();
+ expect(page.getByTestId(`template_vector-store-rag`)).toBeVisible();
+
+ expect(
+ page.getByTestId(`template_basic-prompting-(hello,-world)`),
+ ).not.toBeVisible();
+ expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
+
+ await page.getByTestId(`side_nav_options_agents`).click();
+ await page.waitForTimeout(500);
+
+ expect(page.getByTestId(`category_title_agents`)).toBeVisible();
+
+ expect(
+ page.getByTestId(`template_basic-prompting-(hello,-world)`),
+ ).not.toBeVisible();
+ expect(page.getByTestId(`template_document-qa`)).not.toBeVisible();
+ expect(page.getByTestId(`template_vector-store-rag`)).not.toBeVisible();
+
+ expect(page.getByTestId(`template_travel-planning-agents`)).toBeVisible();
+ expect(page.getByTestId(`template_sequential-tasks-agent`)).toBeVisible();
+ expect(page.getByTestId(`template_dynamic-agent`)).toBeVisible();
+ expect(page.getByTestId(`template_hierarchical-tasks-agent`)).toBeVisible();
+ expect(page.getByTestId(`template_simple-agent`)).toBeVisible();
+});
diff --git a/src/frontend/tests/extended/features/twoEdges.spec.ts b/src/frontend/tests/extended/features/twoEdges.spec.ts
index 988e34117..52f756ad2 100644
--- a/src/frontend/tests/extended/features/twoEdges.spec.ts
+++ b/src/frontend/tests/extended/features/twoEdges.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { test } from "@playwright/test";
test("user should be able to see multiple edges and interact with them", async ({
page,
@@ -29,7 +29,7 @@ test("user should be able to see multiple edges and interact with them", async (
}
await page.waitForTimeout(1000);
- await page.getByText("Vector Store RAG", { exact: true }).last().click();
+ await page.getByText("Vector RAG", { exact: true }).last().click();
await page.waitForTimeout(3000);
await page.getByText("Retriever", { exact: true }).first().isVisible();
await page.getByText("Search Results", { exact: true }).first().isVisible();
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
index e2d7839c7..db05bfc7e 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-1.spec.ts
@@ -1,6 +1,5 @@
-import { expect, test } from "@playwright/test";
+import { 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 }) => {
@@ -33,6 +32,7 @@ test("user must be able to see output inspection", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
index bbc6da513..4594886b3 100644
--- a/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
+++ b/src/frontend/tests/extended/integrations/chatInputOutputUser-shard-2.spec.ts
@@ -32,6 +32,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
index 76a536d29..c039c4efe 100644
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3836.spec.ts
@@ -34,6 +34,7 @@ test("user must be able to send an image on chat using advanced tool on ChatInpu
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts b/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts
index aee4ffc53..5564f3bbb 100644
--- a/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts
+++ b/src/frontend/tests/extended/regression/general-bugs-shard-3909.spec.ts
@@ -54,6 +54,7 @@ test("user must be able to create a new flow clicking on Start Here button", asy
await page.getByText("Start Here", { exact: true }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector("text=playground", { timeout: 30000 });
await page.waitForSelector("text=api", { timeout: 30000 });
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts
index 2611e1df3..6b924d106 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-0.spec.ts
@@ -32,6 +32,7 @@ test("erase button should clear the chat messages", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
index d36bd84ae..68a5f63f4 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-1.spec.ts
@@ -35,6 +35,7 @@ test("should delete rows from table message", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector('[title="fit view"]', {
timeout: 100000,
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
index 88d5333cf..4a3c9fd96 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-10.spec.ts
@@ -34,6 +34,7 @@ test("freeze must work correctly", async ({ page }) => {
modalCount = await page.getByTestId("modal-title")?.count();
}
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForTimeout(1000);
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
index 0289f68ca..9fc24c2bc 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts
@@ -62,6 +62,7 @@ test("should be able to share a component on the store by clicking on the share
await page.getByText("New Project", { exact: true }).click();
+ await page.getByTestId("side_nav_options_all-templates").click();
await page.getByRole("heading", { name: "Basic Prompting" }).click();
await page.waitForSelector("text=share", { timeout: 10000 });
await page.waitForSelector("text=playground", { timeout: 10000 });
diff --git a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
index 76673d468..ecc06b50e 100644
--- a/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
+++ b/src/frontend/tests/extended/regression/generalBugs-shard-3.spec.ts
@@ -126,6 +126,9 @@ test("should copy code from playground modal", async ({ page }) => {
}
// Click and hold on the first element
+ await page.getByTitle("zoom in").click();
+ await page.getByTitle("zoom in").click();
+
await visibleElementHandle.hover();
await page.mouse.down();