Spaces:
Configuration error
Configuration error
File size: 1,933 Bytes
447ebeb |
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import { fetchMCPServers } from '../networking';
import { MCPServer } from '../mcp_tools/types';
interface MCPServerSelectorProps {
onChange: (selectedMCPServers: string[]) => void;
value?: string[];
className?: string;
accessToken: string;
placeholder?: string;
disabled?: boolean;
}
const MCPServerSelector: React.FC<MCPServerSelectorProps> = ({
onChange,
value,
className,
accessToken,
placeholder = "Select MCP servers",
disabled = false
}) => {
const [mcpServers, setMCPServers] = useState<MCPServer[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchMCPServerList = async () => {
if (!accessToken) return;
setLoading(true);
try {
const response = await fetchMCPServers(accessToken);
if (response && Array.isArray(response)) {
// Direct array response
setMCPServers(response);
} else if (response.data && Array.isArray(response.data)) {
// Response with data wrapper
setMCPServers(response.data);
}
} catch (error) {
console.error("Error fetching MCP servers:", error);
} finally {
setLoading(false);
}
};
fetchMCPServerList();
}, [accessToken]);
return (
<div>
<Select
mode="multiple"
placeholder={placeholder}
onChange={onChange}
value={value}
loading={loading}
className={className}
options={mcpServers.map(server => ({
label: `${server.alias} (${server.server_id})`,
value: server.server_id,
title: server.description || server.alias,
}))}
optionFilterProp="label"
showSearch
style={{ width: '100%' }}
disabled={disabled}
/>
</div>
);
};
export default MCPServerSelector; |