From aac72b894a0abfddba7f05309ffc960e73b6d613 Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Mon, 15 May 2023 10:10:00 -0300
Subject: [PATCH] style(ApiModal): fix indentation in SyntaxHighlighter
 className prop refactor(ApiModal): add json import to pythonApiCode to fix
 json.loads error

---
 src/frontend/src/modals/ApiModal/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index f64bf9951..c2c273f5b 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -45,6 +45,7 @@ export default function ApiModal({ flowName }) {
 	}
 
 	const pythonApiCode = `import requests
+import json
 
 API_URL = "${window.location.protocol}//${window.location.host}/predict"
 
@@ -57,7 +58,7 @@ def predict(message):
 
 print(predict("Your message"))`;
 
-const pythonCode = `from langflow import load_flow_from_json
+	const pythonCode = `from langflow import load_flow_from_json
 
 flow = load_flow_from_json("${flowName}.json")
 # Now you can use it like any chain
@@ -165,7 +166,7 @@ flow("Hey, have you heard of LangFlow?")`;
 													</button>
 												</div>
 												<SyntaxHighlighter
-												className="h-[370px]"
+													className="h-[370px]"
 													language={tabs[activeTab].mode}
 													style={oneDark}
 													customStyle={{ margin: 0 }}