🐛 fix(AccordionComponent): fix the logic to set the initial value of the accordion based on the open prop array

✨ feat(AccordionComponent): add support for multiple open accordions by changing the open prop from boolean to string array
🐛 fix(constants.tsx): remove escape characters from the JSON stringified tweaks to fix parsing issues
✨ feat(constants.tsx): add support for tweaks dictionary in the getCurlCode and getPythonCode functions
🐛 fix(ApiModal): fix the logic to set the initial value of the openAccordion state based on the getTweak array
✨ feat(ApiModal): add support for opening accordions based on the getTweak array when switching to the Tweak tab
🐛 fix(ApiModal): fix the logic to filter and remove empty tweaks from the tweak.current array
✨ feat(ApiModal): add support for adding new tweaks to the tweak.current array and generating Python API code
🐛 fix(ApiModal): fix the logic to get the value of a specific tweak template based on the node id and template name
✨ feat(ApiModal): add support for opening accordions based on the tweak.current array when switching to the Tweak tab
🐛 fix(types): add missing newline at the end of the file

src/frontend/package-lock.json

@@ -3563,7 +3563,7 @@
       "version": "16.18.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz",
       "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -5633,6 +5633,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6992,9 +6993,9 @@
       }
     },
     "node_modules/log-symbols/node_modules/chalk": {
-      "version": "5.2.0",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
@@ -8262,9 +8263,9 @@
       }
     },
     "node_modules/ora/node_modules/chalk": {
-      "version": "5.2.0",
+      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },

src/frontend/src/components/AccordionComponent/index.tsx

@@ -15,9 +15,21 @@ import {
 export default function AccordionComponent({
   trigger,
   children,
-  open = false,
+  open = [],
 }: AccordionComponentType) {
-  const [value, setValue] = useState(!open ? "" : trigger);
+  const [value, setValue] = useState(open.length == 0 ? "" : getOpenAccordion());
+
+  function getOpenAccordion(){
+    let value = "";
+    open.forEach(el => {
+      if(el == trigger){
+        value = trigger;
+      } 
+    })
+
+    return value;
+  }
+
   function handleClick() {
     value == "" ? setValue(trigger) : setValue("");
   }

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) : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : 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) : JSON.stringify(tweaks, null, 2)
+    tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2)
   }}'`;
 };
 /**
@@ -124,7 +124,7 @@ 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) : JSON.stringify(tweaks, null, 2)
+  tweak && tweak.length > 0 ? JSON.stringify(tweak, null, 2).replace(/\\/g, '') : JSON.stringify(tweaks, null, 2)
   }
 flow = load_flow_from_json("${flowName}.json", tweaks=TWEAKS)
 # Now you can use it like any chain

src/frontend/src/modals/ApiModal/index.tsx

@@ -58,7 +58,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   const [activeTab, setActiveTab] = useState("0");
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [enabled, setEnabled] = useState(null);
-  const [openAccordion, setOpenAccordion] = useState(false);
+  const [openAccordion, setOpenAccordion] = useState([]);
   const tweak = useRef([]);
   const tweaksList = useRef([]);
   const { setTweak, getTweak } = useContext(TabsContext);
@@ -87,8 +87,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   useEffect(() => {
     if (closeEdit !== "") {
       setActiveTab("3");
-      setOpenAccordion(true);
       tweak.current = getTweak;
+      openAccordions();    
+    }
+    else{
+      startTweaks();
     }
   }, [closeEdit]);
 
@@ -100,6 +103,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
   useEffect(() => {
     filterNodes();
   }, []);
+
+  function startTweaks() {
+    tweak.current.push(buildTweaks(flow));
+  }
+
   function filterNodes() {
     let arrNodesWithValues = [];
 
@@ -176,25 +184,13 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     if (existingTweak) {
       existingTweak[tw][template["name"]] = changes;
 
-      if (template.list === true) {
-        if (changes.length === 0) {
-          if (existingTweak[tw] && existingTweak[tw][template["name"]]) {
-            delete existingTweak[tw][template["name"]];
-          }
-        }
-      }
-
       if (existingTweak[tw][template["name"]] == template.value) {
         tweak.current.forEach((element) => {
-          if (element[tw] && element[tw][template["name"]]) {
-            delete element[tw][template["name"]];
-          }
           if (element[tw] && Object.keys(element[tw])?.length === 0) {
             tweak.current = tweak.current.filter((obj) => {
               const prop = obj[Object.keys(obj)[0]].prop;
               return prop !== undefined && prop !== null && prop !== "";
             });
-            delete element[tw];
           }
         });
       }
@@ -205,6 +201,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         },
       };
       tweak.current.push(newTweak);
+
     }
 
     const pythonApiCode = getPythonApiCode(flow, tweak.current);
@@ -232,17 +229,16 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
 
     if (getTweak.length > 0) {
       for (const obj of getTweak) {
-        // Obtém a chave do objeto interno
+        Object.keys(obj).forEach(key =>{
-        const key = Object.keys(obj)[0];
+          const value = obj[key];
-        // Obtém o valor do objeto interno
+          if (key == node["id"]) {
-        const value = obj[key];
+            Object.keys(value).forEach((key) => {
-        if (key == node["id"]) {
+              if (key == template["name"]) {
-          Object.keys(value).forEach((key) => {
+                returnValue = value[key];
-            if (key == template["name"]) {
+              }
-              returnValue = value[key];
+            });
-            }
+          }
-          });
+        })
-        }
       }
     } else {
       return value ?? "";
@@ -250,6 +246,18 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     return returnValue;
   }
 
+  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);
+        }
+      });
+    });   
+  }
+
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
@@ -270,9 +278,8 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
           className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
           onValueChange={(value) => {
             setActiveTab(value);
-
+            if(value === "3"){
-            if (tweak.current.length > 0) {
+              openAccordions()
-              setOpenAccordion(true);
             }
           }}
         >

src/frontend/src/types/components/index.ts

@@ -121,6 +121,6 @@ export type RadialProgressType = {
 
 export type AccordionComponentType  = {
   children?: ReactElement;
-  open?: boolean;
+  open?: string[];
   trigger?: string;
 };