'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