Spaces:
Sleeping
Sleeping
File size: 2,882 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 88 89 90 91 92 93 | "use client";
import { ChevronDownIcon, WrenchIcon } from "lucide-react";
import { useTranslations } from "next-intl";
import { PropsWithChildren } from "react";
import { Button } from "ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "ui/dropdown-menu";
export type EnabledTools = {
groupName: string;
tools: {
name: string;
description?: string;
}[];
};
export function EnabledToolsDropdown({
children,
align,
side,
tools = [],
}: PropsWithChildren<{
align?: "start" | "end";
tools?: EnabledTools[];
side?: "left" | "right" | "top" | "bottom";
}>) {
const t = useTranslations();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
{children || (
<Button variant={"secondary"}>
{t("Common.tool")} <ChevronDownIcon />
</Button>
)}
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-40" side={side} align={align}>
<DropdownMenuGroup className="cursor-pointer">
{tools.length ? (
tools.map((toolGroup, index) => {
return (
<DropdownMenuSub key={index}>
<DropdownMenuSubTrigger>
<p className="text-sm font-medium flex items-center gap-2 min-w-32">
<WrenchIcon className="size-3.5" />
<span className="truncate">{toolGroup.groupName}</span>
</p>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
{toolGroup.tools.map((tool) => {
return (
<DropdownMenuItem key={tool.name}>
<div className="flex text-xs flex-col w-40">
<p className=" truncate">{tool.name}</p>
<p className="text-muted-foreground truncate">
{tool.description}
</p>
</div>
</DropdownMenuItem>
);
})}
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
);
})
) : (
<DropdownMenuItem>
<div className="flex flex-col items-center justify-center h-full">
<p className="text-sm text-muted-foreground">
{t("Chat.Tool.noToolsAvailable")}
</p>
</div>
</DropdownMenuItem>
)}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}
|