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
This commit is contained in:
Lucas Oliveira
GitHub
parent
34b107b98e
commit
da0399373a
7 changed files with 41 additions and 108 deletions
|
|
@ -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,
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "./tooltip";
|
||||
import { TooltipProvider } 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>
|
||||
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed"}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
<ShadTooltip
|
||||
side="right"
|
||||
content={state == "collapsed" ? tooltip : undefined}
|
||||
>
|
||||
{button}
|
||||
</ShadTooltip>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 <TOKEN>",
|
||||
"Content-Type": "application/json",${isAuth ? '\n\t\t\t"x-api-key": <your 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));
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue