diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index ab9de7f63..0ff77cf45 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -508,84 +508,3 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [
"/api/v1/custom_component",
"/api/v1/validate/prompt",
];
-
-export const tabsCode = [];
-
-export function tabsArray(codes: string[], method: number) {
- if (!method) return;
- if (method === 0) {
- return [
- {
- name: "cURL",
- mode: "bash",
- image: "https://curl.se/logo/curl-symbol-transparent.png",
- language: "sh",
- code: codes[0],
- },
- {
- name: "Python API",
- mode: "python",
- image:
- "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
- language: "py",
- code: codes[1],
- },
- {
- name: "Python Code",
- mode: "python",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: codes[2],
- },
- {
- name: "Chat Widget HTML",
- description:
- "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
- mode: "html",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: codes[3],
- },
- ];
- }
- return [
- {
- name: "cURL",
- mode: "bash",
- image: "https://curl.se/logo/curl-symbol-transparent.png",
- language: "sh",
- code: codes[0],
- },
- {
- name: "Python API",
- mode: "python",
- image:
- "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
- language: "py",
- code: codes[1],
- },
- {
- name: "Python Code",
- mode: "python",
- language: "py",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- code: codes[2],
- },
- {
- name: "Chat Widget HTML",
- description:
- "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
- mode: "html",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: codes[3],
- },
- {
- name: "Tweaks",
- mode: "python",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: codes[4],
- },
- ];
-}
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 307e48208..8410ee7d4 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -22,6 +22,7 @@ import {
getPythonApiCode,
getPythonCode,
getWidgetCode,
+ tabsArray,
} from "../../utils/utils";
import BaseModal from "../baseModal";
@@ -48,39 +49,8 @@ const ApiModal = forwardRef(
const pythonCode = getPythonCode(flow, tweak.current, tabsState);
const widgetCode = getWidgetCode(flow, tabsState);
const tweaksCode = buildTweaks(flow);
- const [tabs, setTabs] = useState([
- {
- name: "cURL",
- mode: "bash",
- image: "https://curl.se/logo/curl-symbol-transparent.png",
- language: "sh",
- code: curl_code,
- },
- {
- name: "Python API",
- mode: "python",
- image:
- "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
- language: "py",
- code: pythonApiCode,
- },
- {
- name: "Python Code",
- mode: "python",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: pythonCode,
- },
- {
- name: "Chat Widget HTML",
- description:
- "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
- mode: "html",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: widgetCode,
- },
- ]);
+ const codesArray = [curl_code, pythonApiCode, pythonCode, widgetCode, pythonCode];
+ const [tabs, setTabs] = useState(tabsArray(codesArray, 0));
function startState() {
tweak.current = [];
@@ -101,80 +71,9 @@ const ApiModal = forwardRef(
if (Object.keys(tweaksCode).length > 0) {
setActiveTab("0");
- setTabs([
- {
- name: "cURL",
- mode: "bash",
- image: "https://curl.se/logo/curl-symbol-transparent.png",
- language: "sh",
- code: curl_code,
- },
- {
- name: "Python API",
- mode: "python",
- image:
- "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
- language: "py",
- code: pythonApiCode,
- },
- {
- name: "Python Code",
- mode: "python",
- language: "py",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- code: pythonCode,
- },
- {
- name: "Chat Widget HTML",
- description:
- "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
- mode: "html",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: widgetCode,
- },
- {
- name: "Tweaks",
- mode: "python",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: pythonCode,
- },
- ]);
+ setTabs(tabsArray(codesArray, 1));
} else {
- setTabs([
- {
- name: "cURL",
- mode: "bash",
- image: "https://curl.se/logo/curl-symbol-transparent.png",
- language: "sh",
- code: curl_code,
- },
- {
- name: "Python API",
- mode: "python",
- image:
- "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
- language: "py",
- code: pythonApiCode,
- },
- {
- name: "Python Code",
- mode: "python",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: pythonCode,
- },
- {
- name: "Chat Widget HTML",
- description:
- "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
- mode: "html",
- image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
- language: "py",
- code: widgetCode,
- },
- ]);
+ setTabs(tabsArray(codesArray, 1));
}
}, [flow["data"]["nodes"], open]);
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index dec07fbe7..ea1c137b0 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -410,3 +410,82 @@ chat_input_field: Input key that you want the chat to send the user message with
}host_url="http://localhost:7860"
>`;
}
+
+export function tabsArray(codes: string[], method: number) {
+ if (!method) return;
+ if (method === 0) {
+ return [
+ {
+ name: "cURL",
+ mode: "bash",
+ image: "https://curl.se/logo/curl-symbol-transparent.png",
+ language: "sh",
+ code: codes[0],
+ },
+ {
+ name: "Python API",
+ mode: "python",
+ image:
+ "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+ language: "py",
+ code: codes[1],
+ },
+ {
+ name: "Python Code",
+ mode: "python",
+ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+ language: "py",
+ code: codes[2],
+ },
+ {
+ name: "Chat Widget HTML",
+ description:
+ "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
+ mode: "html",
+ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+ language: "py",
+ code: codes[3],
+ },
+ ];
+ }
+ return [
+ {
+ name: "cURL",
+ mode: "bash",
+ image: "https://curl.se/logo/curl-symbol-transparent.png",
+ language: "sh",
+ code: codes[0],
+ },
+ {
+ name: "Python API",
+ mode: "python",
+ image:
+ "https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
+ language: "py",
+ code: codes[1],
+ },
+ {
+ name: "Python Code",
+ mode: "python",
+ language: "py",
+ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+ code: codes[2],
+ },
+ {
+ name: "Chat Widget HTML",
+ description:
+ "Insert this code anywhere in your <body> tag. To use with react and other libs, check our documentation.",
+ mode: "html",
+ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+ language: "py",
+ code: codes[3],
+ },
+ {
+ name: "Tweaks",
+ mode: "python",
+ image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
+ language: "py",
+ code: codes[4],
+ },
+ ];
+}