File size: 2,756 Bytes
b9fe2b4 |
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 94 95 96 97 98 99 100 101 102 103 104 |
import { SideDown } from '@/assets/icon/Icon';
import { Card, CardContent } from '@/components/ui/card';
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
} from '@/components/ui/sidebar';
import { useMemo } from 'react';
import {
AgentOperatorList,
Operator,
componentMenuList,
operatorMap,
} from './constant';
import OperatorIcon from './operator-icon';
type OperatorItem = {
name: Operator;
};
function OperatorCard({ name }: OperatorItem) {
return (
<Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard">
<CardContent className="p-2 flex items-center gap-2">
<OperatorIcon
name={name}
color={operatorMap[name].color}
></OperatorIcon>
{name}
</CardContent>
</Card>
);
}
type OperatorCollapsibleProps = { operatorList: OperatorItem[]; title: string };
function OperatorCollapsible({
operatorList,
title,
}: OperatorCollapsibleProps) {
return (
<Collapsible defaultOpen className="group/collapsible">
<SidebarGroup>
<SidebarGroupLabel asChild className="mb-1">
<CollapsibleTrigger>
<span className="font-bold text-base">{title}</span>
<SideDown className="ml-auto" />
</CollapsibleTrigger>
</SidebarGroupLabel>
<CollapsibleContent className="px-2">
<SidebarGroupContent>
<SidebarMenu className="gap-2">
{operatorList.map((item) => (
<OperatorCard key={item.name} name={item.name}></OperatorCard>
))}
</SidebarMenu>
</SidebarGroupContent>
</CollapsibleContent>
</SidebarGroup>
</Collapsible>
);
}
export function AgentSidebar() {
const agentOperatorList = useMemo(() => {
return componentMenuList.filter((x) =>
AgentOperatorList.some((y) => y === x.name),
);
}, []);
const thirdOperatorList = useMemo(() => {
return componentMenuList.filter(
(x) => !AgentOperatorList.some((y) => y === x.name),
);
}, []);
return (
<Sidebar variant={'floating'} className="top-16">
<SidebarHeader>
<p className="font-bold text-2xl">All nodes</p>
</SidebarHeader>
<SidebarContent>
<OperatorCollapsible
title="Agent operator"
operatorList={agentOperatorList}
></OperatorCollapsible>
<OperatorCollapsible
title="Third-party tools"
operatorList={thirdOperatorList}
></OperatorCollapsible>
</SidebarContent>
</Sidebar>
);
}
|