fix: add endpoint name support in API code generation (#7947)

* feat: add endpoint name support in API code generation

* fix: ensure endpoint_name is properly handled in flow saving and API tabs

* fix: simplify endpoint_name handling in useSaveFlow hook

* feat: add streaming support to code options in APITabsComponent

* fix: remove unused setCurrentFlow call in FlowSettingsModal

src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx

@@ -1,11 +1,9 @@
 import IconComponent from "@/components/common/genericIconComponent";
-import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import useAuthStore from "@/stores/authStore";
 import useFlowStore from "@/stores/flowStore";
 import { useTweaksStore } from "@/stores/tweaksStore";
-import { AllNodeType } from "@/types/flow";
 import { tabsArrayType } from "@/types/tabs";
 import { hasStreaming } from "@/utils/reactflowUtils";
 import { useEffect, useState } from "react";
@@ -14,6 +12,7 @@ import {
   oneDark,
   oneLight,
 } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { useShallow } from "zustand/react/shallow";
 import { useDarkStore } from "../../../stores/darkStore";
 import { getNewCurlCode } from "../utils/get-curl-code";
 import { getNewJsApiCode } from "../utils/get-js-api-code";
@@ -21,6 +20,9 @@ import { getNewPythonApiCode } from "../utils/get-python-api-code";
 
 export default function APITabsComponent() {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
+  const endpointName = useFlowStore(
+    useShallow((state) => state.currentFlow?.endpoint_name),
+  );
   const dark = useDarkStore((state) => state.dark);
   const nodes = useFlowStore((state) => state.nodes);
   const flowId = useFlowStore((state) => state.currentFlow?.id);
@@ -40,6 +42,7 @@ export default function APITabsComponent() {
   const streaming = hasStreaming(nodes);
   const tweaks = useTweaksStore((state) => state.tweaks);
   const codeOptions = {
+    endpointName: endpointName || "",
     streaming: streaming,
     flowId: flowId || "",
     isAuthenticated: !autologin || false,

src/frontend/src/modals/apiModal/utils/get-curl-code.tsx

@@ -82,6 +82,7 @@ export function getNewCurlCode({
   output_type,
   tweaksObject,
   activeTweaks,
+  endpointName,
 }: {
   flowId: string;
   isAuthenticated: boolean;
@@ -90,10 +91,11 @@ export function getNewCurlCode({
   output_type: string;
   tweaksObject: any;
   activeTweaks: boolean;
+  endpointName: string;
 }): string {
   const host = window.location.host;
   const protocol = window.location.protocol;
-  const apiUrl = `${protocol}//${host}/api/v1/run/${flowId}`;
+  const apiUrl = `${protocol}//${host}/api/v1/run/${endpointName || flowId}`;
 
   const tweaksString =
     tweaksObject && activeTweaks ? JSON.stringify(tweaksObject, null, 2) : "{}";

src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx

@@ -65,6 +65,7 @@ export function getNewJsApiCode({
   output_type,
   tweaksObject,
   activeTweaks,
+  endpointName,
 }: {
   flowId: string;
   isAuthenticated: boolean;
@@ -73,10 +74,11 @@ export function getNewJsApiCode({
   output_type: string;
   tweaksObject: any;
   activeTweaks: boolean;
+  endpointName: string;
 }): string {
   const host = window.location.host;
   const protocol = window.location.protocol;
-  const apiUrl = `${protocol}//${host}/api/v1/run/${flowId}`;
+  const apiUrl = `${protocol}//${host}/api/v1/run/${endpointName || flowId}`;
 
   const tweaksString =
     tweaksObject && activeTweaks ? JSON.stringify(tweaksObject, null, 2) : "{}";

src/frontend/src/modals/apiModal/utils/get-python-api-code.tsx

@@ -123,6 +123,7 @@ export function getNewPythonApiCode({
   output_type,
   tweaksObject,
   activeTweaks,
+  endpointName,
 }: {
   flowId: string;
   isAuthenticated: boolean;
@@ -131,10 +132,11 @@ export function getNewPythonApiCode({
   output_type: string;
   tweaksObject: any;
   activeTweaks: boolean;
+  endpointName: string;
 }): string {
   const host = window.location.host;
   const protocol = window.location.protocol;
-  const apiUrl = `${protocol}//${host}/api/v1/run/${flowId}`;
+  const apiUrl = `${protocol}//${host}/api/v1/run/${endpointName || flowId}`;
 
   const tweaksString =
     tweaksObject && activeTweaks

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -49,6 +49,7 @@ export default function FlowSettingsModal({
     newFlow.description = description;
     newFlow.endpoint_name =
       endpoint_name && endpoint_name.length > 0 ? endpoint_name : null;
+
     if (autoSaving) {
       saveFlow(newFlow)
         ?.then(() => {