From ed6e0ab28205b27df894f26a53f919fffccd116a Mon Sep 17 00:00:00 2001
From: "guangfei.zhao" <guangfei.zhao@t-systems.com>
Date: Fri, 7 Nov 2025 17:49:44 +0800
Subject: [PATCH] feat(agent-mui): add agent canvas, nodes, and related
 components

docs(agent-hooks-guide): add comprehensive guide for agent hooks usage and implementation
---
 docs/agent-hooks-guide.md                     | 308 ++++++++++++++++++
 src/constants/agent.ts                        |  29 ++
 src/constants/chat.ts                         |  40 +++
 src/constants/knowledge.ts                    | 144 ++++----
 src/hooks/llm-hooks.ts                        |  14 +-
 .../canvas/NodeDrawer.tsx                     |   0
 .../{agent => agent-mui}/canvas/index.tsx     |   0
 .../canvas/node/NoteNode.tsx                  |   0
 .../canvas/node/ReadonlyNode.tsx              |   0
 .../components/AgentTopbar.tsx                |   0
 .../components/CreateAgentDialog.tsx          |   0
 .../components/EditAgentDialog.tsx            |   0
 .../components/VersionListDialog.tsx          |   4 +-
 src/pages/{agent => agent-mui}/detail.tsx     |   8 +-
 src/pages/{agent => agent-mui}/list.tsx       |   4 +-
 .../knowledge/components/ChunkMethodForm.tsx  |  32 +-
 .../components/CreateKnowledgeDialog.tsx      |   4 +-
 .../components/DocumentListComponent.tsx      |  26 +-
 .../knowledge/configuration/common-items.tsx  |  26 +-
 src/pages/knowledge/create.tsx                |   4 +-
 src/pages/knowledge/detail.tsx                |   4 +-
 src/pages/knowledge/setting.tsx               |   4 +-
 src/pages/setting/hooks/useModelDialogs.ts    |  14 +-
 src/routes/index.tsx                          |  29 +-
 24 files changed, 528 insertions(+), 166 deletions(-)
 create mode 100644 docs/agent-hooks-guide.md
 create mode 100644 src/constants/chat.ts
 rename src/pages/{agent => agent-mui}/canvas/NodeDrawer.tsx (100%)
 rename src/pages/{agent => agent-mui}/canvas/index.tsx (100%)
 rename src/pages/{agent => agent-mui}/canvas/node/NoteNode.tsx (100%)
 rename src/pages/{agent => agent-mui}/canvas/node/ReadonlyNode.tsx (100%)
 rename src/pages/{agent => agent-mui}/components/AgentTopbar.tsx (100%)
 rename src/pages/{agent => agent-mui}/components/CreateAgentDialog.tsx (100%)
 rename src/pages/{agent => agent-mui}/components/EditAgentDialog.tsx (100%)
 rename src/pages/{agent => agent-mui}/components/VersionListDialog.tsx (97%)
 rename src/pages/{agent => agent-mui}/detail.tsx (89%)
 rename src/pages/{agent => agent-mui}/list.tsx (97%)

diff --git a/docs/agent-hooks-guide.md b/docs/agent-hooks-guide.md
new file mode 100644
index 0000000..f38e23a
--- /dev/null
+++ b/docs/agent-hooks-guide.md
@@ -0,0 +1,308 @@
+# Agent Hooks GUI 学习与复现指南
+
+本指南逐一梳理 `src/pages/agent/hooks` 目录下的所有 Agent 相关 Hooks，帮助你理解画布、抽屉、运行与日志的全链路逻辑，并可据此复现功能。文档涵盖职责、导出、参数与返回、关键逻辑、典型用法及注意事项。
+
+> 约定：`useGraphStore` 为画布状态中心（维护 `nodes`/`edges` 及更新方法）；`@xyflow/react` 用于节点/边渲染与交互；`Operator`、`NodeHandleId`、`NodeMap` 定义节点类型、句柄及渲染映射。
+
+---
+
+## 图数据获取与构建
+
+### use-fetch-data.ts
+- 作用：页面挂载时获取 Agent 详情并注入画布。
+- 导出：`useFetchDataOnMount()` → `{ loading, flowDetail }`
+- 关键逻辑：
+  - 读取 `useFetchAgent()` 的 `data.dsl.graph`，通过 `useSetGraphInfo()` 写入 `nodes/edges`。
+  - 首次挂载 `refetch()` 刷新详情。
+- 用法：在页面 `useEffect` 中调用以初始化画布。
+- 注意：`data.dsl.graph` 可能为空，已做空处理。
+
+### use-set-graph.ts
+- 作用：将后端返回的 `IGraph` 写入画布。
+- 导出：`useSetGraphInfo()` → `setGraphInfo({ nodes = [], edges = [] }: IGraph)`
+- 关键逻辑：有数据才更新，避免清空现有状态。
+- 关联：与 `useFetchDataOnMount` 搭配使用。
+
+### use-build-dsl.ts
+- 作用：根据当前 `nodes/edges` 构建可保存的 DSL 数据对象，并过滤占位符节点（`Operator.Placeholder`）。
+- 导出：`useBuildDslData()` → `{ buildDslData(currentNodes?) }`
+- 关键逻辑：
+  - 过滤占位符节点与相关边。
+  - `buildDslComponentsByGraph(filteredNodes, filteredEdges, data.dsl.components)` 生成组件列表。
+  - 返回 `{ ...data.dsl, graph, components }`。
+- 用法：保存前构建 DSL；导出 JSON 时使用。
+
+### use-export-json.ts
+- 作用：导出当前画布图为 JSON 文件。
+- 导出：`useHandleExportJsonFile()` → `{ handleExportJson }`
+- 关键逻辑：`downloadJsonFile(buildDslData().graph, \
+  \`\${data.title}.json\`)`
+
+### use-save-graph.ts
+- 作用：保存画布到后端；在打开调试时确保最新 DSL。
+- 导出：
+  - `useSaveGraph(showMessage?: boolean)` → `{ saveGraph(currentNodes?), loading }`
+  - `useSaveGraphBeforeOpeningDebugDrawer(show)` → `{ handleRun(nextNodes?), loading }`
+  - `useWatchAgentChange(chatDrawerVisible)` → 自动 debounce 保存，并回显更新时间字符串。
+- 关键逻辑：
+  - 基于路由 `id` + `data.title` + `buildDslData` 组装 `dsl` 调用 `useSetAgent`。
+  - 打开调试前先 `saveGraph()`，再 `resetAgent()` 清空旧消息。
+  - `useDebounceEffect`：每 20 秒在节点/边变化时自动保存（聊天抽屉打开时不保存）。
+
+---
+
+## 节点创建与拖拽
+
+### use-add-node.ts
+- 作用：核心节点添加逻辑，含初始参数、坐标计算、特殊类型处理（Agent/Tool/Iteration/Note）。
+- 导出：
+  - `useInitializeOperatorParams()` → `{ initializeOperatorParams, initialFormValuesMap }`
+  - `useGetNodeName()` → 根据 `Operator` 返回国际化默认名称。
+  - `useCalculateNewlyChildPosition()` → 计算新增子节点位置避免覆盖。
+  - `useAddNode(reactFlowInstance?)` → `{ addCanvasNode, addNoteNode }`
+- 内部逻辑：`useAddChildEdge()`、`useAddToolNode()`、`useResizeIterationNode()`。
+- 关键逻辑：
+  - 初始化各 `Operator` 的 `form` 默认值；Agent/Extractor 等会注入 `llm_id`、默认 prompts。
+  - 迭代节点 `Operator.Iteration` 自动创建 `Operator.IterationStart` 子节点并设为 `extent='parent'`。
+  - Agent 底部子 Agent 的水平分布通过已有子节点 `x` 轴最大值计算，避免重叠；Tool 节点仅允许一个（检查是否已有 `NodeHandleId.Tool` 连接）。
+  - 通过 `reactFlowInstance.screenToFlowPosition` 将点击位置转换为画布坐标；右侧新增子节点时自动用 `NodeHandleId` 连线。
+  - 容器内新增子节点时可能触发父容器宽度调整以容纳子节点。
+- 典型用法：
+  ```ts
+  const { addCanvasNode } = useAddNode(reactFlowInstance);
+  // 在菜单点击或连接拖拽结束时：
+  addCanvasNode(Operator.Agent, { nodeId, position: Position.Right, id: NodeHandleId.Start })(event);
+  ```
+- 注意：
+  - `Operator.Placeholder` 节点 `draggable=false`。
+  - Tool 节点唯一性；容器内节点可能触发 resize。
+
+### use-connection-drag.ts
+- 作用：连接拖拽起止处理；在拖拽终止位置弹出节点选择下拉，创建占位符节点并连线。
+- 导出：`useConnectionDrag(reactFlowInstance, onConnect, showModal, hideModal, setDropdownPosition, setCreatedPlaceholderRef, calculateDropdownPosition, removePlaceholderNode, clearActiveDropdown, checkAndRemoveExistingPlaceholder)` → `{ nodeId, onConnectStart, onConnectEnd, handleConnect, getConnectionStartContext, shouldPreventClose, onMove }`
+- 关键逻辑：
+  - `onConnectStart` 记录起点节点/句柄及鼠标起始位置，区分点击/拖拽（<5px 移动视为点击）。
+  - `onConnectEnd` 计算下拉面板位置；点击则清理状态并关闭下拉；拖拽时先移除旧占位符，再创建新占位符并连线。
+  - `onMove` 在画布滚动/缩放时隐藏下拉并清理占位符。
+
+### use-dropdown-position.ts
+- 作用：屏幕与 Flow 坐标互转，计算下拉菜单位置使其对齐占位节点。
+- 导出：`useDropdownPosition(reactFlowInstance)` → `{ calculateDropdownPosition, getPlaceholderNodePosition, flowToScreenPosition, screenToFlowPosition }`
+- 关键逻辑：按常量 `HALF_PLACEHOLDER_NODE_WIDTH`、`DROPDOWN_HORIZONTAL_OFFSET`、`DROPDOWN_VERTICAL_OFFSET` 计算偏移。
+
+### use-placeholder-manager.ts
+- 作用：占位符节点的创建、删除与状态追踪；替换为真实节点后自动建立连接并同步位置。
+- 导出：`usePlaceholderManager(reactFlowInstance)` → `{ removePlaceholderNode, onNodeCreated, setCreatedPlaceholderRef, resetUserSelectedFlag, checkAndRemoveExistingPlaceholder, createdPlaceholderRef, userSelectedNodeRef }`
+- 关键逻辑：
+  - 保证面板上仅有一个占位符。
+  - `onNodeCreated(newNodeId)`：真实节点位置与占位符对齐；按占位符的起点连线；删除占位符及相关边。
+  - 使用 `reactFlowInstance.deleteElements` 执行批量删除。
+
+### use-before-delete.tsx
+- 作用：拦截删除操作，保护 `Operator.Begin`、容器首节点（`Operator.IterationStart` 非成对删除时阻止）及下游 Agent/Tool 的联动删除。
+- 导出：`useBeforeDelete()` → `{ handleBeforeDelete }`
+- 关键逻辑：
+  - `UndeletableNodes`：Begin 与 IterationStart 的特殊保护。
+  - 当包含 Agent 节点时，额外删除其下游 Agent/Tool（节点与边）。
+- 用法：作为 React Flow 的 `onBeforeDelete` 回调。
+
+### use-change-node-name.ts
+- 作用：处理节点名称与 Tool 名称变更，避免重复命名并同步到画布。
+- 导出：`useHandleNodeNameChange({ id, data })` → `{ name, handleNameBlur, handleNameChange }`
+- 关键逻辑：
+  - Tool 名称变更写入父 Agent 的 `tools` 字段，通过 `updateNodeForm(agentId, nextTools, ['tools'])`。
+  - 普通节点名通过 `updateNodeName(id, name)` 更新；同一画布内不可重名，重复则提示 `message.error('The name cannot be repeated')`。
+
+### use-agent-tool-initial-values.ts
+- 作用：为 Agent Tool（非画布节点）生成初始参数（裁剪/重组）以适配对话调用。
+- 导出：`useAgentToolInitialValues()` → `{ initializeAgentToolValues(operatorName) }`
+- 关键逻辑：对不同 `Operator` 精简参数，如去除 `query/sql/stock_code`，或仅保留 `smtp_*` 邮件字段等。
+
+### use-form-values.ts
+- 作用：表单初始值合并，优先使用节点已有 `data.form`，否则回退为 `defaultValues`。
+- 导出：`useFormValues(defaultValues, node?)`
+
+### use-watch-form-change.ts
+- 作用：监听 `react-hook-form` 表单变化并同步到画布节点 `form`。
+- 导出：`useWatchFormChange(id?, form?)`
+- 关键逻辑：手动获取 `form.getValues()`，再 `updateNodeForm(id, values)`。
+
+### use-move-note.ts
+- 作用：便签（Note）悬浮预览位置跟随鼠标。
+- 导出：`useMoveNote()` → `{ ref, showImage, hideImage, mouse, imgVisible }`
+- 关键逻辑：使用 `useMouse()` 监听坐标，更新 `ref.current.style.top/left`。
+
+---
+
+## 运行与日志
+
+### use-run-dataflow.ts
+- 作用：保存画布后触发数据流运行（SSE），打开日志抽屉并设置当前 `messageId`。
+- 导出：`useRunDataflow({ showLogSheet, setMessageId })` → `{ run(fileResponseData), loading, uploadedFileData }`
+- 关键逻辑：
+  - 先 `saveGraph()`，再 `send({ id, query: '', session_id: null, files: [file] })` 到 `api.runCanvas`。
+  - 校验响应成功后设置 `uploadedFileData/file` 与 `messageId`。
+
+### use-cancel-dataflow.ts
+- 作用：取消当前数据流，并停止日志拉取。
+- 导出：`useCancelCurrentDataflow({ messageId, stopFetchTrace })` → `{ handleCancel }`
+- 关键逻辑：`cancelDataflow(messageId)` 返回 `code===0` 时调用 `stopFetchTrace()`。
+
+### use-fetch-pipeline-log.ts
+- 作用：拉取运行日志（trace），判断是否完成与是否为空，控制轮询。
+- 导出：`useFetchPipelineLog(logSheetVisible)` → `{ logs, isLogEmpty, isCompleted, loading, isParsing, messageId, setMessageId, stopFetchTrace }`
+- 关键逻辑：
+  - `END` 且 `trace[0].message` 非空视为完成，随后 `stopFetchTrace()`；抽屉打开时重置 `isStopFetchTrace=false` 继续拉取。
+
+### use-download-output.ts
+- 作用：从日志中提取 `END` 节点输出并下载 JSON。
+- 导出：`findEndOutput(list)`, `isEndOutputEmpty(list)`, `useDownloadOutput(data?)` → `{ handleDownloadJson }`
+
+---
+
+## 抽屉与面板显示
+
+### use-show-drawer.tsx
+- 作用：统一管理“运行/聊天抽屉”、“单节点调试抽屉”、“表单抽屉”、“日志抽屉”的显示逻辑。
+- 导出：
+  - `useShowFormDrawer()` → `{ formDrawerVisible, hideFormDrawer, showFormDrawer(e, nodeId), clickedNode }`
+  - `useShowSingleDebugDrawer()` → `{ singleDebugDrawerVisible, hideSingleDebugDrawer, showSingleDebugDrawer }`
+  - `useShowDrawer({ drawerVisible, hideDrawer })` → `{ chatVisible, runVisible, onPaneClick, singleDebugDrawerVisible, showSingleDebugDrawer, hideSingleDebugDrawer, formDrawerVisible, showFormDrawer, clickedNode, onNodeClick, hideFormDrawer, hideRunOrChatDrawer, showChatModal }`
+  - `useShowLogSheet({ setCurrentMessageId })` → `{ logSheetVisible, hideLogSheet, showLogSheet(messageId) }`
+  - `useHideFormSheetOnNodeDeletion({ hideFormDrawer })` → 在节点被删除时自动关闭表单抽屉。
+- 关键逻辑：
+  - 当 `drawerVisible=true`：若 Begin 有输入则显示“运行”抽屉；否则显示“聊天”抽屉。
+  - 点击节点打开表单抽屉（排除 Note/Placeholder/File）；点击节点上的“播放”图标打开单节点调试抽屉。
+  - `hideRunOrChatDrawer` 同时关闭运行/聊天抽屉与外层抽屉。
+
+---
+
+## Begin 相关选项与变量
+
+### use-get-begin-query.tsx
+- 作用：围绕 Begin 节点数据构建输入、输出、变量与组件引用选项。
+- 导出：
+  - `useSelectBeginNodeDataInputs()` → Begin 的输入 `BeginQuery[]`
+  - `useIsTaskMode(isTask?)` → 返回是否任务模式（从 Begin 的 `form.mode` 或传入）。
+  - `useGetBeginNodeDataQuery()` → 读取 Begin 的 `inputs` 并转换为列表。
+  - `useBuildNodeOutputOptions(nodeId?)` → 输出引用选项（带 `OperatorIcon`）。
+  - `useBuildVariableOptions(nodeId?, parentId?)` → Begin 变量与节点输出选项合并。
+  - `useBuildComponentIdOptions(nodeId?, parentId?)` → 组件引用（排除某些节点，容器内仅引用同层或外部节点）。
+  - `useBuildComponentIdAndBeginOptions(nodeId?, parentId?)` → Begin + 组件引用。
+  - `useGetComponentLabelByValue(nodeId)` / `useGetVariableLabelByValue(nodeId)` → 根据值反查标签。
+- 注意：容器内节点引用受限：子节点只能引用同容器同层节点或外部节点，不能引用父节点。
+
+### use-build-options.tsx
+- 作用：轻量版，仅构建节点输出选项。
+- 导出：`useBuildNodeOutputOptions(nodeId?)`
+
+### use-is-pipeline.ts
+- 作用：读取路由查询判断是否显示数据流画布（`AgentQuery.Category === DataflowCanvas`）。
+- 导出：`useIsPipeline()`
+
+---
+
+## 聊天与共享
+
+### use-chat-logic.ts
+- 作用：对话中处理“等待用户填写”的表单组件逻辑，组装提交时的 `beginInputs`。
+- 导出：`useAwaitCompentData({ derivedMessages, sendFormMessage, canvasId })` → `{ getInputs, buildInputList, handleOk, isWaitting }`
+- 关键逻辑：将消息中的 `data.inputs` 与用户填写值合并后发送。
+
+### use-cache-chat-log.ts
+- 作用：聊天事件按 `message_id` 分片缓存，支持过滤与清空。
+- 导出：`useCacheChatLog()` → `{ eventList, currentEventListWithoutMessage, currentEventListWithoutMessageById, setEventList, clearEventList, addEventList, filterEventListByEventType, filterEventListByMessageId, setCurrentMessageId, currentMessageId }`
+- 关键逻辑：排除 `Message/MessageEnd` 事件，保留节点事件日志用于“运行日志”展示。
+
+### use-send-shared-message.ts
+- 作用：分享页的消息发送逻辑（可任务模式），包含参数弹窗与自动触发任务。
+- 导出：
+  - `useSendButtonDisabled(value)` → 空字符串时禁用。
+  - `useGetSharedChatSearchParams()` → 从 URL 解析 `from/shared_id/locale` 等。
+  - `useSendNextSharedMessage(addEventList)` → `{ sendMessage, hasError, parameterDialogVisible, inputsData, isTaskMode, hideParameterDialog, showParameterDialog, ok }`
+- 关键逻辑：
+  - `url` 动态拼接：`agentbots` 或 `chatbots`。
+  - 任务模式且 `inputs` 为空时自动触发一次空参数运行。
+
+---
+
+## 外部资源与工具
+
+### use-find-mcp-by-id.ts
+- 作用：在 MCP 服务列表中按 ID 查找服务器对象。
+- 导出：`useFindMcpById()` → `{ findMcpById(id) }`
+
+### use-open-document.ts
+- 作用：打开在线文档（Agent 组件说明）。
+- 导出：`useOpenDocument()` → `openDocument()`（`window.open` 到 `https://ragflow.io/docs/dev/category/agent-components`）。
+
+### use-show-dialog.ts
+- 作用：系统 API Key 管理与分享预览。
+- 导出：
+  - `useOperateApiKey(idKey, dialogId?)` → `{ removeToken, createToken, tokenList, creatingLoading, listLoading }`
+  - `usePreviewChat(idKey)` → `{ handlePreview }`
+  - `useSelectChartStatsList()` → 将统计数据转换为图表用的 `{ xAxis, yAxis }[]`。
+- 关键逻辑：创建/删除系统 token；打开分享页预览 URL（根据 `idKey` 判断 Agent 或 Chat）。
+
+---
+
+## 布局与其他
+
+### use-calculate-sheet-right.ts
+- 作用：根据 `body` 宽度返回抽屉的右侧定位类名。
+- 导出：`useCalculateSheetRight()` → `'right-[620px]' | 'right-1/3'`
+
+### use-iteration.ts
+- 作用：当前文件为空，预留迭代相关的后续逻辑。
+- 导出：暂无（空文件）。
+
+---
+
+## 复现建议与流程
+
+- 画布初始化：
+  - 页面挂载时调用 `useFetchDataOnMount()`，保证 `nodes/edges` 与后端一致。
+  - 如需区分是否数据流画布，调用 `useIsPipeline()` 控制界面模式。
+
+- 节点与连接交互：
+  - 连接拖拽中，使用 `useConnectionDrag` 的 `onConnectStart/onConnectEnd/onMove` 管理占位符与下拉。
+  - 选择节点类型后，配合 `usePlaceholderManager.onNodeCreated(newNodeId)` 落地真实节点并连线。
+  - 添加节点通过 `useAddNode.addCanvasNode(type,{ nodeId, position, id })(event)`，自动计算位置与连线。
+
+- 表单与抽屉：
+  - 点击节点打开 `useShowFormDrawer.showFormDrawer(e, nodeId)`；点击“播放”打开 `useShowSingleDebugDrawer`。
+  - 外层抽屉控制 `useShowDrawer`；运行/聊天抽屉根据 Begin 输入状态切换。
+  - 表单变更用 `useWatchFormChange(id, form)` 将 `react-hook-form` 值同步到 `data.form`。
+
+- 运行与日志：
+  - 上传文件后，调用 `useRunDataflow.run(fileResponseData)`；在日志抽屉中用 `useFetchPipelineLog(logSheetVisible)` 拉取状态。
+  - 取消运行用 `useCancelCurrentDataflow.handleCancel()`；下载输出用 `useDownloadOutput.handleDownloadJson()`。
+
+- 保存与导出：
+  - 使用 `useSaveGraphBeforeOpeningDebugDrawer` 在每次调试前保存并重置状态。
+  - 自动保存：`useWatchAgentChange(chatDrawerVisible)` 在无聊天抽屉时 debounce 落库。
+  - 导出 JSON：`useHandleExportJsonFile.handleExportJson()`。
+
+---
+
+## 易踩坑与注意事项
+
+- 占位符节点必须在保存 DSL 时过滤，否则会污染组件图（`useBuildDslData` 已处理）。
+- Tool 节点只允许有一个；`useAddNode` 中对 Tool 的添加有唯一性校验。
+- 容器类（Iteration）中的引用受限：子节点只能引用同容器同层节点或外部节点，不能引用父节点（`useBuildComponentIdOptions`）。
+- 名称唯一性：画布内节点与 Agent 下的 Tool name 均需唯一（`useChangeNodeName`）。
+- 聊天日志拉取需在 END 且 trace 有 message 时停止，否则会持续轮询（`useFetchPipelineLog`）。
+- 运行/聊天抽屉切换逻辑依赖 Begin 输入是否存在（`useShowDrawer`）。
+
+---
+
+## 关联常量与工具（理解 hooks 需要）
+
+- `Operator`、`NodeHandleId`、`NodeMap`：定义节点类型和画布渲染类型。
+- `generateNodeNamesWithIncreasingIndex`：为新增节点生成不重复的默认名称。
+- `getNodeDragHandle(type)`：为不同节点类型定义可拖拽句柄范围。
+- `buildNodeOutputOptions`、`buildBeginInputListFromObject`、`buildBeginQueryWithObject`：构建下拉选项与输入/变量结构。
+
+---
+
+如需按模块拆分为多页或增加“最小复现代码片段”，可进一步细化。也可以优先从“连接拖拽 + 占位符 + 节点添加”链路开始，逐步验证 UI 与数据正确性。
\ No newline at end of file
diff --git a/src/constants/agent.ts b/src/constants/agent.ts
index dedeb06..1603ada 100644
--- a/src/constants/agent.ts
+++ b/src/constants/agent.ts
@@ -1,3 +1,12 @@
+import { ChatVariableEnabledField, variableEnabledFieldMap } from './chat';
+
+export function setInitialChatVariableEnabledFieldValue(
+  field: ChatVariableEnabledField,
+) {
+  return false;
+  return field !== ChatVariableEnabledField.MaxTokensEnabled;
+}
+
 export enum ProgrammingLanguage {
   Python = 'python',
   Javascript = 'javascript',
@@ -25,6 +34,26 @@ export enum AgentGlobals {
   SysFiles = 'sys.files',
 }
 
+export const AgentGlobalsSysQueryWithBrace = `{${AgentGlobals.SysQuery}}`;
+
+export const variableCheckBoxFieldMap = Object.keys(
+  variableEnabledFieldMap,
+).reduce<Record<string, boolean>>((pre, cur) => {
+  pre[cur] = setInitialChatVariableEnabledFieldValue(
+    cur as ChatVariableEnabledField,
+  );
+  return pre;
+}, {});
+
+export const initialLlmBaseValues = {
+  ...variableCheckBoxFieldMap,
+  temperature: 0.1,
+  top_p: 0.3,
+  frequency_penalty: 0.7,
+  presence_penalty: 0.4,
+  max_tokens: 256,
+};
+
 export enum AgentCategory {
   AgentCanvas = 'agent_canvas',
   DataflowCanvas = 'dataflow_canvas',
diff --git a/src/constants/chat.ts b/src/constants/chat.ts
new file mode 100644
index 0000000..30da3fa
--- /dev/null
+++ b/src/constants/chat.ts
@@ -0,0 +1,40 @@
+export enum MessageType {
+  Assistant = 'assistant',
+  User = 'user',
+}
+
+export enum ChatVariableEnabledField {
+  TemperatureEnabled = 'temperatureEnabled',
+  TopPEnabled = 'topPEnabled',
+  PresencePenaltyEnabled = 'presencePenaltyEnabled',
+  FrequencyPenaltyEnabled = 'frequencyPenaltyEnabled',
+  MaxTokensEnabled = 'maxTokensEnabled',
+}
+
+export const variableEnabledFieldMap = {
+  [ChatVariableEnabledField.TemperatureEnabled]: 'temperature',
+  [ChatVariableEnabledField.TopPEnabled]: 'top_p',
+  [ChatVariableEnabledField.PresencePenaltyEnabled]: 'presence_penalty',
+  [ChatVariableEnabledField.FrequencyPenaltyEnabled]: 'frequency_penalty',
+  [ChatVariableEnabledField.MaxTokensEnabled]: 'max_tokens',
+};
+
+export enum SharedFrom {
+  Agent = 'agent',
+  Chat = 'chat',
+  Search = 'search',
+}
+
+export enum ChatSearchParams {
+  DialogId = 'dialogId',
+  ConversationId = 'conversationId',
+  isNew = 'isNew',
+}
+
+export const EmptyConversationId = 'empty';
+
+export enum DatasetMetadata {
+  Disabled = 'disabled',
+  Automatic = 'automatic',
+  Manual = 'manual',
+}
diff --git a/src/constants/knowledge.ts b/src/constants/knowledge.ts
index 7300b64..2550054 100644
--- a/src/constants/knowledge.ts
+++ b/src/constants/knowledge.ts
@@ -1,113 +1,97 @@
-// object freeze
-export const KNOWLEDGE_ROUTE_KEYS = Object.freeze({
-  Dataset: 'dataset',
-  Testing: 'testing',
-  Configuration: 'configuration',
-  KnowledgeGraph: 'knowledgeGraph',
-} as const)
+export enum KnowledgeRouteKey {
+  Dataset = 'dataset',
+  Testing = 'testing',
+  Configuration = 'configuration',
+  KnowledgeGraph = 'knowledgeGraph',
+}
 
-export type KnowledgeRouteKey = (typeof KNOWLEDGE_ROUTE_KEYS)[keyof typeof KNOWLEDGE_ROUTE_KEYS]
+export const DatasetBaseKey = 'dataset';
 
-export const RUNNING_STATUS_KEYS = Object.freeze({
-  UNSTART: '0', // need to run
-  RUNNING: '1', // need to cancel
-  CANCEL: '2', // need to refresh
-  DONE: '3', // need to refresh
-  FAIL: '4', // need to refresh
-} as const)
-
-export type RunningStatus = (typeof RUNNING_STATUS_KEYS)[keyof typeof RUNNING_STATUS_KEYS]
+export enum RunningStatus {
+  UNSTART = '0', // need to run
+  RUNNING = '1', // need to cancel
+  CANCEL = '2', // need to refresh
+  DONE = '3', // need to refresh
+  FAIL = '4', // need to refresh
+}
 
 export const RunningStatusMap = {
-  [RUNNING_STATUS_KEYS.UNSTART]: 'Pending',
-  [RUNNING_STATUS_KEYS.RUNNING]: 'Running',
-  [RUNNING_STATUS_KEYS.CANCEL]: 'Cancel',
-  [RUNNING_STATUS_KEYS.DONE]: 'Success',
-  [RUNNING_STATUS_KEYS.FAIL]: 'Failed',
-} as const;
-
-export const MODEL_VARIABLE_TYPES = Object.freeze({
-  Improvise: 'Improvise',
-  Precise: 'Precise',
-  Balance: 'Balance',
-} as const)
-
-export type ModelVariableType = (typeof MODEL_VARIABLE_TYPES)[keyof typeof MODEL_VARIABLE_TYPES]
+  [RunningStatus.UNSTART]: 'Pending',
+  [RunningStatus.RUNNING]: 'Running',
+  [RunningStatus.CANCEL]: 'Cancel',
+  [RunningStatus.DONE]: 'Success',
+  [RunningStatus.FAIL]: 'Failed',
+};
 
+export enum ModelVariableType {
+  Improvise = 'Improvise',
+  Precise = 'Precise',
+  Balance = 'Balance',
+}
 
 export const settledModelVariableMap = {
-  [MODEL_VARIABLE_TYPES.Improvise]: {
+  [ModelVariableType.Improvise]: {
     temperature: 0.8,
     top_p: 0.9,
     frequency_penalty: 0.1,
     presence_penalty: 0.1,
     max_tokens: 4096,
   },
-  [MODEL_VARIABLE_TYPES.Precise]: {
+  [ModelVariableType.Precise]: {
     temperature: 0.2,
     top_p: 0.75,
     frequency_penalty: 0.5,
     presence_penalty: 0.5,
     max_tokens: 4096,
   },
-  [MODEL_VARIABLE_TYPES.Balance]: {
+  [ModelVariableType.Balance]: {
     temperature: 0.5,
     top_p: 0.85,
     frequency_penalty: 0.3,
     presence_penalty: 0.2,
     max_tokens: 4096,
   },
-} as const;
+};
 
-export const LLM_MODEL_TYPES = Object.freeze({
-  Embedding: 'embedding',
-  Chat: 'chat',
-  Image2text: 'image2text',
-  Speech2text: 'speech2text',
-  Rerank: 'rerank',
-  TTS: 'tts',
-} as const)
+export enum LlmModelType {
+  Embedding = 'embedding',
+  Chat = 'chat',
+  Image2text = 'image2text',
+  Speech2text = 'speech2text',
+  Rerank = 'rerank',
+  TTS = 'tts',
+}
 
-export type LlmModelType = (typeof LLM_MODEL_TYPES)[keyof typeof LLM_MODEL_TYPES]
+export enum KnowledgeSearchParams {
+  DocumentId = 'doc_id',
+  KnowledgeId = 'id',
+  Type = 'type',
+}
 
-export const DOCUMENT_TYPES = Object.freeze({
-  Virtual: 'virtual',
-  Visual: 'visual',
-} as const)
+export enum DocumentType {
+  Virtual = 'virtual',
+  Visual = 'visual',
+}
 
-export type DocumentType = (typeof DOCUMENT_TYPES)[keyof typeof DOCUMENT_TYPES]
-
-export const DOCUMENT_PARSER_TYPES = Object.freeze({
-  Naive: 'naive',
-  Qa: 'qa',
-  Resume: 'resume',
-  Manual: 'manual',
-  Table: 'table',
-  Paper: 'paper',
-  Book: 'book',
-  Laws: 'laws',
-  Presentation: 'presentation',
-  Picture: 'picture',
-  One: 'one',
-  Audio: 'audio',
-  Email: 'email',
-  Tag: 'tag',
-  KnowledgeGraph: 'knowledge_graph',
-} as const)
-
-export type DocumentParserType = (typeof DOCUMENT_PARSER_TYPES)[keyof typeof DOCUMENT_PARSER_TYPES]
-
-export const KNOWLEDGE_SEARCH_PARAMS_KEYS = Object.freeze({
-  DocumentId: 'doc_id',
-  KnowledgeId: 'id',
-  Type: 'type',
-} as const)
-
-export type KnowledgeSearchParams = (typeof KNOWLEDGE_SEARCH_PARAMS_KEYS)[keyof typeof KNOWLEDGE_SEARCH_PARAMS_KEYS]
-
-export const DATABASE_BASE_KEY = 'dataset';
+export enum DocumentParserType {
+  Naive = 'naive',
+  Qa = 'qa',
+  Resume = 'resume',
+  Manual = 'manual',
+  Table = 'table',
+  Paper = 'paper',
+  Book = 'book',
+  Laws = 'laws',
+  Presentation = 'presentation',
+  Picture = 'picture',
+  One = 'one',
+  Audio = 'audio',
+  Email = 'email',
+  Tag = 'tag',
+  KnowledgeGraph = 'knowledge_graph',
+}
 
 export enum ParseType {
   BuildIn = '1',
-  Pipeline = '2',
+  Pipeline = '2'
 }
\ No newline at end of file
diff --git a/src/hooks/llm-hooks.ts b/src/hooks/llm-hooks.ts
index 75ca579..59c19e3 100644
--- a/src/hooks/llm-hooks.ts
+++ b/src/hooks/llm-hooks.ts
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { LLM_MODEL_TYPES, type LlmModelType } from "@/constants/knowledge";
+import { DocumentParserType, LlmModelType } from "@/constants/knowledge";
 import type { IThirdOAIModelCollection, IThirdOAIModel } from "@/interfaces/database/llm";
 import userService from "@/services/user_service";
 
@@ -121,7 +121,7 @@ export function useLlmOptionsByModelType() {
  * @returns 嵌入模型选项列表
  */
 export function useEmbeddingModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.Embedding);
+  return useLlmOptions(LlmModelType.Embedding);
 }
 
 /**
@@ -129,7 +129,7 @@ export function useEmbeddingModelOptions() {
  * @returns 聊天模型选项列表
  */
 export function useChatModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.Chat);
+  return useLlmOptions(LlmModelType.Chat);
 }
 
 /**
@@ -137,7 +137,7 @@ export function useChatModelOptions() {
  * @returns 重排序模型选项列表
  */
 export function useRerankModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.Rerank);
+  return useLlmOptions(LlmModelType.Rerank);
 }
 
 /**
@@ -145,7 +145,7 @@ export function useRerankModelOptions() {
  * @returns 图像转文本模型选项列表
  */
 export function useImage2TextModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.Image2text);
+  return useLlmOptions(LlmModelType.Image2text);
 }
 
 /**
@@ -153,7 +153,7 @@ export function useImage2TextModelOptions() {
  * @returns 语音转文本模型选项列表
  */
 export function useSpeech2TextModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.Speech2text);
+  return useLlmOptions(LlmModelType.Speech2text);
 }
 
 /**
@@ -161,7 +161,7 @@ export function useSpeech2TextModelOptions() {
  * @returns 文本转语音模型选项列表
  */
 export function useTTSModelOptions() {
-  return useLlmOptions(LLM_MODEL_TYPES.TTS);
+  return useLlmOptions(LlmModelType.TTS);
 }
 
 /**
diff --git a/src/pages/agent/canvas/NodeDrawer.tsx b/src/pages/agent-mui/canvas/NodeDrawer.tsx
similarity index 100%
rename from src/pages/agent/canvas/NodeDrawer.tsx
rename to src/pages/agent-mui/canvas/NodeDrawer.tsx
diff --git a/src/pages/agent/canvas/index.tsx b/src/pages/agent-mui/canvas/index.tsx
similarity index 100%
rename from src/pages/agent/canvas/index.tsx
rename to src/pages/agent-mui/canvas/index.tsx
diff --git a/src/pages/agent/canvas/node/NoteNode.tsx b/src/pages/agent-mui/canvas/node/NoteNode.tsx
similarity index 100%
rename from src/pages/agent/canvas/node/NoteNode.tsx
rename to src/pages/agent-mui/canvas/node/NoteNode.tsx
diff --git a/src/pages/agent/canvas/node/ReadonlyNode.tsx b/src/pages/agent-mui/canvas/node/ReadonlyNode.tsx
similarity index 100%
rename from src/pages/agent/canvas/node/ReadonlyNode.tsx
rename to src/pages/agent-mui/canvas/node/ReadonlyNode.tsx
diff --git a/src/pages/agent/components/AgentTopbar.tsx b/src/pages/agent-mui/components/AgentTopbar.tsx
similarity index 100%
rename from src/pages/agent/components/AgentTopbar.tsx
rename to src/pages/agent-mui/components/AgentTopbar.tsx
diff --git a/src/pages/agent/components/CreateAgentDialog.tsx b/src/pages/agent-mui/components/CreateAgentDialog.tsx
similarity index 100%
rename from src/pages/agent/components/CreateAgentDialog.tsx
rename to src/pages/agent-mui/components/CreateAgentDialog.tsx
diff --git a/src/pages/agent/components/EditAgentDialog.tsx b/src/pages/agent-mui/components/EditAgentDialog.tsx
similarity index 100%
rename from src/pages/agent/components/EditAgentDialog.tsx
rename to src/pages/agent-mui/components/EditAgentDialog.tsx
diff --git a/src/pages/agent/components/VersionListDialog.tsx b/src/pages/agent-mui/components/VersionListDialog.tsx
similarity index 97%
rename from src/pages/agent/components/VersionListDialog.tsx
rename to src/pages/agent-mui/components/VersionListDialog.tsx
index 4c39c3c..0e12317 100644
--- a/src/pages/agent/components/VersionListDialog.tsx
+++ b/src/pages/agent-mui/components/VersionListDialog.tsx
@@ -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;
diff --git a/src/pages/agent/detail.tsx b/src/pages/agent-mui/detail.tsx
similarity index 89%
rename from src/pages/agent/detail.tsx
rename to src/pages/agent-mui/detail.tsx
index 1f57abe..eeb9d5d 100644
--- a/src/pages/agent/detail.tsx
+++ b/src/pages/agent-mui/detail.tsx
@@ -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";
 
diff --git a/src/pages/agent/list.tsx b/src/pages/agent-mui/list.tsx
similarity index 97%
rename from src/pages/agent/list.tsx
rename to src/pages/agent-mui/list.tsx
index 2cbcd99..754ce21 100644
--- a/src/pages/agent/list.tsx
+++ b/src/pages/agent-mui/list.tsx
@@ -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';
diff --git a/src/pages/knowledge/components/ChunkMethodForm.tsx b/src/pages/knowledge/components/ChunkMethodForm.tsx
index d5031f7..e36ff01 100644
--- a/src/pages/knowledge/components/ChunkMethodForm.tsx
+++ b/src/pages/knowledge/components/ChunkMethodForm.tsx
@@ -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,
diff --git a/src/pages/knowledge/components/CreateKnowledgeDialog.tsx b/src/pages/knowledge/components/CreateKnowledgeDialog.tsx
index 2a73282..f7050a2 100644
--- a/src/pages/knowledge/components/CreateKnowledgeDialog.tsx
+++ b/src/pages/knowledge/components/CreateKnowledgeDialog.tsx
@@ -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,
     },
diff --git a/src/pages/knowledge/components/DocumentListComponent.tsx b/src/pages/knowledge/components/DocumentListComponent.tsx
index 6b677c3..d5a0604 100644
--- a/src/pages/knowledge/components/DocumentListComponent.tsx
+++ b/src/pages/knowledge/components/DocumentListComponent.tsx
@@ -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>
diff --git a/src/pages/knowledge/configuration/common-items.tsx b/src/pages/knowledge/configuration/common-items.tsx
index 63b2f51..cdc0d1d 100644
--- a/src/pages/knowledge/configuration/common-items.tsx
+++ b/src/pages/knowledge/configuration/common-items.tsx
@@ -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]);
diff --git a/src/pages/knowledge/create.tsx b/src/pages/knowledge/create.tsx
index 7384188..b2824a0 100644
--- a/src/pages/knowledge/create.tsx
+++ b/src/pages/knowledge/create.tsx
@@ -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,
diff --git a/src/pages/knowledge/detail.tsx b/src/pages/knowledge/detail.tsx
index d93ce94..f92ded7 100644
--- a/src/pages/knowledge/detail.tsx
+++ b/src/pages/knowledge/detail.tsx
@@ -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(() => {
diff --git a/src/pages/knowledge/setting.tsx b/src/pages/knowledge/setting.tsx
index 7bb7b36..3766692 100644
--- a/src/pages/knowledge/setting.tsx
+++ b/src/pages/knowledge/setting.tsx
@@ -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: {
diff --git a/src/pages/setting/hooks/useModelDialogs.ts b/src/pages/setting/hooks/useModelDialogs.ts
index 891ce17..33876b4 100644
--- a/src/pages/setting/hooks/useModelDialogs.ts
+++ b/src/pages/setting/hooks/useModelDialogs.ts
@@ -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,
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index b8c5953..3dd6a55 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,11 +1,11 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
-import MainLayout from '../components/Layout/MainLayout';
-import SettingLayout from '../components/Layout/SettingLayout';
-import Login from '../pages/login/Login';
-import PipelineConfig from '../pages/PipelineConfig';
-import Dashboard from '../pages/Dashboard';
-import ModelsResources from '../pages/ModelsResources';
-import AgentList from '../pages/agent/list';
+import MainLayout from '@/components/Layout/MainLayout';
+import SettingLayout from '@/components/Layout/SettingLayout';
+import Login from '@/pages/login/Login';
+import PipelineConfig from '@/pages/PipelineConfig';
+import Dashboard from '@/pages/Dashboard';
+import ModelsResources from '@/pages/ModelsResources';
+import AgentList from '@/pages/agent-mui/list';
 import {
   KnowledgeBaseList,
   KnowledgeBaseCreate,
@@ -13,19 +13,20 @@ import {
   KnowledgeBaseSetting,
   KnowledgeBaseTesting,
   KnowledgeLogsPage
-} from '../pages/knowledge';
+} from '@/pages/knowledge';
 import {
   ModelsSetting,
   SystemSetting,
   TeamsSetting,
   ProfileSetting,
   MCPSetting,
-} from '../pages/setting';
-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';
+} from '@/pages/setting';
+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-mui/detail';
+// import AgentDetailPage from '@/pages/agent';
 
 const AppRoutes = () => {
   return (