refactor: Update CodeTabsComponent to handle additional tabs

This commit updates the CodeTabsComponent to handle an additional tab in the code tabs display. The previous implementation had a condition that checked if the active tab index was less than 4, but it has been updated to check if the active tab index is less than 5. This change ensures that the component can handle the new tab and display the corresponding content correctly. The code has been modified in the index.tsx file of the CodeTabsComponent directory.

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -147,7 +147,7 @@ export default function CodeTabsComponent({
             </div>
           )}
 
-          {Number(activeTab) < 4 && (
+          {Number(activeTab) < 5 && (
             <>
               <Button
                 variant="ghost"
@@ -172,7 +172,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content overflow-hidden"
           key={idx} // Remember to add a unique key prop
         >
-          {idx < 4 ? (
+          {idx < 5 ? (
             <div className="flex h-full w-full flex-col">
               {tab.description && (
                 <div
@@ -188,7 +188,7 @@ export default function CodeTabsComponent({
                 {tab.code}
               </SyntaxHighlighter>
             </div>
-          ) : idx === 4 ? (
+          ) : idx === 5 ? (
             <>
               <div className="api-modal-according-display">
                 <div

src/frontend/src/modals/apiModal/index.tsx

@@ -10,7 +10,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { EXPORT_CODE_DIALOG } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { useTweaksStore } from "../../stores/tweaksStore";
-import { TemplateVariableType } from "../../types/api";
+import { InputFieldType } from "../../types/api";
 import { uniqueTweakType } from "../../types/components";
 import { FlowType } from "../../types/flow/index";
 import BaseModal from "../baseModal";
@@ -19,6 +19,7 @@ import { buildTweaks } from "./utils/build-tweaks";
 import { checkCanBuildTweakObject } from "./utils/check-can-build-tweak-object";
 import { getChangesType } from "./utils/get-changes-types";
 import { getCurlRunCode, getCurlWebhookCode } from "./utils/get-curl-code";
+import getJsApiCode from "./utils/get-js-api-code";
 import { getNodesWithDefaultValue } from "./utils/get-nodes-with-default-value";
 import getPythonApiCode from "./utils/get-python-api-code";
 import getPythonCode from "./utils/get-python-code";
@@ -59,13 +60,19 @@ const ApiModal = forwardRef(
       tweak,
       flow?.endpoint_name,
     );
-    const curl_run_code = getCurlRunCode(
+    const jsApiCode = getJsApiCode(
       flow?.id,
       autoLogin,
       tweak,
       flow?.endpoint_name,
     );
-    const curl_webhook_code = getCurlWebhookCode(
+    const runCurlCode = getCurlRunCode(
+      flow?.id,
+      autoLogin,
+      tweak,
+      flow?.endpoint_name,
+    );
+    const webhookCurlCode = getCurlWebhookCode(
       flow?.id,
       autoLogin,
       flow?.endpoint_name,
@@ -75,12 +82,12 @@ const ApiModal = forwardRef(
     const includeWebhook = flow.webhook;
     const tweaksCode = buildTweaks(flow);
     const codesArray = [
-      curl_run_code,
-      curl_webhook_code,
+      runCurlCode,
+      webhookCurlCode,
       pythonApiCode,
+      jsApiCode,
       pythonCode,
       widgetCode,
-      pythonCode,
     ];
     const [tabs, setTabs] = useState(
       createTabsArray(codesArray, includeWebhook),
@@ -116,7 +123,7 @@ const ApiModal = forwardRef(
         setActiveTab("0");
         setTabs(createTabsArray(codesArray, includeWebhook, true));
       } else {
-        setTabs(createTabsArray(codesArray, includeWebhook, true));
+        setTabs(createTabsArray(codesArray, includeWebhook, false));
       }
     }, [flow["data"]!["nodes"], open]);
 
@@ -149,7 +156,7 @@ const ApiModal = forwardRef(
     async function buildTweakObject(
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: InputFieldType,
     ) {
       changes = getChangesType(changes, template);
 
@@ -187,20 +194,40 @@ const ApiModal = forwardRef(
 
     const addCodes = (cloneTweak) => {
       const pythonApiCode = getPythonApiCode(flow?.id, autoLogin, cloneTweak);
-      const curl_code = getCurlRunCode(
+      const runCurlCode = getCurlRunCode(
         flow?.id,
         autoLogin,
         cloneTweak,
         flow?.endpoint_name,
       );
+      const jsApiCode = getJsApiCode(
+        flow?.id,
+        autoLogin,
+        cloneTweak,
+        flow?.endpoint_name,
+      );
+      const webhookCurlCode = getCurlWebhookCode(
+        flow?.id,
+        autoLogin,
+        flow?.endpoint_name,
+      );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
-
       if (tabs && tabs?.length > 0) {
-        tabs![0].code = curl_code;
-        tabs![1].code = pythonApiCode;
-        tabs![2].code = pythonCode;
-        tabs![3].code = widgetCode;
+        let i = 0;
+        tabs![i].code = runCurlCode;
+        i++;
+        if (includeWebhook) {
+          tabs![i].code = webhookCurlCode;
+          i++;
+        }
+        tabs![i].code = pythonApiCode;
+        i++;
+        tabs![i].code = jsApiCode;
+        i++;
+        tabs![i].code = pythonCode;
+        i++;
+        tabs![i].code = widgetCode;
       }
     };
 

src/frontend/src/modals/apiModal/utils/tabs-array.tsx

@@ -19,12 +19,19 @@ export function createTabsArray(
       language: "py",
       code: codes[2],
     },
+    {
+      name: "JS API",
+      mode: "javascript",
+      image: "https://cdn-icons-png.flaticon.com/512/136/136530.png",
+      language: "js",
+      code: codes[3],
+    },
     {
       name: "Python Code",
       mode: "python",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "py",
-      code: codes[3],
+      code: codes[4],
     },
     {
       name: "Chat Widget HTML",
@@ -33,7 +40,7 @@ export function createTabsArray(
       mode: "html",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "html",
-      code: codes[4],
+      code: codes[5],
     },
   ];
 
@@ -53,7 +60,7 @@ export function createTabsArray(
       mode: "python",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "py",
-      code: codes[5],
+      code: codes[6],
     });
   }