feat: Add alias functionality in the UI and in tweaks processing

src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx

@@ -4,6 +4,8 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Input } from "@/components/ui/input";
 import useFlowStore from "@/stores/flowStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
+import { getEffectiveAliasFromAnyNode } from "@/types/flow";
+import { updateAliasesForDisplayNameChange } from "@/utils/aliasUtils";
 import { cn } from "@/utils/utils";
 
 export default function NodeName({
@@ -25,9 +27,15 @@ export default function NodeName({
   toggleEditNameDescription: () => void;
   setHasChangedNodeDescription: (hasChanged: boolean) => void;
 }) {
-  const [nodeName, setNodeName] = useState<string>(display_name ?? "");
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
   const setNode = useFlowStore((state) => state.setNode);
+  const node = useFlowStore((state) => state.getNode(nodeId));
+
+  // Get alias for badge display
+  const componentAlias = node ? getEffectiveAliasFromAnyNode(node) : null;
+  const aliasNumber = componentAlias?.match(/#(\d+)$/)?.[1];
+
+  const [nodeName, setNodeName] = useState<string>(display_name ?? "");
 
   useEffect(() => {
     if (selected && editNameDescription) {
@@ -41,6 +49,9 @@ export default function NodeName({
 
   const handleBlur = () => {
     if (nodeName?.trim() !== "") {
+      const oldDisplayName = display_name;
+      const newDisplayName = nodeName;
+
       setNodeName(nodeName);
       setNode(nodeId, (old) => ({
         ...old,
@@ -52,6 +63,18 @@ export default function NodeName({
           },
         },
       }));
+
+      // Update aliases when display name changes
+      if (oldDisplayName && newDisplayName !== oldDisplayName) {
+        const allNodes = useFlowStore.getState().nodes;
+        const updatedNodes = updateAliasesForDisplayNameChange(
+          nodeId,
+          oldDisplayName,
+          newDisplayName,
+          allNodes,
+        );
+        useFlowStore.getState().setNodes(updatedNodes);
+      }
     } else {
       setNodeName(display_name ?? "");
     }
@@ -98,6 +121,13 @@ export default function NodeName({
           <span className={cn("cursor-grab truncate text-sm")}>
             {display_name}
           </span>
+          {aliasNumber && (
+            <ShadTooltip content={`Alias: ${componentAlias}`}>
+              <div className="flex h-5 w-auto min-w-[18px] items-center justify-center rounded border border-border bg-background px-1.5 text-xs font-semibold text-foreground">
+                #{aliasNumber}
+              </div>
+            </ShadTooltip>
+          )}
         </div>
       </div>
       {beta && (

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

@@ -4,6 +4,7 @@ import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { EditNodeComponent } from "@/modals/editNodeModal/components/editNodeComponent";
 import type { APIClassType } from "@/types/api";
 import type { AllNodeType } from "@/types/flow";
+import { getEffectiveAliasFromAnyNode } from "@/types/flow";
 import { customStringify } from "@/utils/reactflowUtils";
 
 export function TweakComponent({
@@ -25,11 +26,24 @@ export function TweakComponent({
       return;
     setNodeClass(node.data?.node);
   }, [node.data?.node]);
+
+  // Get alias info for badge display
+  const effectiveAlias = getEffectiveAliasFromAnyNode(node);
+  const aliasNumber = effectiveAlias?.match(/#(\d+)$/)?.[1];
+  const displayName = node.data.node?.display_name || "";
+
   return node && node.data && nodeClass ? (
     <AccordionComponent
       trigger={
         <ShadTooltip side="top" styleClasses="z-50" content={node.data.id}>
-          <div className="text-primary">{node.data.node?.display_name}</div>
+          <div className="flex items-center gap-2 text-primary">
+            <span>{displayName}</span>
+            {aliasNumber && (
+              <div className="flex h-5 w-auto min-w-[18px] items-center justify-center rounded border border-border bg-background px-1.5 text-xs font-semibold text-foreground">
+                #{aliasNumber}
+              </div>
+            )}
+          </div>
         </ShadTooltip>
       }
       keyValue={node.data.id}

src/frontend/src/hooks/use-add-component.ts

@@ -5,12 +5,15 @@ import { track } from "@/customization/utils/analytics";
 import useFlowStore from "@/stores/flowStore";
 import type { APIClassType } from "@/types/api";
 import type { AllNodeType } from "@/types/flow";
+import { assignAliasToNewComponent } from "@/utils/aliasUtils";
 import { getNodeId } from "@/utils/reactflowUtils";
 import { getNodeRenderType } from "@/utils/utils";
 
 export function useAddComponent() {
   const store = useStoreApi();
   const paste = useFlowStore((state) => state.paste);
+  const nodes = useFlowStore((state) => state.nodes);
+  const setNodes = useFlowStore((state) => state.setNodes);
 
   const addComponent = useCallback(
     (
@@ -55,16 +58,39 @@ export function useAddComponent() {
         type: getNodeRenderType("genericnode"),
         position: { x: 0, y: 0 },
         data: {
-          node: component,
+          node: { ...component }, // Clone component to avoid mutation
           showNode: !component.minimized,
           type: type,
           id: newId,
         },
       };
 
+      // Generate alias for the new component and update existing ones if needed
+      assignAliasToNewComponent(newNode, nodes);
+
+      // Check if we need to update existing nodes (when adding second component of same type)
+      const displayName = newNode.data.node.display_name;
+      const sameTypeNodes = nodes.filter(
+        (n) =>
+          n.type === "genericNode" && n.data.node.display_name === displayName,
+      );
+
+      if (sameTypeNodes.length === 1 && !sameTypeNodes[0].data.node.alias) {
+        // This is the second component - need to assign aliases to both
+        const firstNode = sameTypeNodes[0];
+        if (firstNode.type === "genericNode") {
+          firstNode.data.node.alias = `${displayName}#1`;
+        }
+
+        // Update the first node in the store
+        setNodes((currentNodes) =>
+          currentNodes.map((n) => (n.id === firstNode.id ? firstNode : n)),
+        );
+      }
+
       paste({ nodes: [newNode], edges: [] }, pos);
     },
-    [store, paste],
+    [store, paste, nodes, setNodes],
   );
 
   return addComponent;

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

@@ -79,6 +79,7 @@ export default function APITabsComponent() {
     streaming: streaming,
     flowId: flowId || "",
     processedPayload: processedPayload,
+    nodes: nodes,
   };
 
   // Platform selection for cURL

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

@@ -1,6 +1,7 @@
 import { ENABLE_DATASTAX_LANGFLOW } from "@/customization/feature-flags";
 import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
 import { GetCodeType } from "@/types/tweaks";
+import { convertTweaksToAliases } from "@/utils/aliasUtils";
 import {
   getAllChatInputNodeIds,
   getAllFileNodeIds,
@@ -56,12 +57,14 @@ export function getNewCurlCode({
   processedPayload,
   platform,
   shouldDisplayApiKey,
+  nodes,
 }: {
   flowId: string;
   endpointName: string;
   processedPayload: any;
   platform?: "unix" | "powershell";
   shouldDisplayApiKey: boolean;
+  nodes?: any[];
 }): { steps: { title: string; code: string }[] } | string {
   const { protocol, host } = customGetHostProtocol();
   const baseUrl = `${protocol}//${host}`;
@@ -75,14 +78,21 @@ export function getNewCurlCode({
       : "unix");
 
   // Check if there are file uploads
-  const tweaks = processedPayload.tweaks || {};
-  const hasFiles = hasFileTweaks(tweaks);
+  const originalTweaks = processedPayload.tweaks || {};
+  const tweaks = convertTweaksToAliases(originalTweaks, nodes);
+  const hasFiles = hasFileTweaks(originalTweaks); // Use original tweaks for file detection
+
+  // Create payload with aliased tweaks
+  const payloadWithAliases = {
+    ...processedPayload,
+    tweaks: tweaks,
+  };
 
   // If no file uploads, use existing logic
   if (!hasFiles) {
     if (detectedPlatform === "powershell") {
       const payloadWithSession = {
-        ...processedPayload,
+        ...payloadWithAliases,
         session_id: "YOUR_SESSION_ID_HERE",
       };
       const singleLinePayload = JSON.stringify(payloadWithSession);
@@ -103,7 +113,7 @@ curl.exe --request POST \`
      --data $jsonData`;
     } else {
       const payloadWithSession = {
-        ...processedPayload,
+        ...payloadWithAliases,
         session_id: "YOUR_SESSION_ID_HERE",
       };
       // Unix-like systems (Linux, Mac, WSL2)
@@ -126,9 +136,9 @@ curl.exe --request POST \`
   }
 
   // File upload logic - handle multiple file types additively
-  const chatInputNodeIds = getAllChatInputNodeIds(tweaks);
-  const fileNodeIds = getAllFileNodeIds(tweaks);
-  const nonFileTweaks = getNonFileTypeTweaks(tweaks);
+  const chatInputNodeIds = getAllChatInputNodeIds(originalTweaks); // Use original tweaks for detection
+  const fileNodeIds = getAllFileNodeIds(originalTweaks); // Use original tweaks for detection
+  const nonFileTweaks = getNonFileTypeTweaks(tweaks); // Use aliased tweaks for display
 
   // Build upload commands and tweak entries
   const uploadCommands: string[] = [];
@@ -152,16 +162,17 @@ curl.exe --request POST \`
      --form "file=@your_image_${uploadCounter}.jpg"`,
       );
     }
-    const originalTweak = tweaks[nodeId];
+
+    // Get alias for this node
+    const node = nodes?.find((n) => n.id === nodeId);
+    const alias = node ? getEffectiveAliasFromAnyNode(node) : nodeId;
+
+    const originalTweak = originalTweaks[nodeId];
     const modifiedTweak = { ...originalTweak };
     modifiedTweak.files = [
       `REPLACE_WITH_FILE_PATH_FROM_UPLOAD_${uploadCounter}`,
     ];
-    const tweakEntry = `    "${nodeId}": ${JSON.stringify(
-      modifiedTweak,
-      null,
-      6,
-    )
+    const tweakEntry = `    "${alias}": ${JSON.stringify(modifiedTweak, null, 6)
       .split("\n")
       .join("\n    ")}`;
     tweakEntries.push(tweakEntry);
@@ -185,7 +196,11 @@ curl.exe --request POST \`
      --form "file=@your_file_${uploadCounter}.pdf"`,
       );
     }
-    const originalTweak = tweaks[nodeId];
+    // Get alias for this node
+    const node = nodes?.find((n) => n.id === nodeId);
+    const alias = node ? getEffectiveAliasFromAnyNode(node) : nodeId;
+
+    const originalTweak = originalTweaks[nodeId];
     const modifiedTweak = { ...originalTweak };
     if ("path" in originalTweak) {
       modifiedTweak.path = [
@@ -194,21 +209,17 @@ curl.exe --request POST \`
     } else if ("file_path" in originalTweak) {
       modifiedTweak.file_path = `REPLACE_WITH_FILE_PATH_FROM_UPLOAD_${uploadCounter}`;
     }
-    const tweakEntry = `    "${nodeId}": ${JSON.stringify(
-      modifiedTweak,
-      null,
-      6,
-    )
+    const tweakEntry = `    "${alias}": ${JSON.stringify(modifiedTweak, null, 6)
       .split("\n")
       .join("\n    ")}`;
     tweakEntries.push(tweakEntry);
     uploadCounter++;
   });
 
-  // Add non-file tweaks
-  Object.entries(nonFileTweaks).forEach(([nodeId, tweak]) => {
+  // Add non-file tweaks (already aliased)
+  Object.entries(nonFileTweaks).forEach(([aliasOrNodeId, tweak]) => {
     tweakEntries.push(
-      `    "${nodeId}": ${JSON.stringify(tweak, null, 6)
+      `    "${aliasOrNodeId}": ${JSON.stringify(tweak, null, 6)
         .split("\n")
         .join("\n    ")}`,
     );

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

@@ -1,4 +1,5 @@
 import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
+import { convertTweaksToAliases } from "@/utils/aliasUtils";
 import {
   getAllChatInputNodeIds,
   getAllFileNodeIds,
@@ -15,11 +16,13 @@ export function getNewJsApiCode({
   endpointName,
   processedPayload,
   shouldDisplayApiKey,
+  nodes,
 }: {
   flowId: string;
   endpointName: string;
   processedPayload: any;
   shouldDisplayApiKey: boolean;
+  nodes?: any[];
 }): string {
   const { protocol, host } = customGetHostProtocol();
   const baseUrl = `${protocol}//${host}`;
@@ -31,14 +34,21 @@ export function getNewJsApiCode({
     parsedUrl.port || (parsedUrl.protocol === "https:" ? "443" : "80");
 
   // Check if there are file uploads
-  const tweaks = processedPayload.tweaks || {};
-  const hasFiles = hasFileTweaks(tweaks);
+  const originalTweaks = processedPayload.tweaks || {};
+  const tweaks = convertTweaksToAliases(originalTweaks, nodes);
+  const hasFiles = hasFileTweaks(originalTweaks); // Use original tweaks for file detection
+
+  // Create payload with aliased tweaks
+  const payloadWithAliases = {
+    ...processedPayload,
+    tweaks: tweaks,
+  };
 
   // If no file uploads, use existing logic
   if (!hasFiles) {
     const apiUrl = `${baseUrl}/api/v1/run/${endpointName || flowId}`;
 
-    const payloadString = JSON.stringify(processedPayload, null, 4);
+    const payloadString = JSON.stringify(payloadWithAliases, null, 4);
 
     const authSection = shouldDisplayApiKey
       ? `const crypto = require('crypto');

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

@@ -1,4 +1,5 @@
 import { customGetHostProtocol } from "@/customization/utils/custom-get-host-protocol";
+import { convertTweaksToAliases } from "@/utils/aliasUtils";
 import {
   getAllChatInputNodeIds,
   getAllFileNodeIds,
@@ -15,23 +16,32 @@ export function getNewPythonApiCode({
   endpointName,
   processedPayload,
   shouldDisplayApiKey,
+  nodes,
 }: {
   flowId: string;
   endpointName: string;
   processedPayload: any;
   shouldDisplayApiKey: boolean;
+  nodes?: any[];
 }): string {
   const { protocol, host } = customGetHostProtocol();
   const baseUrl = `${protocol}//${host}`;
 
   // Check if there are file uploads
-  const tweaks = processedPayload.tweaks || {};
-  const hasFiles = hasFileTweaks(tweaks);
+  const originalTweaks = processedPayload.tweaks || {};
+  const tweaks = convertTweaksToAliases(originalTweaks, nodes);
+  const hasFiles = hasFileTweaks(originalTweaks); // Use original tweaks for file detection
+
+  // Create payload with aliased tweaks
+  const payloadWithAliases = {
+    ...processedPayload,
+    tweaks: tweaks,
+  };
 
   // If no file uploads, use existing logic
   if (!hasFiles) {
     const apiUrl = `${baseUrl}/api/v1/run/${endpointName || flowId}`;
-    const payloadString = JSON.stringify(processedPayload, null, 4)
+    const payloadString = JSON.stringify(payloadWithAliases, null, 4)
       .replace(/true/g, "True")
       .replace(/false/g, "False")
       .replace(/null/g, "None");

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx

@@ -475,7 +475,6 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
   const hasMcpServers = Boolean(mcpServers && mcpServers.length > 0);
 
   const hasSearchInput = search !== "" || filterType !== undefined;
-  console.log("hasSearchInput", hasSearchInput);
 
   const showComponents =
     (ENABLE_NEW_SIDEBAR &&