Spaces:
Sleeping
Sleeping
File size: 2,641 Bytes
05c5ed5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | "use client";
import { NodeKind } from "lib/ai/workflow/workflow.interface";
import { ReactNode, useMemo } from "react";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "ui/dropdown-menu";
import { NodeIcon } from "./node-icon";
import { useTranslations } from "next-intl";
import { Tooltip, TooltipContent, TooltipTrigger } from "ui/tooltip";
const unSupportedKinds: NodeKind[] = [NodeKind.Code];
export function NodeSelect({
children,
onChange,
open,
onOpenChange,
}: {
onChange: (nodeKind: NodeKind) => void;
children: ReactNode;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}) {
return (
<DropdownMenu open={open} onOpenChange={onOpenChange}>
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="center" className="w-64">
<NodeSelectContent onChange={onChange} />
</DropdownMenuContent>
</DropdownMenu>
);
}
function NodeSelectContent({
onChange,
}: { onChange: (nodeKind: NodeKind) => void }) {
const t = useTranslations();
const descriptions = useMemo(() => {
return t.raw("Workflow.kindsDescription") ?? {};
}, [t]);
return Object.keys(NodeKind)
.filter((key) => NodeKind[key] !== NodeKind.Input)
.sort((a, b) => {
const aIndex = unSupportedKinds.indexOf(NodeKind[a]);
const bIndex = unSupportedKinds.indexOf(NodeKind[b]);
return aIndex - bIndex;
})
.map((key) => (
<Tooltip key={key} delayDuration={0}>
<TooltipTrigger asChild>
<DropdownMenuItem
disabled={unSupportedKinds.includes(NodeKind[key])}
onClick={() => {
if (unSupportedKinds.includes(NodeKind[key])) {
return;
}
onChange(NodeKind[key]);
}}
key={key}
>
<NodeIcon type={NodeKind[key]} />
{key}
{unSupportedKinds.includes(NodeKind[key]) && (
<span className="ml-auto text-xs text-muted-foreground">
Soon...
</span>
)}
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent side="left" align="center" className="max-w-64 p-4">
<div className="flex items-center gap-2 mb-4">
<NodeIcon type={NodeKind[key]} />
<span className="text-sm font-semibold text-foreground">{key}</span>
</div>
<div className="whitespace-pre-wrap">
{descriptions[NodeKind[key]] ?? "...soon"}
</div>
</TooltipContent>
</Tooltip>
));
}
|