steven_li
cdfc222c9f
- 引入AgentTeamOrchestrator支持多agent协同任务执行 - 增加第三方swarms库依赖并配置git协议替换以改善包管理 - 扩展DelegationManager支持团队任务调度和进度跟踪 - 实现中文bigram分词算法提升中文任务检索准确性 - 调整A2AClient和DelegationManager超时时间从30秒增至600秒 - 优化AgentRunResult状态判断逻辑增加有意义摘要检测 - 修改Dockerfile配置npm仓库镜像地址和git协议映射 - 更新CLI命令行接口支持网关端口配置传递 - 调整提供者超时配置机制增强请求稳定性 - 移除过时的support_group字段简化agent描述符结构 - 增强错误处理和进度事件报告机制改进用户体验
441 lines
16 KiB
TypeScript
441 lines
16 KiB
TypeScript
'use client';
|
||
|
||
import React, { useEffect, useState, useCallback } from 'react';
|
||
import {
|
||
Store,
|
||
RefreshCw,
|
||
Loader2,
|
||
AlertCircle,
|
||
Plus,
|
||
Trash2,
|
||
Download,
|
||
Check,
|
||
X,
|
||
Globe,
|
||
FolderOpen,
|
||
} from 'lucide-react';
|
||
import {
|
||
listMarketplaces,
|
||
addMarketplace,
|
||
removeMarketplace,
|
||
updateMarketplace,
|
||
listMarketplacePlugins,
|
||
installMarketplacePlugin,
|
||
uninstallPlugin,
|
||
} from '@/lib/api';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Input } from '@/components/ui/input';
|
||
import type { Marketplace, MarketplacePlugin } from '@/types';
|
||
import { pickAppText } from '@/lib/i18n/core';
|
||
import { useAppI18n } from '@/lib/i18n/provider';
|
||
|
||
export default function MarketplacePage() {
|
||
const { locale } = useAppI18n();
|
||
const [marketplaces, setMarketplaces] = useState<Marketplace[]>([]);
|
||
const [selectedMarketplace, setSelectedMarketplace] = useState<string | null>(null);
|
||
const [plugins, setPlugins] = useState<MarketplacePlugin[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [pluginsLoading, setPluginsLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [showAddForm, setShowAddForm] = useState(false);
|
||
const [addSource, setAddSource] = useState('');
|
||
const [adding, setAdding] = useState(false);
|
||
const [actionPlugin, setActionPlugin] = useState<string | null>(null);
|
||
const [updatingMarketplace, setUpdatingMarketplace] = useState<string | null>(null);
|
||
|
||
const loadMarketplaces = useCallback(async () => {
|
||
setLoading(true);
|
||
setError(null);
|
||
try {
|
||
const data = await listMarketplaces();
|
||
const list = Array.isArray(data) ? data : [];
|
||
setMarketplaces(list);
|
||
// Auto-select first marketplace if none selected or selected was removed
|
||
if (list.length > 0) {
|
||
setSelectedMarketplace((prev) => {
|
||
if (prev && list.some((m) => m.name === prev)) return prev;
|
||
return list[0].name;
|
||
});
|
||
} else {
|
||
setSelectedMarketplace(null);
|
||
setPlugins([]);
|
||
}
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '加载市场失败', 'Failed to load marketplaces'));
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadPlugins = useCallback(async (marketplaceName: string) => {
|
||
setPluginsLoading(true);
|
||
try {
|
||
const data = await listMarketplacePlugins(marketplaceName);
|
||
setPlugins(Array.isArray(data) ? data : []);
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '加载插件失败', 'Failed to load plugins'));
|
||
} finally {
|
||
setPluginsLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
loadMarketplaces();
|
||
}, [loadMarketplaces]);
|
||
|
||
useEffect(() => {
|
||
if (selectedMarketplace) {
|
||
loadPlugins(selectedMarketplace);
|
||
}
|
||
}, [selectedMarketplace, loadPlugins]);
|
||
|
||
const handleAdd = async () => {
|
||
if (!addSource.trim()) return;
|
||
setAdding(true);
|
||
setError(null);
|
||
try {
|
||
const marketplace = await addMarketplace(addSource.trim());
|
||
setAddSource('');
|
||
setShowAddForm(false);
|
||
await loadMarketplaces();
|
||
setSelectedMarketplace(marketplace.name);
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '添加市场失败', 'Failed to add the marketplace'));
|
||
} finally {
|
||
setAdding(false);
|
||
}
|
||
};
|
||
|
||
const handleRemove = async (name: string) => {
|
||
setError(null);
|
||
try {
|
||
await removeMarketplace(name);
|
||
if (selectedMarketplace === name) {
|
||
setSelectedMarketplace(null);
|
||
setPlugins([]);
|
||
}
|
||
await loadMarketplaces();
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '移除市场失败', 'Failed to remove the marketplace'));
|
||
}
|
||
};
|
||
|
||
const handleUpdateMarketplace = async (name: string) => {
|
||
setUpdatingMarketplace(name);
|
||
setError(null);
|
||
try {
|
||
await updateMarketplace(name);
|
||
await loadPlugins(name);
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '更新市场失败', 'Failed to update the marketplace'));
|
||
} finally {
|
||
setUpdatingMarketplace(null);
|
||
}
|
||
};
|
||
|
||
const handleUpdatePlugin = async (marketplaceName: string, pluginName: string) => {
|
||
setActionPlugin(pluginName);
|
||
setError(null);
|
||
try {
|
||
await installMarketplacePlugin(marketplaceName, pluginName);
|
||
await loadPlugins(marketplaceName);
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '更新插件失败', 'Failed to update the plugin'));
|
||
} finally {
|
||
setActionPlugin(null);
|
||
}
|
||
};
|
||
|
||
const handleInstall = async (marketplaceName: string, pluginName: string) => {
|
||
setActionPlugin(pluginName);
|
||
setError(null);
|
||
try {
|
||
await installMarketplacePlugin(marketplaceName, pluginName);
|
||
await loadPlugins(marketplaceName);
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '安装插件失败', 'Failed to install the plugin'));
|
||
} finally {
|
||
setActionPlugin(null);
|
||
}
|
||
};
|
||
|
||
const handleUninstall = async (pluginName: string) => {
|
||
setActionPlugin(pluginName);
|
||
setError(null);
|
||
try {
|
||
await uninstallPlugin(pluginName);
|
||
if (selectedMarketplace) {
|
||
await loadPlugins(selectedMarketplace);
|
||
}
|
||
} catch (err: any) {
|
||
setError(err.message || pickAppText(locale, '卸载插件失败', 'Failed to uninstall the plugin'));
|
||
} finally {
|
||
setActionPlugin(null);
|
||
}
|
||
};
|
||
|
||
const handleRefresh = async () => {
|
||
await loadMarketplaces();
|
||
if (selectedMarketplace) {
|
||
await loadPlugins(selectedMarketplace);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center py-20">
|
||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||
{/* Page header */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||
<Store className="w-6 h-6" />
|
||
{pickAppText(locale, '插件市场', 'Plugin marketplace')}
|
||
</h1>
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
{pickAppText(locale, '浏览并安装已注册市场中的插件', 'Browse and install plugins from registered marketplaces')}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
onClick={() => setShowAddForm((v) => !v)}
|
||
variant="outline"
|
||
size="sm"
|
||
>
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
{pickAppText(locale, '添加市场', 'Add marketplace')}
|
||
</Button>
|
||
<Button onClick={handleRefresh} variant="outline" size="sm">
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
{pickAppText(locale, '刷新', 'Refresh')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error */}
|
||
{error && (
|
||
<Card className="border-destructive">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center justify-between gap-2 text-destructive text-sm">
|
||
<div className="flex items-center gap-2">
|
||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||
{error}
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="shrink-0 h-6 w-6 p-0"
|
||
onClick={() => setError(null)}
|
||
>
|
||
<X className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Add marketplace form */}
|
||
{showAddForm && (
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center gap-2">
|
||
<Input
|
||
placeholder={pickAppText(locale, '本地路径或 Git 地址（例如 /path/to/marketplace 或 https://github.com/...）', 'Local path or Git URL (for example /path/to/marketplace or https://github.com/...)')}
|
||
value={addSource}
|
||
onChange={(e) => setAddSource(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === 'Enter') handleAdd();
|
||
}}
|
||
disabled={adding}
|
||
className="flex-1"
|
||
/>
|
||
<Button onClick={handleAdd} disabled={adding || !addSource.trim()} size="sm">
|
||
{adding ? (
|
||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
||
) : (
|
||
<Plus className="w-4 h-4 mr-2" />
|
||
)}
|
||
{pickAppText(locale, '添加', 'Add')}
|
||
</Button>
|
||
<Button
|
||
onClick={() => {
|
||
setShowAddForm(false);
|
||
setAddSource('');
|
||
}}
|
||
variant="ghost"
|
||
size="sm"
|
||
>
|
||
{pickAppText(locale, '取消', 'Cancel')}
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Marketplace tabs */}
|
||
{marketplaces.length > 0 && (
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
{marketplaces.map((marketplace) => (
|
||
<div key={marketplace.name} className="flex items-center gap-0.5">
|
||
<Button
|
||
variant={selectedMarketplace === marketplace.name ? 'default' : 'outline'}
|
||
size="sm"
|
||
onClick={() => setSelectedMarketplace(marketplace.name)}
|
||
className="gap-1.5"
|
||
>
|
||
{marketplace.type === 'git' ? (
|
||
<Globe className="w-3.5 h-3.5" />
|
||
) : (
|
||
<FolderOpen className="w-3.5 h-3.5" />
|
||
)}
|
||
{marketplace.name}
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 w-8 p-0 text-muted-foreground hover:text-primary"
|
||
disabled={updatingMarketplace === marketplace.name}
|
||
onClick={() => handleUpdateMarketplace(marketplace.name)}
|
||
title={pickAppText(locale, '更新市场', 'Update marketplace')}
|
||
>
|
||
{updatingMarketplace === marketplace.name ? (
|
||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||
) : (
|
||
<RefreshCw className="w-3.5 h-3.5" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
|
||
onClick={() => handleRemove(marketplace.name)}
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Empty state */}
|
||
{marketplaces.length === 0 && !error && (
|
||
<Card>
|
||
<CardContent className="py-16 text-center text-muted-foreground">
|
||
<Store className="w-12 h-12 mx-auto mb-4 opacity-30" />
|
||
<p className="font-medium">{pickAppText(locale, '还没有注册任何市场', 'No marketplaces are registered yet')}</p>
|
||
<p className="text-sm mt-2 max-w-sm mx-auto">
|
||
{pickAppText(locale, '点击上方的', 'Use the')}<strong>{pickAppText(locale, '添加市场', 'Add marketplace')}</strong>{pickAppText(locale, '，填入本地路径或 Git 地址即可开始使用。', ' action above and provide a local path or Git URL to get started.')}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Plugin list */}
|
||
{selectedMarketplace && (
|
||
<>
|
||
{pluginsLoading ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||
</div>
|
||
) : plugins.length === 0 ? (
|
||
<Card>
|
||
<CardContent className="py-12 text-center text-muted-foreground">
|
||
<Store className="w-10 h-10 mx-auto mb-3 opacity-30" />
|
||
<p className="font-medium">{pickAppText(locale, '暂无可用插件', 'No plugins available')}</p>
|
||
<p className="text-sm mt-1">{pickAppText(locale, '这个市场里暂时还没有插件。', 'There are no plugins in this marketplace yet.')}</p>
|
||
</CardContent>
|
||
</Card>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{plugins.map((plugin) => (
|
||
<Card key={plugin.name}>
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<CardTitle className="text-base font-semibold">
|
||
{plugin.name}
|
||
</CardTitle>
|
||
{plugin.installed && (
|
||
<Badge variant="secondary" className="text-xs gap-1">
|
||
<Check className="w-3 h-3" />
|
||
{pickAppText(locale, '已安装', 'Installed')}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
{plugin.description && (
|
||
<p className="text-sm text-muted-foreground mt-1 leading-relaxed">
|
||
{plugin.description}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="shrink-0 flex items-center gap-2">
|
||
{plugin.installed ? (
|
||
<>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={actionPlugin === plugin.name}
|
||
onClick={() =>
|
||
handleUpdatePlugin(plugin.marketplace_name, plugin.name)
|
||
}
|
||
>
|
||
{actionPlugin === plugin.name ? (
|
||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
||
) : (
|
||
<RefreshCw className="w-4 h-4 mr-2" />
|
||
)}
|
||
{pickAppText(locale, '更新', 'Update')}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={actionPlugin === plugin.name}
|
||
onClick={() => handleUninstall(plugin.name)}
|
||
>
|
||
{actionPlugin === plugin.name ? (
|
||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
||
) : (
|
||
<Trash2 className="w-4 h-4 mr-2" />
|
||
)}
|
||
{pickAppText(locale, '卸载', 'Uninstall')}
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<Button
|
||
variant="default"
|
||
size="sm"
|
||
disabled={actionPlugin === plugin.name}
|
||
onClick={() =>
|
||
handleInstall(plugin.marketplace_name, plugin.name)
|
||
}
|
||
>
|
||
{actionPlugin === plugin.name ? (
|
||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
||
) : (
|
||
<Download className="w-4 h-4 mr-2" />
|
||
)}
|
||
{pickAppText(locale, '安装', 'Install')}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|