fix: improve js api code and fix tooltip z-index (#4577)

* Updated JS API code to simplify request

* Fixed tooltip z index

* Fix sidebar not working some buttons in collapsed state

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

@@ -149,7 +149,7 @@ export default function NodeDescription({
             <Markdown
               linkTarget="_blank"
               className={cn(
-                "markdown nowheel prose flex h-full w-full flex-col text-[13px] leading-5 word-break-break-word",
+                "markdown prose flex h-full w-full flex-col text-[13px] leading-5 word-break-break-word",
                 mdClassName,
               )}
             >

src/frontend/src/components/shadTooltipComponent/index.tsx

@@ -28,7 +28,7 @@ const ShadTooltip: React.FC<ShadToolTipType> = ({
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
         className={cn(
-          "z-50 max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
+          "z-[99] max-w-96 bg-tooltip text-[12px] text-tooltip-foreground",
           styleClasses,
         )}
         side={side}

src/frontend/src/components/ui/sidebar.tsx

@@ -6,16 +6,12 @@ import { PanelLeft } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../utils/utils";
+import ShadTooltip from "../shadTooltipComponent";
 import { Button } from "./button";
 import { Input } from "./input";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
-import {
+import { TooltipProvider } from "./tooltip";
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip";
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -445,7 +441,7 @@ const SidebarGroupLabel = React.forwardRef<
       data-sidebar="group-label"
       className={cn(
         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-foreground/70 outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
       {...props}
@@ -545,7 +541,7 @@ const SidebarMenuButton = React.forwardRef<
   React.ComponentProps<"button"> & {
     asChild?: boolean;
     isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    tooltip?: string | React.ReactNode;
   } & VariantProps<typeof sidebarMenuButtonVariants>
 >(
   (
@@ -578,22 +574,13 @@ const SidebarMenuButton = React.forwardRef<
       return button;
     }
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      };
-    }
-
     return (
-      <Tooltip>
+      <ShadTooltip
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        side="right"
-        <TooltipContent
+        content={state == "collapsed" ? tooltip : undefined}
-          side="right"
+      >
-          align="center"
+        {button}
-          hidden={state !== "collapsed"}
+      </ShadTooltip>
-          {...tooltip}
-        />
-      </Tooltip>
     );
   },
 );

src/frontend/src/components/ui/tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-45 content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        "z-[99] content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
         className,
       )}
       {...props}
@@ -36,7 +36,7 @@ const TooltipContentWithoutPortal = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-45 content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      "z-[99] content-center self-center overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
       className,
     )}
     {...props}

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

@@ -1,3 +1,4 @@
+import useFlowStore from "@/stores/flowStore";
 import { GetCodeType } from "@/types/tweaks";
 
 /**
@@ -17,85 +18,29 @@ export default function getJsApiCode({
 }: GetCodeType): string {
   let tweaksString = "{}";
   if (tweaksBuildedObject)
-    tweaksString = JSON.stringify(tweaksBuildedObject, null, 2);
+    tweaksString = JSON.stringify(tweaksBuildedObject, null, 8);
+  const inputs = useFlowStore.getState().inputs;
+  const outputs = useFlowStore.getState().outputs;
+  const hasChatInput = inputs.some((input) => input.type === "ChatInput");
+  const hasChatOutput = outputs.some((output) => output.type === "ChatOutput");
 
-  return `class LangflowClient {
+  return `${activeTweaks ? "" : 'let inputValue = ""; // Insert input value here\n\n'}fetch(
-    constructor(baseURL, apiKey) {
+  "${window.location.protocol}//${window.location.host}/api/v1/run/${endpointName || flowId}?stream=false",
-        this.baseURL = baseURL;
+  {
-        this.apiKey = apiKey;
+    method: "POST",
-    }
+    headers: {
-
+      "Authorization": "Bearer <TOKEN>",
-    async post(endpoint, body, headers = {"Content-Type": "application/json"}) {
+      "Content-Type": "application/json",${isAuth ? '\n\t\t\t"x-api-key": <your api key>' : ""}
-        if (this.apiKey) {
+    },
-            headers["x-api-key"] = \`\${this.apiKey}\`;
+    body: JSON.stringify({${activeTweaks ? "" : "\n\t\t\tinput_value: inputValue, "}
-        }
+      output_type: ${hasChatOutput ? '"chat"' : '"text"'},
-        const url = \`\${this.baseURL}\${endpoint}\`;
+      input_type: ${hasChatInput ? '"chat"' : '"text"'},
-        try {
+      tweaks: ${tweaksString}
-            const response = await fetch(url, {
+    }),
-                method: 'POST',
+  },
-                headers: headers,
+)
-                body: JSON.stringify(body)
+  .then(res => res.json())
-            });
+  .then(data => console.log(data))
-
+  .catch(error => console.error('Error:', error));
-            const responseMessage = await response.json();
+`;
-            if (!response.ok) {
-                throw new Error(\`\${response.status} \${response.statusText} - \${JSON.stringify(responseMessage)}\`);
-            }
-            return responseMessage;
-        } catch (error) {
-            console.error(\`Error during POST request: \${error.message}\`);
-            throw error;
-        }
-    }
-
-    async initiateSession(flowId, inputValue, inputType = 'chat', outputType = 'chat', tweaks = {}) {
-        const endpoint = \`/api/v1/run/\${flowId}\`;
-        return this.post(endpoint, { ${activeTweaks ? "" : "input_value: inputValue, "}input_type: inputType, output_type: outputType, tweaks: tweaks });
-    }
-
-    async runFlow(flowIdOrName, inputValue, inputType = 'chat', outputType = 'chat', tweaks, onError) {
-        try {
-            const initResponse = await this.initiateSession(flowIdOrName, inputValue, inputType, outputType, tweaks);
-            return initResponse;
-        } catch (error) {
-            onError('Error initiating session');
-        }
-    }
-  }
-
-  async function main(inputValue, inputType = 'chat', outputType = 'chat') {
-    const flowIdOrName = '${endpointName || flowId}';
-    const langflowClient = new LangflowClient('${window.location.protocol}//${window.location.host}',
-          ${isAuth ? "'your-api-key'" : "null"});
-    const tweaks = ${tweaksString};
-
-    try {
-        const response = await langflowClient.runFlow(
-            flowIdOrName,
-            inputValue,
-            inputType,
-            outputType,
-            tweaks,
-            (error) => console.error("Error:", error) // onError
-        );
-
-        if (response) {
-            const flowOutputs = response.outputs[0];
-            const firstComponentOutputs = flowOutputs.outputs[0];
-            const output = firstComponentOutputs.outputs.message;
-
-            console.log("Final Output:", output.message.text);
-        }
-    } catch (error) {
-        console.error('Main Error:', error.message);
-    }
-  }
-
-  const args = process.argv.slice(2);
-  main(
-    args[0], // inputValue
-    args[1], // inputType
-    args[2], // outputType
-  );
-  `;
 }

src/frontend/src/modals/templatesModal/components/navComponent/index.tsx

@@ -60,6 +60,7 @@ export function Nav({ categories, currentTab, setCurrentTab }: NavProps) {
                       onClick={() => setCurrentTab(link.id)}
                       isActive={currentTab === link.id}
                       data-testid={`side_nav_options_${link.title.toLowerCase().replace(/\s+/g, "-")}`}
+                      tooltip={link.title}
                     >
                       <ForwardedIconComponent
                         name={link.icon}

src/frontend/src/stores/tweaksStore.ts

@@ -72,7 +72,7 @@ export const useTweaksStore = create<TweaksStoreType>((set, get) => ({
       const originalNodeTemplate = originalNodes?.find((n) => n.id === node.id)
         ?.data?.node?.template;
       const nodeTemplate = node.data?.node?.template;
-      if (originalNodeTemplate && nodeTemplate) {
+      if (originalNodeTemplate && nodeTemplate && node.type === "genericNode") {
         const currentTweak = {};
         Object.keys(nodeTemplate).forEach((name) => {
           if (