Skip to content

Commit

Permalink
fix: improve js api code and fix tooltip z-index (#4577)
Browse files Browse the repository at this point in the history 
* Updated JS API code to simplify request

* Fixed tooltip z index

* Fix sidebar not working some buttons in collapsed state
  • Loading branch information
@lucaseduoli
lucaseduoli authored Nov 13, 2024
1 parent 34b107b commit da03993
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 109 deletions.
2 changes: 1 addition & 1 deletion src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/components/shadTooltipComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
33 changes: 10 additions & 23 deletions src/frontend/src/components/ui/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
>(
(
Expand Down Expand Up @@ -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>
);
},
);
Expand Down
4 changes: 2 additions & 2 deletions src/frontend/src/components/ui/tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand Down
107 changes: 26 additions & 81 deletions src/frontend/src/modals/apiModal/utils/get-js-api-code.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import useFlowStore from "@/stores/flowStore";
import { GetCodeType } from "@/types/tweaks";

/**
Expand All @@ -17,85 +18,29 @@ export default function getJsApiCode({
}: GetCodeType): string {
let tweaksString = "{}";
if (tweaksBuildedObject)
tweaksString = JSON.stringify(tweaksBuildedObject, null, 2);

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
);
`;
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 `${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));
`;
}
1 change: 1 addition & 0 deletions src/frontend/src/modals/templatesModal/components/navComponent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/stores/tweaksStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down

0 comments on commit da03993

Please # to comment.