From 99be4b54703e49d6a0039c499ad575b97c7c12a5 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Sat, 10 Jun 2023 16:50:23 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(ApiModal):=20add=20cURL=20?=
 =?UTF-8?q?code=20snippet=20to=20API=20modal=20The=20flowName=20prop=20has?=
 =?UTF-8?q?=20been=20changed=20to=20a=20flow=20object=20to=20improve=20sem?=
 =?UTF-8?q?antics=20and=20make=20the=20code=20more=20readable.=20The=20cUR?=
 =?UTF-8?q?L=20code=20snippet=20has=20been=20added=20to=20the=20API=20moda?=
 =?UTF-8?q?l=20to=20provide=20an=20alternative=20way=20to=20interact=20wit?=
 =?UTF-8?q?h=20the=20API.=20=F0=9F=94=A8=20refactor(ApiModal):=20change=20?=
 =?UTF-8?q?flowName=20prop=20to=20flow=20object=20to=20improve=20semantics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modals/ApiModal/index.tsx | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 00cec143c..da1b21123 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -24,8 +24,9 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
+import { FlowType } from "src/types/flow";
 
-export default function ApiModal({ flowName }) {
+export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
   const { dark } = useContext(darkContext);
   const { closePopUp } = useContext(PopUpContext);
@@ -53,22 +54,25 @@ export default function ApiModal({ flowName }) {
   }
 
   const pythonApiCode = `import requests
-import json
 
-API_URL = "${window.location.protocol}//${window.location.host}/predict"
+FLOW_ID = "${flow.id}"
+API_URL = f"${window.location.protocol}//${window.location.host}/predict/{FLOW_ID}"
 
 def predict(message):
-    with open("${flowName}.json", "r") as f:
-        json_data = json.load(f)
-    payload = {'exported_flow': json_data, 'message': message}
+    payload = {'message': message}
     response = requests.post(API_URL, json=payload)
-    return response.json() # JSON {"result": "Response"}
+    return response.json()
 
 print(predict("Your message"))`;
 
+  const curl_code = `curl -X POST \\
+  -H "Content-Type: application/json" \\
+  -d '{"message": "Your message"}' \\
+  ${window.location.protocol}//${window.location.host}/predict/${flow.id}`;
+
   const pythonCode = `from langflow import load_flow_from_json
 
-flow = load_flow_from_json("${flowName}.json")
+flow = load_flow_from_json("${flow.name}.json")
 # Now you can use it like any chain
 flow("Hey, have you heard of LangFlow?")`;
 
@@ -80,6 +84,12 @@ flow("Hey, have you heard of LangFlow?")`;
         "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
       code: pythonApiCode,
     },
+    {
+      name: "cURL",
+      mode: "bash",
+      image: "https://cdn-icons-png.flaticon.com/512/631/631558.png",
+      code: curl_code,
+    },
     {
       name: "Python Code",
       mode: "python",