88 lines
4.1 KiB
TypeScript
88 lines
4.1 KiB
TypeScript
|
import { Accordion } from "@/components/bs-ui/accordion";
|
||
|
|
import { SearchInput } from "@/components/bs-ui/input";
|
||
|
|
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/bs-ui/sheet";
|
||
|
|
import { getAssistantToolsApi } from "@/controllers/API/assistant";
|
||
|
|
import ToolItem from "@/pages/SkillPage/components/ToolItem";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { PersonIcon, StarFilledIcon } from "@radix-ui/react-icons";
|
||
|
|
import { useEffect, useMemo, useState } from "react";
|
||
|
|
import { Button } from "@/components/bs-ui/button";
|
||
|
|
|
||
|
|
export default function ToolsSheet({ select, onSelect, children }) {
|
||
|
|
const { t } = useTranslation()
|
||
|
|
const [type, setType] = useState('default') // default custom
|
||
|
|
|
||
|
|
const [keyword, setKeyword] = useState('')
|
||
|
|
const [allData, setAllData] = useState([])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getAssistantToolsApi(type).then(res => {
|
||
|
|
setAllData(res)
|
||
|
|
setKeyword('')
|
||
|
|
})
|
||
|
|
}, [type])
|
||
|
|
|
||
|
|
const options = useMemo(() => {
|
||
|
|
return allData.filter(el =>
|
||
|
|
el.name.toLowerCase().includes(keyword.toLowerCase())
|
||
|
|
|| el.description.toLowerCase().includes(keyword.toLowerCase())
|
||
|
|
)
|
||
|
|
}, [keyword, allData])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Sheet onOpenChange={open => !open && setKeyword('')}>
|
||
|
|
<SheetTrigger asChild>
|
||
|
|
{children}
|
||
|
|
</SheetTrigger>
|
||
|
|
<SheetContent className="w-[1000px] sm:max-w-[1000px] bg-gray-100">
|
||
|
|
<div className="flex h-full" onClick={e => e.stopPropagation()}>
|
||
|
|
<div className="w-fit p-6">
|
||
|
|
<SheetTitle>{t('build.addTool')}</SheetTitle>
|
||
|
|
<SearchInput placeholder={t('build.search')} className="mt-6" onChange={(e) => setKeyword(e.target.value)} />
|
||
|
|
<Button
|
||
|
|
className="mt-4 w-full"
|
||
|
|
onClick={() => window.open("/build/tools")}
|
||
|
|
>
|
||
|
|
{t('create')}{t("tools.createCustomTool")}
|
||
|
|
</Button>
|
||
|
|
<div className="mt-4">
|
||
|
|
<div
|
||
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 ${type === 'default' && 'bg-muted-foreground/10'}`}
|
||
|
|
onClick={() => setType('default')}
|
||
|
|
>
|
||
|
|
<PersonIcon />
|
||
|
|
<span>{t('tools.builtinTools')}</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 mt-1 ${type === 'custom' && 'bg-muted-foreground/10'}`}
|
||
|
|
onClick={() => setType('custom')}
|
||
|
|
>
|
||
|
|
<StarFilledIcon />
|
||
|
|
<span>{t('tools.customTools')}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1 bg-[#fff] p-5 pt-12 h-full overflow-auto scrollbar-hide">
|
||
|
|
<Accordion type="single" collapsible className="w-full">
|
||
|
|
{
|
||
|
|
options.length ? options.map(el => (
|
||
|
|
<ToolItem
|
||
|
|
key={el.id}
|
||
|
|
type={'add'}
|
||
|
|
select={select}
|
||
|
|
data={el}
|
||
|
|
onSelect={onSelect}
|
||
|
|
></ToolItem>
|
||
|
|
)) : <div className="pt-40 text-center text-sm text-muted-foreground mt-2">
|
||
|
|
{t('build.empty')}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
</Accordion>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SheetContent>
|
||
|
|
</Sheet>
|
||
|
|
);
|
||
|
|
|
||
|
|
};
|