🔨 refactor(constants.tsx): add optional parameter to getPythonApiCode, getCurlCode and getPythonCode functions to allow tweaking of the flow

✨ feat(ApiModal): pass the tweak.current value to the getPythonApiCode, getCurlCode and getPythonCode functions to allow tweaking of the flow. Update the tabs with the new code after a tweak is added.

src/frontend/src/constants.tsx

@@ -54,7 +54,7 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
  * @param {string} flowId - The id of the flow
  * @returns {string} - The python code
  */
-export const getPythonApiCode = (flow: FlowType): string => {
+export const getPythonApiCode = (flow: FlowType, tweak?): string => {
   const flowId = flow.id;
 
   // create a dictionary of node ids and the values is an empty dictionary
@@ -70,7 +70,9 @@ BASE_API_URL = "${window.location.protocol}//${
 FLOW_ID = "${flowId}"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
-TWEAKS = ${JSON.stringify(tweaks, null, 2)}
+TWEAKS = ${
+    tweak ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2)
+  }
 
 def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
     """
@@ -100,7 +102,7 @@ print(run_flow("Your message", flow_id=FLOW_ID, tweaks=TWEAKS))`;
  * @param {string} flowId - The id of the flow
  * @returns {string} - The curl code
  */
-export const getCurlCode = (flow: FlowType): string => {
+export const getCurlCode = (flow: FlowType, tweak?): string => {
   const flowId = flow.id;
   const tweaks = buildTweaks(flow);
   return `curl -X POST \\
@@ -108,22 +110,22 @@ export const getCurlCode = (flow: FlowType): string => {
     window.location.host
   }/api/v1/process/${flowId} \\
   -H 'Content-Type: application/json' \\
-  -d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify(
+  -d '{"inputs": {"input": message}, "tweaks": ${
-    tweaks,
+    tweak ? JSON.stringify(tweak, null, 2) : JSON.stringify(tweaks, null, 2)
-    null,
+  }}'`;
-    2
-  )}}'`;
 };
 /**
  * Function to get the python code for the API
  * @param {string} flowName - The name of the flow
  * @returns {string} - The python code
  */
-export const getPythonCode = (flow: FlowType): string => {
+export const getPythonCode = (flow: FlowType, tweak?): string => {
   const flowName = flow.name;
   const tweaks = buildTweaks(flow);
   return `from langflow import load_flow_from_json
-TWEAKS = ${JSON.stringify(tweaks, null, 2)}
+TWEAKS = ${
+    tweak ? JSON.stringify(tweak, null, 2) : 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?")`;

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

@@ -78,13 +78,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
     }
   }
 
-  useEffect(() => {
+  const pythonApiCode = getPythonApiCode(flow, tweak.current);
-    console.log(tweak.current);
+  const curl_code = getCurlCode(flow, tweak.current);
-  }, [closePopUp]);
+  const pythonCode = getPythonCode(flow, tweak.current);
-
-  const pythonApiCode = getPythonApiCode(flow);
-  const curl_code = getCurlCode(flow);
-  const pythonCode = getPythonCode(flow);
   const tweaksCode = buildTweaks(flow);
 
   const tabs = [
@@ -167,6 +163,14 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
       tweak.current.push(newTweak);
     }
 
+    const pythonApiCode = getPythonApiCode(flow, tweak.current);
+    const curl_code = getCurlCode(flow, tweak.current);
+    const pythonCode = getPythonCode(flow, tweak.current);
+
+    tabs[0].code = curl_code;
+    tabs[1].code = pythonApiCode;
+    tabs[2].code = pythonCode;
+
     console.log(tweak.current);
   }