xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-09-01 23:27:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mcp refactor

Browse Source
This commit is contained in:
wangcham
2025-10-23 15:47:44 +00:00
parent d0a3dee083
commit 075091ed06
7 changed files with 577 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/home/plugins/mcp-market/MCPMarketComponent.tsx
+152 -113
View File
@@ -1,47 +1,51 @@
'use client';
import { useEffect, useState, useRef } from 'react';
import { useEffect, useState } from 'react';
import styles from '@/app/home/plugins/plugins.module.css';
import { MCPMarketCardVO } from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardVO';
import MCPMarketCardComponent from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardComponent';
// import { MCPMarketCardVO } from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardVO';
// import MCPMarketCardComponent from '@/app/home/plugins/mcp-market/mcp-market-card/MCPMarketCardComponent';
import MCPCardComponent from '@/app/home/plugins/mcp/mcp-card/MCPCardComponent';
import { MCPCardVO } from '@/app/home/plugins/mcp/MCPCardVO';
// import { spaceClient } from '@/app/infra/http/HttpClient';
import { useTranslation } from 'react-i18next';
import { Input } from '@/components/ui/input';
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from '@/components/ui/pagination';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
// import { Input } from '@/components/ui/input';
// import {
// Pagination,
// PaginationContent,
// PaginationItem,
// PaginationLink,
// PaginationNext,
// PaginationPrevious,
// } from '@/components/ui/pagination';
// import {
// Select,
// SelectContent,
// SelectItem,
// SelectTrigger,
// SelectValue,
// } from '@/components/ui/select';
import { httpClient, HttpClient } from '@/app/infra/http/HttpClient';
import { httpClient } from '@/app/infra/http/HttpClient';
export default function MCPMarketComponent({
askInstallServer,
onEditServer,
}: {
askInstallServer: (githubURL: string) => void;
askInstallServer?: (githubURL: string) => void;
onEditServer?: (serverName: string) => void;
}) {
const { t } = useTranslation();
const [marketServerList, setMarketServerList] = useState<MCPMarketCardVO[]>(
[],
);
const [totalCount, setTotalCount] = useState(0);
const [nowPage, setNowPage] = useState(1);
const [searchKeyword, setSearchKeyword] = useState('');
// const [marketServerList, setMarketServerList] = useState<MCPMarketCardVO[]>(
// [],
// );
const [installedServers, setInstalledServers] = useState<MCPCardVO[]>([]);
// const [totalCount, setTotalCount] = useState(0);
// const [nowPage, setNowPage] = useState(1);
// const [searchKeyword, setSearchKeyword] = useState('');
const [loading, setLoading] = useState(false);
const [sortByValue, setSortByValue] = useState<string>('pushed_at');
const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
const searchTimeout = useRef<NodeJS.Timeout | null>(null);
const pageSize = 12;
// const [sortByValue, setSortByValue] = useState<string>('pushed_at');
// const [sortOrderValue, setSortOrderValue] = useState<string>('DESC');
// const searchTimeout = useRef<NodeJS.Timeout | null>(null);
// const pageSize = 12;
useEffect(() => {
initData();
@@ -49,95 +53,131 @@ export default function MCPMarketComponent({
}, []);
function initData() {
getServerList();
fetchInstalledServers();
// getServerList(); // GitHub 市场功能暂时注释
}
function onInputSearchKeyword(keyword: string) {
setSearchKeyword(keyword);
// 清除之前的定时器
if (searchTimeout.current) {
clearTimeout(searchTimeout.current);
}
// 设置新的定时器
searchTimeout.current = setTimeout(() => {
setNowPage(1);
getServerList(1, keyword);
}, 500);
function fetchInstalledServers() {
setLoading(true);
httpClient
.getMCPServers()
.then((resp) => {
const servers = resp.servers.map((server) => new MCPCardVO(server));
setInstalledServers(servers);
setLoading(false);
})
.catch((error) => {
console.error('Failed to fetch MCP servers:', error);
setLoading(false);
});
}
function getServerList(
page: number = nowPage,
keyword: string = searchKeyword,
sortBy: string = sortByValue,
sortOrder: string = sortOrderValue,
) {
// setLoading(true);
// GitHub 市场功能暂时注释
// function onInputSearchKeyword(keyword: string) {
// setSearchKeyword(keyword);
// if (searchTimeout.current) {
// clearTimeout(searchTimeout.current);
// }
// searchTimeout.current = setTimeout(() => {
// setNowPage(1);
// getServerList(1, keyword);
// }, 500);
// }
// 获取后端的 MCP Market 服务器列表
httpClient.getMCPServers().then(
);
// function getServerList(
// page: number = nowPage,
// keyword: string = searchKeyword,
// sortBy: string = sortByValue,
// sortOrder: string = sortOrderValue,
// ) {
// // GitHub 安装功能暂时注释
// // spaceClient
// // .getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder)
// // .then((res) => {
// // setMarketServerList(
// // res.servers.map((marketServer) => {
// // let repository = marketServer.repository;
// // if (repository.startsWith('https://github.com/')) {
// // repository = repository.replace('https://github.com/', '');
// // }
// // if (repository.startsWith('github.com/')) {
// // repository = repository.replace('github.com/', '');
// // }
// // const author = repository.split('/')[0];
// // const name = repository.split('/')[1];
// // return new MCPMarketCardVO({
// // author: author,
// // description: marketServer.description,
// // githubURL: `https://github.com/${repository}`,
// // name: name,
// // serverId: String(marketServer.ID),
// // starCount: marketServer.stars,
// // version:
// // 'version' in marketServer
// // ? String(marketServer.version)
// // : '1.0.0',
// // });
// // }),
// // );
// // setTotalCount(res.total);
// // setLoading(false);
// // console.log('market servers:', res);
// // })
// // .catch((error) => {
// // console.error(t('mcp.getServerListError'), error);
// // setLoading(false);
// // });
// }
// spaceClient
// .getMCPMarketServers(page, pageSize, keyword, sortBy, sortOrder)
// .then((res) => {
// setMarketServerList(
// res.servers.map((marketServer) => {
// let repository = marketServer.repository;
// if (repository.startsWith('https://github.com/')) {
// repository = repository.replace('https://github.com/', '');
// }
// function handlePageChange(page: number) {
// setNowPage(page);
// getServerList(page);
// }
// if (repository.startsWith('github.com/')) {
// repository = repository.replace('github.com/', '');
// }
// const author = repository.split('/')[0];
// const name = repository.split('/')[1];
// return new MCPMarketCardVO({
// author: author,
// description: marketServer.description,
// githubURL: `https://github.com/${repository}`,
// name: name,
// serverId: String(marketServer.ID),
// starCount: marketServer.stars,
// version:
// 'version' in marketServer
// ? String(marketServer.version)
// : '1.0.0', // 如果没有提供版本，则默认为1.0.0
// });
// }),
// );
// setTotalCount(res.total);
// setLoading(false);
// console.log('market servers:', res);
// })
// .catch((error) => {
// console.error(t('mcp.getServerListError'), error);
// setLoading(false);
// });
}
function handlePageChange(page: number) {
setNowPage(page);
getServerList(page);
}
function handleSortChange(value: string) {
const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
setSortByValue(newSortBy);
setSortOrderValue(newSortOrder);
setNowPage(1);
getServerList(1, searchKeyword, newSortBy, newSortOrder);
}
// function handleSortChange(value: string) {
// const [newSortBy, newSortOrder] = value.split(',').map((s) => s.trim());
// setSortByValue(newSortBy);
// setSortOrderValue(newSortOrder);
// setNowPage(1);
// getServerList(1, searchKeyword, newSortBy, newSortOrder);
// }
return (
<div className={`${styles.marketComponentBody}`}>
<div className="flex items-center justify-start mb-2 mt-2 pl-[0.8rem] pr-[0.8rem]">
{/* 已安装的服务器列表 */}
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4 pl-[0.8rem] pt-4">
{t('mcp.installedServers')}
</h2>
<div className={`${styles.pluginListContainer}`}>
{loading ? (
<div style={{ textAlign: 'center', padding: '20px' }}>
{t('mcp.loading')}
</div>
) : installedServers.length === 0 ? (
<div style={{ textAlign: 'center', padding: '20px' }}>
{t('mcp.noInstalledServers')}
</div>
) : (
installedServers.map((server, index) => (
<div key={`${server.name}-${index}`}>
<MCPCardComponent
cardVO={server}
onCardClick={() => {
if (onEditServer) {
onEditServer(server.name);
}
}}
onRefresh={fetchInstalledServers}
/>
</div>
))
)}
</div>
</div>
{/* GitHub 市场功能暂时注释 */}
{/* <div className="flex items-center justify-start mb-2 mt-2 pl-[0.8rem] pr-[0.8rem]">
<Input
style={{
width: '300px',
@@ -178,7 +218,6 @@ export default function MCPMarketComponent({
/>
</PaginationItem>
{/* 如果总页数大于5，则只显示5页，如果总页数小于5，则显示所有页 */}
{(() => {
const totalPages = Math.ceil(totalCount / pageSize);
const maxVisiblePages = 5;
@@ -255,7 +294,7 @@ export default function MCPMarketComponent({
</div>
))
)}
</div>
</div> */}
</div>
);
}