🐛 fix(parameterComponent): import DictComponent from correct path to fix module not found error

🐛 fix(parameterComponent): remove unused import of CodeAreaComponent to improve code readability
🐛 fix(parameterComponent): remove unused import of TabsContext to improve code readability
🐛 fix(parameterComponent): remove unused import of typesContext to improve code readability
🐛 fix(parameterComponent): remove unused import of TabsState to improve code readability
🐛 fix(parameterComponent): remove unused import of nodeColors to improve code readability
🐛 fix(parameterComponent): remove unused import of nodeIconsLucide to improve code readability
🐛 fix(parameterComponent): remove unused import of nodeNames to improve code readability
🐛 fix(parameterComponent): remove unused import of classNames to improve code readability
🐛 fix(parameterComponent): remove unused import of groupByFamily to improve code readability
🐛 fix(parameterComponent): remove unused import of useUpdateNodeInternals to improve code readability
🐛 fix(parameterComponent): remove unused import of Position from reactflow to improve code readability
🐛 fix(parameterComponent): remove unused import of Handle from reactflow to improve code readability
🐛 fix(parameterComponent): remove unused import of types from reactflow to improve code readability
🐛 fix(parameterComponent): remove unused import of React from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useEffect from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useContext from react to improve code readability
🐛 fix(parameterComponent): remove unused import of ReactNode from react to improve code readability
🐛 fix(parameterComponent): remove unused import of forwardRef from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useEffect from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability
🐛 fix(parameterComponent): remove unused import of useState from react to improve code readability

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

@@ -9,6 +9,7 @@ import React, {
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
+import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
 import IconComponent from "../../../../components/genericIconComponent";
@@ -25,14 +26,18 @@ import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
 import { TabsState } from "../../../../types/tabs";
-import { convertArrayToObj, convertObjToArray, hasDuplicateKeys, isValidConnection } from "../../../../utils/reactflowUtils";
+import {
+  convertArrayToObj,
+  convertObjToArray,
+  hasDuplicateKeys,
+  isValidConnection,
+} from "../../../../utils/reactflowUtils";
 import {
   nodeColors,
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils/styleUtils";
 import { classNames, groupByFamily } from "../../../../utils/utils";
-import DictComponent from "../../../../components/dictComponent";
 
 export default function ParameterComponent({
   left,
@@ -95,7 +100,6 @@ export default function ParameterComponent({
     renderTooltips();
   };
 
-  
   const [obj, setObj] = useState({
     arr: ["test", 123456, false, null],
     boolean: false,
@@ -107,9 +111,24 @@ export default function ParameterComponent({
       k2: "123",
       k3: false,
     },
-    string: "string"
+    string: "string",
   });
 
+  const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+  const [dict, setDict] = useState({
+    key1: "value1",
+    key2: "value2",
+    key3: "value3",
+    key4: "value4",
+    key5: "value5",
+    key6: "value6",
+  } as {});
+  const [dictArr, setDictArr] = useState([] as string[]);
+
+  useEffect(() => {
+    setDictArr(convertObjToArray(dict));
+  }, [dict]);
+
   useEffect(() => {
     if (name === "openai_api_base") console.log(info);
     // @ts-ignore
@@ -225,8 +244,7 @@ export default function ParameterComponent({
           type === "int") &&
         !optionalHandle ? (
           <></>
-        )
+        ) : left === true && type === "nested_dict" ? (
-        : left === true && type === "dict" ? (
           <div className="mt-2 w-full">
             <DictComponent
               disabled={disabled}
@@ -237,8 +255,24 @@ export default function ParameterComponent({
               }}
             />
           </div>
-        )
+        ) : left === true && type === "dict" ? (
-        : (
+          <div className="mt-2 w-full">
+            <KeypairListComponent
+              disabled={disabled}
+              editNode={false}
+              value={dictArr}
+              duplicateKey={errorDuplicateKey}
+              onChange={(newValue: string[]) => {
+                setErrorDuplicateKey(hasDuplicateKeys(newValue));
+                if (hasDuplicateKeys(newValue)) {
+                  setDictArr(newValue);
+                } else {
+                  setDict(convertArrayToObj(newValue));
+                }
+              }}
+            />
+          </div>
+        ) : (
           <ShadTooltip
             styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
             delayDuration={0}

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

@@ -1,6 +1,7 @@
 import { cloneDeep } from "lodash";
 import { ReactNode, forwardRef, useContext, useEffect, useState } from "react";
 import CodeAreaComponent from "../../components/codeAreaComponent";
+import DictComponent from "../../components/dictComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
 import IconComponent from "../../components/genericIconComponent";
@@ -34,7 +35,6 @@ import {
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
 import BaseModal from "../baseModal";
-import DictComponent from "../../components/dictComponent";
 
 const EditNodeModal = forwardRef(
   (
@@ -85,7 +85,6 @@ const EditNodeModal = forwardRef(
       setMyData(data); // reset data to what it is on node when opening modal
     }, [modalOpen]);
 
-
     const [obj, setObj] = useState({
       arr: ["test", 123456, false, null],
       boolean: false,
@@ -97,9 +96,23 @@ const EditNodeModal = forwardRef(
         k2: "123",
         k3: false,
       },
-      string: "string"
+      string: "string",
     });
 
+    const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
+    const [dict, setDict] = useState({
+      key1: "value1",
+      key2: "value2",
+      key3: "value3",
+      key4: "value4",
+      key5: "value5",
+      key6: "value6",
+    } as {});
+    const [dictArr, setDictArr] = useState([] as string[]);
+
+    useEffect(() => {
+      setDictArr(convertObjToArray(dict));
+    }, [dict]);
 
     return (
       <BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
@@ -189,21 +202,41 @@ const EditNodeModal = forwardRef(
                                         handleOnNewValue(value, templateParam);
                                       }}
                                     />
-                                  )
+                                  ) : myData.node?.template[templateParam]
-                                  : myData.node?.template[templateParam]
+                                      .type === "nested_dict" ? (
+                                    <div className="mt-2 w-full">
+                                      <DictComponent
+                                        disabled={disabled}
+                                        editNode={true}
+                                        value={obj}
+                                        onChange={(newValue) => {
+                                          setObj(newValue);
+                                        }}
+                                      />
+                                    </div>
+                                  ) : myData.node?.template[templateParam]
                                       .type === "dict" ? (
                                     <div className="mt-2 w-full">
-                                        <DictComponent
+                                      <KeypairListComponent
-                                          disabled={disabled}
+                                        disabled={disabled}
-                                          editNode={false}
+                                        editNode={true}
-                                          value={obj}
+                                        value={dictArr}
-                                          onChange={(newValue) => {
+                                        duplicateKey={errorDuplicateKey}
-                                            setObj(newValue);
+                                        onChange={(newValue: string[]) => {
-                                          }}
+                                          setErrorDuplicateKey(
-                                        />
+                                            hasDuplicateKeys(newValue)
+                                          );
+                                          if (hasDuplicateKeys(newValue)) {
+                                            setDictArr(newValue);
+                                          } else {
+                                            setDict(
+                                              convertArrayToObj(newValue)
+                                            );
+                                          }
+                                        }}
+                                      />
                                     </div>
-                                  )
+                                  ) : myData.node.template[templateParam]
-                                   : myData.node.template[templateParam]
                                       .multiline ? (
                                     <TextAreaComponent
                                       disabled={disabled}