AI_POC/TERES_web_frontend
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agent-mui): add agent canvas, nodes, and related components

Browse Source 
docs(agent-hooks-guide): add comprehensive guide for agent hooks usage and implementation
This commit is contained in:
guangfei.zhao
2025-11-07 17:49:44 +08:00
parent b610ee0a8f
commit ed6e0ab282
24 changed files with 528 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/pages/agent/canvas/NodeDrawer.tsx → src/pages/agent-mui/canvas/NodeDrawer.tsx
View File

0
src/pages/agent/canvas/index.tsx → src/pages/agent-mui/canvas/index.tsx
View File

0
src/pages/agent/canvas/node/NoteNode.tsx → src/pages/agent-mui/canvas/node/NoteNode.tsx
View File

0
src/pages/agent/canvas/node/ReadonlyNode.tsx → src/pages/agent-mui/canvas/node/ReadonlyNode.tsx
View File

0
src/pages/agent/components/AgentTopbar.tsx → src/pages/agent-mui/components/AgentTopbar.tsx
View File

0
src/pages/agent/components/CreateAgentDialog.tsx → src/pages/agent-mui/components/CreateAgentDialog.tsx
View File

0
src/pages/agent/components/EditAgentDialog.tsx → src/pages/agent-mui/components/EditAgentDialog.tsx
View File

4
src/pages/agent/components/VersionListDialog.tsx → src/pages/agent-mui/components/VersionListDialog.tsx
View File

@@ -4,8 +4,8 @@ import { ReactFlow, Background, MiniMap, Controls, SmoothStepEdge } from '@xyflo
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';
import ReadonlyNode from '../canvas/node/ReadonlyNode';
import NoteNode from '../canvas/node/NoteNode';
function sanitizeGraph(g?: IGraph | null): IGraph | null {
if (!g) return null;

8
src/pages/agent/detail.tsx → src/pages/agent-mui/detail.tsx
View File

@@ -2,10 +2,10 @@ 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 AgentTopbar from './components/AgentTopbar';
import AgentCanvas from './canvas';
import VersionListDialog from './components/VersionListDialog';
import EditAgentDialog from './components/EditAgentDialog';
import dayjs from "dayjs";
import { useTranslation } from "react-i18next";

4
src/pages/agent/list.tsx → src/pages/agent-mui/list.tsx
View File

@@ -12,8 +12,8 @@ import {
import { Search as SearchIcon, Refresh as RefreshIcon, Add as AddIcon } from '@mui/icons-material';
import { useAgentList, useAgentOperations } from '@/hooks/agent-hooks';
import AgentGridView from '@/components/agent/AgentGridView';
import CreateAgentDialog from '@/pages/agent/components/CreateAgentDialog';
import EditAgentDialog from '@/pages/agent/components/EditAgentDialog';
import CreateAgentDialog from './components/CreateAgentDialog';
import EditAgentDialog from './components/EditAgentDialog';
import { useTranslation } from 'react-i18next';
import { useDialog } from '@/hooks/useDialog';
import { useNavigate } from 'react-router-dom';

32
src/pages/knowledge/components/ChunkMethodForm.tsx
View File

@@ -8,7 +8,7 @@ import {
Card,
CardContent,
} from '@mui/material';
import { DOCUMENT_PARSER_TYPES, ParseType, type DocumentParserType } from '@/constants/knowledge';
import { DocumentParserType, ParseType } from '@/constants/knowledge';
import { type IParserConfig } from '@/interfaces/database/knowledge';
import {
NaiveConfiguration,
@@ -31,21 +31,21 @@ import { RadioFormField } from '@/components/FormField';
// 配置组件映射表
const ConfigurationComponentMap = {
[DOCUMENT_PARSER_TYPES.Naive]: NaiveConfiguration,
[DOCUMENT_PARSER_TYPES.Qa]: QAConfiguration,
[DOCUMENT_PARSER_TYPES.Resume]: ResumeConfiguration,
[DOCUMENT_PARSER_TYPES.Manual]: ManualConfiguration,
[DOCUMENT_PARSER_TYPES.Table]: TableConfiguration,
[DOCUMENT_PARSER_TYPES.Paper]: PaperConfiguration,
[DOCUMENT_PARSER_TYPES.Book]: BookConfiguration,
[DOCUMENT_PARSER_TYPES.Laws]: LawsConfiguration,
[DOCUMENT_PARSER_TYPES.Presentation]: PresentationConfiguration,
[DOCUMENT_PARSER_TYPES.One]: OneConfiguration,
[DOCUMENT_PARSER_TYPES.Tag]: TagConfiguration,
[DOCUMENT_PARSER_TYPES.KnowledgeGraph]: TagConfiguration,
[DOCUMENT_PARSER_TYPES.Picture]: TagConfiguration,
[DOCUMENT_PARSER_TYPES.Audio]: TagConfiguration,
[DOCUMENT_PARSER_TYPES.Email]: TagConfiguration,
[DocumentParserType.Naive]: NaiveConfiguration,
[DocumentParserType.Qa]: QAConfiguration,
[DocumentParserType.Resume]: ResumeConfiguration,
[DocumentParserType.Manual]: ManualConfiguration,
[DocumentParserType.Table]: TableConfiguration,
[DocumentParserType.Paper]: PaperConfiguration,
[DocumentParserType.Book]: BookConfiguration,
[DocumentParserType.Laws]: LawsConfiguration,
[DocumentParserType.Presentation]: PresentationConfiguration,
[DocumentParserType.One]: OneConfiguration,
[DocumentParserType.Tag]: TagConfiguration,
[DocumentParserType.KnowledgeGraph]: TagConfiguration,
[DocumentParserType.Picture]: TagConfiguration,
[DocumentParserType.Audio]: TagConfiguration,
[DocumentParserType.Email]: TagConfiguration,
// [DOCUMENT_PARSER_TYPES.KnowledgeGraph]: KnowledgeGraphConfiguration,
// [DOCUMENT_PARSER_TYPES.Picture]: PictureConfiguration,
// [DOCUMENT_PARSER_TYPES.Audio]: AudioConfiguration,

4
src/pages/knowledge/components/CreateKnowledgeDialog.tsx
View File

@@ -13,7 +13,7 @@ import { useForm, FormProvider } from 'react-hook-form';
import GeneralForm from './GeneralForm';
import { RadioFormField } from '@/components/FormField';
import { ChunkMethodItem, PipelineSelectorItem } from '../configuration';
import { DOCUMENT_PARSER_TYPES, ParseType } from '@/constants/knowledge';
import { DocumentParserType, ParseType } from '@/constants/knowledge';
import { useKnowledgeOperations } from '@/hooks/knowledge-hooks';
import { useSnackbar } from '@/components/Provider/SnackbarProvider';
@@ -38,7 +38,7 @@ function CreateKnowledgeDialog({ open, onClose, onSuccess }: CreateKnowledgeDial
pagerank: 0,
embd_id: '',
// 解析相关
parser_id: DOCUMENT_PARSER_TYPES.Naive,
parser_id: DocumentParserType.Naive,
pipeline_id: '',
parseType: ParseType.BuildIn,
},

26
src/pages/knowledge/components/DocumentListComponent.tsx
View File

@@ -52,7 +52,7 @@ import { DataGrid, type GridColDef, type GridRowSelectionModel } from '@mui/x-da
import { zhCN, enUS } from '@mui/x-data-grid/locales';
import type { IKnowledgeFile } from '@/interfaces/database/knowledge';
import type { IDocumentInfoFilter } from '@/interfaces/database/document';
import { RUNNING_STATUS_KEYS, type RunningStatus } from '@/constants/knowledge';
import { RunningStatus } from '@/constants/knowledge';
import { LanguageAbbreviation } from '@/locales';
import dayjs from 'dayjs';
import logger from '@/utils/logger';
@@ -92,11 +92,11 @@ interface DocumentListComponentProps {
const getRunStatusLabel = (status: string) => {
const statusLabels = {
[RUNNING_STATUS_KEYS.UNSTART]: translate('knowledge.runStatus.unstart'),
[RUNNING_STATUS_KEYS.RUNNING]: translate('knowledge.runStatus.running'),
[RUNNING_STATUS_KEYS.CANCEL]: translate('knowledge.runStatus.cancel'),
[RUNNING_STATUS_KEYS.DONE]: translate('knowledge.runStatus.done'),
[RUNNING_STATUS_KEYS.FAIL]: translate('knowledge.runStatus.fail'),
[RunningStatus.UNSTART]: translate('knowledge.runStatus.unstart'),
[RunningStatus.RUNNING]: translate('knowledge.runStatus.running'),
[RunningStatus.CANCEL]: translate('knowledge.runStatus.cancel'),
[RunningStatus.DONE]: translate('knowledge.runStatus.done'),
[RunningStatus.FAIL]: translate('knowledge.runStatus.fail'),
};
return statusLabels[status as keyof typeof statusLabels] || translate('knowledge.runStatus.unknown');
};
@@ -146,16 +146,16 @@ const getStatusChip = (status: string) => {
const getRunStatusChip = (run: RunningStatus, progress: number) => {
const statusConfig = {
[RUNNING_STATUS_KEYS.UNSTART]: { label: translate('knowledge.runStatus.unstart'), color: 'default' as const },
[RUNNING_STATUS_KEYS.RUNNING]: { label: translate('knowledge.runStatus.parsing'), color: 'info' as const },
[RUNNING_STATUS_KEYS.CANCEL]: { label: translate('knowledge.runStatus.cancel'), color: 'warning' as const },
[RUNNING_STATUS_KEYS.DONE]: { label: translate('knowledge.runStatus.done'), color: 'success' as const },
[RUNNING_STATUS_KEYS.FAIL]: { label: translate('knowledge.runStatus.fail'), color: 'error' as const },
[RunningStatus.UNSTART]: { label: translate('knowledge.runStatus.unstart'), color: 'default' as const },
[RunningStatus.RUNNING]: { label: translate('knowledge.runStatus.parsing'), color: 'info' as const },
[RunningStatus.CANCEL]: { label: translate('knowledge.runStatus.cancel'), color: 'warning' as const },
[RunningStatus.DONE]: { label: translate('knowledge.runStatus.done'), color: 'success' as const },
[RunningStatus.FAIL]: { label: translate('knowledge.runStatus.fail'), color: 'error' as const },
};
const config = statusConfig[run] || { label: translate('knowledge.runStatus.unknown'), color: 'default' as const };
if (run === RUNNING_STATUS_KEYS.RUNNING) {
if (run === RunningStatus.RUNNING) {
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CircularProgress size={16} />
@@ -648,7 +648,7 @@ const DocumentListComponent: React.FC<DocumentListComponentProps> = ({
<PlayIcon sx={{ mr: 1 }} />
<Typography>{t('knowledge.reparse')}</Typography>
</MenuItem>
{selectedFile?.run === RUNNING_STATUS_KEYS.RUNNING && (
{selectedFile?.run === RunningStatus.RUNNING && (
<MenuItem onClick={handleCancelRun}>
<StopIcon sx={{ mr: 1 }} />
<Typography>{t('knowledge.cancelRun')}</Typography>

26
src/pages/knowledge/configuration/common-items.tsx
View File

@@ -14,7 +14,7 @@ import { Shuffle as ShuffleIcon } from '@mui/icons-material';
import { useFormContext, Controller } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { t as translate } from 'i18next';
import { DOCUMENT_PARSER_TYPES, LLM_MODEL_TYPES, type LlmModelType } from '@/constants/knowledge';
import { DocumentParserType, LlmModelType } from '@/constants/knowledge';
import { AgentCategory } from '@/constants/agent';
import { useSelectChunkMethodList } from '../hooks';
import { useEmbeddingModelOptions, useLlmOptionsByModelType } from '@/hooks/llm-hooks';
@@ -35,17 +35,17 @@ import { getFactoryIconName } from '@/utils/common';
// 解析器选项配置
const PARSER_OPTIONS = [
{ value: DOCUMENT_PARSER_TYPES.Naive, label: 'General', description: translate('knowledge.config.parser.general') },
{ value: DOCUMENT_PARSER_TYPES.Qa, label: 'Q&A', description: translate('knowledge.config.parser.qa') },
{ value: DOCUMENT_PARSER_TYPES.Resume, label: 'Resume', description: translate('knowledge.config.parser.resume') },
{ value: DOCUMENT_PARSER_TYPES.Manual, label: 'Manual', description: translate('knowledge.config.parser.manual') },
{ value: DOCUMENT_PARSER_TYPES.Table, label: 'Table', description: translate('knowledge.config.parser.table') },
{ value: DOCUMENT_PARSER_TYPES.Paper, label: 'Paper', description: translate('knowledge.config.parser.paper') },
{ value: DOCUMENT_PARSER_TYPES.Book, label: 'Book', description: translate('knowledge.config.parser.book') },
{ value: DOCUMENT_PARSER_TYPES.Laws, label: 'Laws', description: translate('knowledge.config.parser.laws') },
{ value: DOCUMENT_PARSER_TYPES.Presentation, label: 'Presentation', description: translate('knowledge.config.parser.presentation') },
{ value: DOCUMENT_PARSER_TYPES.One, label: 'One', description: translate('knowledge.config.parser.one') },
{ value: DOCUMENT_PARSER_TYPES.Tag, label: 'Tag', description: translate('knowledge.config.parser.tag') },
{ value: DocumentParserType.Naive, label: 'General', description: translate('knowledge.config.parser.general') },
{ value: DocumentParserType.Qa, label: 'Q&A', description: translate('knowledge.config.parser.qa') },
{ value: DocumentParserType.Resume, label: 'Resume', description: translate('knowledge.config.parser.resume') },
{ value: DocumentParserType.Manual, label: 'Manual', description: translate('knowledge.config.parser.manual') },
{ value: DocumentParserType.Table, label: 'Table', description: translate('knowledge.config.parser.table') },
{ value: DocumentParserType.Paper, label: 'Paper', description: translate('knowledge.config.parser.paper') },
{ value: DocumentParserType.Book, label: 'Book', description: translate('knowledge.config.parser.book') },
{ value: DocumentParserType.Laws, label: 'Laws', description: translate('knowledge.config.parser.laws') },
{ value: DocumentParserType.Presentation, label: 'Presentation', description: translate('knowledge.config.parser.presentation') },
{ value: DocumentParserType.One, label: 'One', description: translate('knowledge.config.parser.one') },
{ value: DocumentParserType.Tag, label: 'Tag', description: translate('knowledge.config.parser.tag') },
];
/* ============================================================================
@@ -197,7 +197,7 @@ export function LayoutRecognizeItem() {
];
// 获取图像转文本模型选项
const image2TextOptions = getOptionsByModelType(LLM_MODEL_TYPES.Image2text);
const image2TextOptions = getOptionsByModelType(LlmModelType.Image2text);
return { basicOptions, image2TextOptions };
}, [getOptionsByModelType, t]);

4
src/pages/knowledge/create.tsx
View File

@@ -24,7 +24,7 @@ import { useKnowledgeOperations, useKnowledgeDetail } from '@/hooks/knowledge-ho
import GeneralForm from './components/GeneralForm';
import ChunkMethodForm from './components/ChunkMethodForm';
import { useSnackbar } from '@/components/Provider/SnackbarProvider';
import { DOCUMENT_PARSER_TYPES } from '@/constants/knowledge';
import { DocumentParserType } from '@/constants/knowledge';
import logger from '@/utils/logger';
function KnowledgeBaseCreate() {
@@ -57,7 +57,7 @@ function KnowledgeBaseCreate() {
permission: 'me',
avatar: undefined,
pagerank: 0,
parser_id: DOCUMENT_PARSER_TYPES.Naive,
parser_id: DocumentParserType.Naive,
embd_id: '',
parser_config: {
chunk_token_num: 512,

4
src/pages/knowledge/detail.tsx
View File

@@ -32,7 +32,7 @@ import FloatingActionButtons from './components/FloatingActionButtons';
import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
import KnowledgeGraphView from './components/KnowledgeGraphView';
import { useDocumentList, useDocumentOperations } from '@/hooks/document-hooks';
import { RUNNING_STATUS_KEYS } from '@/constants/knowledge';
import { RunningStatus } from '@/constants/knowledge';
import { useKnowledgeDetail } from '@/hooks/knowledge-hooks';
import logger from '@/utils/logger';
@@ -210,7 +210,7 @@ function KnowledgeBaseDetail() {
};
// 检查是否有运行中的文档
const hasRunningDocuments = files.some(file => file.run === RUNNING_STATUS_KEYS.RUNNING);
const hasRunningDocuments = files.some(file => file.run === RunningStatus.RUNNING);
// 根据运行状态自动管理轮询
useEffect(() => {

4
src/pages/knowledge/setting.tsx
View File

@@ -20,7 +20,7 @@ import GeneralForm from './components/GeneralForm';
import ChunkMethodForm, { type ConfigFormData } from './components/ChunkMethodForm';
import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
import { useSnackbar } from '@/components/Provider/SnackbarProvider';
import { DOCUMENT_PARSER_TYPES } from '@/constants/knowledge';
import { DocumentParserType } from '@/constants/knowledge';
import { MainContainer } from './configuration';
// 统一表单数据类型
@@ -74,7 +74,7 @@ function KnowledgeBaseSetting() {
description: knowledge.description || '',
permission: knowledge.permission || 'me',
avatar: knowledge.avatar,
parser_id: knowledge.parser_id || DOCUMENT_PARSER_TYPES.Naive,
parser_id: knowledge.parser_id || DocumentParserType.Naive,
embd_id: knowledge.embd_id || '',
pagerank: knowledge.pagerank || 0,
parser_config: {

14
src/pages/setting/hooks/useModelDialogs.ts
View File

@@ -9,7 +9,7 @@ import type {
} from '../components/ModelDialogs';
import type { ITenantInfo } from '@/interfaces/database/knowledge';
import { useLlmList } from '@/hooks/llm-hooks';
import type { LlmModelType } from '@/constants/knowledge';
import { LlmModelType } from '@/constants/knowledge';
import { useUserData } from '@/hooks/useUserData';
import type { ISetApiKeyRequestBody, IAddLlmRequestBody } from '@/interfaces/request/llm';
import type { ConfigFormItem, ConfigurationFormData, DocLinkConfig } from '../components/Dialog/ConfigurationDialog';
@@ -291,12 +291,12 @@ export const useSystemModelSetting = (onSuccess?: () => void) => {
}, [llmList]);
const allModelOptions = useMemo(() => {
const llmOptions = getOptionsByModelType('chat');
const image2textOptions = getOptionsByModelType('image2text');
const embeddingOptions = getOptionsByModelType('embedding');
const speech2textOptions = getOptionsByModelType('speech2text');
const rerankOptions = getOptionsByModelType('rerank');
const ttsOptions = getOptionsByModelType('tts');
const llmOptions = getOptionsByModelType(LlmModelType.Chat);
const image2textOptions = getOptionsByModelType(LlmModelType.Image2text);
const embeddingOptions = getOptionsByModelType(LlmModelType.Embedding);
const speech2textOptions = getOptionsByModelType(LlmModelType.Speech2text);
const rerankOptions = getOptionsByModelType(LlmModelType.Rerank);
const ttsOptions = getOptionsByModelType(LlmModelType.TTS);
return {
llmOptions,