mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-02 03:55:55 +00:00
feat: polish extension detail pages
This commit is contained in:
Junyan Qin
@@ -314,6 +314,7 @@ class RuntimeMCPSession:
|
||||
{
|
||||
'name': tool.name,
|
||||
'description': tool.description,
|
||||
'parameters': tool.parameters,
|
||||
}
|
||||
for tool in self.get_tools()
|
||||
],
|
||||
|
||||
@@ -513,6 +513,36 @@ class TestGetRuntimeInfoDict:
|
||||
assert info['status'] == 'connecting'
|
||||
assert 'box_session_id' not in info
|
||||
|
||||
def test_runtime_tools_include_parameters(self, mcp_module):
|
||||
s = _make_session(
|
||||
mcp_module,
|
||||
{
|
||||
'name': 'test',
|
||||
'uuid': 'test-uuid',
|
||||
'mode': 'sse',
|
||||
'command': 'python',
|
||||
'args': [],
|
||||
},
|
||||
)
|
||||
s.functions = [
|
||||
SimpleNamespace(
|
||||
name='create-service',
|
||||
description='Create a service',
|
||||
parameters={
|
||||
'type': 'object',
|
||||
'properties': {
|
||||
'project_id': {'type': 'string'},
|
||||
},
|
||||
'required': ['project_id'],
|
||||
},
|
||||
)
|
||||
]
|
||||
|
||||
info = s.get_runtime_info_dict()
|
||||
|
||||
assert info['tools'][0]['parameters']['properties']['project_id']['type'] == 'string'
|
||||
assert info['tools'][0]['parameters']['required'] == ['project_id']
|
||||
|
||||
def test_stdio_session_includes_box_info(self, mcp_module):
|
||||
ap = _make_ap()
|
||||
ap.box_service.available = True
|
||||
|
||||
@@ -233,6 +233,27 @@ function mcpStatusColor(item: SidebarEntityItem): string {
|
||||
}
|
||||
}
|
||||
|
||||
function MCPStatusIcon({
|
||||
item,
|
||||
borderClass,
|
||||
}: {
|
||||
item: SidebarEntityItem;
|
||||
borderClass: string;
|
||||
}) {
|
||||
return (
|
||||
<span className="relative shrink-0">
|
||||
<Server className="size-4 !text-blue-500" />
|
||||
<span
|
||||
className={cn(
|
||||
'absolute -bottom-1 -right-1 size-3 rounded-full border-2',
|
||||
borderClass,
|
||||
mcpStatusColor(item),
|
||||
)}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Plugin operation type enum
|
||||
enum PluginOperationType {
|
||||
DELETE = 'DELETE',
|
||||
@@ -514,7 +535,7 @@ function NavItems({
|
||||
}}
|
||||
>
|
||||
{item.extensionType === 'mcp' ? (
|
||||
<Server className="size-4 shrink-0 !text-blue-500" />
|
||||
<MCPStatusIcon item={item} borderClass="border-popover" />
|
||||
) : item.extensionType === 'skill' ? (
|
||||
<Sparkles className="size-4 shrink-0 !text-blue-500" />
|
||||
) : item.emoji ? (
|
||||
@@ -574,7 +595,10 @@ function NavItems({
|
||||
}}
|
||||
>
|
||||
{item.extensionType === 'mcp' ? (
|
||||
<Server className="size-4 shrink-0 !text-blue-500" />
|
||||
<MCPStatusIcon
|
||||
item={item}
|
||||
borderClass="border-sidebar"
|
||||
/>
|
||||
) : item.extensionType === 'skill' ? (
|
||||
<Sparkles className="size-4 shrink-0 !text-blue-500" />
|
||||
) : item.emoji ? (
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -23,7 +24,7 @@ import type { MCPFormHandle } from '@/app/home/mcp/components/mcp-form/MCPForm';
|
||||
import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
|
||||
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { Server, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
export default function MCPDetailContent({ id }: { id: string }) {
|
||||
@@ -32,19 +33,18 @@ export default function MCPDetailContent({ id }: { id: string }) {
|
||||
const { t } = useTranslation();
|
||||
const { refreshMCPServers, mcpServers, setDetailEntityName } =
|
||||
useSidebarData();
|
||||
const server = mcpServers.find((s) => s.id === id);
|
||||
const displayName = (server?.name ?? id).replace(/__/g, '/');
|
||||
|
||||
// Set breadcrumb entity name
|
||||
useEffect(() => {
|
||||
if (isCreateMode) {
|
||||
setDetailEntityName(t('mcp.createServer'));
|
||||
} else {
|
||||
const server = mcpServers.find((s) => s.id === id);
|
||||
// Convert __ back to / for display (since / is used as separator in stored names)
|
||||
const displayName = (server?.name ?? id).replace(/__/g, '/');
|
||||
setDetailEntityName(displayName);
|
||||
}
|
||||
return () => setDetailEntityName(null);
|
||||
}, [id, isCreateMode, mcpServers, setDetailEntityName, t]);
|
||||
}, [displayName, isCreateMode, setDetailEntityName, t]);
|
||||
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
|
||||
@@ -144,10 +144,17 @@ export default function MCPDetailContent({ id }: { id: string }) {
|
||||
if (isCreateMode) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between pb-4 shrink-0">
|
||||
<h1 className="text-xl font-semibold">{t('mcp.createServer')}</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<h1 className="truncate text-xl font-semibold">
|
||||
{t('mcp.createServer')}
|
||||
</h1>
|
||||
<Badge variant="outline" className="shrink-0 text-[0.7rem]">
|
||||
<Server className="size-3.5" />
|
||||
{t('mcp.title')}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -177,47 +184,89 @@ export default function MCPDetailContent({ id }: { id: string }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
<div className="mx-auto max-w-3xl pb-8">
|
||||
<MCPForm
|
||||
ref={formRef}
|
||||
initServerName={undefined}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onNewServerCreated={handleNewServerCreated}
|
||||
onTestingChange={setMcpTesting}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<MCPForm
|
||||
ref={formRef}
|
||||
initServerName={undefined}
|
||||
layout="split"
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onNewServerCreated={handleNewServerCreated}
|
||||
onTestingChange={setMcpTesting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const enableControl = enableLoaded && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('common.enable')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label
|
||||
htmlFor="mcp-enable-switch"
|
||||
className="cursor-pointer text-sm font-medium"
|
||||
>
|
||||
{t('common.enable')}
|
||||
</Label>
|
||||
<Switch
|
||||
id="mcp-enable-switch"
|
||||
checked={serverEnabled}
|
||||
onCheckedChange={handleEnableToggle}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const editActions = (
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">
|
||||
{t('mcp.dangerZone')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('mcp.dangerZoneDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{t('mcp.deleteMCPAction')}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('mcp.deleteMCPHint')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="shrink-0"
|
||||
>
|
||||
<Trash2 className="mr-1.5 size-4" />
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
// ==================== Edit Mode ====================
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header: title + enable switch + save button */}
|
||||
<div className="flex items-center justify-between pb-4 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-xl font-semibold">{t('mcp.editServer')}</h1>
|
||||
{enableLoaded && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
id="mcp-enable-switch"
|
||||
checked={serverEnabled}
|
||||
onCheckedChange={handleEnableToggle}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="mcp-enable-switch"
|
||||
className="text-sm text-muted-foreground cursor-pointer"
|
||||
>
|
||||
{t('common.enable')}
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<h1 className="truncate text-xl font-semibold">{displayName}</h1>
|
||||
<Badge variant="outline" className="shrink-0 text-[0.7rem]">
|
||||
<Server className="size-3.5" />
|
||||
{t('mcp.title')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -232,51 +281,18 @@ export default function MCPDetailContent({ id }: { id: string }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
<div className="mx-auto max-w-3xl space-y-6 pb-8">
|
||||
<MCPForm
|
||||
ref={formRef}
|
||||
initServerName={id}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onNewServerCreated={handleNewServerCreated}
|
||||
onDirtyChange={setFormDirty}
|
||||
onTestingChange={setMcpTesting}
|
||||
/>
|
||||
|
||||
{/* Card: Danger Zone */}
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">
|
||||
{t('mcp.dangerZone')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('mcp.dangerZoneDescription')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">
|
||||
{t('mcp.deleteMCPAction')}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('mcp.deleteMCPHint')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
<Trash2 className="size-4 mr-1.5" />
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<MCPForm
|
||||
ref={formRef}
|
||||
initServerName={id}
|
||||
layout="split"
|
||||
sideHeader={enableControl}
|
||||
sideFooter={editActions}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
onNewServerCreated={handleNewServerCreated}
|
||||
onDirtyChange={setFormDirty}
|
||||
onTestingChange={setMcpTesting}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React, {
|
||||
type ReactNode,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
@@ -6,7 +7,8 @@ import React, {
|
||||
useImperativeHandle,
|
||||
} from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Loader2, XCircle, Trash2 } from 'lucide-react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Braces, Loader2, Trash2, Wrench, XCircle } from 'lucide-react';
|
||||
import { Resolver, useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
@@ -29,6 +31,14 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import {
|
||||
MCPServerRuntimeInfo,
|
||||
@@ -41,7 +51,6 @@ import {
|
||||
} from '@/app/infra/entities/api';
|
||||
import { CustomApiError } from '@/app/infra/entities/common';
|
||||
|
||||
// Status display for test / connecting / error states
|
||||
function StatusDisplay({
|
||||
testing,
|
||||
runtimeInfo,
|
||||
@@ -49,12 +58,12 @@ function StatusDisplay({
|
||||
}: {
|
||||
testing: boolean;
|
||||
runtimeInfo: MCPServerRuntimeInfo;
|
||||
t: (key: string) => string;
|
||||
t: TFunction;
|
||||
}) {
|
||||
if (testing) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-blue-600">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<Loader2 className="size-5 animate-spin" />
|
||||
<span className="font-medium">{t('mcp.testing')}</span>
|
||||
</div>
|
||||
);
|
||||
@@ -63,7 +72,7 @@ function StatusDisplay({
|
||||
if (runtimeInfo.status === MCPSessionStatus.CONNECTING) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 text-blue-600">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<Loader2 className="size-5 animate-spin" />
|
||||
<span className="font-medium">{t('mcp.connecting')}</span>
|
||||
</div>
|
||||
);
|
||||
@@ -72,11 +81,11 @@ function StatusDisplay({
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2 text-red-600">
|
||||
<XCircle className="w-5 h-5" />
|
||||
<XCircle className="size-5" />
|
||||
<span className="font-medium">{t('mcp.connectionFailed')}</span>
|
||||
</div>
|
||||
{runtimeInfo.error_message && (
|
||||
<div className="text-sm text-red-500 pl-7">
|
||||
<div className="pl-7 text-sm text-red-500">
|
||||
{runtimeInfo.error_message}
|
||||
</div>
|
||||
)}
|
||||
@@ -84,25 +93,181 @@ function StatusDisplay({
|
||||
);
|
||||
}
|
||||
|
||||
// Tools list component
|
||||
function ToolsList({ tools }: { tools: MCPTool[] }) {
|
||||
type ToolParameter = {
|
||||
name: string;
|
||||
type?: string;
|
||||
description?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
|
||||
function getToolParameters(parameters?: object): ToolParameter[] {
|
||||
if (!parameters || typeof parameters !== 'object') return [];
|
||||
|
||||
const schema = parameters as {
|
||||
properties?: Record<
|
||||
string,
|
||||
{ type?: string; description?: string; title?: string }
|
||||
>;
|
||||
required?: string[];
|
||||
};
|
||||
|
||||
if (schema.properties && typeof schema.properties === 'object') {
|
||||
const required = new Set(schema.required ?? []);
|
||||
return Object.entries(schema.properties).map(([name, parameter]) => ({
|
||||
name,
|
||||
type: parameter?.type,
|
||||
description: parameter?.description || parameter?.title,
|
||||
required: required.has(name),
|
||||
}));
|
||||
}
|
||||
|
||||
return Object.keys(parameters).map((name) => ({ name }));
|
||||
}
|
||||
|
||||
function ToolsList({ tools, t }: { tools: MCPTool[]; t: TFunction }) {
|
||||
return (
|
||||
<div className="max-h-[300px] space-y-1 overflow-y-auto">
|
||||
{tools.map((tool, index) => (
|
||||
<div key={index} className="rounded-md px-1 py-2">
|
||||
<div className="text-sm font-medium">{tool.name}</div>
|
||||
{tool.description && (
|
||||
<div className="mt-0.5 text-xs text-muted-foreground">
|
||||
{tool.description}
|
||||
<div className="grid gap-3 pb-6 xl:grid-cols-2">
|
||||
{tools.map((tool, index) => {
|
||||
const parameters = getToolParameters(tool.parameters);
|
||||
const visibleParameters = parameters.slice(0, 4);
|
||||
const hiddenParameterCount =
|
||||
parameters.length - visibleParameters.length;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${tool.name}-${index}`}
|
||||
className="rounded-lg border bg-background p-4 transition-colors hover:border-primary/40 hover:bg-muted/20"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
|
||||
<Wrench className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-3">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="truncate font-mono text-sm font-semibold">
|
||||
{tool.name}
|
||||
</span>
|
||||
<Badge variant="secondary" className="h-5 shrink-0 px-1.5">
|
||||
#{index + 1}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="line-clamp-4 text-xs leading-relaxed text-muted-foreground">
|
||||
{tool.description || t('market.noDescription')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
|
||||
<Braces className="size-3.5" />
|
||||
<span>
|
||||
{t('mcp.parameterCount', {
|
||||
count: parameters.length,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{visibleParameters.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{visibleParameters.map((parameter) => (
|
||||
<span
|
||||
key={parameter.name}
|
||||
title={parameter.description || parameter.name}
|
||||
className="inline-flex max-w-full items-center gap-1 rounded-md border bg-muted/40 px-2 py-1 text-xs"
|
||||
>
|
||||
<span className="truncate font-mono">
|
||||
{parameter.name}
|
||||
</span>
|
||||
{parameter.type && (
|
||||
<span className="shrink-0 text-muted-foreground">
|
||||
{parameter.type}
|
||||
</span>
|
||||
)}
|
||||
{parameter.required && (
|
||||
<span className="shrink-0 text-destructive">*</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
{hiddenParameterCount > 0 && (
|
||||
<span className="inline-flex items-center rounded-md border bg-muted/40 px-2 py-1 text-xs text-muted-foreground">
|
||||
+{hiddenParameterCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{t('mcp.noParameters')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getFormSchema = (t: (key: string) => string) =>
|
||||
function RuntimePanel({
|
||||
isEditMode,
|
||||
mcpTesting,
|
||||
runtimeInfo,
|
||||
t,
|
||||
}: {
|
||||
isEditMode: boolean;
|
||||
mcpTesting: boolean;
|
||||
runtimeInfo: MCPServerRuntimeInfo | null;
|
||||
t: TFunction;
|
||||
}) {
|
||||
if (!isEditMode || !runtimeInfo) {
|
||||
return (
|
||||
<div className="flex min-h-[280px] items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
|
||||
{t('mcp.noToolsFound')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isConnected =
|
||||
!mcpTesting && runtimeInfo.status === MCPSessionStatus.CONNECTED;
|
||||
const tools = runtimeInfo.tools || [];
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<div className="flex flex-wrap items-start justify-between gap-2">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-sm font-medium">{t('mcp.title')}</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{isConnected
|
||||
? t('mcp.toolCount', { count: tools.length })
|
||||
: t('mcp.connectionFailedStatus')}
|
||||
</p>
|
||||
</div>
|
||||
{isConnected && (
|
||||
<Badge variant="outline">
|
||||
{t('mcp.toolCount', { count: tools.length })}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isConnected && (
|
||||
<div className="rounded-md bg-muted/40 p-3">
|
||||
<StatusDisplay testing={mcpTesting} runtimeInfo={runtimeInfo} t={t} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isConnected && tools.length > 0 && <ToolsList tools={tools} t={t} />}
|
||||
|
||||
{isConnected && tools.length === 0 && (
|
||||
<div className="flex min-h-[220px] items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground">
|
||||
{t('mcp.noToolsFound')}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const getFormSchema = (t: TFunction) =>
|
||||
z
|
||||
.object({
|
||||
name: z
|
||||
@@ -165,9 +330,11 @@ interface MCPFormProps {
|
||||
onDraftChange?: (draft: MCPFormDraft) => void;
|
||||
onDirtyChange?: (dirty: boolean) => void;
|
||||
onTestingChange?: (testing: boolean) => void;
|
||||
layout?: 'stacked' | 'split';
|
||||
sideHeader?: ReactNode;
|
||||
sideFooter?: ReactNode;
|
||||
}
|
||||
|
||||
// Handle exposed to parent via ref
|
||||
export interface MCPFormHandle {
|
||||
testMcp: () => void;
|
||||
isTesting: boolean;
|
||||
@@ -182,6 +349,9 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
onDraftChange,
|
||||
onDirtyChange,
|
||||
onTestingChange,
|
||||
layout = 'stacked',
|
||||
sideHeader,
|
||||
sideFooter,
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
@@ -205,9 +375,7 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
},
|
||||
});
|
||||
|
||||
// Track whether initial data loading is complete (to avoid marking form dirty)
|
||||
const isInitializing = useRef(true);
|
||||
|
||||
const [extraArgs, setExtraArgs] = useState<
|
||||
{ key: string; type: 'string' | 'number' | 'boolean'; value: string }[]
|
||||
>([]);
|
||||
@@ -217,21 +385,17 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
null,
|
||||
);
|
||||
const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
const watchMode = form.watch('mode');
|
||||
|
||||
// Notify parent when dirty state changes
|
||||
const { isDirty } = form.formState;
|
||||
useEffect(() => {
|
||||
onDirtyChange?.(isDirty);
|
||||
}, [isDirty, onDirtyChange]);
|
||||
|
||||
// Notify parent when testing state changes
|
||||
useEffect(() => {
|
||||
onTestingChange?.(mcpTesting);
|
||||
}, [mcpTesting, onTestingChange]);
|
||||
|
||||
// Expose test action and testing state to parent
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
@@ -241,7 +405,6 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
[mcpTesting],
|
||||
);
|
||||
|
||||
// Load server data
|
||||
useEffect(() => {
|
||||
isInitializing.current = true;
|
||||
if (isEditMode && initServerName) {
|
||||
@@ -288,7 +451,6 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
return () => subscription.unsubscribe();
|
||||
}, [form, isEditMode, onDraftChange, extraArgs, stdioArgs]);
|
||||
|
||||
// Poll for updates when runtime_info status is CONNECTING
|
||||
useEffect(() => {
|
||||
if (
|
||||
!isEditMode ||
|
||||
@@ -323,7 +485,7 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
const server = resp.server ?? resp;
|
||||
|
||||
const formValues: FormValues = {
|
||||
name: server.name.replace(/__/g, '/'), // Convert __ back to / for display
|
||||
name: server.name.replace(/__/g, '/'),
|
||||
mode: server.mode,
|
||||
url: '',
|
||||
command: '',
|
||||
@@ -379,15 +541,8 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
|
||||
setExtraArgs(newExtraArgs);
|
||||
setStdioArgs(newStdioArgs);
|
||||
|
||||
// Use form.reset so isDirty stays false after initial load
|
||||
form.reset(formValues);
|
||||
|
||||
if (server.runtime_info) {
|
||||
setRuntimeInfo(server.runtime_info);
|
||||
} else {
|
||||
setRuntimeInfo(null);
|
||||
}
|
||||
setRuntimeInfo(server.runtime_info ?? null);
|
||||
} catch (error) {
|
||||
console.error('Failed to load server:', error);
|
||||
toast.error(t('mcp.loadFailed'));
|
||||
@@ -411,7 +566,7 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
enable: true,
|
||||
extra_args: {
|
||||
url: value.url!,
|
||||
headers: headers,
|
||||
headers,
|
||||
timeout: value.timeout,
|
||||
ssereadtimeout: value.ssereadtimeout,
|
||||
},
|
||||
@@ -423,7 +578,7 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
enable: true,
|
||||
extra_args: {
|
||||
url: value.url!,
|
||||
headers: headers,
|
||||
headers,
|
||||
timeout: value.timeout,
|
||||
},
|
||||
};
|
||||
@@ -433,7 +588,6 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
value.extra_args?.forEach((arg) => {
|
||||
env[arg.key] = String(arg.value);
|
||||
});
|
||||
const args = value.args?.map((arg) => arg.value) || [];
|
||||
|
||||
serverConfig = {
|
||||
name: value.name,
|
||||
@@ -441,8 +595,8 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
enable: true,
|
||||
extra_args: {
|
||||
command: value.command!,
|
||||
args: args,
|
||||
env: env,
|
||||
args: value.args?.map((arg) => arg.value) || [],
|
||||
env,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -450,7 +604,6 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
if (isEditMode && initServerName) {
|
||||
await httpClient.updateMCPServer(initServerName, serverConfig);
|
||||
toast.success(t('mcp.updateSuccess'));
|
||||
// Reset dirty baseline to current values
|
||||
form.reset(form.getValues());
|
||||
onFormSubmit();
|
||||
} else {
|
||||
@@ -504,7 +657,7 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
|
||||
const { task_id } = await httpClient.testMCPServer('_', {
|
||||
name: form.getValues('name'),
|
||||
mode: mode,
|
||||
mode,
|
||||
enable: true,
|
||||
extra_args: extraArgsData,
|
||||
} as MCPServer);
|
||||
@@ -604,121 +757,108 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
form.setValue('args', newArgs, { shouldDirty: !isInitializing.current });
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
id="mcp-form"
|
||||
onSubmit={form.handleSubmit(handleFormSubmit)}
|
||||
className="space-y-5"
|
||||
>
|
||||
{/* Runtime info: status + tools (edit mode only) */}
|
||||
{isEditMode && runtimeInfo && (
|
||||
<section className="space-y-3">
|
||||
<h3 className="text-sm font-medium">{t('mcp.title')}</h3>
|
||||
{(mcpTesting ||
|
||||
runtimeInfo.status !== MCPSessionStatus.CONNECTED) && (
|
||||
<div className="rounded-md bg-muted/40 p-3">
|
||||
<StatusDisplay
|
||||
testing={mcpTesting}
|
||||
runtimeInfo={runtimeInfo}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!mcpTesting &&
|
||||
runtimeInfo.status === MCPSessionStatus.CONNECTED &&
|
||||
runtimeInfo.tools?.length > 0 && (
|
||||
<>
|
||||
<div className="text-sm font-medium">
|
||||
{t('mcp.toolCount', {
|
||||
count: runtimeInfo.tools?.length || 0,
|
||||
})}
|
||||
</div>
|
||||
<ToolsList tools={runtimeInfo.tools} />
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Server configuration */}
|
||||
<section className="space-y-4">
|
||||
{isEditMode && (
|
||||
<h3 className="text-sm font-medium">{t('mcp.editServer')}</h3>
|
||||
const configSection = (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{isEditMode ? t('mcp.editServer') : t('mcp.createServer')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('mcp.extraParametersDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.name')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isEditMode} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.name')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.serverMode')}</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
value={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isEditMode} />
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('mcp.selectMode')} />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<SelectContent>
|
||||
<SelectItem value="http">{t('mcp.http')}</SelectItem>
|
||||
<SelectItem value="stdio">{t('mcp.stdio')}</SelectItem>
|
||||
<SelectItem value="sse">{t('mcp.sse')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="mode"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.serverMode')}</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
value={field.value}
|
||||
>
|
||||
{(watchMode === 'sse' || watchMode === 'http') && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.url')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder={t('mcp.selectMode')} />
|
||||
</SelectTrigger>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="http">{t('mcp.http')}</SelectItem>
|
||||
<SelectItem value="stdio">{t('mcp.stdio')}</SelectItem>
|
||||
<SelectItem value="sse">{t('mcp.sse')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{(watchMode === 'sse' || watchMode === 'http') && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="timeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.timeout')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t('mcp.timeout')}
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{watchMode === 'sse' && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="url"
|
||||
name="ssereadtimeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.url')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="timeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.timeout')}</FormLabel>
|
||||
<FormLabel>{t('mcp.sseTimeout')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t('mcp.timeout')}
|
||||
placeholder={t('mcp.sseTimeoutDescription')}
|
||||
{...field}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
/>
|
||||
@@ -727,126 +867,147 @@ const MCPForm = forwardRef<MCPFormHandle, MCPFormProps>(function MCPForm(
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{watchMode === 'sse' && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="ssereadtimeout"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.sseTimeout')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={t('mcp.sseTimeoutDescription')}
|
||||
{...field}
|
||||
onChange={(e) =>
|
||||
field.onChange(Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{watchMode === 'stdio' && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="command"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.command')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
|
||||
{watchMode === 'stdio' && (
|
||||
<>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="command"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{t('mcp.command')}
|
||||
<span className="text-destructive">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.args')}</FormLabel>
|
||||
<div className="space-y-2">
|
||||
{stdioArgs.map((arg, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder={t('mcp.args')}
|
||||
value={arg.value}
|
||||
onChange={(e) => updateStdioArg(index, e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 text-red-500 hover:text-red-600"
|
||||
onClick={() => removeStdioArg(index)}
|
||||
>
|
||||
<Trash2 className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" variant="outline" onClick={addStdioArg}>
|
||||
{t('mcp.addArgument')}
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
<FormItem>
|
||||
<FormLabel>{t('mcp.args')}</FormLabel>
|
||||
<div className="space-y-2">
|
||||
{stdioArgs.map((arg, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder={t('mcp.args')}
|
||||
value={arg.value}
|
||||
onChange={(e) => updateStdioArg(index, e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 text-red-500 hover:text-red-600"
|
||||
onClick={() => removeStdioArg(index)}
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" variant="outline" onClick={addStdioArg}>
|
||||
{t('mcp.addArgument')}
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{watchMode === 'sse' || watchMode === 'http'
|
||||
? t('mcp.headers')
|
||||
: t('mcp.env')}
|
||||
</FormLabel>
|
||||
<div className="space-y-2">
|
||||
{extraArgs.map((arg, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder={t('models.keyName')}
|
||||
value={arg.key}
|
||||
onChange={(e) => updateExtraArg(index, 'key', e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
placeholder={t('models.value')}
|
||||
value={arg.value}
|
||||
onChange={(e) =>
|
||||
updateExtraArg(index, 'value', e.target.value)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 text-red-500 hover:text-red-600"
|
||||
onClick={() => removeExtraArg(index)}
|
||||
>
|
||||
<Trash2 className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" variant="outline" onClick={addExtraArg}>
|
||||
{watchMode === 'sse' || watchMode === 'http'
|
||||
? t('mcp.headers')
|
||||
: t('mcp.env')}
|
||||
</FormLabel>
|
||||
<div className="space-y-2">
|
||||
{extraArgs.map((arg, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder={t('models.keyName')}
|
||||
value={arg.key}
|
||||
onChange={(e) =>
|
||||
updateExtraArg(index, 'key', e.target.value)
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
placeholder={t('models.value')}
|
||||
value={arg.value}
|
||||
onChange={(e) =>
|
||||
updateExtraArg(index, 'value', e.target.value)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 text-red-500 hover:text-red-600"
|
||||
onClick={() => removeExtraArg(index)}
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button type="button" variant="outline" onClick={addExtraArg}>
|
||||
{watchMode === 'sse' || watchMode === 'http'
|
||||
? t('mcp.addHeader')
|
||||
: t('mcp.addEnvVar')}
|
||||
</Button>
|
||||
</div>
|
||||
<FormDescription>
|
||||
{t('mcp.extraParametersDescription')}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</section>
|
||||
? t('mcp.addHeader')
|
||||
: t('mcp.addEnvVar')}
|
||||
</Button>
|
||||
</div>
|
||||
<FormDescription>
|
||||
{t('mcp.extraParametersDescription')}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const runtimePanel = (
|
||||
<RuntimePanel
|
||||
isEditMode={isEditMode}
|
||||
mcpTesting={mcpTesting}
|
||||
runtimeInfo={runtimeInfo}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
|
||||
if (layout === 'split') {
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
id="mcp-form"
|
||||
onSubmit={form.handleSubmit(handleFormSubmit)}
|
||||
className="flex h-full min-h-0 max-w-full flex-col gap-6 overflow-y-auto lg:flex-row lg:overflow-hidden"
|
||||
>
|
||||
<div className="space-y-5 pb-6 lg:min-h-0 lg:w-[360px] lg:flex-shrink-0 lg:overflow-y-auto lg:overflow-x-hidden xl:w-[400px]">
|
||||
{sideHeader}
|
||||
{configSection}
|
||||
{sideFooter}
|
||||
</div>
|
||||
<div className="hidden w-px shrink-0 bg-border lg:block" />
|
||||
<div className="min-w-0 flex-1 pb-6 lg:min-h-0 lg:overflow-y-auto lg:overflow-x-hidden">
|
||||
{runtimePanel}
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
id="mcp-form"
|
||||
onSubmit={form.handleSubmit(handleFormSubmit)}
|
||||
className="space-y-5"
|
||||
>
|
||||
{sideHeader}
|
||||
{runtimePanel}
|
||||
{configSection}
|
||||
{sideFooter}
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@@ -1,10 +1,34 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
|
||||
import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
|
||||
import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
|
||||
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Bug } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import { Plugin } from '@/app/infra/entities/plugin';
|
||||
import { extractI18nObject } from '@/i18n/I18nProvider';
|
||||
import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask';
|
||||
import { Bug, Puzzle, Trash2 } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
/**
|
||||
* Plugin detail page content.
|
||||
@@ -12,7 +36,11 @@ import { Bug } from 'lucide-react';
|
||||
*/
|
||||
export default function PluginDetailContent({ id }: { id: string }) {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const { plugins, setDetailEntityName, refreshPlugins } = useSidebarData();
|
||||
const [pluginInfo, setPluginInfo] = useState<Plugin | null>(null);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [deleteData, setDeleteData] = useState(false);
|
||||
|
||||
// Parse "author/name" composite key
|
||||
const slashIndex = id.indexOf('/');
|
||||
@@ -20,6 +48,23 @@ export default function PluginDetailContent({ id }: { id: string }) {
|
||||
const pluginName = slashIndex >= 0 ? id.substring(slashIndex + 1) : id;
|
||||
|
||||
const plugin = plugins.find((p) => p.id === id);
|
||||
const title =
|
||||
pluginInfo?.manifest.manifest.metadata.label &&
|
||||
extractI18nObject(pluginInfo.manifest.manifest.metadata.label)
|
||||
? extractI18nObject(pluginInfo.manifest.manifest.metadata.label)
|
||||
: plugin?.name || `${pluginAuthor}/${pluginName}`;
|
||||
const description = pluginInfo?.manifest.manifest.metadata.description
|
||||
? extractI18nObject(pluginInfo.manifest.manifest.metadata.description)
|
||||
: plugin?.description;
|
||||
|
||||
const asyncTask = useAsyncTask({
|
||||
onSuccess: () => {
|
||||
toast.success(t('plugins.deleteSuccess'));
|
||||
setShowDeleteConfirm(false);
|
||||
void refreshPlugins();
|
||||
navigate('/home/extensions');
|
||||
},
|
||||
});
|
||||
|
||||
// Set breadcrumb entity name
|
||||
useEffect(() => {
|
||||
@@ -27,6 +72,18 @@ export default function PluginDetailContent({ id }: { id: string }) {
|
||||
return () => setDetailEntityName(null);
|
||||
}, [plugin, pluginAuthor, pluginName, setDetailEntityName]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
httpClient.getPlugin(pluginAuthor, pluginName).then((res) => {
|
||||
if (!cancelled) {
|
||||
setPluginInfo(res.plugin);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [pluginAuthor, pluginName]);
|
||||
|
||||
function handleFormSubmit(timeout?: number) {
|
||||
if (timeout) {
|
||||
setTimeout(() => {
|
||||
@@ -37,60 +94,199 @@ export default function PluginDetailContent({ id }: { id: string }) {
|
||||
}
|
||||
}
|
||||
|
||||
function executeDelete() {
|
||||
httpClient
|
||||
.removePlugin(pluginAuthor, pluginName, deleteData)
|
||||
.then((res) => {
|
||||
asyncTask.startTask(res.task_id);
|
||||
})
|
||||
.catch((error) => {
|
||||
toast.error(t('plugins.deleteError') + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
const sourceBadge = plugin?.debug ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 border-orange-400 text-[0.7rem] text-orange-400"
|
||||
>
|
||||
<Bug className="size-3.5" />
|
||||
{t('plugins.debugging')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'github' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 border-blue-400 text-[0.7rem] text-blue-400"
|
||||
>
|
||||
{t('plugins.fromGithub')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'local' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 border-green-400 text-[0.7rem] text-green-400"
|
||||
>
|
||||
{t('plugins.fromLocal')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'marketplace' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 border-purple-400 text-[0.7rem] text-purple-400"
|
||||
>
|
||||
{t('plugins.fromMarketplace')}
|
||||
</Badge>
|
||||
) : null;
|
||||
|
||||
const componentBadges = pluginInfo && (
|
||||
<PluginComponentList
|
||||
components={pluginInfo.components.reduce<Record<string, number>>(
|
||||
(acc, component) => {
|
||||
const kind = component.manifest.manifest.kind;
|
||||
acc[kind] = (acc[kind] ?? 0) + 1;
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
)}
|
||||
showComponentName
|
||||
showTitle={false}
|
||||
useBadge
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
|
||||
const dangerZone = (
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">
|
||||
{t('plugins.dangerZone')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('plugins.dangerZoneDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{t('plugins.deletePlugin')}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('plugins.confirmDeletePlugin', {
|
||||
author: pluginAuthor,
|
||||
name: pluginName,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="shrink-0"
|
||||
>
|
||||
<Trash2 className="mr-1.5 size-4" />
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center gap-3 pb-4 shrink-0">
|
||||
<h1 className="text-xl font-semibold">
|
||||
{pluginAuthor}/{pluginName}
|
||||
</h1>
|
||||
{plugin?.debug ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[0.7rem] border-orange-400 text-orange-400"
|
||||
>
|
||||
<Bug className="size-3.5" />
|
||||
{t('plugins.debugging')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'github' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[0.7rem] border-blue-400 text-blue-400"
|
||||
>
|
||||
{t('plugins.fromGithub')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'local' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[0.7rem] border-green-400 text-green-400"
|
||||
>
|
||||
{t('plugins.fromLocal')}
|
||||
</Badge>
|
||||
) : plugin?.installSource === 'marketplace' ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[0.7rem] border-purple-400 text-purple-400"
|
||||
>
|
||||
{t('plugins.fromMarketplace')}
|
||||
</Badge>
|
||||
) : null}
|
||||
<>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex shrink-0 flex-col gap-2 pb-4">
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-3">
|
||||
<h1 className="truncate text-xl font-semibold">{title}</h1>
|
||||
<Badge variant="outline" className="shrink-0 text-[0.7rem]">
|
||||
<Puzzle className="size-3.5" />
|
||||
{t('market.typePlugin')}
|
||||
</Badge>
|
||||
{sourceBadge}
|
||||
{componentBadges}
|
||||
</div>
|
||||
{description && (
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 max-w-full flex-1 flex-col gap-6 overflow-y-auto md:flex-row md:overflow-hidden">
|
||||
<div className="space-y-4 pb-6 md:min-h-0 md:w-[380px] md:flex-shrink-0 md:overflow-y-auto md:overflow-x-hidden xl:w-[420px]">
|
||||
<PluginForm
|
||||
pluginAuthor={pluginAuthor}
|
||||
pluginName={pluginName}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
/>
|
||||
{dangerZone}
|
||||
</div>
|
||||
<div className="hidden w-px shrink-0 bg-border md:block" />
|
||||
<div className="min-w-0 flex-1 pb-6 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden">
|
||||
<PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col md:flex-row overflow-hidden min-h-0 gap-6 max-w-full">
|
||||
{/* Left side - Config */}
|
||||
<div className="md:w-[380px] md:flex-shrink-0 overflow-y-auto overflow-x-hidden">
|
||||
<PluginForm
|
||||
pluginAuthor={pluginAuthor}
|
||||
pluginName={pluginName}
|
||||
onFormSubmit={handleFormSubmit}
|
||||
/>
|
||||
</div>
|
||||
{/* Divider */}
|
||||
<div className="hidden md:block w-px bg-border shrink-0" />
|
||||
{/* Right side - Readme */}
|
||||
<div className="flex-1 overflow-y-auto overflow-x-hidden min-w-0">
|
||||
<PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('plugins.deleteConfirm')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{asyncTask.status === AsyncTaskStatus.RUNNING
|
||||
? t('plugins.deleting')
|
||||
: t('plugins.confirmDeletePlugin', {
|
||||
author: pluginAuthor,
|
||||
name: pluginName,
|
||||
})}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="delete-plugin-data"
|
||||
checked={deleteData}
|
||||
onCheckedChange={(checked) => setDeleteData(checked === true)}
|
||||
/>
|
||||
<label
|
||||
htmlFor="delete-plugin-data"
|
||||
className="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{t('plugins.deleteDataCheckbox')}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{asyncTask.status === AsyncTaskStatus.ERROR && (
|
||||
<div className="text-sm text-destructive">{asyncTask.error}</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
{asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
)}
|
||||
{asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
|
||||
<Button variant="destructive" onClick={executeDelete}>
|
||||
{t('common.confirmDelete')}
|
||||
</Button>
|
||||
)}
|
||||
{asyncTask.status === AsyncTaskStatus.RUNNING && (
|
||||
<Button variant="destructive" disabled>
|
||||
{t('plugins.deleting')}
|
||||
</Button>
|
||||
)}
|
||||
{asyncTask.status === AsyncTaskStatus.ERROR && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowDeleteConfirm(false);
|
||||
asyncTask.reset();
|
||||
}}
|
||||
>
|
||||
{t('plugins.close')}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,10 +4,16 @@ import { Plugin } from '@/app/infra/entities/plugin';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { toast } from 'sonner';
|
||||
import { extractI18nObject } from '@/i18n/I18nProvider';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
|
||||
|
||||
export default function PluginForm({
|
||||
pluginAuthor,
|
||||
@@ -137,65 +143,34 @@ export default function PluginForm({
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-lg font-medium">
|
||||
{extractI18nObject(pluginInfo.manifest.manifest.metadata.label)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 pb-2">
|
||||
{extractI18nObject(
|
||||
pluginInfo.manifest.manifest.metadata.description ?? {
|
||||
en_US: '',
|
||||
zh_Hans: '',
|
||||
},
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('plugins.pluginConfig')}</CardTitle>
|
||||
<CardDescription>{t('plugins.saveConfig')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{pluginInfo.manifest.manifest.spec.config.length > 0 ? (
|
||||
<DynamicFormComponent
|
||||
itemConfigList={pluginInfo.manifest.manifest.spec.config}
|
||||
initialValues={pluginConfig.config as Record<string, object>}
|
||||
onSubmit={(values) => {
|
||||
// 只保存表单值的引用,不触发状态更新
|
||||
currentFormValues.current = values;
|
||||
}}
|
||||
onFileUploaded={(fileKey) => {
|
||||
// 追踪上传的文件
|
||||
uploadedFileKeys.current.add(fileKey);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t('plugins.pluginNoConfig')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-4 flex flex-row items-center justify-start gap-[0.4rem]">
|
||||
<PluginComponentList
|
||||
components={(() => {
|
||||
const componentKindCount: Record<string, number> = {};
|
||||
for (const component of pluginInfo.components) {
|
||||
const kind = component.manifest.manifest.kind;
|
||||
if (componentKindCount[kind]) {
|
||||
componentKindCount[kind]++;
|
||||
} else {
|
||||
componentKindCount[kind] = 1;
|
||||
}
|
||||
}
|
||||
return componentKindCount;
|
||||
})()}
|
||||
showComponentName={true}
|
||||
showTitle={false}
|
||||
useBadge={true}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</CardContent>
|
||||
{pluginInfo.manifest.manifest.spec.config.length > 0 && (
|
||||
<DynamicFormComponent
|
||||
itemConfigList={pluginInfo.manifest.manifest.spec.config}
|
||||
initialValues={pluginConfig.config as Record<string, object>}
|
||||
onSubmit={(values) => {
|
||||
// 只保存表单值的引用,不触发状态更新
|
||||
currentFormValues.current = values;
|
||||
}}
|
||||
onFileUploaded={(fileKey) => {
|
||||
// 追踪上传的文件
|
||||
uploadedFileKeys.current.add(fileKey);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{pluginInfo.manifest.manifest.spec.config.length === 0 && (
|
||||
<div className="text-sm text-gray-500">
|
||||
{t('plugins.pluginNoConfig')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{pluginInfo.manifest.manifest.spec.config.length > 0 && (
|
||||
<div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
|
||||
<div className="flex justify-end gap-2">
|
||||
<CardFooter className="justify-end">
|
||||
<Button
|
||||
type="submit"
|
||||
onClick={() => handleSubmit()}
|
||||
@@ -203,9 +178,9 @@ export default function PluginForm({
|
||||
>
|
||||
{isSaving ? t('plugins.saving') : t('plugins.saveConfig')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardFooter>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -20,6 +21,7 @@ import {
|
||||
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import SkillForm from '@/app/home/skills/components/skill-form/SkillForm';
|
||||
import { Sparkles, Trash2 } from 'lucide-react';
|
||||
|
||||
export default function SkillDetailContent({ id }: { id: string }) {
|
||||
const isCreateMode = id === 'new';
|
||||
@@ -27,16 +29,16 @@ export default function SkillDetailContent({ id }: { id: string }) {
|
||||
const { t } = useTranslation();
|
||||
const { refreshSkills, skills, setDetailEntityName } = useSidebarData();
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const skill = skills.find((item) => item.id === id);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCreateMode) {
|
||||
setDetailEntityName(t('skills.createSkill'));
|
||||
} else {
|
||||
const skill = skills.find((item) => item.id === id);
|
||||
setDetailEntityName(skill?.name ?? id);
|
||||
}
|
||||
return () => setDetailEntityName(null);
|
||||
}, [id, isCreateMode, setDetailEntityName, skills, t]);
|
||||
}, [id, isCreateMode, setDetailEntityName, skill, t]);
|
||||
|
||||
function handleImportedSkills(skillNames: string[]) {
|
||||
void refreshSkills();
|
||||
@@ -67,78 +69,101 @@ export default function SkillDetailContent({ id }: { id: string }) {
|
||||
if (isCreateMode) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between pb-4 shrink-0">
|
||||
<h1 className="text-xl font-semibold">{t('skills.createSkill')}</h1>
|
||||
<Button type="submit" form="skill-form">
|
||||
<div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<h1 className="truncate text-xl font-semibold">
|
||||
{t('skills.createSkill')}
|
||||
</h1>
|
||||
<Badge variant="outline" className="shrink-0 text-[0.7rem]">
|
||||
<Sparkles className="size-3.5" />
|
||||
{t('skills.title')}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" form="skill-form" className="shrink-0">
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
<div className="mx-auto max-w-3xl space-y-6 pb-8">
|
||||
<SkillForm
|
||||
key="new-skill"
|
||||
initSkillName={undefined}
|
||||
onNewSkillCreated={(skillName) =>
|
||||
handleImportedSkills([skillName])
|
||||
}
|
||||
onSkillUpdated={() => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<SkillForm
|
||||
key="new-skill"
|
||||
initSkillName={undefined}
|
||||
layout="split"
|
||||
onNewSkillCreated={(skillName) => handleImportedSkills([skillName])}
|
||||
onSkillUpdated={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const editActions = (
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">
|
||||
{t('skills.dangerZone')}
|
||||
</CardTitle>
|
||||
<CardDescription>{t('skills.dangerZoneDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{t('skills.delete')}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('skills.deleteConfirmation')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="shrink-0"
|
||||
>
|
||||
<Trash2 className="mr-1.5 size-4" />
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between pb-4 shrink-0">
|
||||
<h1 className="text-xl font-semibold">{t('skills.editSkill')}</h1>
|
||||
<Button type="submit" form="skill-form">
|
||||
<div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="min-w-0 space-y-1">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<h1 className="truncate text-xl font-semibold">
|
||||
{skill?.name ?? id}
|
||||
</h1>
|
||||
<Badge variant="outline" className="shrink-0 text-[0.7rem]">
|
||||
<Sparkles className="size-3.5" />
|
||||
{t('skills.title')}
|
||||
</Badge>
|
||||
</div>
|
||||
{skill?.description && (
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">
|
||||
{skill.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" form="skill-form" className="shrink-0">
|
||||
{t('common.save')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
<div className="mx-auto max-w-3xl space-y-6 pb-8">
|
||||
<SkillForm
|
||||
key={id}
|
||||
initSkillName={id}
|
||||
onNewSkillCreated={(skillName) =>
|
||||
handleImportedSkills([skillName])
|
||||
}
|
||||
onSkillUpdated={handleSkillUpdated}
|
||||
/>
|
||||
|
||||
<Card className="border-destructive/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-destructive">
|
||||
{t('skills.dangerZone')}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('skills.dangerZoneDescription')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-medium">{t('common.delete')}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('skills.deleteConfirmation')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="destructive"
|
||||
type="button"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<SkillForm
|
||||
key={id}
|
||||
initSkillName={id}
|
||||
layout="split"
|
||||
sideFooter={editActions}
|
||||
onNewSkillCreated={(skillName) => handleImportedSkills([skillName])}
|
||||
onSkillUpdated={handleSkillUpdated}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,10 +1,28 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
type FormEvent,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useEffect,
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FolderSearch, ChevronDown, ChevronRight, File, Folder, FolderOpen, RefreshCw } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
FolderSearch,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
File,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import { httpClient } from '@/app/infra/http/HttpClient';
|
||||
import { Skill } from '@/app/infra/entities/api';
|
||||
import { toast } from 'sonner';
|
||||
@@ -15,6 +33,8 @@ interface SkillFormProps {
|
||||
onNewSkillCreated: (skillName: string) => void;
|
||||
onSkillUpdated: (skillName: string) => void;
|
||||
onDraftChange?: (draft: SkillFormDraft) => void;
|
||||
layout?: 'stacked' | 'split';
|
||||
sideFooter?: ReactNode;
|
||||
}
|
||||
|
||||
export interface SkillFormDraft {
|
||||
@@ -30,27 +50,42 @@ interface FileEntry {
|
||||
size: number | null;
|
||||
}
|
||||
|
||||
interface DirectoryContent {
|
||||
path: string;
|
||||
entries: FileEntry[];
|
||||
interface FileTreeProps {
|
||||
skillName: string;
|
||||
selectedFile?: string | null;
|
||||
onFileSelect: (path: string, content: string) => void;
|
||||
onLoadingChange?: (loading: boolean) => void;
|
||||
}
|
||||
|
||||
export interface FileTreeHandle {
|
||||
refresh: () => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
interface FileTreeProps {
|
||||
skillName: string;
|
||||
onFileSelect: (path: string, content: string) => void;
|
||||
function getFileName(path: string) {
|
||||
return path.split('/').pop() || path;
|
||||
}
|
||||
|
||||
function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(function FileTree(
|
||||
{ skillName, selectedFile, onFileSelect, onLoadingChange },
|
||||
ref,
|
||||
) {
|
||||
const { t } = useTranslation();
|
||||
const [rootEntries, setRootEntries] = useState<FileEntry[]>([]);
|
||||
const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());
|
||||
const [dirContents, setDirContents] = useState<Map<string, FileEntry[]>>(new Map());
|
||||
const [dirContents, setDirContents] = useState<Map<string, FileEntry[]>>(
|
||||
new Map(),
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedPath, setSelectedPath] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedPath(selectedFile ?? null);
|
||||
}, [selectedFile]);
|
||||
|
||||
const loadRootFiles = useCallback(async () => {
|
||||
setLoading(true);
|
||||
onLoadingChange?.(true);
|
||||
try {
|
||||
const result = await httpClient.listSkillFiles(skillName, '.');
|
||||
setRootEntries(result.entries);
|
||||
@@ -59,27 +94,31 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
toast.error(t('skills.loadFilesError') + String(error));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
onLoadingChange?.(false);
|
||||
}
|
||||
}, [skillName, t]);
|
||||
}, [skillName, t, onLoadingChange]);
|
||||
|
||||
const loadDirFiles = useCallback(async (dirPath: string) => {
|
||||
setDirContents(prev => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(dirPath, []); // Clear while loading
|
||||
return newMap;
|
||||
});
|
||||
try {
|
||||
const result = await httpClient.listSkillFiles(skillName, dirPath);
|
||||
setDirContents(prev => {
|
||||
const loadDirFiles = useCallback(
|
||||
async (dirPath: string) => {
|
||||
setDirContents((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(dirPath, result.entries);
|
||||
newMap.set(dirPath, []); // Clear while loading
|
||||
return newMap;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load directory files:', error);
|
||||
toast.error(t('skills.loadFilesError') + String(error));
|
||||
}
|
||||
}, [skillName, t]);
|
||||
try {
|
||||
const result = await httpClient.listSkillFiles(skillName, dirPath);
|
||||
setDirContents((prev) => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(dirPath, result.entries);
|
||||
return newMap;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load directory files:', error);
|
||||
toast.error(t('skills.loadFilesError') + String(error));
|
||||
}
|
||||
},
|
||||
[skillName, t],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (skillName) {
|
||||
@@ -87,6 +126,15 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
}
|
||||
}, [skillName, loadRootFiles]);
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
refresh: loadRootFiles,
|
||||
loading,
|
||||
}),
|
||||
[loadRootFiles, loading],
|
||||
);
|
||||
|
||||
const toggleDir = async (dirPath: string) => {
|
||||
const newExpanded = new Set(expandedDirs);
|
||||
if (newExpanded.has(dirPath)) {
|
||||
@@ -110,7 +158,10 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const renderEntry = (entry: FileEntry, depth: number = 0): React.ReactNode => {
|
||||
const renderEntry = (
|
||||
entry: FileEntry,
|
||||
depth: number = 0,
|
||||
): React.ReactNode => {
|
||||
const isExpanded = expandedDirs.has(entry.path);
|
||||
const isSelected = selectedPath === entry.path;
|
||||
|
||||
@@ -121,7 +172,9 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
isSelected ? 'bg-muted' : ''
|
||||
}`}
|
||||
style={{ paddingLeft: `${depth * 12 + 8}px` }}
|
||||
onClick={() => entry.is_dir ? toggleDir(entry.path) : handleFileClick(entry.path)}
|
||||
onClick={() =>
|
||||
entry.is_dir ? toggleDir(entry.path) : handleFileClick(entry.path)
|
||||
}
|
||||
>
|
||||
{entry.is_dir ? (
|
||||
<>
|
||||
@@ -141,14 +194,18 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
)}
|
||||
<span className="text-sm truncate">{entry.name}</span>
|
||||
{!entry.is_dir && entry.size !== null && (
|
||||
<span className="text-xs text-muted-foreground ml-auto">
|
||||
{entry.size > 1024 ? `${Math.round(entry.size / 1024)}KB` : `${entry.size}B`}
|
||||
<span className="ml-auto text-xs text-muted-foreground">
|
||||
{entry.size > 1024
|
||||
? `${Math.round(entry.size / 1024)}KB`
|
||||
: `${entry.size}B`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{entry.is_dir && isExpanded && (
|
||||
<div>
|
||||
{(dirContents.get(entry.path) || []).map((child) => renderEntry(child, depth + 1))}
|
||||
{(dirContents.get(entry.path) || []).map((child) =>
|
||||
renderEntry(child, depth + 1),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -156,19 +213,8 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border rounded-md p-2">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">{t('skills.files')}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => loadRootFiles()}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-1 max-h-48 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
<div className="max-h-48 space-y-1 overflow-y-auto">
|
||||
{rootEntries.length === 0 && !loading && (
|
||||
<div className="text-sm text-muted-foreground py-2">
|
||||
{t('skills.noFiles')}
|
||||
@@ -178,7 +224,7 @@ function FileTree({ skillName, onFileSelect }: FileTreeProps) {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const emptySkillDraft: SkillFormDraft = {
|
||||
skill: {
|
||||
@@ -197,6 +243,8 @@ export default function SkillForm({
|
||||
onNewSkillCreated,
|
||||
onSkillUpdated,
|
||||
onDraftChange,
|
||||
layout = 'stacked',
|
||||
sideFooter,
|
||||
}: SkillFormProps) {
|
||||
const { t } = useTranslation();
|
||||
const initialDraftRef = useRef(initialDraft ?? emptySkillDraft);
|
||||
@@ -209,12 +257,15 @@ export default function SkillForm({
|
||||
);
|
||||
const [selectedFile, setSelectedFile] = useState<string | null>(null);
|
||||
const [fileContent, setFileContent] = useState<string>('');
|
||||
const fileTreeRef = useRef<FileTreeHandle>(null);
|
||||
const [fileTreeLoading, setFileTreeLoading] = useState(false);
|
||||
|
||||
const loadSkill = useCallback(
|
||||
async (skillName: string) => {
|
||||
try {
|
||||
const resp = await httpClient.getSkill(skillName);
|
||||
setSkill(resp.skill);
|
||||
setSelectedFile('SKILL.md');
|
||||
setFileContent(resp.skill.instructions || '');
|
||||
} catch (error) {
|
||||
console.error('Failed to load skill:', error);
|
||||
@@ -229,13 +280,18 @@ export default function SkillForm({
|
||||
loadSkill(initSkillName);
|
||||
return;
|
||||
}
|
||||
setSelectedFile(initialDraftRef.current.selectedFile ?? null);
|
||||
setSkill(initialDraftRef.current.skill);
|
||||
setShowAdvanced(initialDraftRef.current.showAdvanced);
|
||||
}, [initSkillName, loadSkill]);
|
||||
|
||||
useEffect(() => {
|
||||
if (initSkillName) return;
|
||||
onDraftChange?.({ skill, showAdvanced, selectedFile: selectedFile || undefined });
|
||||
onDraftChange?.({
|
||||
skill,
|
||||
showAdvanced,
|
||||
selectedFile: selectedFile || undefined,
|
||||
});
|
||||
}, [initSkillName, onDraftChange, skill, showAdvanced, selectedFile]);
|
||||
|
||||
async function scanDirectory() {
|
||||
@@ -294,7 +350,7 @@ export default function SkillForm({
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!skill.name?.trim()) {
|
||||
@@ -335,8 +391,8 @@ export default function SkillForm({
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form id="skill-form" onSubmit={handleSubmit} className="space-y-4">
|
||||
const metadataFields = (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="display_name">{t('skills.displayName')}</Label>
|
||||
<Input
|
||||
@@ -377,27 +433,43 @@ export default function SkillForm({
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
{/* File tree for existing skills */}
|
||||
const fileTreeSection = (
|
||||
<>
|
||||
{initSkillName && (
|
||||
<div className="space-y-2">
|
||||
<FileTree skillName={initSkillName} onFileSelect={handleFileSelect} />
|
||||
<FileTree
|
||||
skillName={initSkillName}
|
||||
selectedFile={selectedFile}
|
||||
onFileSelect={handleFileSelect}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
<div className="space-y-2">
|
||||
const instructionEditor = (showLabel = true) => (
|
||||
<div className="space-y-2">
|
||||
{showLabel && (
|
||||
<Label htmlFor="instructions">
|
||||
{selectedFile ? `${t('skills.skillInstructions')} (${selectedFile})` : t('skills.skillInstructions')}
|
||||
{selectedFile
|
||||
? getFileName(selectedFile)
|
||||
: t('skills.skillInstructions')}
|
||||
</Label>
|
||||
<Textarea
|
||||
id="instructions"
|
||||
value={fileContent}
|
||||
onChange={(e) => handleContentChange(e.target.value)}
|
||||
placeholder={t('skills.instructionsPlaceholder')}
|
||||
rows={16}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
{selectedFile && selectedFile !== 'SKILL.md' && !selectedFile.endsWith('/SKILL.md') && (
|
||||
)}
|
||||
<Textarea
|
||||
id="instructions"
|
||||
value={fileContent}
|
||||
onChange={(e) => handleContentChange(e.target.value)}
|
||||
placeholder={t('skills.instructionsPlaceholder')}
|
||||
rows={16}
|
||||
className="min-h-[360px] resize-y font-mono text-sm lg:min-h-[calc(100vh-220px)]"
|
||||
/>
|
||||
{selectedFile &&
|
||||
selectedFile !== 'SKILL.md' &&
|
||||
!selectedFile.endsWith('/SKILL.md') && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -407,58 +479,116 @@ export default function SkillForm({
|
||||
{t('skills.saveFile')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
const advancedSettings = (
|
||||
<div className="space-y-2">
|
||||
<Label>{t('skills.packageRoot')}</Label>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Input
|
||||
value={skill.package_root || ''}
|
||||
onChange={(e) => setSkill({ ...skill, package_root: e.target.value })}
|
||||
placeholder={`data/skills/${skill.name || '<skill-name>'}/`}
|
||||
className="flex-1"
|
||||
disabled={Boolean(initSkillName)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
className="flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left text-sm font-medium hover:bg-muted/70"
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={scanDirectory}
|
||||
disabled={
|
||||
Boolean(initSkillName) || scanning || !skill.package_root?.trim()
|
||||
}
|
||||
className="shrink-0"
|
||||
>
|
||||
{t('skills.advancedSettings')}
|
||||
{showAdvanced ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{showAdvanced && (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>{t('skills.packageRoot')}</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={skill.package_root || ''}
|
||||
onChange={(e) =>
|
||||
setSkill({ ...skill, package_root: e.target.value })
|
||||
}
|
||||
placeholder={`data/skills/${skill.name || '<skill-name>'}/`}
|
||||
className="flex-1"
|
||||
disabled={Boolean(initSkillName)}
|
||||
/>
|
||||
<FolderSearch className="mr-1 h-4 w-4" />
|
||||
{scanning ? t('common.loading') : t('skills.scan')}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('skills.packageRootHelp')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (layout === 'split') {
|
||||
return (
|
||||
<form
|
||||
id="skill-form"
|
||||
onSubmit={handleSubmit}
|
||||
className="flex h-full min-h-0 max-w-full flex-col gap-6 overflow-y-auto lg:flex-row lg:overflow-hidden"
|
||||
>
|
||||
<div className="space-y-4 pb-6 lg:min-h-0 lg:w-[360px] lg:flex-shrink-0 lg:overflow-y-auto lg:overflow-x-hidden xl:w-[400px]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('bots.basicInfo')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">{metadataFields}</CardContent>
|
||||
</Card>
|
||||
{initSkillName && (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>{t('skills.files')}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={scanDirectory}
|
||||
disabled={
|
||||
Boolean(initSkillName) ||
|
||||
scanning ||
|
||||
!skill.package_root?.trim()
|
||||
}
|
||||
className="shrink-0"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => fileTreeRef.current?.refresh()}
|
||||
disabled={fileTreeLoading}
|
||||
className="size-8"
|
||||
>
|
||||
<FolderSearch className="h-4 w-4 mr-1" />
|
||||
{scanning ? t('common.loading') : t('skills.scan')}
|
||||
<RefreshCw
|
||||
className={`h-4 w-4 ${fileTreeLoading ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t('skills.packageRootHelp')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<FileTree
|
||||
ref={fileTreeRef}
|
||||
skillName={initSkillName}
|
||||
selectedFile={selectedFile}
|
||||
onFileSelect={handleFileSelect}
|
||||
onLoadingChange={setFileTreeLoading}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('skills.advancedSettings')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>{advancedSettings}</CardContent>
|
||||
</Card>
|
||||
{sideFooter}
|
||||
</div>
|
||||
<div className="hidden w-px shrink-0 bg-border lg:block" />
|
||||
<div className="min-w-0 flex-1 pb-6 lg:min-h-0 lg:overflow-y-auto lg:overflow-x-hidden">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
{selectedFile
|
||||
? getFileName(selectedFile)
|
||||
: initSkillName
|
||||
? 'SKILL.md'
|
||||
: t('skills.skillInstructions')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>{instructionEditor(false)}</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<form id="skill-form" onSubmit={handleSubmit} className="space-y-4">
|
||||
{metadataFields}
|
||||
{fileTreeSection}
|
||||
{instructionEditor()}
|
||||
{advancedSettings}
|
||||
{sideFooter}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,17 +64,14 @@ export default function SkillsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto min-h-0">
|
||||
<div className="mx-auto max-w-3xl space-y-6 pb-8">
|
||||
<SkillForm
|
||||
key="new-skill"
|
||||
initSkillName={undefined}
|
||||
onNewSkillCreated={(skillName) =>
|
||||
handleImportedSkills([skillName])
|
||||
}
|
||||
onSkillUpdated={() => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1">
|
||||
<SkillForm
|
||||
key="new-skill"
|
||||
initSkillName={undefined}
|
||||
layout="split"
|
||||
onNewSkillCreated={(skillName) => handleImportedSkills([skillName])}
|
||||
onSkillUpdated={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -126,4 +123,4 @@ export default function SkillsPage() {
|
||||
|
||||
navigate('/home/add-extension');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -506,6 +506,8 @@ const enUS = {
|
||||
close: 'Close',
|
||||
deleteConfirm: 'Delete Confirmation',
|
||||
deleteSuccess: 'Delete successful',
|
||||
dangerZone: 'Danger Zone',
|
||||
dangerZoneDescription: 'Irreversible and destructive actions',
|
||||
modifyFailed: 'Modify failed: ',
|
||||
componentName: {
|
||||
Tool: 'Tool',
|
||||
@@ -736,6 +738,8 @@ const enUS = {
|
||||
loadFailed: 'Load failed',
|
||||
modifyFailed: 'Modify failed: ',
|
||||
toolCount: 'Tools: {{count}}',
|
||||
parameterCount: 'Parameters: {{count}}',
|
||||
noParameters: 'No parameters',
|
||||
statusConnected: 'Connected',
|
||||
statusDisconnected: 'Disconnected',
|
||||
statusError: 'Connection Error',
|
||||
|
||||
@@ -519,6 +519,8 @@ const esES = {
|
||||
close: 'Cerrar',
|
||||
deleteConfirm: 'Confirmación de eliminación',
|
||||
deleteSuccess: 'Eliminación exitosa',
|
||||
dangerZone: 'Zona de peligro',
|
||||
dangerZoneDescription: 'Acciones irreversibles y destructivas',
|
||||
modifyFailed: 'Error al modificar: ',
|
||||
componentName: {
|
||||
Tool: 'Herramienta',
|
||||
@@ -744,6 +746,8 @@ const esES = {
|
||||
loadFailed: 'Error al cargar',
|
||||
modifyFailed: 'Error al modificar: ',
|
||||
toolCount: 'Herramientas: {{count}}',
|
||||
parameterCount: 'Parámetros: {{count}}',
|
||||
noParameters: 'Sin parámetros',
|
||||
statusConnected: 'Conectado',
|
||||
statusDisconnected: 'Desconectado',
|
||||
statusError: 'Error de conexión',
|
||||
|
||||
@@ -510,6 +510,8 @@ const jaJP = {
|
||||
close: '閉じる',
|
||||
deleteConfirm: '削除の確認',
|
||||
deleteSuccess: '削除に成功しました',
|
||||
dangerZone: '危険ゾーン',
|
||||
dangerZoneDescription: '取り消しできない操作です',
|
||||
modifyFailed: '変更に失敗しました：',
|
||||
componentName: {
|
||||
Tool: 'ツール',
|
||||
@@ -734,6 +736,8 @@ const jaJP = {
|
||||
loadFailed: '読み込みに失敗しました',
|
||||
modifyFailed: '変更に失敗しました：',
|
||||
toolCount: 'ツール：{{count}}',
|
||||
parameterCount: 'パラメータ：{{count}}',
|
||||
noParameters: 'パラメータなし',
|
||||
statusConnected: '接続済み',
|
||||
statusDisconnected: '未接続',
|
||||
statusError: '接続エラー',
|
||||
|
||||
@@ -515,6 +515,8 @@ const ruRU = {
|
||||
close: 'Закрыть',
|
||||
deleteConfirm: 'Подтверждение удаления',
|
||||
deleteSuccess: 'Удаление успешно',
|
||||
dangerZone: 'Опасная зона',
|
||||
dangerZoneDescription: 'Необратимые и разрушительные действия',
|
||||
modifyFailed: 'Ошибка изменения: ',
|
||||
componentName: {
|
||||
Tool: 'Инструмент',
|
||||
@@ -536,8 +538,7 @@ const ruRU = {
|
||||
selectFileToUpload: 'Выберите файл плагина для загрузки',
|
||||
askConfirm:
|
||||
'Вы уверены, что хотите установить плагин "{{name}}" ({{version}})?',
|
||||
askConfirmNoVersion:
|
||||
'Вы уверены, что хотите установить плагин "{{name}}"?',
|
||||
askConfirmNoVersion: 'Вы уверены, что хотите установить плагин "{{name}}"?',
|
||||
fromGithub: 'С GitHub',
|
||||
fromLocal: 'Из локального файла',
|
||||
fromMarketplace: 'Из маркетплейса',
|
||||
@@ -740,6 +741,8 @@ const ruRU = {
|
||||
loadFailed: 'Ошибка загрузки',
|
||||
modifyFailed: 'Ошибка изменения: ',
|
||||
toolCount: 'Инструменты: {{count}}',
|
||||
parameterCount: 'Параметры: {{count}}',
|
||||
noParameters: 'Нет параметров',
|
||||
statusConnected: 'Подключён',
|
||||
statusDisconnected: 'Отключён',
|
||||
statusError: 'Ошибка подключения',
|
||||
|
||||
@@ -500,6 +500,8 @@ const thTH = {
|
||||
close: 'ปิด',
|
||||
deleteConfirm: 'ยืนยันการลบ',
|
||||
deleteSuccess: 'ลบสำเร็จ',
|
||||
dangerZone: 'พื้นที่อันตราย',
|
||||
dangerZoneDescription: 'การดำเนินการที่ไม่สามารถย้อนกลับได้',
|
||||
modifyFailed: 'แก้ไขล้มเหลว: ',
|
||||
componentName: {
|
||||
Tool: 'เครื่องมือ',
|
||||
@@ -720,6 +722,8 @@ const thTH = {
|
||||
loadFailed: 'โหลดล้มเหลว',
|
||||
modifyFailed: 'แก้ไขล้มเหลว: ',
|
||||
toolCount: 'เครื่องมือ: {{count}}',
|
||||
parameterCount: 'พารามิเตอร์: {{count}}',
|
||||
noParameters: 'ไม่มีพารามิเตอร์',
|
||||
statusConnected: 'เชื่อมต่อแล้ว',
|
||||
statusDisconnected: 'ไม่ได้เชื่อมต่อ',
|
||||
statusError: 'ข้อผิดพลาดการเชื่อมต่อ',
|
||||
|
||||
@@ -511,6 +511,8 @@ const viVN = {
|
||||
close: 'Đóng',
|
||||
deleteConfirm: 'Xác nhận xóa',
|
||||
deleteSuccess: 'Xóa thành công',
|
||||
dangerZone: 'Vùng nguy hiểm',
|
||||
dangerZoneDescription: 'Các thao tác không thể hoàn tác',
|
||||
modifyFailed: 'Sửa đổi thất bại: ',
|
||||
componentName: {
|
||||
Tool: 'Công cụ',
|
||||
@@ -532,7 +534,8 @@ const viVN = {
|
||||
selectFileToUpload: 'Chọn tệp plugin để tải lên',
|
||||
askConfirm:
|
||||
'Bạn có chắc chắn muốn cài đặt plugin "{{name}}" ({{version}}) không?',
|
||||
askConfirmNoVersion: 'Bạn có chắc chắn muốn cài đặt plugin "{{name}}" không?',
|
||||
askConfirmNoVersion:
|
||||
'Bạn có chắc chắn muốn cài đặt plugin "{{name}}" không?',
|
||||
fromGithub: 'Từ GitHub',
|
||||
fromLocal: 'Từ cục bộ',
|
||||
fromMarketplace: 'Từ chợ ứng dụng',
|
||||
@@ -733,6 +736,8 @@ const viVN = {
|
||||
loadFailed: 'Tải thất bại',
|
||||
modifyFailed: 'Sửa đổi thất bại: ',
|
||||
toolCount: 'Công cụ: {{count}}',
|
||||
parameterCount: 'Tham số: {{count}}',
|
||||
noParameters: 'Không có tham số',
|
||||
statusConnected: 'Đã kết nối',
|
||||
statusDisconnected: 'Đã ngắt kết nối',
|
||||
statusError: 'Lỗi kết nối',
|
||||
|
||||
@@ -483,6 +483,8 @@ const zhHans = {
|
||||
close: '关闭',
|
||||
deleteConfirm: '删除确认',
|
||||
deleteSuccess: '删除成功',
|
||||
dangerZone: '危险区域',
|
||||
dangerZoneDescription: '不可逆的操作',
|
||||
modifyFailed: '修改失败：',
|
||||
componentName: {
|
||||
Tool: '工具',
|
||||
@@ -708,6 +710,8 @@ const zhHans = {
|
||||
loadFailed: '加载失败',
|
||||
modifyFailed: '修改失败：',
|
||||
toolCount: '工具：{{count}}',
|
||||
parameterCount: '参数：{{count}}',
|
||||
noParameters: '无参数',
|
||||
statusConnected: '已打开',
|
||||
statusDisconnected: '未打开',
|
||||
statusError: '连接错误',
|
||||
|
||||
@@ -484,6 +484,8 @@ const zhHant = {
|
||||
close: '關閉',
|
||||
deleteConfirm: '刪除確認',
|
||||
deleteSuccess: '刪除成功',
|
||||
dangerZone: '危險區域',
|
||||
dangerZoneDescription: '不可逆的操作',
|
||||
modifyFailed: '修改失敗：',
|
||||
componentName: {
|
||||
Tool: '工具',
|
||||
@@ -701,6 +703,8 @@ const zhHant = {
|
||||
loadFailed: '載入失敗',
|
||||
modifyFailed: '修改失敗：',
|
||||
toolCount: '工具：{{count}}',
|
||||
parameterCount: '參數：{{count}}',
|
||||
noParameters: '無參數',
|
||||
statusConnected: '已開啟',
|
||||
statusDisconnected: '未開啟',
|
||||
statusError: '連接錯誤',
|
||||
|
||||
Reference in New Issue
Block a user