🐛 fix(codeAreaComponent): update initial state of myValue to handle non-string values properly

🐛 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

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 (

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

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 (