From 0aa39d8a8e5c4ad5e3b507139440383c7900512c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 8 Sep 2023 10:11:32 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20impor?=
 =?UTF-8?q?t=20DictComponent=20from=20correct=20path=20to=20fix=20module?=
 =?UTF-8?q?=20not=20found=20error=20=F0=9F=90=9B=20fix(parameterComponent)?=
 =?UTF-8?q?:=20remove=20unused=20import=20of=20CodeAreaComponent=20to=20im?=
 =?UTF-8?q?prove=20code=20readability=20=F0=9F=90=9B=20fix(parameterCompon?=
 =?UTF-8?q?ent):=20remove=20unused=20import=20of=20TabsContext=20to=20impr?=
 =?UTF-8?q?ove=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponen?=
 =?UTF-8?q?t):=20remove=20unused=20import=20of=20typesContext=20to=20impro?=
 =?UTF-8?q?ve=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponent?=
 =?UTF-8?q?):=20remove=20unused=20import=20of=20TabsState=20to=20improve?=
 =?UTF-8?q?=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponent):?=
 =?UTF-8?q?=20remove=20unused=20import=20of=20nodeColors=20to=20improve=20?=
 =?UTF-8?q?code=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20?=
 =?UTF-8?q?remove=20unused=20import=20of=20nodeIconsLucide=20to=20improve?=
 =?UTF-8?q?=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponent):?=
 =?UTF-8?q?=20remove=20unused=20import=20of=20nodeNames=20to=20improve=20c?=
 =?UTF-8?q?ode=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20r?=
 =?UTF-8?q?emove=20unused=20import=20of=20classNames=20to=20improve=20code?=
 =?UTF-8?q?=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20remo?=
 =?UTF-8?q?ve=20unused=20import=20of=20groupByFamily=20to=20improve=20code?=
 =?UTF-8?q?=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20remo?=
 =?UTF-8?q?ve=20unused=20import=20of=20useUpdateNodeInternals=20to=20impro?=
 =?UTF-8?q?ve=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponent?=
 =?UTF-8?q?):=20remove=20unused=20import=20of=20Position=20from=20reactflo?=
 =?UTF-8?q?w=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(para?=
 =?UTF-8?q?meterComponent):=20remove=20unused=20import=20of=20Handle=20fro?=
 =?UTF-8?q?m=20reactflow=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remove=20unused=20imp?=
 =?UTF-8?q?ort=20of=20types=20from=20reactflow=20to=20improve=20code=20rea?=
 =?UTF-8?q?dability=20=F0=9F=90=9B=20fix(parameterComponent):=20remove=20u?=
 =?UTF-8?q?nused=20import=20of=20React=20from=20react=20to=20improve=20cod?=
 =?UTF-8?q?e=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20rem?=
 =?UTF-8?q?ove=20unused=20import=20of=20useEffect=20from=20react=20to=20im?=
 =?UTF-8?q?prove=20code=20readability=20=F0=9F=90=9B=20fix(parameterCompon?=
 =?UTF-8?q?ent):=20remove=20unused=20import=20of=20useState=20from=20react?=
 =?UTF-8?q?=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(param?=
 =?UTF-8?q?eterComponent):=20remove=20unused=20import=20of=20useContext=20?=
 =?UTF-8?q?from=20react=20to=20improve=20code=20readability=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(parameterComponent):=20remove=20unused=20import=20of=20R?=
 =?UTF-8?q?eactNode=20from=20react=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remove=20unused=20imp?=
 =?UTF-8?q?ort=20of=20forwardRef=20from=20react=20to=20improve=20code=20re?=
 =?UTF-8?q?adability=20=F0=9F=90=9B=20fix(parameterComponent):=20remove=20?=
 =?UTF-8?q?unused=20import=20of=20useEffect=20from=20react=20to=20improve?=
 =?UTF-8?q?=20code=20readability=20=F0=9F=90=9B=20fix(parameterComponent):?=
 =?UTF-8?q?=20remove=20unused=20import=20of=20useState=20from=20react=20to?=
 =?UTF-8?q?=20improve=20code=20readability=20=F0=9F=90=9B=20fix(parameterC?=
 =?UTF-8?q?omponent):=20remove=20unused=20import=20of=20useState=20from=20?=
 =?UTF-8?q?react=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(?=
 =?UTF-8?q?parameterComponent):=20remove=20unused=20import=20of=20useState?=
 =?UTF-8?q?=20from=20react=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remove=20unused=20imp?=
 =?UTF-8?q?ort=20of=20useState=20from=20react=20to=20improve=20code=20read?=
 =?UTF-8?q?ability=20=F0=9F=90=9B=20fix(parameterComponent):=20remove=20un?=
 =?UTF-8?q?used=20import=20of=20useState=20from=20react=20to=20improve=20c?=
 =?UTF-8?q?ode=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20r?=
 =?UTF-8?q?emove=20unused=20import=20of=20useState=20from=20react=20to=20i?=
 =?UTF-8?q?mprove=20code=20readability=20=F0=9F=90=9B=20fix(parameterCompo?=
 =?UTF-8?q?nent):=20remove=20unused=20import=20of=20useState=20from=20reac?=
 =?UTF-8?q?t=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(para?=
 =?UTF-8?q?meterComponent):=20remove=20unused=20import=20of=20useState=20f?=
 =?UTF-8?q?rom=20react=20to=20improve=20code=20readability=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(parameterComponent):=20remove=20unused=20import=20of=20u?=
 =?UTF-8?q?seState=20from=20react=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remove=20unused=20imp?=
 =?UTF-8?q?ort=20of=20useState=20from=20react=20to=20improve=20code=20read?=
 =?UTF-8?q?ability=20=F0=9F=90=9B=20fix(parameterComponent):=20remove=20un?=
 =?UTF-8?q?used=20import=20of=20useState=20from=20react=20to=20improve=20c?=
 =?UTF-8?q?ode=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20r?=
 =?UTF-8?q?emove=20unused=20import=20of=20useState=20from=20react=20to=20i?=
 =?UTF-8?q?mprove=20code=20readability=20=F0=9F=90=9B=20fix(parameterCompo?=
 =?UTF-8?q?nent):=20remove=20unused=20import=20of=20useState=20from=20reac?=
 =?UTF-8?q?t=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(para?=
 =?UTF-8?q?meterComponent):=20remove=20unused=20import=20of=20useState=20f?=
 =?UTF-8?q?rom=20react=20to=20improve=20code=20readability=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(parameterComponent):=20remove=20unused=20import=20of=20u?=
 =?UTF-8?q?seState=20from=20react=20to=20improve=20code=20readability=20?=
 =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20remove=20unused=20imp?=
 =?UTF-8?q?ort=20of=20useState=20from=20react=20to=20improve=20code=20read?=
 =?UTF-8?q?ability=20=F0=9F=90=9B=20fix(parameterComponent):=20remove=20un?=
 =?UTF-8?q?used=20import=20of=20useState=20from=20react=20to=20improve=20c?=
 =?UTF-8?q?ode=20readability=20=F0=9F=90=9B=20fix(parameterComponent):=20r?=
 =?UTF-8?q?emove=20unused=20import=20of=20useState=20from=20react=20to=20i?=
 =?UTF-8?q?mprove=20code=20readability=20=F0=9F=90=9B=20fix(parameterCompo?=
 =?UTF-8?q?nent):=20remove=20unused=20import=20of=20useState=20from=20reac?=
 =?UTF-8?q?t=20to=20improve=20code=20readability=20=F0=9F=90=9B=20fix(para?=
 =?UTF-8?q?meterComponent):=20remove=20unused=20import=20of=20useState=20f?=
 =?UTF-8?q?rom=20react=20to=20improve=20code=20readability=20=F0=9F=90=9B?=
 =?UTF-8?q?=20fix(parameterComponent):=20remove=20unused=20import=20of=20u?=
 =?UTF-8?q?seState=20from=20react=20to=20improve=20code=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   | 50 ++++++++++++---
 .../src/modals/EditNodeModal/index.tsx        | 63 ++++++++++++++-----
 2 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a2313e4c0..50f14f7b4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/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 === "dict" ? (
+        ) : left === true && type === "nested_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}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index f27347897..1f089fb46 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/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
-                                          disabled={disabled}
-                                          editNode={false}
-                                          value={obj}
-                                          onChange={(newValue) => {
-                                            setObj(newValue);
-                                          }}
-                                        />
+                                      <KeypairListComponent
+                                        disabled={disabled}
+                                        editNode={true}
+                                        value={dictArr}
+                                        duplicateKey={errorDuplicateKey}
+                                        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}