From fdb998688a6603a9ad404ee9652e9085542933f8 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 29 Jun 2023 18:42:09 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(codeAreaComponent):=20update?=
 =?UTF-8?q?=20initial=20state=20of=20myValue=20to=20handle=20non-string=20?=
 =?UTF-8?q?values=20properly?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix(constants.tsx): refactor getCurlCode and getPythonCode to use buildTweakObject function for generating tweak object

🐛 fix(ApiModal): update logic for opening accordions based on tweak.current length and closeEdit value
---
 .../components/codeAreaComponent/index.tsx    |  4 +--
 src/frontend/src/constants.tsx                | 25 ++++++++++++++++---
 src/frontend/src/modals/ApiModal/index.tsx    | 23 ++++++++++-------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 6fec7cd27..ff786ea99 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -12,7 +12,7 @@ export default function CodeAreaComponent({
   disabled,
   editNode = false,
 }: TextAreaComponentType) {
-  const [myValue, setMyValue] = useState(value);
+  const [myValue, setMyValue] = useState(typeof value == "string" ? value : JSON.stringify(value));
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
     if (disabled) {
@@ -22,7 +22,7 @@ export default function CodeAreaComponent({
   }, [disabled, onChange]);
 
   useEffect(() => {
-    setMyValue(value);
+    setMyValue(typeof value == "string" ? value : JSON.stringify(value));
   }, [value]);
 
   return (
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 9bfb4bcd5..a20e5c6c1 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -71,7 +71,7 @@ FLOW_ID = "${flowId}"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
 TWEAKS = ${
-    tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0 ? buildTweakObject(tweak): JSON.stringify(tweaks, null, 2)
   }
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
@@ -111,7 +111,7 @@ export const getCurlCode = (flow: FlowType, tweak?): string => {
   }/api/v1/process/${flowId} \\
   -H 'Content-Type: application/json' \\
   -d '{"inputs": {"input": message}, "tweaks": ${
-    tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
   }}'`;
 };
 /**
@@ -124,13 +124,32 @@ export const getPythonCode = (flow: FlowType, tweak?): string => {
   const tweaks = buildTweaks(flow);
   return `from langflow import load_flow_from_json
 TWEAKS = ${
-  tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2)
+  tweak && tweak.length > 0 ? buildTweakObject(tweak) : JSON.stringify(tweaks, null, 2)
   }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain
 flow("Hey, have you heard of LangFlow?")`;
 };
 
+function buildTweakObject(tweak){
+  tweak.forEach(el => {
+    Object.keys(el).forEach(key => {
+      for (let kp in el[key]) {
+        try{
+          el[key][kp] = JSON.parse(el[key][kp]);
+          console.log(el[key][kp]);
+        }
+        catch{}
+      }
+    })
+  });
+  
+  const tweakString = JSON.stringify(tweak, null, 2);
+    console.log(tweakString);
+    
+  return tweakString;
+}
+
 /**
  * The base text for subtitle of Import Dialog
  * @constant
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 2377c212b..545a26d01 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -103,9 +103,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
   useEffect(() => {
     if (closeEdit !== "") {
-      setActiveTab("3");
       tweak.current = getTweak;
-      openAccordions();
+      if(tweak.current.length > 0){
+        setActiveTab("3");
+        openAccordions();
+      }
+      else{
+        startTweaks();
+      }
     } else {
       startTweaks();
     }
@@ -245,14 +250,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
   function openAccordions() {
     let accordionsToOpen = [];
-    tweak.current.forEach((el) => {
-      Object.keys(el).forEach((key) => {
-        if (Object.keys(el[key]).length > 0) {
-          accordionsToOpen.push(key);
-          setOpenAccordion(accordionsToOpen);
-        }
+      tweak.current.forEach((el) => {
+        Object.keys(el).forEach((key) => {
+          if (Object.keys(el[key]).length > 0) {
+            accordionsToOpen.push(key);
+            setOpenAccordion(accordionsToOpen);
+          }
+        });
       });
-    });
   }
 
   return (