From ffebce974f4a97ecc3b54a50749a53fac890c601 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 29 Jun 2023 20:34:31 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(formModal):=20remove=20?=
 =?UTF-8?q?unused=20keysValue=20state=20variable=20to=20improve=20code=20c?=
 =?UTF-8?q?leanliness=20and=20readability=20=F0=9F=94=A8=20refactor(formMo?=
 =?UTF-8?q?dal):=20update=20formKeysData=20type=20in=20tabsState=20to=20in?=
 =?UTF-8?q?clude=20handle=5Fkeys=20array=20for=20better=20data=20structure?=
 =?UTF-8?q?=20consistency=20and=20completeness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/formModal/index.tsx | 15 ++++++++-------
 src/frontend/src/types/tabs/index.ts        |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index fccf2440d..a355b695b 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -41,7 +41,6 @@ export default function FormModal({
   flow: FlowType;
 }) {
   const [chatValue, setChatValue] = useState("");
-  const [keysValue, setKeysValue] = useState([]);
   const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
   const { reactFlowInstance } = useContext(typesContext);
   const { setErrorData, setNoticeData } = useContext(alertContext);
@@ -64,12 +63,6 @@ export default function FormModal({
   }, [open]);
   useEffect(() => {
     id.current = flow.id;
-
-    if (tabsState[flow.id].formKeysData) {
-      setKeysValue(
-        Array(tabsState[flow.id].formKeysData.input_keys.length).fill("")
-      );
-    }
   }, [flow.id, tabsState[flow.id], tabsState[flow.id].formKeysData]);
 
   var isStream = false;
@@ -438,6 +431,14 @@ export default function FormModal({
                     </div>
                   </AccordionItem>
                 ))}
+                {tabsState[id.current].formKeysData.handle_keys.map((i, k) => (
+                  <AccordionItem key={k} value={i}>
+                    <div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm">
+                      <div className="group-hover:underline"><Badge size="md" variant="gray">{i}</Badge></div>
+                      Value coming from Handle
+                    </div>
+                  </AccordionItem>
+                ))}
               </Accordion>
             </div>
             <div className="w-full">
diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts
index 6b4e2be4f..d0bd0f499 100644
--- a/src/frontend/src/types/tabs/index.ts
+++ b/src/frontend/src/types/tabs/index.ts
@@ -33,6 +33,6 @@ export type TabsContextType = {
 export type TabsState = {
   [key: string]: {
     isPending: boolean;
-    formKeysData: {input_keys?: Array<string>, memory_keys?: Array<string>};
+    formKeysData: {input_keys?: Object, memory_keys?: Array<string>, handle_keys?: Array<string>};
   };
 };