diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 8a4b503fb..e95fc0d85 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -149,7 +149,7 @@ export default function NodeDescription({ diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx index 2281088a0..d67b63e00 100644 --- a/src/frontend/src/components/shadTooltipComponent/index.tsx +++ b/src/frontend/src/components/shadTooltipComponent/index.tsx @@ -28,7 +28,7 @@ const ShadTooltip: React.FC = ({ {children} 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; + tooltip?: string | React.ReactNode; } & VariantProps >( ( @@ -578,22 +574,13 @@ const SidebarMenuButton = React.forwardRef< return button; } - if (typeof tooltip === "string") { - tooltip = { - children: tooltip, - }; - } - return ( - - {button} - + + {button} + ); }, ); diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx index 893daa870..296803e12 100644 --- a/src/frontend/src/components/ui/tooltip.tsx +++ b/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} diff --git a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx b/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx index bff876e6f..67246647e 100644 --- a/src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx +++ b/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 { - constructor(baseURL, apiKey) { - this.baseURL = baseURL; - this.apiKey = apiKey; - } - - async post(endpoint, body, headers = {"Content-Type": "application/json"}) { - if (this.apiKey) { - headers["x-api-key"] = \`\${this.apiKey}\`; - } - const url = \`\${this.baseURL}\${endpoint}\`; - try { - const response = await fetch(url, { - method: 'POST', - headers: headers, - body: JSON.stringify(body) - }); - - 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 - ); - `; + return `${activeTweaks ? "" : 'let inputValue = ""; // Insert input value here\n\n'}fetch( + "${window.location.protocol}//${window.location.host}/api/v1/run/${endpointName || flowId}?stream=false", + { + method: "POST", + headers: { + "Authorization": "Bearer ", + "Content-Type": "application/json",${isAuth ? '\n\t\t\t"x-api-key": ' : ""} + }, + body: JSON.stringify({${activeTweaks ? "" : "\n\t\t\tinput_value: inputValue, "} + output_type: ${hasChatOutput ? '"chat"' : '"text"'}, + input_type: ${hasChatInput ? '"chat"' : '"text"'}, + tweaks: ${tweaksString} + }), + }, +) + .then(res => res.json()) + .then(data => console.log(data)) + .catch(error => console.error('Error:', error)); +`; } diff --git a/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx b/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx index 1ae5b586c..a6ba5a59c 100644 --- a/src/frontend/src/modals/templatesModal/components/navComponent/index.tsx +++ b/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} > ((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 (