🐛 fix(parameterComponent): import KeypairListComponent from correct path to fix compilation error

✨ feat(parameterComponent): add support for editing key-value pairs in the parameter component
🐛 fix(genericIconComponent): fix stroke width prop name to strokeWidth to fix SVG rendering issue
🐛 fix(keypairListComponent): import GenericModal from correct path to fix compilation error
✨ feat(keypairListComponent): add support for editing key-value pairs in the keypair list component
🐛 fix(editNodeModal): import KeypairListComponent from correct path to fix compilation error
✨ feat(editNodeModal): add support for editing key-value pairs in the edit node modal
🐛 fix(types): change value type in KeyPairListComponent to any to allow for any key-value pair

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

@@ -16,6 +16,7 @@ import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
 import IntComponent from "../../../../components/intComponent";
+import KeypairListComponent from "../../../../components/keypairListComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
 import TextAreaComponent from "../../../../components/textAreaComponent";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
@@ -31,7 +32,6 @@ import {
   nodeNames,
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
-import KeypairListComponent from "../../../../components/keypairListComponent";
 
 export default function ParameterComponent({
   left,
@@ -94,21 +94,44 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
-  const [arrayOfObjects, setArrayOfObjects] = useState([
+  const [dict, setDict] = useState({
-    { key1: "value1", key2: "value2" },
+    key1: "value1",
-    { key3: "value3", key4: "value4" },
+    key2: "value2",
-    { key5: "value5", key6: "value6" },
+    key3: "value3",
-  ])
+    key4: "value4",
+    key5: "value5",
+    key6: "value6",
+  } as {});
+  const [dictArr, setDictArr] = useState([]);
 
+  useEffect(() => {
+    convertToArray(dict);
+  }, [dict]);
 
-  const handleOnNewValueTest = (newValue): void => {
+  const convertToArray = (singleObject) => {
-    let newData = cloneDeep(arrayOfObjects);
+    let arrConverted: any = [];
-    newData = newValue;
+    for (const key in singleObject) {
-    setArrayOfObjects(newData);
+      if (singleObject.hasOwnProperty(key)) {
+        const newObj = {};
+        newObj[key] = singleObject[key];
+        arrConverted.push(newObj);
+      }
+    }
+    setDictArr(arrConverted);
   };
 
-
+  const convertToDict = (newValue): void => {
-
+    const flattenedObject = {};
+    for (const obj of newValue) {
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          flattenedObject[key] = obj[key];
+        }
+      }
+    }
+    let newData = cloneDeep(flattenedObject);
+    setDict(newData);
+  };
 
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
@@ -225,6 +248,15 @@ export default function ParameterComponent({
           type === "int") &&
         !optionalHandle ? (
           <></>
+        ) : left === true && type === "str" ? (
+          <div className="mt-2 w-full">
+            <KeypairListComponent
+              disabled={disabled}
+              editNode={false}
+              value={dictArr}
+              onChange={convertToDict}
+            />
+          </div>
         ) : (
           <ShadTooltip
             styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
@@ -358,20 +390,7 @@ export default function ParameterComponent({
               onChange={handleOnNewValue}
             />
           </div>
-        )
+        ) : (
-        : left === true && type === "keypair" ? (
-          <div className="mt-2 w-full">
-          <KeypairListComponent
-          disabled={disabled}
-          editNode={false}
-          value={
-            arrayOfObjects
-          }
-          onChange={handleOnNewValueTest}
-        />
-          </div>
-        )
-        : (
           <></>
         )}
       </>

src/frontend/src/components/genericIconComponent/index.tsx

@@ -11,7 +11,7 @@ export default function IconComponent({
     <TargetIcon
       className={className}
       style={{ color: iconColor }}
-      stroke-width={1.5}
+      strokeWidth={1.5}
     />
   );
 }

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

@@ -2,6 +2,8 @@ import { useEffect } from "react";
 import { KeyPairListComponent } from "../../types/components";
 
 import _ from "lodash";
+import { TypeModal } from "../../constants/enums";
+import GenericModal from "../../modals/genericModal";
 import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
@@ -26,10 +28,10 @@ export default function KeypairListComponent({
     onChange(newInputList);
   };
 
-  const handleChangeValue = (event, idx) => {
+  const handleChangeValue = (newValue, idx) => {
     const newInputList = _.cloneDeep(value);
     const key = Object.keys(newInputList[idx])[0];
-    newInputList[idx][key] = event.target.value;
+    newInputList[idx][key] = newValue;
     onChange(newInputList);
   };
 
@@ -58,20 +60,24 @@ export default function KeypairListComponent({
                   }
                 }}
               />
-              <Input
+              <GenericModal
-                disabled={disabled}
+                type={TypeModal.TEXT}
-                type="text"
                 value={obj[key]}
-                className={editNode ? "input-edit-node" : ""}
+                buttonText="Save"
-                placeholder="Type value..."
+                modalTitle="Edit Value"
-                onChange={(event) => handleChangeValue(event, index)}
+                setValue={(value: string) => {
-                onKeyDown={(e) => {
+                  handleChangeValue(value, index);
-                  if (e.ctrlKey && e.key === "Backspace") {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }
                 }}
-              />
+              >
+                <Input
+                  disabled={true}
+                  type="text"
+                  value={obj[key]}
+                  className={editNode ? "input-edit-node cursor-pointer" : "cursor-pointer"}
+                  placeholder="Click to input a value..."
+                />
+              </GenericModal>
+
               {index === value.length - 1 ? (
                 <button
                   onClick={() => {

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

@@ -79,16 +79,43 @@ const EditNodeModal = forwardRef(
       setMyData(data); // reset data to what it is on node when opening modal
     }, [modalOpen]);
 
-    const [arrayOfObjects, setArrayOfObjects] = useState([
+    const [dict, setDict] = useState({
-      { key1: "value1", key2: "value2" },
+      key1: "value1",
-      { key3: "value3", key4: "value4" },
+      key2: "value2",
-      { key5: "value5", key6: "value6" },
+      key3: "value3",
-    ]);
+      key4: "value4",
+      key5: "value5",
+      key6: "value6",
+    } as {});
+    const [dictArr, setDictArr] = useState([]);
 
-    const handleOnNewValueTest = (newValue): void => {
+    useEffect(() => {
-      let newData = cloneDeep(arrayOfObjects);
+      convertToArray(dict);
-      newData = newValue;
+    }, [dict]);
-      setArrayOfObjects(newData);
+
+    const convertToArray = (singleObject) => {
+      let arrConverted: any = [];
+      for (const key in singleObject) {
+        if (singleObject.hasOwnProperty(key)) {
+          const newObj = {};
+          newObj[key] = singleObject[key];
+          arrConverted.push(newObj);
+        }
+      }
+      setDictArr(arrConverted);
+    };
+
+    const convertToDict = (newValue): void => {
+      const flattenedObject = {};
+      for (const obj of newValue) {
+        for (const key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            flattenedObject[key] = obj[key];
+          }
+        }
+      }
+      let newData = cloneDeep(flattenedObject);
+      setDict(newData);
     };
 
     return (
@@ -112,7 +139,7 @@ const EditNodeModal = forwardRef(
               className={classNames(
                 "edit-node-modal-box",
                 nodeLength > limitScrollFieldsModal ||
-                  nodeLength > arrayOfObjects.length
+                  nodeLength > dictArr.length
                   ? "overflow-scroll overflow-x-hidden custom-scroll"
                   : "overflow-hidden"
               )}
@@ -180,6 +207,16 @@ const EditNodeModal = forwardRef(
                                         handleOnNewValue(value, templateParam);
                                       }}
                                     />
+                                  ) : myData.node?.template[templateParam]
+                                      .type === "str" ? (
+                                    <div className="mt-2 w-full">
+                                      <KeypairListComponent
+                                        disabled={disabled}
+                                        editNode={true}
+                                        value={dictArr}
+                                        onChange={convertToDict}
+                                      />
+                                    </div>
                                   ) : myData.node.template[templateParam]
                                       .multiline ? (
                                     <TextAreaComponent
@@ -350,16 +387,6 @@ const EditNodeModal = forwardRef(
                                     }}
                                   />
                                 </div>
-                              ) : myData.node?.template[templateParam].type ===
-                                "keypair" ? (
-                                <div className="mt-2 w-full">
-                                  <KeypairListComponent
-                                    disabled={disabled}
-                                    value={arrayOfObjects}
-                                    onChange={handleOnNewValueTest}
-                                    editNode={true}
-                                  />
-                                </div>
                               ) : myData.node?.template[templateParam].type ===
                                 "Any" ? (
                                 "-"

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

@@ -55,7 +55,7 @@ export type InputListComponentType = {
 };
 
 export type KeyPairListComponent = {
-  value: any[];
+  value: any;
   onChange: (value: string[]) => void;
   disabled: boolean;
   editNode?: boolean;