🔧 chore(Makefile): remove unnecessary semicolons in Makefile commands

🔧 chore(Makefile): remove unnecessary package-lock.json deletion in install_frontendc command
✨ feat(ParameterComponent): add KeypairListComponent to handle key-value pairs
🔧 chore(KeypairListComponent): create KeypairListComponent to handle key-value pairs
🔧 chore(KeypairListComponent): add handleChangeKey and handleChangeValue functions to handle changes in key-value pairs
🔧 chore(KeypairListComponent): add button to add new key-value pair and remove existing key-value pair
🔧 chore(KeypairListComponent): add disabled prop to disable editing of key-value pairs
🔧 chore(KeypairListComponent): add editNode prop to style input fields in edit mode
🔧 chore(types): add KeyPairListComponent type definition

Makefile

@@ -32,10 +32,10 @@ lint:
 	poetry run ruff . --fix
 
 install_frontend:
-	cd src/frontend && npm install;
+	cd src/frontend && npm install
 
 install_frontendc:
-	cd src/frontend && rm -rf node_modules package-lock.json && npm install;
+	cd src/frontend && rm -rf node_modules package-lock.json && npm install
 
 run_frontend:
 	cd src/frontend && npm start

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

@@ -31,6 +31,7 @@ import {
   nodeNames,
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
+import KeypairListComponent from "../../../../components/keypairListComponent";
 
 export default function ParameterComponent({
   left,
@@ -93,6 +94,22 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
+  const [arrayOfObjects, setArrayOfObjects] = useState([
+    { key1: "value1", key2: "value2" },
+    { key3: "value3", key4: "value4" },
+    { key5: "value5", key6: "value6" },
+  ])
+
+
+  const handleOnNewValueTest = (newValue): void => {
+    let newData = cloneDeep(arrayOfObjects);
+    newData = newValue;
+    setArrayOfObjects(newData);
+  };
+
+
+
+
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
     // @ts-ignore
@@ -341,7 +358,19 @@ export default function ParameterComponent({
               onChange={handleOnNewValue}
             />
           </div>
-        ) : (
+        )
+        : left === true && type === "keypair" ? (
+          <div className="mt-2 w-full">
+          <KeypairListComponent
+          disabled={disabled}
+          value={
+            arrayOfObjects
+          }
+          onChange={handleOnNewValueTest}
+        />
+          </div>
+        )
+        : (
           <></>
         )}
       </>

src/frontend/src/components/keypairListComponent/index.tsx

@@ -0,0 +1,108 @@
+import { useEffect } from "react";
+import { KeyPairListComponent } from "../../types/components";
+
+import _ from "lodash";
+import { classNames } from "../../utils/utils";
+import IconComponent from "../genericIconComponent";
+import { Input } from "../ui/input";
+
+export default function KeypairListComponent({
+  value,
+  onChange,
+  disabled,
+  editNode = false,
+}: KeyPairListComponent): JSX.Element {
+  useEffect(() => {
+    if (disabled) {
+      onChange([""]);
+    }
+  }, [disabled]);
+
+  const handleChangeKey = (event, idx) => {
+    const newInputList = _.cloneDeep(value);
+    const oldKey = Object.keys(newInputList[idx])[0];
+    const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
+    newInputList[idx] = updatedObj;
+    onChange(newInputList);
+  };
+
+  const handleChangeValue = (event, idx) => {
+    const newInputList = _.cloneDeep(value);
+    const key = Object.keys(newInputList[idx])[0];
+    newInputList[idx][key] = event.target.value;
+    onChange(newInputList);
+  };
+
+  return (
+    <div
+      className={classNames(
+        value.length > 1 && editNode ? "my-1" : "",
+        "flex flex-col gap-3"
+      )}
+    >
+      {value.map((obj, index) => {
+        return Object.keys(obj).map((key, idx) => {
+          return (
+            <div key={idx} className="flex w-full gap-3">
+              <Input
+                disabled={disabled}
+                type="text"
+                value={key}
+                className={editNode ? "input-edit-node" : ""}
+                placeholder="Type key..."
+                onChange={(event) => handleChangeKey(event, index)}
+                onKeyDown={(e) => {
+                  if (e.ctrlKey && e.key === "Backspace") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }}
+              />
+              <Input
+                disabled={disabled}
+                type="text"
+                value={obj[key]}
+                className={editNode ? "input-edit-node" : ""}
+                placeholder="Type value..."
+                onChange={(event) => handleChangeValue(event, index)}
+                onKeyDown={(e) => {
+                  if (e.ctrlKey && e.key === "Backspace") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }}
+              />
+              {index === value.length - 1 ? (
+                <button
+                  onClick={() => {
+                    let newInputList = _.cloneDeep(value);
+                    newInputList.push({ "": "" });
+                    onChange(newInputList);
+                  }}
+                >
+                  <IconComponent
+                    name="Plus"
+                    className={"h-4 w-4 hover:text-accent-foreground"}
+                  />
+                </button>
+              ) : (
+                <button
+                  onClick={() => {
+                    let newInputList = _.cloneDeep(value);
+                    newInputList.splice(index, 1);
+                    onChange(newInputList);
+                  }}
+                >
+                  <IconComponent
+                    name="X"
+                    className="h-4 w-4 hover:text-status-red"
+                  />
+                </button>
+              )}
+            </div>
+          );
+        });
+      })}
+    </div>
+  );
+}

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

@@ -54,6 +54,13 @@ export type InputListComponentType = {
   editNode?: boolean;
 };
 
+export type KeyPairListComponent = {
+  value: any[];
+  onChange: (value: string[]) => void;
+  disabled: boolean;
+  editNode?: boolean;
+};
+
 export type TextAreaComponentType = {
   field_name?: string;
   nodeClass?: APIClassType;