Create test ToogleComponent, IntComponent, FloatComponent, InputComponent (#1031)

This pull request introduces unit tests for four different components:
ToggleComponent, IntComponent, FloatComponent, and InputComponent. The
tests ensure that these components function as expected and help
maintain code quality.

Changes Made:
  Added a test suite for ToggleComponent to verify its functionality.
  Added a test suite for IntComponent to verify its functionality.
  Added a test suite for FloatComponent to verify its functionality.
  Added a test suite for InputComponent to verify its functionality.

src/frontend/run-tests.sh

@@ -30,6 +30,9 @@ terminate_process_by_port() {
 # Trap signals to ensure cleanup on script termination
 trap 'terminate_process_by_port 7860; terminate_process_by_port 3000' EXIT
 
+# install playwright if there is not installed yet
+npx playwright install
+
 # Navigate to the project root directory (where the Makefile is located)
 cd ../../
 
@@ -56,7 +59,7 @@ cd ../../
 make backend &
 
 # Give some time for the backend to start (adjust sleep duration as needed)
-sleep 10
+sleep 25
 
 # Navigate back to the test directory
 cd src/frontend

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

@@ -56,6 +56,7 @@ export default function ParameterComponent({
   info = "",
   proxy,
   showNode,
+  index = "",
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@@ -351,9 +352,11 @@ export default function ParameterComponent({
                 disabled={disabled}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
+                id={"textarea-" + index}
               />
             ) : (
               <InputComponent
+                id={"input-" + index}
                 disabled={disabled}
                 password={data.node?.template[name].password ?? false}
                 value={data.node?.template[name].value ?? ""}
@@ -364,6 +367,7 @@ export default function ParameterComponent({
         ) : left === true && type === "bool" ? (
           <div className="mt-2 w-full">
             <ToggleShadComponent
+              id={"toggle-" + index}
               disabled={disabled}
               enabled={data.node?.template[name].value ?? false}
               setEnabled={(isEnabled) => {
@@ -406,6 +410,7 @@ export default function ParameterComponent({
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
+              id={"code-input-" + index}
             />
           </div>
         ) : left === true && type === "file" ? (
@@ -427,6 +432,7 @@ export default function ParameterComponent({
               disabled={disabled}
               value={data.node?.template[name].value ?? ""}
               onChange={handleOnNewValue}
+              id={"int-input-" + index}
             />
           </div>
         ) : left === true && type === "prompt" ? (
@@ -450,6 +456,7 @@ export default function ParameterComponent({
               onChange={(e) => {
                 handleOnNewValue(e);
               }}
+              id={"prompt-input-" + index}
             />
           </div>
         ) : left === true && type === "NestedDict" ? (

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

@@ -219,6 +219,7 @@ export default function GenericNode({
                         data.node!.template[templateField].show &&
                         !data.node!.template[templateField].advanced && (
                           <ParameterComponent
+                            index={idx.toString()}
                             key={scapedJSONStringfy({
                               inputTypes:
                                 data.node!.template[templateField].input_types,
@@ -421,11 +422,13 @@ export default function GenericNode({
             <>
               {Object.keys(data.node!.template)
                 .filter((templateField) => templateField.charAt(0) !== "_")
+                .sort()
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
                     !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
+                        index={idx.toString()}
                         key={scapedJSONStringfy({
                           inputTypes:
                             data.node!.template[templateField].input_types,

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -12,6 +12,7 @@ export default function CodeAreaComponent({
   nodeClass,
   dynamic,
   setNodeClass,
+  id = "",
   readonly = false,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
@@ -43,6 +44,7 @@ export default function CodeAreaComponent({
       >
         <div className="flex w-full items-center">
           <span
+            id={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"

src/frontend/src/components/dictComponent/index.tsx

@@ -22,7 +22,6 @@ export default function DictComponent({
   }, [value]);
 
   const ref = useRef(value);
-  debugger;
   return (
     <div
       className={classNames(

src/frontend/src/components/inputComponent/index.tsx

@@ -17,6 +17,7 @@ export default function InputComponent({
   editNode = false,
   placeholder = "Type something...",
   className,
+  id = "",
   blurOnEnter = false,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
@@ -33,6 +34,7 @@ export default function InputComponent({
       {isForm ? (
         <Form.Control asChild>
           <Input
+            id={"form-" + id}
             ref={refInput}
             onBlur={onBlur}
             autoFocus={autoFocus}
@@ -61,6 +63,7 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <Input
+          id={id}
           ref={refInput}
           type="text"
           onBlur={onBlur}

src/frontend/src/components/intComponent/index.tsx

@@ -8,6 +8,7 @@ export default function IntComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: FloatComponentType): JSX.Element {
   const min = 0;
 
@@ -21,6 +22,7 @@ export default function IntComponent({
   return (
     <div className="w-full">
       <Input
+        id={id}
         onKeyDown={(event) => {
           if (
             event.key !== "Backspace" &&

src/frontend/src/components/promptComponent/index.tsx

@@ -14,6 +14,7 @@ export default function PromptAreaComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
   readonly = false,
 }: PromptAreaComponentType): JSX.Element {
   useEffect(() => {
@@ -36,6 +37,7 @@ export default function PromptAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <GenericModal
+        id={id}
         readonly={readonly}
         type={TypeModal.PROMPT}
         value={value}
@@ -49,6 +51,7 @@ export default function PromptAreaComponent({
       >
         <div className="flex w-full items-center">
           <span
+            id={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"

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

@@ -10,6 +10,7 @@ export default function TextAreaComponent({
   onChange,
   disabled,
   editNode = false,
+  id = "",
 }: TextAreaComponentType): JSX.Element {
   // Clear text area
   useEffect(() => {
@@ -21,6 +22,7 @@ export default function TextAreaComponent({
   return (
     <div className="flex w-full items-center">
       <Input
+        id={id}
         value={value}
         disabled={disabled}
         className={editNode ? "input-edit-node" : ""}

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

@@ -220,6 +220,7 @@ const EditNodeModal = forwardRef(
                                       templateParam
                                     ].multiline ? (
                                     <TextAreaComponent
+                                      id={"textarea-edit-" + index}
                                       disabled={disabled}
                                       editNode={true}
                                       value={
@@ -233,6 +234,7 @@ const EditNodeModal = forwardRef(
                                     />
                                   ) : (
                                     <InputComponent
+                                      id={"input-" + index}
                                       editNode={true}
                                       disabled={disabled}
                                       password={
@@ -328,6 +330,7 @@ const EditNodeModal = forwardRef(
                                 <div className="ml-auto">
                                   {" "}
                                   <ToggleShadComponent
+                                    id={"toggle-edit-" + index}
                                     disabled={disabled}
                                     enabled={
                                       myData.current.node.template[
@@ -386,6 +389,7 @@ const EditNodeModal = forwardRef(
                                   .type === "int" ? (
                                 <div className="mx-auto">
                                   <IntComponent
+                                    id={"int-input-" + index}
                                     disabled={disabled}
                                     editNode={true}
                                     value={
@@ -456,6 +460,7 @@ const EditNodeModal = forwardRef(
                                     onChange={(value: string | string[]) => {
                                       handleOnNewValue(value, templateParam);
                                     }}
+                                    id={"prompt-area-edit" + index}
                                   />
                                 </div>
                               ) : myData.current.node?.template[templateParam]
@@ -488,6 +493,7 @@ const EditNodeModal = forwardRef(
                                     onChange={(value: string | string[]) => {
                                       handleOnNewValue(value, templateParam);
                                     }}
+                                    id={"code-area-edit" + index}
                                   />
                                 </div>
                               ) : myData.current.node?.template[templateParam]

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -8,6 +8,7 @@ import { useContext, useEffect, useState } from "react";
 import AceEditor from "react-ace";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
@@ -144,6 +145,11 @@ export default function CodeAreaModal({
         />
       </BaseModal.Header>
       <BaseModal.Content>
+        <Input
+          value={code}
+          className="absolute left-[500%] top-[500%]"
+          id="codeValue"
+        />
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-full w-full">
             <AceEditor
@@ -183,10 +189,11 @@ export default function CodeAreaModal({
           </div>
           <div className="flex h-fit w-full justify-end">
             <Button
-              disabled={readonly}
               className="mt-3"
               onClick={handleClick}
               type="submit"
+              id="checkAndSaveBtn"
+              disabled={readonly}
             >
               Check & Save
             </Button>

src/frontend/src/modals/genericModal/index.tsx

@@ -30,6 +30,7 @@ export default function GenericModal({
   nodeClass,
   setNodeClass,
   children,
+  id = "",
   readonly = false,
 }: genericModalPropsType): JSX.Element {
   const [myButtonText] = useState(buttonText);
@@ -211,6 +212,7 @@ export default function GenericModal({
           >
             {type === TypeModal.PROMPT && isEdit && !readonly ? (
               <Textarea
+                id={"modal-" + id}
                 ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
                 value={inputValue}
@@ -286,7 +288,7 @@ export default function GenericModal({
                             className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
                           >
                             <div className="relative bottom-[1px]">
-                              <span>
+                              <span id={"badge" + index.toString()}>
                                 {word.replace(/[{}]/g, "").length > 59
                                   ? word.replace(/[{}]/g, "").slice(0, 56) +
                                     "..."
@@ -306,6 +308,7 @@ export default function GenericModal({
               )}
             </div>
             <Button
+              id="genericModalBtnSave"
               disabled={readonly}
               onClick={() => {
                 switch (myModalType) {

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

@@ -19,6 +19,7 @@ export type InputComponentType = {
   showPass?: boolean;
   placeholder?: string;
   className?: string;
+  id?: string;
   blurOnEnter?: boolean;
 };
 export type ToggleComponentType = {
@@ -52,6 +53,7 @@ export type ParameterComponentType = {
   info?: string;
   proxy?: { field: string; id: string };
   showNode?: boolean;
+  index?: string;
 };
 export type InputListComponentType = {
   value: string[];
@@ -85,6 +87,7 @@ export type TextAreaComponentType = {
   onChange: (value: string[] | string) => void;
   value: string;
   editNode?: boolean;
+  id?: string;
   readonly?: boolean;
 };
 
@@ -97,6 +100,7 @@ export type PromptAreaComponentType = {
   value: string;
   readonly?: boolean;
   editNode?: boolean;
+  id?: string;
 };
 
 export type CodeAreaComponentType = {
@@ -107,6 +111,7 @@ export type CodeAreaComponentType = {
   nodeClass?: APIClassType;
   setNodeClass?: (value: APIClassType) => void;
   dynamic?: boolean;
+  id?: string;
   readonly?: boolean;
 };
 
@@ -138,6 +143,7 @@ export type FloatComponentType = {
   disabled?: boolean;
   onChange: (value: string) => void;
   editNode?: boolean;
+  id?: string;
 };
 
 export type TooltipComponentType = {
@@ -495,6 +501,7 @@ export type genericModalPropsType = {
   nodeClass?: APIClassType;
   setNodeClass?: (Class: APIClassType) => void;
   children: ReactNode;
+  id?: string;
   readonly?: boolean;
 };
 

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

@@ -0,0 +1,140 @@
+import { expect, test } from "@playwright/test";
+
+test("CodeAreaModalComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("pythonfunctiontool");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sidePythonFunctionTool"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="code-input-0"]').click();
+
+  let value = await page.locator('//*[@id="codeValue"]').inputValue();
+
+  if (
+    value !=
+    'def python_function(text: str) -> str:    """This is a default python function that returns the input text"""    return text'
+  ) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="checkAndSaveBtn"]').click();
+
+  await page
+    .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  await page.locator('//*[@id="showcode"]').click();
+  expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showdescription"]').click();
+  expect(
+    await page.locator('//*[@id="showdescription"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showname"]').click();
+  expect(await page.locator('//*[@id="showname"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showreturn_direct"]').click();
+  expect(
+    await page.locator('//*[@id="showreturn_direct"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showcode"]').click();
+  expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showdescription"]').click();
+  expect(
+    await page.locator('//*[@id="showdescription"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showname"]').click();
+  expect(await page.locator('//*[@id="showname"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showreturn_direct"]').click();
+  expect(
+    await page.locator('//*[@id="showreturn_direct"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showcode"]').click();
+  expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showdescription"]').click();
+  expect(
+    await page.locator('//*[@id="showdescription"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showname"]').click();
+  expect(await page.locator('//*[@id="showname"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showreturn_direct"]').click();
+  expect(
+    await page.locator('//*[@id="showreturn_direct"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showcode"]').click();
+  expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showdescription"]').click();
+  expect(
+    await page.locator('//*[@id="showdescription"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showname"]').click();
+  expect(await page.locator('//*[@id="showname"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showreturn_direct"]').click();
+  expect(
+    await page.locator('//*[@id="showreturn_direct"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showcode"]').click();
+  expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="code-input-0"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showcode"]').click();
+    expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeTruthy();
+
+    await page.locator('//*[@id="code-area-edit0"]').click();
+
+    let value = await page.locator('//*[@id="codeValue"]').inputValue();
+
+    if (
+      value !=
+      'def python_function(text: str) -> str:    """This is a default python function that returns the input text"""    return text'
+    ) {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="checkAndSaveBtn"]').click();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    await page.locator('//*[@id="code-input-0"]').click();
+  }
+});

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

@@ -1,153 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-test("KeypairListComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
-  await page.waitForTimeout(2000);
-
-  await page.locator('//*[@id="new-project-btn"]').click();
-  await page.waitForTimeout(2000);
-
-  await page.getByPlaceholder("Search").click();
-  await page.getByPlaceholder("Search").fill("csv");
-
-  await page.waitForTimeout(2000);
-
-  await page
-    .locator('//*[@id="sideCSVLoader"]')
-    .dragTo(page.locator('//*[@id="react-flow-id"]'));
-  await page.mouse.up();
-  await page.mouse.down();
-
-  await page.locator('//*[@id="keypair0"]').click();
-  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
-  await page.locator('//*[@id="keypair100"]').click();
-  await page.locator('//*[@id="keypair100"]').fill("testtesttesttesttesttest");
-
-  const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
-  const elementCountNode = await plusButtonLocatorNode.count();
-  if (elementCountNode > 0) {
-    await plusButtonLocatorNode.click();
-  }
-
-  await page.locator('//*[@id="keypair1"]').click();
-  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
-  await page.locator('//*[@id="keypair101"]').click();
-  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
-  await page.locator('//*[@id="plusbtn1"]').click();
-
-  await page.locator('//*[@id="keypair2"]').click();
-  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-  await page.locator('//*[@id="keypair102"]').click();
-  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
-
-  await page.locator('//*[@id="minusbtn1"]').click();
-
-  const keyPairVerification = page.locator('//*[@id="keypair102"]');
-  const elementKeyCount = await keyPairVerification.count();
-
-  if (elementKeyCount === 0) {
-    expect(true).toBeTruthy();
-  } else {
-    expect(false).toBeTruthy();
-  }
-
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-    )
-    .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
-
-  await page.locator('//*[@id="showfile_path"]').click();
-  expect(
-    await page.locator('//*[@id="showfile_path"]').isChecked()
-  ).toBeFalsy();
-  await page.locator('//*[@id="showmetadata"]').click();
-  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
-  await page.locator('//*[@id="saveChangesBtn"]').click();
-
-  const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-  const elementCount = await plusButtonLocator.count();
-  if (elementCount === 0) {
-    expect(true).toBeTruthy();
-
-    await page
-      .locator(
-        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-      )
-      .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
-
-    await page.locator('//*[@id="showfile_path"]').click();
-    expect(
-      await page.locator('//*[@id="showfile_path"]').isChecked()
-    ).toBeTruthy();
-    await page.locator('//*[@id="showmetadata"]').click();
-    expect(
-      await page.locator('//*[@id="showmetadata"]').isChecked()
-    ).toBeTruthy();
-
-    await page.locator('//*[@id="keypair0"]').click();
-    await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
-    await page.locator('//*[@id="keypair100"]').click();
-    await page
-      .locator('//*[@id="keypair100"]')
-      .fill("testtesttesttesttesttest");
-
-    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-    const elementCount = await plusButtonLocator.count();
-    if (elementCount > 0) {
-      await plusButtonLocator.click();
-    }
-
-    await page.locator('//*[@id="keypair1"]').click();
-    await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
-    await page.locator('//*[@id="keypair101"]').click();
-    await page
-      .locator('//*[@id="keypair101"]')
-      .fill("testtesttesttesttesttest1");
-    await page.locator('//*[@id="plusbtn1"]').click();
-
-    await page.locator('//*[@id="keypair2"]').click();
-    await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-    await page.locator('//*[@id="keypair102"]').click();
-    await page
-      .locator('//*[@id="keypair102"]')
-      .fill("testtesttesttesttesttest2");
-
-    await page.locator('//*[@id="minusbtn1"]').click();
-
-    const keyPairVerification = page.locator('//*[@id="keypair102"]');
-    const elementKeyCount = await keyPairVerification.count();
-
-    if (elementKeyCount === 0) {
-      await page.locator('//*[@id="saveChangesBtn"]').click();
-
-      const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
-      const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
-      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
-      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
-
-      if (
-        key1 === "testtesttesttest" &&
-        value1 === "testtesttesttesttesttest" &&
-        key2 === "testtesttesttest2" &&
-        value2 === "testtesttesttesttesttest2"
-      ) {
-        expect(true).toBeTruthy();
-      } else {
-        expect(false).toBeTruthy();
-      }
-    } else {
-      expect(false).toBeTruthy();
-    }
-  } else {
-    expect(false).toBeTruthy();
-  }
-});
-
 test("FloatComponent", async ({ page }) => {
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);

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

@@ -0,0 +1,118 @@
+import { expect, test } from "@playwright/test";
+
+test("IntComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("getrequest");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideGET Request"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="int-input-2"]').click();
+  await page
+    .locator('//*[@id="int-input-2"]')
+    .fill("123456789123456789123456789");
+
+  let value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+  if (value != "123456789123456789123456789") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="int-input-2"]').click();
+  await page.locator('//*[@id="int-input-2"]').fill("-3");
+
+  value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  value = await page.locator('//*[@id="int-input-1"]').inputValue();
+
+  if (value != "0") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="int-input-1"]').click();
+  await page
+    .locator('//*[@id="int-input-1"]')
+    .fill("123456789123456789123456789");
+
+  await page.locator('//*[@id="showheaders"]').click();
+  expect(await page.locator('//*[@id="showheaders"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtimeout"]').click();
+  expect(await page.locator('//*[@id="showtimeout"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showurl"]').click();
+  expect(await page.locator('//*[@id="showurl"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showheaders"]').click();
+  expect(await page.locator('//*[@id="showheaders"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showurl"]').click();
+  expect(await page.locator('//*[@id="showurl"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="int-input-2"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showtimeout"]').click();
+    expect(
+      await page.locator('//*[@id="showtimeout"]').isChecked()
+    ).toBeTruthy();
+
+    const valueEditNode = await page
+      .locator('//*[@id="int-input-1"]')
+      .inputValue();
+
+    if (valueEditNode != "123456789123456789123456789") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+    await page.locator('//*[@id="int-input-2"]').click();
+    await page.locator('//*[@id="int-input-2"]').fill("3");
+
+    let value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+    if (value != "3") {
+      expect(false).toBeTruthy();
+    }
+
+    await page.locator('//*[@id="int-input-2"]').click();
+    await page.locator('//*[@id="int-input-2"]').fill("-3");
+
+    value = await page.locator('//*[@id="int-input-2"]').inputValue();
+
+    if (value != "0") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

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

@@ -0,0 +1,149 @@
+import { expect, test } from "@playwright/test";
+
+test("KeypairListComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("csv");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideCSVLoader"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
+  await page.locator('//*[@id="keypair100"]').click();
+  await page.locator('//*[@id="keypair100"]').fill("testtesttesttesttesttest");
+
+  const plusButtonLocatorNode = page.locator('//*[@id="plusbtn0"]');
+  const elementCountNode = await plusButtonLocatorNode.count();
+  if (elementCountNode > 0) {
+    await plusButtonLocatorNode.click();
+  }
+
+  await page.locator('//*[@id="keypair1"]').click();
+  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair101"]').click();
+  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
+  await page.locator('//*[@id="plusbtn1"]').click();
+
+  await page.locator('//*[@id="keypair2"]').click();
+  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
+  await page.locator('//*[@id="keypair102"]').click();
+  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
+
+  await page.locator('//*[@id="minusbtn1"]').click();
+
+  const keyPairVerification = page.locator('//*[@id="keypair102"]');
+  const elementKeyCount = await keyPairVerification.count();
+
+  if (elementKeyCount === 0) {
+    expect(true).toBeTruthy();
+  } else {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  await page.locator('//*[@id="showfile_path"]').click();
+  expect(
+    await page.locator('//*[@id="showfile_path"]').isChecked()
+  ).toBeFalsy();
+  await page.locator('//*[@id="showmetadata"]').click();
+  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+      )
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showfile_path"]').click();
+    expect(
+      await page.locator('//*[@id="showfile_path"]').isChecked()
+    ).toBeTruthy();
+    await page.locator('//*[@id="showmetadata"]').click();
+    expect(
+      await page.locator('//*[@id="showmetadata"]').isChecked()
+    ).toBeTruthy();
+
+    await page.locator('//*[@id="keypair0"]').click();
+    await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
+    await page.locator('//*[@id="keypair100"]').click();
+    await page
+      .locator('//*[@id="keypair100"]')
+      .fill("testtesttesttesttesttest");
+
+    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
+    const elementCount = await plusButtonLocator.count();
+    if (elementCount > 0) {
+      await plusButtonLocator.click();
+    }
+
+    await page.locator('//*[@id="keypair1"]').click();
+    await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+    await page.locator('//*[@id="keypair101"]').click();
+    await page
+      .locator('//*[@id="keypair101"]')
+      .fill("testtesttesttesttesttest1");
+    await page.locator('//*[@id="plusbtn1"]').click();
+
+    await page.locator('//*[@id="keypair2"]').click();
+    await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
+    await page.locator('//*[@id="keypair102"]').click();
+    await page
+      .locator('//*[@id="keypair102"]')
+      .fill("testtesttesttesttesttest2");
+
+    await page.locator('//*[@id="minusbtn1"]').click();
+
+    const keyPairVerification = page.locator('//*[@id="keypair102"]');
+    const elementKeyCount = await keyPairVerification.count();
+
+    if (elementKeyCount === 0) {
+      await page.locator('//*[@id="saveChangesBtn"]').click();
+
+      const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
+      const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
+      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
+      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
+
+      if (
+        key1 === "testtesttesttest" &&
+        value1 === "testtesttesttesttesttest" &&
+        key2 === "testtesttesttest2" &&
+        value2 === "testtesttesttesttesttest2"
+      ) {
+        expect(true).toBeTruthy();
+      } else {
+        expect(false).toBeTruthy();
+      }
+    } else {
+      expect(false).toBeTruthy();
+    }
+  } else {
+    expect(false).toBeTruthy();
+  }
+});

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

@@ -0,0 +1,174 @@
+import { expect, test } from "@playwright/test";
+
+test("PromptTemplateComponent", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("promptTemplate");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sidePromptTemplate"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator('//*[@id="prompt-input-4"]').click();
+  await page
+    .locator('//*[@id="modal-prompt-input-4"]')
+    .fill("{prompt} example {prompt1}");
+
+  let value = await page
+    .locator('//*[@id="modal-prompt-input-4"]')
+    .inputValue();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+
+  let valueBadgeOne = await page.locator('//*[@id="badge0"]').innerText();
+  if (valueBadgeOne != "prompt") {
+    expect(false).toBeTruthy();
+  }
+
+  let valueBadgeTwo = await page.locator('//*[@id="badge1"]').innerText();
+  if (valueBadgeTwo != "prompt1") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="genericModalBtnSave"]').click();
+
+  await page.locator('//*[@id="textarea-7"]').click();
+  await page.locator('//*[@id="textarea-7"]').fill("prompt_value_!@#!@#");
+
+  value = await page.locator('//*[@id="textarea-7"]').inputValue();
+
+  if (value != "prompt_value_!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="textarea-8"]').click();
+  await page
+    .locator('//*[@id="textarea-8"]')
+    .fill("prompt_name_test_123123!@#!@#");
+
+  value = await page.locator('//*[@id="textarea-8"]').inputValue();
+
+  if (value != "prompt_name_test_123123!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  value = await page.locator('//*[@id="prompt-input-4"]').innerText();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+  value = await page.locator('//*[@id="textarea-edit-1"]').inputValue();
+
+  if (value != "prompt_value_!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  value = await page.locator('//*[@id="textarea-edit-2"]').inputValue();
+
+  if (value != "prompt_name_test_123123!@#!@#") {
+    expect(false).toBeTruthy();
+  }
+
+  value = await page.locator('//*[@id="prompt-area-edit0"]').innerText();
+
+  if (value != "{prompt} example {prompt1}") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator('//*[@id="textarea-edit-2"]')
+    .fill("prompt_edit_test_12312312321!@#$");
+  await page
+    .locator('//*[@id="textarea-edit-1"]')
+    .fill("prompt_edit_test_44444444444!@#$");
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(await page.locator('//*[@id="showtemplate"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(
+    await page.locator('//*[@id="showtemplate"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(await page.locator('//*[@id="showtemplate"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showprompt1"]').click();
+  expect(await page.locator('//*[@id="showprompt1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showtemplate"]').click();
+  expect(
+    await page.locator('//*[@id="showtemplate"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showprompt"]').click();
+  expect(await page.locator('//*[@id="showprompt"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="textarea-8"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]'
+      )
+      .click();
+
+    await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+    await page.locator('//*[@id="showprompt1"]').click();
+    expect(
+      await page.locator('//*[@id="showprompt1"]').isChecked()
+    ).toBeTruthy();
+
+    value = await page.locator('//*[@id="textarea-edit-1"]').inputValue();
+
+    if (value != "prompt_edit_test_44444444444!@#$") {
+      expect(false).toBeTruthy();
+    }
+
+    value = await page.locator('//*[@id="textarea-edit-2"]').inputValue();
+
+    if (value != "prompt_edit_test_12312312321!@#$") {
+      expect(false).toBeTruthy();
+    }
+
+    value = await page.locator('//*[@id="prompt-area-edit0"]').innerText();
+
+    if (value != "{prompt} example {prompt1}") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

src/frontend/tests/onlyFront/assets/flow.json

@@ -1,56 +1,252 @@
 {
-  "description": "Engineered for Excellence, Built for Business.",
+  "description": "Use this Tool on every query",
-  "name": "Fluffy Sinoussi",
+  "name": "Getting Started: Simple python function applied to each output",
   "data": {
     "nodes": [
       {
-        "id": "AgentInitializer-Zza0A",
+        "width": 384,
+        "height": 631,
+        "id": "ChatOpenAI-tRw3A",
         "type": "genericNode",
-        "position": { "x": 595, "y": 224.25 },
+        "position": {
+          "x": 543.1816229116944,
+          "y": 942.891611351432
+        },
         "data": {
-          "type": "AgentInitializer",
+          "type": "ChatOpenAI",
           "node": {
             "template": {
-              "llm": {
+              "lc_kwargs": {
-                "required": true,
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "lc_kwargs",
+                "advanced": true,
+                "type": "code",
+                "list": false
+              },
+              "verbose": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "value": false,
+                "password": false,
+                "name": "verbose",
+                "advanced": false,
+                "type": "bool",
+                "list": false
+              },
+              "callbacks": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "callbacks",
+                "advanced": false,
+                "type": "langchain.callbacks.base.BaseCallbackHandler",
+                "list": true
+              },
+              "client": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "client",
+                "advanced": false,
+                "type": "Any",
+                "list": false
+              },
+              "model_name": {
+                "required": false,
                 "placeholder": "",
                 "show": true,
                 "multiline": false,
+                "value": "gpt-3.5-turbo",
                 "password": false,
-                "name": "llm",
+                "options": [
-                "display_name": "LLM",
+                  "gpt-3.5-turbo-0613",
+                  "gpt-3.5-turbo",
+                  "gpt-3.5-turbo-16k-0613",
+                  "gpt-3.5-turbo-16k",
+                  "gpt-4-0613",
+                  "gpt-4-32k-0613",
+                  "gpt-4",
+                  "gpt-4-32k"
+                ],
+                "name": "model_name",
                 "advanced": false,
-                "dynamic": false,
+                "type": "str",
-                "info": "",
+                "list": true
-                "type": "BaseLanguageModel",
+              },
+              "temperature": {
+                "required": false,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "value": "0.2",
+                "password": false,
+                "name": "temperature",
+                "advanced": false,
+                "type": "float",
                 "list": false
               },
-              "memory": {
+              "model_kwargs": {
                 "required": false,
                 "placeholder": "",
                 "show": true,
                 "multiline": false,
                 "password": false,
-                "name": "memory",
+                "name": "model_kwargs",
-                "advanced": false,
+                "advanced": true,
-                "dynamic": false,
+                "type": "code",
-                "info": "",
-                "type": "BaseChatMemory",
                 "list": false
               },
-              "tools": {
+              "openai_api_key": {
-                "required": true,
+                "required": false,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "value": "",
+                "password": true,
+                "name": "openai_api_key",
+                "display_name": "OpenAI API Key",
+                "advanced": false,
+                "type": "str",
+                "list": false
+              },
+              "openai_api_base": {
+                "required": false,
                 "placeholder": "",
                 "show": true,
                 "multiline": false,
                 "password": false,
-                "name": "tools",
+                "name": "openai_api_base",
+                "display_name": "OpenAI API Base",
                 "advanced": false,
-                "dynamic": false,
+                "type": "str",
-                "info": "",
+                "list": false
-                "type": "Tool",
-                "list": true
               },
+              "openai_organization": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "openai_organization",
+                "display_name": "OpenAI Organization",
+                "advanced": false,
+                "type": "str",
+                "list": false
+              },
+              "openai_proxy": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "openai_proxy",
+                "display_name": "OpenAI Proxy",
+                "advanced": false,
+                "type": "str",
+                "list": false
+              },
+              "request_timeout": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "password": false,
+                "name": "request_timeout",
+                "advanced": false,
+                "type": "float",
+                "list": false
+              },
+              "max_retries": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "value": 6,
+                "password": false,
+                "name": "max_retries",
+                "advanced": false,
+                "type": "int",
+                "list": false
+              },
+              "streaming": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "value": false,
+                "password": false,
+                "name": "streaming",
+                "advanced": false,
+                "type": "bool",
+                "list": false
+              },
+              "n": {
+                "required": false,
+                "placeholder": "",
+                "show": false,
+                "multiline": false,
+                "value": 1,
+                "password": false,
+                "name": "n",
+                "advanced": false,
+                "type": "int",
+                "list": false
+              },
+              "max_tokens": {
+                "required": false,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "password": true,
+                "name": "max_tokens",
+                "advanced": false,
+                "type": "int",
+                "list": false
+              },
+              "_type": "ChatOpenAI"
+            },
+            "description": "Wrapper around OpenAI Chat large language models.",
+            "base_classes": [
+              "Serializable",
+              "BaseChatModel",
+              "ChatOpenAI",
+              "BaseLanguageModel"
+            ],
+            "display_name": "ChatOpenAI"
+          },
+          "id": "ChatOpenAI-tRw3A",
+          "value": null
+        },
+        "selected": false,
+        "dragging": false,
+        "positionAbsolute": {
+          "x": 543.1816229116944,
+          "y": 942.891611351432
+        }
+      },
+      {
+        "width": 384,
+        "height": 387,
+        "id": "AgentInitializer-KcVTt",
+        "type": "genericNode",
+        "position": {
+          "x": 1036.6064439140812,
+          "y": 645.1919693466587
+        },
+        "data": {
+          "type": "AgentInitializer",
+          "node": {
+            "template": {
               "agent": {
                 "required": true,
                 "placeholder": "",
@@ -63,34 +259,161 @@
                   "react-docstore",
                   "self-ask-with-search",
                   "conversational-react-description",
-                  "openai-functions",
+                  "openai-functions"
-                  "openai-multi-functions"
                 ],
                 "name": "agent",
                 "advanced": false,
-                "dynamic": false,
-                "info": "",
                 "type": "str",
                 "list": true
               },
+              "memory": {
+                "required": false,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "password": false,
+                "name": "memory",
+                "advanced": false,
+                "type": "BaseChatMemory",
+                "list": false
+              },
+              "tools": {
+                "required": false,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "password": false,
+                "name": "tools",
+                "advanced": false,
+                "type": "Tool",
+                "list": true
+              },
+              "llm": {
+                "required": true,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "password": false,
+                "name": "llm",
+                "display_name": "LLM",
+                "advanced": false,
+                "type": "BaseLanguageModel",
+                "list": false
+              },
               "_type": "initialize_agent"
             },
             "description": "Construct a zero shot agent from an LLM and tools.",
             "base_classes": ["AgentExecutor", "function"],
-            "display_name": "AgentInitializer",
+            "display_name": "AgentInitializer"
-            "custom_fields": {},
-            "output_types": [],
-            "documentation": "https://python.langchain.com/docs/modules/agents/agent_types/",
-            "beta": false,
-            "error": null
           },
-          "id": "AgentInitializer-Zza0A"
+          "id": "AgentInitializer-KcVTt",
+          "value": null
         },
-        "positionAbsolute": { "x": 595, "y": 224.25 }
+        "selected": false,
+        "positionAbsolute": {
+          "x": 1036.6064439140812,
+          "y": 645.1919693466587
+        }
+      },
+      {
+        "width": 384,
+        "height": 437,
+        "id": "PythonFunctionTool-FwZVF",
+        "type": "genericNode",
+        "position": {
+          "x": 553.050119331742,
+          "y": 412.9533535948685
+        },
+        "data": {
+          "type": "PythonFunctionTool",
+          "node": {
+            "template": {
+              "name": {
+                "required": true,
+                "placeholder": "",
+                "show": true,
+                "multiline": false,
+                "value": "PythonFunction",
+                "password": false,
+                "name": "name",
+                "advanced": false,
+                "type": "str",
+                "list": false
+              },
+              "description": {
+                "required": true,
+                "placeholder": "",
+                "show": true,
+                "multiline": true,
+                "value": "Returns the Text you send. This is a testing tool.",
+                "password": false,
+                "name": "description",
+                "advanced": false,
+                "type": "str",
+                "list": false
+              },
+              "code": {
+                "required": true,
+                "placeholder": "",
+                "show": true,
+                "multiline": true,
+                "value": "\ndef python_function(text: str) -> str:\n    \"\"\"This is a default python function that returns the input text\"\"\"\n    return text\n",
+                "password": false,
+                "name": "code",
+                "advanced": false,
+                "type": "code",
+                "list": false
+              },
+              "_type": "PythonFunctionTool"
+            },
+            "description": "Python function to be executed.",
+            "base_classes": ["Tool"],
+            "display_name": "PythonFunctionTool"
+          },
+          "id": "PythonFunctionTool-FwZVF",
+          "value": null
+        },
+        "selected": false,
+        "dragging": false,
+        "positionAbsolute": {
+          "x": 553.050119331742,
+          "y": 412.9533535948685
+        }
       }
     ],
-    "edges": [],
+    "edges": [
-    "viewport": { "x": 0, "y": 0, "zoom": 1 }
+      {
+        "source": "ChatOpenAI-tRw3A",
+        "sourceHandle": "ChatOpenAI|ChatOpenAI-tRw3A|Serializable|BaseChatModel|ChatOpenAI|BaseLanguageModel",
+        "target": "AgentInitializer-KcVTt",
+        "targetHandle": "BaseLanguageModel|llm|AgentInitializer-KcVTt",
+        "style": {
+          "stroke": "inherit"
+        },
+        "className": "stroke-gray-900 dark:stroke-gray-200",
+        "animated": false,
+        "id": "reactflow__edge-ChatOpenAI-tRw3AChatOpenAI|ChatOpenAI-tRw3A|Serializable|BaseChatModel|ChatOpenAI|BaseLanguageModel-AgentInitializer-KcVTtBaseLanguageModel|llm|AgentInitializer-KcVTt",
+        "selected": false
+      },
+      {
+        "source": "PythonFunctionTool-FwZVF",
+        "sourceHandle": "PythonFunctionTool|PythonFunctionTool-FwZVF|Tool",
+        "target": "AgentInitializer-KcVTt",
+        "targetHandle": "Tool|tools|AgentInitializer-KcVTt",
+        "style": {
+          "stroke": "inherit"
+        },
+        "className": "stroke-gray-900 dark:stroke-gray-200",
+        "animated": false,
+        "id": "reactflow__edge-PythonFunctionTool-FwZVFPythonFunctionTool|PythonFunctionTool-FwZVF|Tool-AgentInitializer-KcVTtTool|tools|AgentInitializer-KcVTt",
+        "selected": false
+      }
+    ],
+    "viewport": {
+      "x": 4.748095479939138,
+      "y": -155.65184647754464,
+      "zoom": 0.6079953565987085
+    }
   },
-  "id": "84c4b46f-063b-4d48-bf7f-6c668013064f"
+  "id": "15030b3c-570d-4658-8473-58138077e9b0"
 }

src/frontend/tests/onlyFront/group.spec.ts

@@ -1,14 +1,49 @@
 import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
 
-test.describe("Group component tests", () => {
+test.describe("group node test", () => {
-  test("group test", async ({ page }) => {
+  /// <reference lib="dom"/>
-    await page.goto("http://localhost:3000/");
+  test("group and ungroup updating values", async ({ page }) => {
-    await page.getByRole("button", { name: "Community Examples" }).click();
+    await page.routeFromHAR("harFiles/langflow.har", {
-    await page
+      url: "**/api/v1/**",
-      .locator(
+      update: false,
-        "div:nth-child(7) > div:nth-child(2) > .card-component-footer-arrangement > .inline-flex"
+    });
-      )
+    await page.route("**/api/v1/flows/", async (route) => {
-      .click();
+      const json = {
+        id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+      };
+      await route.fulfill({ json, status: 201 });
+    });
+    await page.goto("http:localhost:3000/");
+    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
+    // Read your file into a buffer.
+    const jsonContent = readFileSync(
+      "tests/onlyFront/assets/flow.json",
+      "utf-8"
+    );
+
+    // Create the DataTransfer and File
+    const dataTransfer = await page.evaluateHandle((data) => {
+      const dt = new DataTransfer();
+      // Convert the buffer to a hex array
+      const file = new File([data], "flow.json", {
+        type: "application/json",
+      });
+      dt.items.add(file);
+      return dt;
+    }, jsonContent);
+
+    // Now dispatch
+    await page.dispatchEvent('//*[@id="root"]/div/div[2]/div[2]', "drop", {
+      dataTransfer,
+    });
+    expect(
+      await page
+        .locator(".main-page-flows-display")
+        .evaluate((el) => el.children)
+    ).toBeTruthy();
+    await page.getByRole("button", { name: "Edit Flow" }).click();
+    //inside the flow
     await page
       .locator(
         "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[1]/div/div[1]/div"
@@ -84,16 +119,11 @@ test.describe("Group component tests", () => {
       )
       .click();
     await page.getByLabel("Ungroup").click();
-    await expect(
+    await expect(page.locator('//*[@id="input-2"]')).toHaveValue("fieldValue");
-      page.locator(
-        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div/div/div[2]/div[3]/div/div[2]/div[4]/div/div[2]/div/input"
-      )
-    ).toHaveValue("fieldValue");
     expect(
       await page
-        .locator(
+        .getByTestId(/.*rf__node-AgentInitializer.*/)
-          "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div/div/div[2]/div[2]/div/div[2]/div[5]/div/div[2]/div/button/span[1]"
+        .getByRole("button", { name: "openai-functions" })
-        )
         .textContent()
     ).toBe("openai-functions");
   });

src/frontend/tests/onlyFront/inputComponent.spec.ts

@@ -0,0 +1,172 @@
+import { expect, test } from "@playwright/test";
+
+test("InputComponent", async ({ page }) => {
+  await page.routeFromHAR("harFiles/langflow.har", {
+    url: "**/api/v1/**",
+    update: false,
+  });
+  await page.route("**/api/v1/flows/", async (route) => {
+    const json = {
+      id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+    };
+    await route.fulfill({ json, status: 201 });
+  });
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("Chroma");
+
+  await page.waitForTimeout(2000);
+
+  await page
+    .locator('//*[@id="sideChroma"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.locator("#input-8").click();
+  await page
+    .locator("#input-8")
+    .fill("collection_name_test_123123123!@#$&*(&%$@");
+
+  let value = await page.locator("#input-8").inputValue();
+
+  if (value != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showcollection_name"]').click();
+  expect(
+    await page.locator('//*[@id="showcollection_name"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist"]').click();
+  expect(await page.locator('//*[@id="showpersist"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist_directory"]').click();
+  expect(
+    await page.locator('//*[@id="showpersist_directory"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showchroma_server_cors_allow_origins"]').click();
+  expect(
+    await page
+      .locator('//*[@id="showchroma_server_cors_allow_origins"]')
+      .isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_grpc_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_grpc_port"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_host"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_host"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
+  expect(
+    await page.locator('//*[@id="showchroma_server_ssl_enabled"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showpersist"]').click();
+  expect(await page.locator('//*[@id="showpersist"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showpersist_directory"]').click();
+  expect(
+    await page.locator('//*[@id="showpersist_directory"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showsearch_kwargs"]').click();
+  expect(
+    await page.locator('//*[@id="showsearch_kwargs"]').isChecked()
+  ).toBeFalsy();
+
+  let valueEditNode = await page.locator('//*[@id="input-5"]').inputValue();
+
+  if (valueEditNode != "collection_name_test_123123123!@#$&*(&%$@") {
+    expect(false).toBeTruthy();
+  }
+
+  await page.locator('//*[@id="input-5"]').click();
+  await page
+    .locator('//*[@id="input-5"]')
+    .fill("NEW_collection_name_test_123123123!@#$&*(&%$@");
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator("#input-8");
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator(
+        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
+      )
+      .click();
+    await page.locator('//*[@id="editAdvancedIcon"]').click();
+
+    await page.locator('//*[@id="showcollection_name"]').click();
+    expect(
+      await page.locator('//*[@id="showcollection_name"]').isChecked()
+    ).toBeTruthy();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    let value = await page.locator("#input-8").inputValue();
+
+    if (value != "NEW_collection_name_test_123123123!@#$&*(&%$@") {
+      expect(false).toBeTruthy();
+    }
+  }
+});

src/frontend/tests/onlyFront/toggleComponent.spec.ts

@@ -0,0 +1,176 @@
+import { expect, test } from "@playwright/test";
+
+test("ToggleComponent", async ({ page }) => {
+  await page.routeFromHAR("harFiles/langflow.har", {
+    url: "**/api/v1/**",
+    update: false,
+  });
+  await page.route("**/api/v1/flows/", async (route) => {
+    const json = {
+      id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+    };
+    await route.fulfill({ json, status: 201 });
+  });
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(2000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(2000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("directoryLoader");
+
+  await page.waitForTimeout(2000);
+  await page
+    .locator('//*[@id="sideDirectoryLoader"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="toggle-1"]').click();
+  expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div'
+    )
+    .click();
+  await page.locator('//*[@id="advancedIcon"]').click();
+  await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+  expect(
+    await page.locator('//*[@id="toggle-edit-1"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showglob"]').click();
+  expect(await page.locator('//*[@id="showglob"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showload_hidden"]').click();
+  expect(
+    await page.locator('//*[@id="showload_hidden"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmax_concurrency"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showmetadata"]').click();
+  expect(await page.locator('//*[@id="showmetadata"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showpath"]').click();
+  expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeFalsy();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showglob"]').click();
+  expect(await page.locator('//*[@id="showglob"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showmax_concurrency"]').click();
+  expect(
+    await page.locator('//*[@id="showmax_concurrency"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showmetadata"]').click();
+  expect(
+    await page.locator('//*[@id="showmetadata"]').isChecked()
+  ).toBeTruthy();
+
+  await page.locator('//*[@id="showpath"]').click();
+  expect(await page.locator('//*[@id="showpath"]').isChecked()).toBeTruthy();
+
+  await page.locator('//*[@id="showrecursive"]').click();
+  expect(
+    await page.locator('//*[@id="showrecursive"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showsilent_errors"]').click();
+  expect(
+    await page.locator('//*[@id="showsilent_errors"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="showuse_multithreading"]').click();
+  expect(
+    await page.locator('//*[@id="showuse_multithreading"]').isChecked()
+  ).toBeFalsy();
+
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  const plusButtonLocator = page.locator('//*[@id="toggle-1"]');
+  const elementCount = await plusButtonLocator.count();
+  if (elementCount === 0) {
+    expect(true).toBeTruthy();
+
+    await page
+      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
+      .click();
+    await page.locator('//*[@id="advancedIcon"]').click();
+    await page.locator('//*[@id="editAdvancedBtn"]').click();
+
+    await page.locator('//*[@id="showload_hidden"]').click();
+    expect(
+      await page.locator('//*[@id="showload_hidden"]').isChecked()
+    ).toBeTruthy();
+
+    expect(
+      await page.locator('//*[@id="toggle-edit-1"]').isChecked()
+    ).toBeFalsy();
+
+    await page.locator('//*[@id="saveChangesBtn"]').click();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeFalsy();
+
+    await page.locator('//*[@id="toggle-1"]').click();
+    expect(await page.locator('//*[@id="toggle-1"]').isChecked()).toBeTruthy();
+  }
+});

src/frontend/tests/test-1.spec.ts

@@ -1,5 +0,0 @@
-import { test } from "@playwright/test";
-
-test("test", async ({ page }) => {
-  // Recording...
-});