feat(agent): implement agent detail page with canvas view and version history
This commit is contained in:
@@ -12,7 +12,7 @@ const Sidebar = () => {
|
||||
|
||||
const navItems = [
|
||||
{ text: t('header.knowledgeBase'), path: '/knowledge', icon: KnowledgeBasesIcon },
|
||||
{ text: t('header.agent'), path: '/agent', icon: AgentIcon },
|
||||
{ text: t('header.agent'), path: '/agents', icon: AgentIcon },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -50,7 +50,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onMenuClick, onViewAgent }
|
||||
const edgeCount = agent.dsl?.graph?.edges?.length ?? 0;
|
||||
|
||||
return (
|
||||
<Card sx={{ borderRadius: 2, height: 260 }}>
|
||||
<Card sx={{ borderRadius: 2, height: 260 }} onClick={() => onViewAgent(agent)}>
|
||||
<CardContent>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
@@ -67,7 +67,10 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onMenuClick, onViewAgent }
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<IconButton aria-label={t('common.more')} onClick={(e) => onMenuClick(e, agent)}>
|
||||
<IconButton aria-label={t('common.more')} onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onMenuClick(e, agent)
|
||||
}}>
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
@@ -85,7 +88,7 @@ const AgentCard: React.FC<AgentCardProps> = ({ agent, onMenuClick, onViewAgent }
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
justifyContent: 'space-around',
|
||||
mt: 1,
|
||||
p: 1,
|
||||
backgroundColor: '#F8F9FA',
|
||||
|
||||
@@ -58,13 +58,6 @@ const AgentGridView: React.FC<AgentGridViewProps> = ({
|
||||
handleMenuClose();
|
||||
};
|
||||
|
||||
const handleView = () => {
|
||||
if (selectedAgent && onView) {
|
||||
onView(selectedAgent);
|
||||
}
|
||||
handleMenuClose();
|
||||
};
|
||||
|
||||
const handleViewAgent = (agent: IFlow) => {
|
||||
if (onView) {
|
||||
onView(agent);
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useState, useCallback, useEffect, useRef } from 'react';
|
||||
import agentService from '@/services/agent_service';
|
||||
import type { IFlow } from '@/interfaces/database/agent';
|
||||
import type { IAgent, IGraph } from '@/interfaces/database/agent';
|
||||
import type { IAgentPaginationParams, IAgentCreateRequestBody, IAgentSettingRequestBody } from '@/interfaces/request/agent';
|
||||
import logger from '@/utils/logger';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useSnackbar } from '@/hooks/useSnackbar';
|
||||
|
||||
export interface UseAgentListState {
|
||||
agents: IFlow[];
|
||||
agents: IAgent[];
|
||||
total: number;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
@@ -32,7 +32,7 @@ export interface UseAgentListReturn extends UseAgentListState {
|
||||
* @param initialParams 初始参数
|
||||
*/
|
||||
export const useAgentList = (initialParams?: IAgentPaginationParams) => {
|
||||
const [agents, setAgents] = useState<IFlow[]>([]);
|
||||
const [agents, setAgents] = useState<IAgent[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -83,7 +83,6 @@ export const useAgentList = (initialParams?: IAgentPaginationParams) => {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export function useAgentOperations() {
|
||||
const { t } = useTranslation();
|
||||
const { showMessage } = useSnackbar();
|
||||
@@ -157,4 +156,139 @@ export function useAgentOperations() {
|
||||
const clearError = useCallback(() => setError(null), []);
|
||||
|
||||
return { loading, error, createAgent, editAgent, deleteAgents, clearError };
|
||||
}
|
||||
|
||||
/**
|
||||
* 智能体详情钩子：拉取 Canvas 详情并解析出图（nodes/edges）
|
||||
*/
|
||||
export function useAgentDetail(id?: string) {
|
||||
const [agent, setAgent] = useState<IAgent | null>(null);
|
||||
const [graph, setGraph] = useState<IGraph | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchDetail = useCallback(async () => {
|
||||
if (!id) {
|
||||
setError('Invalid agent id');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await agentService.getCanvas(id);
|
||||
const body = res?.data ?? {};
|
||||
// 服务端常见返回结构：{ code, data: { id, title, dsl } }
|
||||
const data = (body.data ?? body) as IAgent;
|
||||
const dsl = (data as any)?.dsl ?? {};
|
||||
const g: IGraph | null = dsl?.graph;
|
||||
setAgent(data);
|
||||
setGraph(g);
|
||||
logger.info('useAgentDetail fetched', { id, title: data?.title, nodes: g?.nodes?.length, edges: g?.edges?.length });
|
||||
} catch (err: any) {
|
||||
const msg = err?.response?.data?.message || err?.message || 'Failed to fetch agent detail';
|
||||
setError(msg);
|
||||
logger.error('useAgentDetail error', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDetail();
|
||||
}, [fetchDetail]);
|
||||
|
||||
return { agent, graph, loading, error, refresh: fetchDetail } as const;
|
||||
};
|
||||
|
||||
export interface UseAgentCanvasOptions {
|
||||
agent?: IAgent | null;
|
||||
graph?: IGraph | null;
|
||||
onReady?: (api: { fitView: () => void }) => void;
|
||||
onAutoSaved?: (date: Date) => void;
|
||||
disableNoteClick?: boolean;
|
||||
}
|
||||
|
||||
export function useAgentCanvas({ agent, graph, onReady, onAutoSaved, disableNoteClick = true }: UseAgentCanvasOptions) {
|
||||
const [selectedNode, setSelectedNode] = useState<any | null>(null);
|
||||
const [hoverNode, setHoverNode] = useState<any | null>(null);
|
||||
const [sanitized, setSanitized] = useState<IGraph | null>(null);
|
||||
const instRef = ({} as any) as { current?: any };
|
||||
|
||||
const sanitizeGraph = useCallback((g?: IGraph | null): IGraph | null => {
|
||||
if (!g) return null;
|
||||
const nodes = (g.nodes || []).map((n: any) => ({ ...n, draggable: false, selectable: true }));
|
||||
const edges = (g.edges || []).map((e: any) => {
|
||||
const { sourceHandle, targetHandle, ...rest } = e || {};
|
||||
return { ...rest };
|
||||
});
|
||||
return { nodes, edges };
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setSanitized(sanitizeGraph(graph));
|
||||
}, [graph, sanitizeGraph]);
|
||||
|
||||
const onInit = useCallback((inst: any) => {
|
||||
try {
|
||||
(instRef as any).current = inst;
|
||||
onReady?.({ fitView: () => inst?.fitView?.({ padding: 0.2 }) });
|
||||
inst?.fitView?.({ padding: 0.2 });
|
||||
} catch (err) {
|
||||
logger.error('useAgentCanvas onInit error', err);
|
||||
}
|
||||
}, [onReady]);
|
||||
|
||||
const onNodeClick = useCallback((_: any, node: any) => {
|
||||
if (disableNoteClick && node?.type === 'noteNode') return;
|
||||
setSelectedNode(node);
|
||||
}, [disableNoteClick]);
|
||||
|
||||
const onPaneClick = useCallback(() => setSelectedNode(null), []);
|
||||
const onNodeMouseEnter = useCallback((_: any, node: any) => setHoverNode(node), []);
|
||||
|
||||
// 30秒自动保存（基于当前画布），确保在卸载与依赖变更时清理定时器
|
||||
const autoSaveTimerRef = useRef<number | null>(null);
|
||||
useEffect(() => {
|
||||
// 清理已有定时器，避免重复
|
||||
if (autoSaveTimerRef.current) {
|
||||
clearInterval(autoSaveTimerRef.current);
|
||||
autoSaveTimerRef.current = null;
|
||||
}
|
||||
|
||||
// 数据不完整时不创建定时器（Canvas 不可用或退出）
|
||||
if (!agent?.id || !agent?.title || !sanitized) {
|
||||
return;
|
||||
}
|
||||
|
||||
autoSaveTimerRef.current = window.setInterval(async () => {
|
||||
try {
|
||||
const payload = {
|
||||
id: agent.id,
|
||||
title: agent.title,
|
||||
dsl: { ...(agent.dsl || {}), graph: sanitized },
|
||||
};
|
||||
await agentService.setAgentDSL(payload as any);
|
||||
onAutoSaved?.(new Date());
|
||||
} catch (err) {
|
||||
logger.error('autoSave failed', err);
|
||||
}
|
||||
}, 30000);
|
||||
|
||||
return () => {
|
||||
if (autoSaveTimerRef.current) {
|
||||
clearInterval(autoSaveTimerRef.current);
|
||||
autoSaveTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [agent?.id, agent?.title, agent?.dsl, sanitized, onAutoSaved]);
|
||||
|
||||
return {
|
||||
sanitized,
|
||||
selectedNode,
|
||||
hoverNode,
|
||||
onInit,
|
||||
onNodeClick,
|
||||
onPaneClick,
|
||||
onNodeMouseEnter,
|
||||
} as const;
|
||||
}
|
||||
@@ -60,7 +60,7 @@ export interface IOperatorNode {
|
||||
params: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export declare interface IFlow {
|
||||
export declare interface IAgent {
|
||||
avatar?: string;
|
||||
canvas_type: null;
|
||||
canvas_category?: string;
|
||||
@@ -78,7 +78,7 @@ export declare interface IFlow {
|
||||
operator_permission: number;
|
||||
}
|
||||
|
||||
export interface IFlowTemplate {
|
||||
export interface IAgentTemplate {
|
||||
avatar: string;
|
||||
canvas_type: string;
|
||||
create_date: string;
|
||||
@@ -276,3 +276,24 @@ export interface IPipeLineListRequest {
|
||||
desc?: boolean;
|
||||
// canvas_category?: AgentCategory;
|
||||
}
|
||||
|
||||
// {
|
||||
// "create_date": "Thu, 06 Nov 2025 15:52:42 GMT",
|
||||
// "create_time": 1762415562692,
|
||||
// "id": "931d1cfabae511f097ca36b0b158b556",
|
||||
// "title": "blank_2025_11_06_15_52_42",
|
||||
// "update_date": "Thu, 06 Nov 2025 15:52:42 GMT",
|
||||
// "update_time": 1762415562692,
|
||||
// "user_canvas_id": "1edc3ddabadb11f08d0636b0b158b556"
|
||||
// }
|
||||
|
||||
export interface IAgentVersionItem {
|
||||
id: string;
|
||||
title: string;
|
||||
create_date: string;
|
||||
create_time: number;
|
||||
update_date: string;
|
||||
update_time: number;
|
||||
user_canvas_id: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -1238,6 +1238,10 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
|
||||
createAgentSuccess: 'Agent created successfully',
|
||||
createAgentFailed: 'Agent creation failed',
|
||||
|
||||
// agent detail
|
||||
lastAutoSavedAt: 'Last Auto Saved At {{date}}',
|
||||
versions: 'Versions',
|
||||
|
||||
},
|
||||
message: {
|
||||
registered: 'Registered!',
|
||||
|
||||
@@ -1180,6 +1180,36 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
|
||||
'如果你的模型供应商在这里没有列出，但是宣称 OpenAI-compatible，可以通过选择卡片 OpenAI-API-compatible 设置相关模型。',
|
||||
mcp: 'MCP',
|
||||
},
|
||||
agent: {
|
||||
agentList: '智能体列表',
|
||||
noMatchingAgents: '没有匹配的智能体',
|
||||
noAgents: '没有智能体',
|
||||
tryAdjustingFilters: '尝试调整筛选条件',
|
||||
createFirstAgent: '创建你的第一个智能体',
|
||||
createAgent: '创建智能体',
|
||||
updatedAt: '更新时间',
|
||||
creator: '创建者',
|
||||
nodes: '节点',
|
||||
edges: '边',
|
||||
editAgent: '编辑智能体',
|
||||
deleteAgent: '删除智能体',
|
||||
|
||||
forms: {
|
||||
title: '标题',
|
||||
avatar: '头像',
|
||||
description: '描述',
|
||||
permissionSettings: '权限设置',
|
||||
},
|
||||
|
||||
// create agent
|
||||
useTemplate: '使用模板',
|
||||
createAgentSuccess: '智能体创建成功',
|
||||
createAgentFailed: '智能体创建失败',
|
||||
|
||||
// agent detail
|
||||
lastAutoSavedAt: '上次自动保存时间: {{date}}',
|
||||
versions: '版本',
|
||||
},
|
||||
message: {
|
||||
registered: '注册成功',
|
||||
logout: '登出成功',
|
||||
|
||||
35
src/pages/agent/canvas/NodeDrawer.tsx
Normal file
35
src/pages/agent/canvas/NodeDrawer.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Drawer, Box, Typography, Divider } from '@mui/material';
|
||||
|
||||
export interface NodeDrawerProps {
|
||||
open: boolean;
|
||||
node: any | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function NodeDrawer({ open, node, onClose }: NodeDrawerProps) {
|
||||
const label = node?.data?.label || '';
|
||||
const name = node?.data?.name || '';
|
||||
const type = node?.type || 'default';
|
||||
const form = node?.data?.form ?? {};
|
||||
|
||||
return (
|
||||
<Drawer anchor="right" open={open} onClose={onClose}>
|
||||
<Box sx={{ width: '45vw', p: 2 }}>
|
||||
<Typography variant="h6" fontWeight={600} gutterBottom>
|
||||
{`${label}${name ? ' · ' + name : ''}`}
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
<Typography variant="body2" color="text.secondary" gutterBottom>
|
||||
节点类型：{type}
|
||||
</Typography>
|
||||
<Divider sx={{ my: 2 }} />
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
表单数据
|
||||
</Typography>
|
||||
<Box component="pre" sx={{ fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-word', p: 1, bgcolor: 'action.hover', borderRadius: 1 }}>
|
||||
{JSON.stringify(form, null, 2)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
89
src/pages/agent/canvas/index.tsx
Normal file
89
src/pages/agent/canvas/index.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { ReactFlow, Background, Controls, MiniMap, SmoothStepEdge } from "@xyflow/react";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import { useMemo, useRef, useState, useCallback } from "react";
|
||||
import type { IGraph, IAgent } from '@/interfaces/database/agent';
|
||||
import NodeDrawer from './NodeDrawer';
|
||||
import ReadonlyNode from './node/ReadonlyNode';
|
||||
import NoteNode from './node/NoteNode';
|
||||
import { useAgentCanvas } from '@/hooks/agent-hooks';
|
||||
|
||||
const nodeTypes = {
|
||||
beginNode: ReadonlyNode,
|
||||
agentNode: ReadonlyNode,
|
||||
messageNode: ReadonlyNode,
|
||||
toolNode: ReadonlyNode,
|
||||
noteNode: NoteNode,
|
||||
retrievalNode: ReadonlyNode,
|
||||
ragNode: ReadonlyNode,
|
||||
switchNode: ReadonlyNode,
|
||||
categorizeNode: ReadonlyNode,
|
||||
iterationNode: ReadonlyNode,
|
||||
iterationStartNode: ReadonlyNode,
|
||||
keywordNode: ReadonlyNode,
|
||||
relevantNode: ReadonlyNode,
|
||||
logicNode: ReadonlyNode,
|
||||
emailNode: ReadonlyNode,
|
||||
tokenizerNode: ReadonlyNode,
|
||||
templateNode: ReadonlyNode,
|
||||
rewriteNode: ReadonlyNode,
|
||||
invokeNode: ReadonlyNode,
|
||||
parserNode: ReadonlyNode,
|
||||
fileNode: ReadonlyNode,
|
||||
extractorNode: ReadonlyNode,
|
||||
splitterNode: ReadonlyNode,
|
||||
placeholderNode: ReadonlyNode,
|
||||
contextNode: ReadonlyNode,
|
||||
group: ReadonlyNode,
|
||||
generateNode: ReadonlyNode,
|
||||
} as const;
|
||||
|
||||
const edgeTypes = {
|
||||
buttonEdge: SmoothStepEdge,
|
||||
ButtonEdge: SmoothStepEdge,
|
||||
} as const;
|
||||
|
||||
export interface AgentCanvasProps {
|
||||
agent?: IAgent | null;
|
||||
graph?: IGraph | null;
|
||||
onReady?: (api: { fitView: () => void }) => void;
|
||||
onAutoSaved?: (date: Date) => void;
|
||||
}
|
||||
|
||||
function AgentCanvas({ agent, graph, onReady, onAutoSaved }: AgentCanvasProps) {
|
||||
const { sanitized, selectedNode, hoverNode, onInit,
|
||||
onNodeClick, onPaneClick, onNodeMouseEnter } = useAgentCanvas({ agent, graph, onReady, onAutoSaved });
|
||||
|
||||
return (
|
||||
<Box sx={{ flex: 1, position: 'relative', height: '100%' }}>
|
||||
{sanitized && (
|
||||
<ReactFlow
|
||||
nodes={sanitized.nodes || []}
|
||||
edges={sanitized.edges || []}
|
||||
fitView
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
defaultEdgeOptions={{ animated: true, type: 'smoothstep' }}
|
||||
nodeTypes={nodeTypes as any}
|
||||
edgeTypes={edgeTypes as any}
|
||||
onNodeClick={onNodeClick}
|
||||
onPaneClick={onPaneClick}
|
||||
onNodeMouseEnter={onNodeMouseEnter}
|
||||
onInit={onInit}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
minZoom={0.25}
|
||||
maxZoom={2}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
>
|
||||
<Background />
|
||||
<MiniMap pannable zoomable />
|
||||
<Controls showInteractive={false} />
|
||||
</ReactFlow>
|
||||
)}
|
||||
<NodeDrawer open={!!selectedNode} node={hoverNode || selectedNode} onClose={onPaneClick} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default AgentCanvas;
|
||||
15
src/pages/agent/canvas/node/NoteNode.tsx
Normal file
15
src/pages/agent/canvas/node/NoteNode.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Handle, Position, type NodeProps } from '@xyflow/react';
|
||||
|
||||
export default function NoteNode({ data }: NodeProps) {
|
||||
const text = (data as any)?.form?.text || '';
|
||||
const name = (data as any)?.name || 'Note';
|
||||
return (
|
||||
<Box sx={{ p: 1.25, bgcolor: 'background.paper', border: '1px dashed', borderColor: 'divider', borderRadius: 1.5, minWidth: 240 }}>
|
||||
<Box sx={{ fontSize: 12, color: 'text.secondary', mb: 0.5 }}>{name}</Box>
|
||||
<Box sx={{ fontSize: 13, lineHeight: 1.5, maxHeight: 120, overflow: 'auto' }}>{String(text)}</Box>
|
||||
<Handle type="target" position={Position.Left} id="left" />
|
||||
<Handle type="source" position={Position.Right} id="right" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
15
src/pages/agent/canvas/node/ReadonlyNode.tsx
Normal file
15
src/pages/agent/canvas/node/ReadonlyNode.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Box } from '@mui/material';
|
||||
import { Handle, Position, type NodeProps } from '@xyflow/react';
|
||||
|
||||
export default function ReadonlyNode({ data }: NodeProps) {
|
||||
const label = (data as any)?.label || '';
|
||||
const name = (data as any)?.name || '';
|
||||
return (
|
||||
<Box sx={{ p: 1.25, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider', borderRadius: 1.5, minWidth: 160 }}>
|
||||
<Box sx={{ fontSize: 12, color: 'text.secondary', mb: 0.5 }}>{label}</Box>
|
||||
<Box sx={{ fontSize: 14, fontWeight: 600 }}>{name}</Box>
|
||||
<Handle type="target" position={Position.Left} id="left" />
|
||||
<Handle type="source" position={Position.Right} id="right" />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
47
src/pages/agent/components/AgentTopbar.tsx
Normal file
47
src/pages/agent/components/AgentTopbar.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { Breadcrumbs, Button, Box, Typography, IconButton } from '@mui/material';
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
|
||||
export interface AgentTopbarProps {
|
||||
title?: string;
|
||||
id?: string;
|
||||
onRefresh?: () => void;
|
||||
subtitle?: string;
|
||||
actionsRight?: React.ReactNode;
|
||||
onOpenVersions?: () => void;
|
||||
onOpenSettings?: () => void;
|
||||
}
|
||||
|
||||
export default function AgentTopbar({ title, id, onRefresh, subtitle, actionsRight, onOpenVersions, onOpenSettings }: AgentTopbarProps) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<Box sx={{
|
||||
p: 2,
|
||||
backgroundColor: 'background.paper',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'left', gap: 1 }}>
|
||||
<Breadcrumbs aria-label="breadcrumb">
|
||||
<RouterLink to="/agents" style={{ textDecoration: 'none' }}>{t('header.agent')}</RouterLink>
|
||||
<Typography color="text.primary">{title}</Typography>
|
||||
</Breadcrumbs>
|
||||
{subtitle && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>{subtitle}</Typography>
|
||||
)}
|
||||
</Box>
|
||||
<Box display="flex" gap={1}>
|
||||
{actionsRight}
|
||||
<Button variant="contained" onClick={onOpenVersions}>{t('agent.versions')}</Button>
|
||||
<Button variant="outlined" onClick={onRefresh}>{t('common.refresh')}</Button>
|
||||
<IconButton aria-label="setting" onClick={onOpenSettings}>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
import { Add as AddIcon } from '@mui/icons-material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import agentService from '@/services/agent_service';
|
||||
import type { IFlowTemplate } from '@/interfaces/database/agent';
|
||||
import type { IAgentTemplate } from '@/interfaces/database/agent';
|
||||
import { useSnackbar } from '@/hooks/useSnackbar';
|
||||
import { AgentCategory } from '@/constants/agent';
|
||||
import { IAgentCreateRequestBody } from '@/interfaces/request/agent';
|
||||
@@ -36,7 +36,7 @@ const CreateAgentDialog: React.FC<CreateAgentDialogProps> = ({ open, onClose, on
|
||||
const { showMessage } = useSnackbar();
|
||||
const ops = useAgentOperations();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [templates, setTemplates] = useState<IFlowTemplate[]>([]);
|
||||
const [templates, setTemplates] = useState<IAgentTemplate[]>([]);
|
||||
const [activeCategory, setActiveCategory] = useState<string>('Recommended');
|
||||
const categoryRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
||||
const lang = i18n.language?.startsWith('zh') ? 'zh' : 'en';
|
||||
@@ -101,7 +101,7 @@ const CreateAgentDialog: React.FC<CreateAgentDialogProps> = ({ open, onClose, on
|
||||
return templates.filter((tpl) => tpl.canvas_type === activeCategory);
|
||||
}, [templates, activeCategory]);
|
||||
|
||||
const handleUseTemplate = async (tpl: IFlowTemplate) => {
|
||||
const handleUseTemplate = async (tpl: IAgentTemplate) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const body: IAgentCreateRequestBody = {
|
||||
|
||||
@@ -18,12 +18,12 @@ import {
|
||||
} from '@mui/material';
|
||||
import { PhotoCamera as PhotoCameraIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { IFlow } from '@/interfaces/database/agent';
|
||||
import type { IAgent } from '@/interfaces/database/agent';
|
||||
import { useAgentOperations } from '@/hooks/agent-hooks';
|
||||
|
||||
export interface EditAgentDialogProps {
|
||||
open: boolean;
|
||||
agent: IFlow | null;
|
||||
agent?: IAgent;
|
||||
onClose: () => void;
|
||||
onSaved?: () => void;
|
||||
}
|
||||
|
||||
144
src/pages/agent/components/VersionListDialog.tsx
Normal file
144
src/pages/agent/components/VersionListDialog.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useMemo, useState, useCallback } from 'react';
|
||||
import { Dialog, DialogTitle, DialogContent, Box, List, ListItemButton, ListItemText, Divider, Typography } from '@mui/material';
|
||||
import { ReactFlow, Background, MiniMap, Controls, SmoothStepEdge } from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
import agentService from '@/services/agent_service';
|
||||
import type { IAgentVersionItem, IAgent, IGraph } from '@/interfaces/database/agent';
|
||||
import ReadonlyNode from '@/pages/agent/canvas/node/ReadonlyNode';
|
||||
import NoteNode from '@/pages/agent/canvas/node/NoteNode';
|
||||
|
||||
function sanitizeGraph(g?: IGraph | null): IGraph | null {
|
||||
if (!g) return null;
|
||||
const nodes = (g.nodes || []).map((n: any) => ({ ...n, draggable: false, selectable: false }));
|
||||
const edges = (g.edges || []).map((e: any) => {
|
||||
const { sourceHandle, targetHandle, ...rest } = e || {};
|
||||
return { ...rest };
|
||||
});
|
||||
return { nodes, edges };
|
||||
}
|
||||
|
||||
const nodeTypes = {
|
||||
beginNode: ReadonlyNode,
|
||||
agentNode: ReadonlyNode,
|
||||
messageNode: ReadonlyNode,
|
||||
toolNode: ReadonlyNode,
|
||||
noteNode: NoteNode,
|
||||
retrievalNode: ReadonlyNode,
|
||||
ragNode: ReadonlyNode,
|
||||
switchNode: ReadonlyNode,
|
||||
categorizeNode: ReadonlyNode,
|
||||
iterationNode: ReadonlyNode,
|
||||
iterationStartNode: ReadonlyNode,
|
||||
keywordNode: ReadonlyNode,
|
||||
relevantNode: ReadonlyNode,
|
||||
logicNode: ReadonlyNode,
|
||||
emailNode: ReadonlyNode,
|
||||
tokenizerNode: ReadonlyNode,
|
||||
templateNode: ReadonlyNode,
|
||||
rewriteNode: ReadonlyNode,
|
||||
invokeNode: ReadonlyNode,
|
||||
parserNode: ReadonlyNode,
|
||||
fileNode: ReadonlyNode,
|
||||
extractorNode: ReadonlyNode,
|
||||
splitterNode: ReadonlyNode,
|
||||
placeholderNode: ReadonlyNode,
|
||||
contextNode: ReadonlyNode,
|
||||
group: ReadonlyNode,
|
||||
generateNode: ReadonlyNode,
|
||||
} as const;
|
||||
|
||||
const edgeTypes = { buttonEdge: SmoothStepEdge, ButtonEdge: SmoothStepEdge } as const;
|
||||
|
||||
export interface VersionListDialogProps {
|
||||
open: boolean;
|
||||
canvasId?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function VersionListDialog({ open, canvasId, onClose }: VersionListDialogProps) {
|
||||
const [versions, setVersions] = useState<IAgentVersionItem[]>([]);
|
||||
const [selected, setSelected] = useState<IAgentVersionItem | null>(null);
|
||||
const [detail, setDetail] = useState<IAgent | null>(null);
|
||||
|
||||
const graph = useMemo(() => sanitizeGraph(detail?.dsl?.graph), [detail]);
|
||||
|
||||
const fetchList = useCallback(async () => {
|
||||
if (!canvasId) return;
|
||||
const res = await agentService.getAgentVersionList(canvasId);
|
||||
const list = res?.data?.data || res?.data || [];
|
||||
setVersions(list);
|
||||
const first = list?.[0] || null;
|
||||
setSelected(first);
|
||||
}, [canvasId]);
|
||||
|
||||
const fetchDetail = useCallback(async (versionId?: string) => {
|
||||
if (!versionId) return;
|
||||
const res = await agentService.getVersion(versionId);
|
||||
const data = res?.data?.data || res?.data;
|
||||
setDetail(data);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) fetchList();
|
||||
}, [open, fetchList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selected?.id) fetchDetail(selected.id);
|
||||
}, [selected, fetchDetail]);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} fullWidth maxWidth="lg">
|
||||
<DialogTitle>历史版本</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ display: 'flex', gap: 2, height: 520 }}>
|
||||
<Box sx={{ width: 280, borderRight: '1px solid', borderColor: 'divider', overflow: 'auto' }}>
|
||||
<List dense>
|
||||
{versions.map((v) => (
|
||||
<ListItemButton
|
||||
key={v.id}
|
||||
selected={selected?.id === v.id}
|
||||
onClick={() => setSelected(v)}
|
||||
>
|
||||
<ListItemText
|
||||
primary={v.title}
|
||||
secondary={`Created: ${v.create_date} ${new Date((String(v.create_time).length >= 13 ? v.create_time : v.create_time * 1000)).toLocaleTimeString()}`}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, position: 'relative' }}>
|
||||
<Typography variant="subtitle1" gutterBottom>
|
||||
{detail?.title || selected?.title || '未选择版本'}
|
||||
</Typography>
|
||||
<Divider sx={{ mb: 2 }} />
|
||||
{graph && (
|
||||
<Box sx={{ height: 440 }}>
|
||||
<ReactFlow
|
||||
nodes={graph.nodes || []}
|
||||
edges={graph.edges || []}
|
||||
fitView
|
||||
nodesDraggable={false}
|
||||
nodesConnectable={false}
|
||||
elementsSelectable={false}
|
||||
nodeTypes={nodeTypes as any}
|
||||
edgeTypes={edgeTypes as any}
|
||||
defaultEdgeOptions={{ animated: true, type: 'smoothstep' }}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
minZoom={0.25}
|
||||
maxZoom={2}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
>
|
||||
<Background />
|
||||
<MiniMap pannable zoomable />
|
||||
<Controls showInteractive={false} />
|
||||
</ReactFlow>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Box, Typography, Alert, CircularProgress } from "@mui/material";
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useAgentDetail } from '@/hooks/agent-hooks';
|
||||
import { useState } from 'react';
|
||||
import AgentTopbar from '@/pages/agent/components/AgentTopbar';
|
||||
import AgentCanvas from '@/pages/agent/canvas';
|
||||
import VersionListDialog from '@/pages/agent/components/VersionListDialog';
|
||||
import EditAgentDialog from '@/pages/agent/components/EditAgentDialog';
|
||||
import dayjs from "dayjs";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function AgentDetailPage() {
|
||||
const { id } = useParams();
|
||||
const { agent, graph, loading, error, refresh } = useAgentDetail(id);
|
||||
const [canvasApi, setCanvasApi] = useState<{ fitView: () => void } | null>(null);
|
||||
const [lastAutoSavedAt, setLastAutoSavedAt] = useState<Date | null>(null);
|
||||
const [versionOpen, setVersionOpen] = useState(false);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const subtitle = (() => {
|
||||
const ts = agent?.update_time ?? agent?.create_time;
|
||||
if (!ts) return undefined;
|
||||
const d = new Date(ts);
|
||||
const dStr = dayjs(d).format('YYYY-MM-DD HH:mm:ss');
|
||||
return t('agent.lastAutoSavedAt', { date: dStr });
|
||||
})();
|
||||
|
||||
return (
|
||||
<Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<AgentTopbar
|
||||
title={agent?.title}
|
||||
id={id}
|
||||
onRefresh={refresh}
|
||||
subtitle={lastAutoSavedAt ? t('agent.lastAutoSavedAt', { date: dayjs(lastAutoSavedAt).format('YYYY-MM-DD HH:mm:ss') }) : subtitle}
|
||||
onOpenVersions={() => setVersionOpen(true)}
|
||||
onOpenSettings={() => setEditOpen(true)}
|
||||
/>
|
||||
|
||||
<Box sx={{ flex: 1, position: 'relative' }}>
|
||||
{loading && (
|
||||
<Box sx={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)}
|
||||
{error && (
|
||||
<Box sx={{ p: 2 }}>
|
||||
<Alert severity="error">{error}</Alert>
|
||||
</Box>
|
||||
)}
|
||||
<AgentCanvas agent={agent} graph={graph} onReady={(api) => setCanvasApi(api)} onAutoSaved={(date) => setLastAutoSavedAt(date)} />
|
||||
<VersionListDialog open={versionOpen} canvasId={id} onClose={() => setVersionOpen(false)} />
|
||||
<EditAgentDialog
|
||||
open={editOpen}
|
||||
agent={agent as any}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onSaved={() => { setEditOpen(false); refresh(); }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default AgentDetailPage;
|
||||
@@ -16,6 +16,7 @@ import CreateAgentDialog from '@/pages/agent/components/CreateAgentDialog';
|
||||
import EditAgentDialog from '@/pages/agent/components/EditAgentDialog';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDialog } from '@/hooks/useDialog';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
function AgentListPage() {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
@@ -34,6 +35,7 @@ function AgentListPage() {
|
||||
} = useAgentList({ page: 1, page_size: 10 });
|
||||
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const dialog = useDialog();
|
||||
const ops = useAgentOperations();
|
||||
|
||||
@@ -103,6 +105,9 @@ function AgentListPage() {
|
||||
searchTerm={searchValue}
|
||||
onCreateAgent={() => setCreateOpen(true)}
|
||||
onEdit={(agent) => { setEditTarget(agent); setEditOpen(true); }}
|
||||
onView={(agent) => {
|
||||
navigate(`/agent/${agent.id}`);
|
||||
}}
|
||||
onDelete={async (agent) => {
|
||||
const confirmed = await dialog.confirm({
|
||||
title: t('dialog.confirmDelete'),
|
||||
|
||||
@@ -25,6 +25,7 @@ import MCP from '../pages/MCP';
|
||||
import FormFieldTest from '../pages/FormFieldTest';
|
||||
import ChunkParsedResult from '../pages/chunk/parsed-result';
|
||||
import DocumentPreview from '../pages/chunk/document-preview';
|
||||
import AgentDetailPage from '@/pages/agent/detail';
|
||||
|
||||
const AppRoutes = () => {
|
||||
return (
|
||||
@@ -45,10 +46,13 @@ const AppRoutes = () => {
|
||||
<Route path="overview" element={<KnowledgeLogsPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
<Route path="agent">
|
||||
<Route path="agents">
|
||||
<Route index element={<AgentList />} />
|
||||
</Route>
|
||||
</Route>
|
||||
<Route path="agent">
|
||||
<Route path=":id" element={<AgentDetailPage />} />
|
||||
</Route>
|
||||
{/* 处理chunk相关路由 需要传入 kb_id doc_id */}
|
||||
<Route path="chunk">
|
||||
<Route path="parsed-result" element={<ChunkParsedResult />} />
|
||||
|
||||
@@ -61,6 +61,42 @@ const agentService = {
|
||||
setAgentDSL: (data: Partial<IAgentSetDSLRequestBody>) => {
|
||||
return request.post(api.setCanvas, data);
|
||||
},
|
||||
/**
|
||||
* 运行 Canvas（同步接口）
|
||||
*/
|
||||
runCanvas: (body: Record<string, any>) => {
|
||||
return request.post(api.runCanvas, body);
|
||||
},
|
||||
/**
|
||||
* 数据库连接测试
|
||||
*/
|
||||
testDbConnect: (body: Record<string, any>) => {
|
||||
return request.post(api.testDbConnect, body);
|
||||
},
|
||||
/**
|
||||
* 获取输入元素（Begin Inputs）
|
||||
*/
|
||||
getInputElements: (params?: Record<string, any>) => {
|
||||
return request.get(api.getInputElements, { params });
|
||||
},
|
||||
/**
|
||||
* 调试运行（Debug 单步）
|
||||
*/
|
||||
debug: (body: Record<string, any>) => {
|
||||
return request.post(api.debug, body);
|
||||
},
|
||||
/**
|
||||
* 上传与 Canvas 相关的文件
|
||||
*/
|
||||
uploadCanvasFile: (formData: FormData) => {
|
||||
return request.post(api.uploadCanvasFile, formData);
|
||||
},
|
||||
/**
|
||||
* 获取 Canvas 运行追踪
|
||||
*/
|
||||
trace: (params?: Record<string, any>) => {
|
||||
return request.get(api.trace, { params });
|
||||
},
|
||||
/**
|
||||
* 获取智能体版本详情
|
||||
* @param version_id 版本ID
|
||||
@@ -75,7 +111,13 @@ const agentService = {
|
||||
getAgentVersionList: (canvas_id: string) => {
|
||||
return request.get(`${api.getListVersion}/${canvas_id}`);
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取智能体 Prompts
|
||||
* {Promise<{task_analysis: string,citation_guidelines: string, plan_generation: string, reflection: string}>}
|
||||
*/
|
||||
getCanvasPrompt: () => {
|
||||
return request.get(api.prompts);
|
||||
},
|
||||
};
|
||||
|
||||
export default agentService;
|
||||
@@ -177,7 +177,7 @@ export default {
|
||||
`${api_host}/canvas/${canvasId}/sessions`,
|
||||
fetchExternalAgentInputs: (canvasId: string) =>
|
||||
`${ExternalApi}${api_host}/agentbots/${canvasId}/inputs`,
|
||||
prompt: `${api_host}/canvas/prompts`,
|
||||
prompts: `${api_host}/canvas/prompts`,
|
||||
cancelDataflow: (id: string) => `${api_host}/canvas/cancel/${id}`,
|
||||
downloadFile: `${api_host}/canvas/download`,
|
||||
|
||||
|
||||
Reference in New Issue
Block a user