✨ (parameterComponent/index.tsx): add data-testid attributes to improve testability and accessibility

✨ (codeTabsComponent/index.tsx): add componentName prop to InputListComponent to improve testability and accessibility
✨ (inputListComponent/index.tsx): add componentName prop to improve testability and accessibility
✨ (textAreaComponent/index.tsx): add data-testid attribute to IconComponent to improve testability and accessibility
✨ (EditNodeModal/index.tsx): add componentName prop to InputListComponent to improve testability and accessibility
✨ (DisclosureComponent/index.tsx): add data-testid attribute to Disclosure.Button to improve testability and accessibility
✨ (components/index.ts): add componentName prop to InputListComponentType to improve testability and accessibility
✨ (codeAreaModalComponent.spec.ts): reduce wait time for better test performance
✨ (dragAndDrop.spec.ts): reduce wait time for better test performance

✅ (dropdownComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (dropdownComponent.spec.ts): add new test file filterEdge.spec.ts to test filtering functionality in dropdown component
✅ (filterEdge.spec.ts): add tests for tooltip and filter functionality in dropdown component

✅ (floatComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (flowPage.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (group.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✅ (inputComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance

✨ (inputListComponent.spec.ts): add end-to-end test for InputListComponent to ensure proper functionality
✨ (intComponent.spec.ts): add end-to-end test for IntComponent to ensure proper functionality
✨ (keyPairListComponent.spec.ts): add end-to-end test for KeyPairListComponent to ensure proper functionality
✨ (nestedComponent.spec.ts): add end-to-end test for NestedComponent to ensure proper functionality

✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (promptModalComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (saveComponents.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (textAreaModalComponent.spec.ts): add test for TextAreaModalComponent
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance
✨ (toggleComponent.spec.ts): reduce wait time for page.waitForTimeout from 2000ms to 1000ms to improve test performance

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

@@ -245,7 +245,12 @@ export default function ParameterComponent({
           nodeIconsLucide[item.family] ?? nodeIconsLucide["unknown"];
 
         return (
-          <div key={index}>
+          <div
+            key={index}
+            data-testid={`available-${left ? "input" : "output"}-${
+              item.family
+            }`}
+          >
             {index === 0 && (
               <span>{left ? INPUT_HANDLER_HOVER : OUTPUT_HANDLER_HOVER}</span>
             )}
@@ -269,10 +274,16 @@ export default function ParameterComponent({
                   }}
                 />
               </div>
-              <span className="ps-2 text-xs text-foreground">
+              <span
+                className="ps-2 text-xs text-foreground"
+                data-testid={`tooltip-${nodeNames[item.family] ?? "Other"}`}
+              >
                 {nodeNames[item.family] ?? "Other"}{" "}
                 {item?.display_name && item?.display_name?.length > 0 ? (
-                  <span className="text-xs">
+                  <span
+                    className="text-xs"
+                    data-testid={`tooltip-${item?.display_name}`}
+                  >
                     {" "}
                     {item.display_name === "" ? "" : " - "}
                     {item.display_name.split(", ").length > 2
@@ -289,7 +300,10 @@ export default function ParameterComponent({
                       : item.display_name}
                   </span>
                 ) : (
-                  <span className="text-xs">
+                  <span
+                    className="text-xs"
+                    data-testid={`tooltip-${item?.type}`}
+                  >
                     {" "}
                     {item.type === "" ? "" : " - "}
                     {item.type.split(", ").length > 2
@@ -312,7 +326,9 @@ export default function ParameterComponent({
       });
     } else {
       //@ts-ignore
-      refHtml.current = <span>{TOOLTIP_EMPTY}</span>;
+      refHtml.current = (
+        <span data-testid={`empty-tooltip-filter`}>{TOOLTIP_EMPTY}</span>
+      );
     }
   }
   // If optionalHandle is an empty list, then it is not an optional handle
@@ -336,6 +352,9 @@ export default function ParameterComponent({
             side={left ? "left" : "right"}
           >
             <Handle
+              data-test-id={`handle-${title.toLowerCase()}-${
+                left ? "target" : "source"
+              }`}
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
               key={
@@ -431,6 +450,9 @@ export default function ParameterComponent({
                 side={left ? "left" : "right"}
               >
                 <Handle
+                  data-test-id={`handle-${title.toLowerCase()}-${
+                    left ? "left" : "right"
+                  }`}
                   type={left ? "target" : "source"}
                   position={left ? Position.Left : Position.Right}
                   key={
@@ -476,6 +498,7 @@ export default function ParameterComponent({
                 }
               >
                 <InputListComponent
+                  componentName={name}
                   disabled={disabled}
                   value={
                     !data.node.template[name].value ||

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -265,6 +265,9 @@ export default function CodeTabsComponent({
                                                   templateField
                                                 ].list ? (
                                                   <InputListComponent
+                                                    componentName={
+                                                      templateField
+                                                    }
                                                     editNode={true}
                                                     disabled={false}
                                                     value={
@@ -719,6 +722,11 @@ export default function CodeTabsComponent({
                                                       ]
                                                     );
                                                   }}
+                                                  isList={
+                                                    node.data.node!.template[
+                                                      templateField
+                                                    ].list ?? false
+                                                  }
                                                 />
                                               </div>
                                             ) : node.data.node.template[

src/frontend/src/components/inputListComponent/index.tsx

@@ -11,6 +11,7 @@ export default function InputListComponent({
   onChange,
   disabled,
   editNode = false,
+  componentName,
 }: InputListComponentType): JSX.Element {
   useEffect(() => {
     if (disabled && value.length > 0 && value[0] !== "") {
@@ -46,6 +47,10 @@ export default function InputListComponent({
                 newInputList[idx] = event.target.value;
                 onChange(newInputList);
               }}
+              data-testid={
+                `input-list-input${editNode ? "-edit" : ""}_${componentName}-` +
+                idx
+              }
             />
             {idx === value.length - 1 ? (
               <button
@@ -54,6 +59,11 @@ export default function InputListComponent({
                   newInputList.push("");
                   onChange(newInputList);
                 }}
+                data-testid={
+                  `input-list-plus-btn${
+                    editNode ? "-edit" : ""
+                  }_${componentName}-` + idx
+                }
               >
                 <IconComponent
                   name="Plus"
@@ -62,6 +72,11 @@ export default function InputListComponent({
               </button>
             ) : (
               <button
+                data-testid={
+                  `input-list-minus-btn${
+                    editNode ? "-edit" : ""
+                  }_${componentName}-` + idx
+                }
                 onClick={() => {
                   let newInputList = _.cloneDeep(value);
                   newInputList.splice(idx, 1);

src/frontend/src/components/textAreaComponent/index.tsx

@@ -46,10 +46,11 @@ export default function TextAreaComponent({
           >
             {!editNode && (
               <IconComponent
+                strokeWidth={1.5}
                 id={id}
                 name="ExternalLink"
                 className={
-                  "icons-parameters-comp" +
+                  "icons-parameters-comp w-[1.35rem]" +
                   (disabled ? " text-ring" : " hover:text-accent-foreground")
                 }
               />

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -205,6 +205,7 @@ const EditNodeModal = forwardRef(
                                     {myData.node.template[templateParam]
                                       .list ? (
                                       <InputListComponent
+                                        componentName={templateParam}
                                         editNode={true}
                                         disabled={disabled}
                                         value={
@@ -347,6 +348,10 @@ const EditNodeModal = forwardRef(
                                           templateParam
                                         );
                                       }}
+                                      isList={
+                                        data.node?.template[templateParam]
+                                          .list ?? false
+                                      }
                                     />
                                   </div>
                                 ) : myData.node?.template[templateParam]
@@ -565,6 +570,7 @@ const EditNodeModal = forwardRef(
 
         <BaseModal.Footer>
           <Button
+            data-test-id="saveChangesBtn"
             id={"saveChangesBtn"}
             className="mt-3"
             onClick={() => {

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -12,7 +12,10 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="components-disclosure-arrangement">
+            <Disclosure.Button
+              className="components-disclosure-arrangement"
+              data-testid={`disclosure-${title.toLocaleLowerCase()}`}
+            >
               <div className="flex gap-4">
                 {/* BUG ON THIS ICON */}
                 <Icon strokeWidth={1.5} size={22} className="text-primary" />

src/frontend/src/types/components/index.ts

@@ -62,6 +62,7 @@ export type InputListComponentType = {
   onChange: (value: string[]) => void;
   disabled: boolean;
   editNode?: boolean;
+  componentName?: string;
 };
 
 export type KeyPairListComponentType = {

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

@@ -1,22 +1,22 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
   test.setTimeout(120000);
 });
 test("CodeAreaModalComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pythonfunctiontool");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("toolsPythonFunctionTool")

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

@@ -36,7 +36,7 @@ test.describe("drag and drop test", () => {
     );
 
     await page.getByText("Edit Flow").first().click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     const genericNoda = page.getByTestId("div-generic-node");
     const elementCount = await genericNoda.count();

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("dropDownComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("model_specsAmazon Bedrock")

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

@@ -0,0 +1,229 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(23000);
+  test.setTimeout(120000);
+});
+test("LLMChain - Tooltip", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("available-input-model_specs").first()
+      ).toBeVisible();
+
+      await expect(page.getByTestId("tooltip-Models").first()).toBeVisible();
+
+      await expect(
+        page.getByTestId("tooltip-AzureOpenAIModel").first()
+      ).toBeVisible();
+
+      await expect(
+        page.getByTestId("tooltip-Model Specs").first()
+      ).toBeVisible();
+
+      await page.getByTestId("icon-X").click();
+      await page.waitForTimeout(500);
+    });
+
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("available-input-memories").first()
+      ).toBeVisible();
+
+      await expect(page.getByTestId("tooltip-Memories").first()).toBeVisible();
+
+      await expect(
+        page
+          .getByTestId(
+            "tooltip-ConversationBufferMemory, ConversationBufferWindowMemory, ConversationEntityMemory, ConversationKGMemory, ConversationSummaryMemory, MotorheadMemory, VectorStoreRetrieverMemory"
+          )
+          .first()
+      ).toBeVisible();
+      await page.getByTestId("icon-Search").click();
+
+      await page.waitForTimeout(500);
+    });
+  await page.getByTitle("fit view").click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[5]/div/button/div/div'
+    )
+    .hover()
+    .then(async () => {
+      await expect(
+        page.getByTestId("empty-tooltip-filter").first()
+      ).toBeVisible();
+    });
+});
+
+test("LLMChain - Filter", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llmchain");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("chainsLLMChain")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTitle("fit view").click();
+
+  await page.waitForTimeout(500);
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[3]/div/button/div/div'
+    )
+    .click();
+  await page.getByTestId("icon-Search").click();
+
+  await expect(page.getByTestId("disclosure-models")).toBeVisible();
+  await expect(page.getByTestId("disclosure-model specs")).toBeVisible();
+
+  await expect(page.getByTestId("modelsAzureOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropic")).toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropicLLM")).toBeVisible();
+  await expect(page.getByTestId("model_specsAzureChatOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
+  await expect(page.getByTestId("model_specsCohere")).toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsGoogle Generative AI")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsHugging Face Inference API")
+  ).toBeVisible();
+  await expect(page.getByTestId("model_specsLlamaCpp")).toBeVisible();
+  await expect(page.getByTestId("model_specsOllama")).toBeVisible();
+  await expect(
+    page.getByTestId("model_specsQianfanChatEndpoint")
+  ).toBeVisible();
+  await expect(page.getByTestId("model_specsQianfanLLMEndpoint")).toBeVisible();
+  await expect(page.getByTestId("model_specsVertexAI")).toBeVisible();
+
+  await page.getByPlaceholder("Search").click();
+
+  await expect(page.getByTestId("model_specsVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCTransformers")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAmazon Bedrock")).not.toBeVisible();
+  await expect(page.getByTestId("modelsAzureOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsAnthropicLLM")).not.toBeVisible();
+  await expect(
+    page.getByTestId("model_specsAzureChatOpenAI")
+  ).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatAnthropic")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatLiteLLM")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOllama")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatOpenAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsChatVertexAI")).not.toBeVisible();
+  await expect(page.getByTestId("model_specsCohere")).not.toBeVisible();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .click();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[2]/div[4]/div/button/div/div'
+    )
+    .click();
+
+  await expect(page.getByTestId("disclosure-memories")).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferWindowMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationEntityMemory")
+  ).toBeVisible();
+  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
+  await expect(page.getByTestId("memoriesConversationKGMemory")).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationSummaryMemory")
+  ).toBeVisible();
+  await expect(
+    page.getByTestId("memoriesVectorStoreRetrieverMemory")
+  ).toBeVisible();
+
+  await page.getByTestId("rf__wrapper").click();
+
+  await expect(
+    page.getByTestId("memoriesConversationBufferMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationBufferWindowMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationEntityMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationKGMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationKGMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesConversationSummaryMemory")
+  ).not.toBeVisible();
+  await expect(
+    page.getByTestId("memoriesVectorStoreRetrieverMemory")
+  ).not.toBeVisible();
+});

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("FloatComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llamacpp");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .locator('//*[@id="model_specsLlamaCpp"]')

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

@@ -12,18 +12,18 @@ test.describe("Flow Page tests", () => {
 
   test("save", async ({ page }) => {
     await page.goto("http://localhost:3000/");
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.locator('//*[@id="new-project-btn"]').click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
 
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page
       .locator('//*[@id="helpersCustom Component"]')

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

@@ -11,7 +11,7 @@ test.describe("group node test", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
@@ -30,7 +30,7 @@ test.describe("group node test", () => {
       return dt;
     }, jsonContent);
 
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Now dispatch
     await page.dispatchEvent(

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("InputComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("vectorstoresChroma")

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

@@ -0,0 +1,182 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(21000);
+  test.setTimeout(120000);
+});
+test("InputListComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("astradb search");
+
+  await page.waitForTimeout(1000);
+  await page
+    .getByTestId("vectorstoresAstraDB Search")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  expect(
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+  ).toBeFalsy();
+  await page.getByTestId("showmetadata_indexing_exclude").click();
+  expect(
+    await page.getByTestId("showmetadata_indexing_exclude").isChecked()
+  ).toBeTruthy();
+
+  expect(
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
+  ).toBeFalsy();
+  await page.getByTestId("showmetadata_indexing_include").click();
+  expect(
+    await page.getByTestId("showmetadata_indexing_include").isChecked()
+  ).toBeTruthy();
+
+  await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-0")
+    .fill("test test test test");
+
+  await page
+    .getByTestId("input-list-plus-btn-edit_metadata_indexing_include-0")
+    .click();
+
+  await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-1")
+    .fill("test1 test1 test1 test1");
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .fill("test test test test");
+
+  const value0 = await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .inputValue();
+  const value1 = await page
+    .getByTestId("input-list-input_metadata_indexing_include-1")
+    .inputValue();
+
+  if (
+    value0 !== "test test test test" ||
+    value1 !== "test1 test1 test1 test1"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-minus-btn_metadata_indexing_include-0")
+    .click();
+
+  const plusButtonLocator = page.getByTestId(
+    "input-list-plus-btn_metadata_indexing_include-1"
+  );
+  const elementCount = await plusButtonLocator.count();
+
+  if (elementCount > 0) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-0")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-1")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-2")
+    .click();
+  await page
+    .getByTestId("input-list-plus-btn_metadata_indexing_include-3")
+    .click();
+
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-0")
+    .fill("test test test test");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-1")
+    .fill("test1 test1 test1 test1");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-2")
+    .fill("test2 test2 test2 test2");
+  await page
+    .getByTestId("input-list-input_metadata_indexing_include-3")
+    .fill("test3 test3 test3 test3");
+
+  await page.getByTestId("div-generic-node").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+
+  const value0Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-0")
+    .inputValue();
+  const value1Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-1")
+    .inputValue();
+  const value2Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-2")
+    .inputValue();
+  const value3Edit = await page
+    .getByTestId("input-list-input-edit_metadata_indexing_include-3")
+    .inputValue();
+
+  if (
+    value0Edit !== "test test test test" ||
+    value1Edit !== "test1 test1 test1 test1" ||
+    value2Edit !== "test2 test2 test2 test2" ||
+    value3Edit !== "test3 test3 test3 test3"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-0")
+    .click();
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-1")
+    .click();
+  await page
+    .getByTestId("input-list-minus-btn-edit_metadata_indexing_include-1")
+    .click();
+
+  const plusButtonLocatorEdit0 = await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-0"
+  );
+  const elementCountEdit0 = await plusButtonLocatorEdit0.count();
+
+  const plusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-plus-btn-edit_metadata_indexing_include-2"
+  );
+  const elementCountEdit2 = await plusButtonLocatorEdit2.count();
+
+  if (elementCountEdit0 > 0 || elementCountEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+
+  const minusButtonLocatorEdit1 = await page.getByTestId(
+    "input-list-minus-btn-edit_metadata_indexing_include-1"
+  );
+
+  const elementCountMinusEdit1 = await minusButtonLocatorEdit1.count();
+
+  const minusButtonLocatorEdit2 = await page.getByTestId(
+    "input-list-minus-btn-edit_metadata_indexing_include-2"
+  );
+
+  const elementCountMinusEdit2 = await minusButtonLocatorEdit2.count();
+
+  if (elementCountMinusEdit1 > 0 || elementCountMinusEdit2 > 0) {
+    expect(false).toBeTruthy();
+  }
+});

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("IntComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("modelsOpenAI")

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("KeypairListComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("csv");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("documentloadersCSVLoader")

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("NestedComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .getByTestId("vectorstoresPinecone")

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("PromptTemplateComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page
     .locator('//*[@id="inputsPrompt"]')
@@ -63,7 +63,8 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.getByTestId("save-button-modal").click();
 
-  const replace = await page.getByTestId("replace-button");
+  const replace = await page.getByTestId("replace-button").isVisible();
+
   if (replace) {
     await page.getByTestId("replace-button").click();
   }

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

@@ -18,7 +18,7 @@ test.describe("save component tests", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
@@ -37,7 +37,7 @@ test.describe("save component tests", () => {
       return dt;
     }, jsonContent);
 
-    page.waitForTimeout(2000);
+    page.waitForTimeout(1000);
 
     // Now dispatch
     await page.dispatchEvent(
@@ -85,15 +85,15 @@ test.describe("save component tests", () => {
     await page.getByTestId("title-Group").click();
     await page.getByTestId("icon-SaveAll").click();
 
-    const replaceButton = page.getByTestId("replace-button");
+    const replaceButton = await page.getByTestId("replace-button").isVisible();
 
     if (replaceButton) {
-      await replaceButton.click();
+      await page.getByTestId("replace-button").click();
     }
 
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("group");
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     await page
       .getByTestId("saved_componentsGroup")

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

@@ -0,0 +1,66 @@
+import { expect, test } from "@playwright/test";
+test.beforeEach(async ({ page }) => {
+  await page.waitForTimeout(26000);
+  test.setTimeout(120000);
+});
+test("TextAreaModalComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("prompt");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="inputsPrompt"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("prompt-input-template").click();
+
+  await page.getByTestId("modal-prompt-input-template").fill("{text}");
+
+  let valueBadgeOne = await page.locator('//*[@id="badge0"]').innerText();
+  if (valueBadgeOne != "text") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page
+    .getByTestId("textarea-text")
+    .fill(
+      "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
+    );
+
+  await page.getByTestId("textarea-text-ExternalLink").click();
+
+  await page.waitForTimeout(500);
+
+  const value = await page.getByTestId("text-area-modal").inputValue();
+
+  if (
+    value !=
+    "test test test test test test test test test test test !@#%*)( 123456789101010101010101111111111 !!!!!!!!!!"
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("text-area-modal").fill("test123123");
+
+  await page.getByTestId("genericModalBtnSave").click();
+
+  const valueTextArea = await page.getByTestId("textarea-text").inputValue();
+
+  if (valueTextArea != "test123123") {
+    expect(false).toBeTruthy();
+  }
+});

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

@@ -5,18 +5,18 @@ test.beforeEach(async ({ page }) => {
 });
 test("ToggleComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("blank-flow").click();
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directoryLoader");
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
   await page
     .getByTestId("documentloadersDirectoryLoader")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));