'use client' import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import type { Collection } from './types' import Marketplace from './marketplace' import cn from '@/utils/classnames' import { useTabSearchParams } from '@/hooks/use-tab-searchparams' import TabSliderNew from '@/app/components/base/tab-slider-new' import LabelFilter from '@/app/components/tools/labels/filter' import SearchInput from '@/app/components/base/search-input' import ProviderDetail from '@/app/components/tools/provider/detail' import Empty from '@/app/components/tools/add-tool-modal/empty' import { fetchCollectionList } from '@/service/tools' import Card from '@/app/components/plugins/card' import CardMoreInfo from '@/app/components/plugins/card/card-more-info' import { useSelector as useAppContextSelector } from '@/context/app-context' const ProviderList = () => { const { t } = useTranslation() const containerRef = useRef(null) const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures) const [activeTab, setActiveTab] = useTabSearchParams({ defaultTab: 'builtin', }) const options = [ { value: 'builtin', text: t('tools.type.builtIn') }, { value: 'api', text: t('tools.type.custom') }, { value: 'workflow', text: t('tools.type.workflow') }, ] const [tagFilterValue, setTagFilterValue] = useState([]) const handleTagsChange = (value: string[]) => { setTagFilterValue(value) } const [keywords, setKeywords] = useState('') const handleKeywordsChange = (value: string) => { setKeywords(value) } const [collectionList, setCollectionList] = useState([]) const filteredCollectionList = useMemo(() => { return collectionList.filter((collection) => { if (collection.type !== activeTab) return false if (tagFilterValue.length > 0 && (!collection.labels || collection.labels.every(label => !tagFilterValue.includes(label)))) return false if (keywords) return collection.name.toLowerCase().includes(keywords.toLowerCase()) return true }) }, [activeTab, tagFilterValue, keywords, collectionList]) const getProviderList = async () => { const list = await fetchCollectionList() setCollectionList([...list]) } useEffect(() => { getProviderList() }, []) const [currentProvider, setCurrentProvider] = useState() useEffect(() => { if (currentProvider && collectionList.length > 0) { const newCurrentProvider = collectionList.find(collection => collection.id === currentProvider.id) setCurrentProvider(newCurrentProvider) } }, [collectionList, currentProvider]) return (
{ setActiveTab(state) if (state !== activeTab) setCurrentProvider(undefined) }} options={options} />
{filteredCollectionList.map(collection => (
setCurrentProvider(collection)} > } />
))} {!filteredCollectionList.length &&
}
{ !enable_marketplace && ( { containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' }) }} /> ) }
{currentProvider && ( setCurrentProvider(undefined)} onRefreshData={getProviderList} /> )}
) } ProviderList.displayName = 'ToolProviderList' export default ProviderList