'use client' import { useMemo, useState } from 'react' import NewMCPCard from './create-card' import MCPCard from './provider-card' import MCPDetailPanel from './detail/provider-detail' import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools' import type { ToolWithProvider } from '@/app/components/workflow/types' import cn from '@/utils/classnames' type Props = { searchText: string } function renderDefaultCard() { const defaultCards = Array.from({ length: 36 }, (_, index) => (
= 4 && index < 8 && 'opacity-50', index >= 8 && index < 12 && 'opacity-40', index >= 12 && index < 16 && 'opacity-30', index >= 16 && index < 20 && 'opacity-25', index >= 20 && index < 24 && 'opacity-20', )} >
)) return defaultCards } const MCPList = ({ searchText, }: Props) => { const { data: list = [] } = useAllMCPTools() const invalidateMCPList = useInvalidateAllMCPTools() const filteredList = useMemo(() => { return list.filter((collection) => { if (searchText) return Object.values(collection.name).some(value => (value as string).toLowerCase().includes(searchText.toLowerCase())) return true }) }, [list, searchText]) const [currentProvider, setCurrentProvider] = useState() return ( <>
{filteredList.map(provider => ( invalidateMCPList()} /> ))} {!list.length && renderDefaultCard()}
{currentProvider && ( setCurrentProvider(undefined)} onUpdate={() => invalidateMCPList()} /> )} ) } export default MCPList