972fd919b4
### What problem does this PR solve? Feat: Deleting the last tool of the agent will delete the tool node #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { BlockButton } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
import { PencilLine, X } from 'lucide-react';
|
|
import { PropsWithChildren } from 'react';
|
|
import { ToolPopover } from './tool-popover';
|
|
import { useDeleteAgentNodeTools } from './tool-popover/use-update-tools';
|
|
import { useGetAgentToolNames } from './use-get-tools';
|
|
|
|
export function ToolCard({
|
|
children,
|
|
className,
|
|
...props
|
|
}: PropsWithChildren & React.HTMLAttributes<HTMLLIElement>) {
|
|
return (
|
|
<li
|
|
{...props}
|
|
className={cn(
|
|
'flex bg-background-card p-1 rounded-sm justify-between',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export function AgentTools() {
|
|
const { toolNames } = useGetAgentToolNames();
|
|
const { deleteNodeTool } = useDeleteAgentNodeTools();
|
|
|
|
return (
|
|
<section className="space-y-2.5">
|
|
<span className="text-text-sub-title">Tools</span>
|
|
<ul className="space-y-2">
|
|
{toolNames.map((x) => (
|
|
<ToolCard key={x}>
|
|
{x}
|
|
<div className="flex items-center gap-2 text-text-sub-title">
|
|
<PencilLine className="size-4 cursor-pointer" />
|
|
<X
|
|
className="size-4 cursor-pointer"
|
|
onClick={deleteNodeTool(x)}
|
|
/>
|
|
</div>
|
|
</ToolCard>
|
|
))}
|
|
</ul>
|
|
<ToolPopover>
|
|
<BlockButton>Add Tool</BlockButton>
|
|
</ToolPopover>
|
|
</section>
|
|
);
|
|
}
|