File size: 1,704 Bytes
23b413b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import React from 'react'
import { Wrench } from 'lucide-react'
type Props = {
loading?: boolean
error?: string | null
onGoToMcpServers?: () => void
}
export function ToolsEmptyState({ loading, error, onGoToMcpServers }: Props) {
if (loading) {
return (
<div className="flex flex-col items-center justify-center h-64 text-white/50">
<div className="w-8 h-8 border-2 border-white/20 border-t-purple-400 rounded-full animate-spin mb-4" />
<p className="text-sm">Loading capabilities catalog...</p>
</div>
)
}
if (error) {
return (
<div className="flex flex-col items-center justify-center h-64 text-white/50">
<Wrench size={48} className="mb-4 opacity-30" />
<p className="text-lg font-semibold mb-2 text-white/70">Unable to load capabilities</p>
<p className="text-sm text-white/40 mb-1">Could not reach the agentic catalog.</p>
<p className="text-xs text-red-400/70 font-mono">{error}</p>
</div>
)
}
return (
<div className="flex flex-col items-center justify-center h-64 text-white/50">
<Wrench size={48} className="mb-4 opacity-30" />
<p className="text-lg font-semibold mb-2 text-white/70">No capabilities registered</p>
<p className="text-sm text-white/40 mb-4">
Register MCP servers or sync tools and A2A agents from Context Forge to see them here.
</p>
{onGoToMcpServers && (
<button
onClick={onGoToMcpServers}
className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-full text-sm font-medium transition-colors"
>
Go to MCP Servers
</button>
)}
</div>
)
}
|