feat(agent): 添加智能体工作状态显示功能

xerrors · xerrors · commit 0d20cf66db6a · 2025-11-14T12:50:32.000+08:00
实现智能体工作状态的实时显示，包括任务列表和文件管理功能
- 在 DeepAgent 中添加 todo 和 files 能力支持
- 新增 AgentPopover 组件展示工作状态
- 修改聊天界面添加状态显示按钮
- 更新服务端状态提取逻辑
- 更新文档和路线图
diff --git a/docs/latest/changelog/roadmap.md b/docs/latest/changelog/roadmap.md
@@ -6,7 +6,6 @@
 
 ### 看板
 
-- 新建 DeepAgents 智能体（暂时没有场景）
 - 统一图谱数据结构，优化可视化方式 [#298](https://github.com/xerrors/Yuxi-Know/issues/298) [#273](https://github.com/xerrors/Yuxi-Know/issues/273) <Badge type="info" text="0.4" />
 - 集成智能体评估，首先使用命令行来实现，然后考虑放在 UI 里面展示
 - 开发与生产环境隔离，构建生产镜像 <Badge type="info" text="0.4" />
@@ -17,12 +16,14 @@
 ### Bugs
 - 部分异常状态下，智能体的模型名称出现重叠[#279](https://github.com/xerrors/Yuxi-Know/issues/279)
 - DeepSeek 官方接口适配会出现问题
+- 当前版本如果调用结果为空的时候，工具调用状态会一直处于调用状态，尽管调用是成功的
 
 ### 新增
 - 优化知识库详情页面，更加简洁清晰
 - 新增对于上传文件的智能体中间件
 - 增强文件下载功能
 - 新增多模态模型支持（当前仅支持图片，详见文档）
+- 新建 DeepAgents 智能体（Demo）
 
 ### 修复
 - 修复重排序模型实际未生效的问题
diff --git a/server/routers/chat_router.py b/server/routers/chat_router.py
@@ -102,7 +102,6 @@ async def set_default_agent(request_data: dict = Body(...), current_user=Depends
 
 
 async def _get_langgraph_messages(agent_instance, config_dict):
-    """获取LangGraph中的消息"""
     graph = await agent_instance.get_graph()
     state = await graph.aget_state(config_dict)
 
@@ -113,6 +112,24 @@ async def _get_langgraph_messages(agent_instance, config_dict):
     return state.values.get("messages", [])
 
 
+def _extract_agent_state(values: dict) -> dict:
+    if not isinstance(values, dict):
+        return {}
+
+    def _norm_list(v):
+        if v is None:
+            return []
+        if isinstance(v, (list, tuple)):
+            return list(v)
+        return [v]
+
+    result = {}
+    result["todos"] = _norm_list(values.get("todos"))[:20]
+    result["files"] = _norm_list(values.get("files"))[:50]
+
+    return result
+
+
 def _get_existing_message_ids(conv_mgr, thread_id):
     """获取已保存的消息ID集合"""
     existing_messages = conv_mgr.get_messages_by_thread_id(thread_id)
@@ -521,6 +538,7 @@ async def stream_messages():
 
         try:
             full_msg = None
+            langgraph_config = {"configurable": input_context}
             async for msg, metadata in agent.stream_messages(messages, input_context=input_context):
                 if isinstance(msg, AIMessageChunk):
                     full_msg = msg if not full_msg else full_msg + msg
@@ -534,7 +552,18 @@ async def stream_messages():
                     yield make_chunk(content=msg.content, msg=msg.model_dump(), metadata=metadata, status="loading")
 
                 else:
-                    yield make_chunk(msg=msg.model_dump(), metadata=metadata, status="loading")
+                    msg_dict = msg.model_dump()
+                    yield make_chunk(msg=msg_dict, metadata=metadata, status="loading")
+
+                    try:
+                        if msg_dict.get("type") == "tool":
+                            graph = await agent.get_graph()
+                            state = await graph.aget_state(langgraph_config)
+                            agent_state = _extract_agent_state(getattr(state, "values", {})) if state else {}
+                            if agent_state:
+                                yield make_chunk(status="agent_state", agent_state=agent_state, meta=meta)
+                    except Exception:
+                        pass
 
             if (
                 conf.enable_content_guard
@@ -548,13 +577,22 @@ async def stream_messages():
                 return
 
             # After streaming finished, check for interrupts and save messages
-            langgraph_config = {"configurable": input_context}
 
             # Check for human approval interrupts
             async for chunk in check_and_handle_interrupts(agent, langgraph_config, make_chunk, meta, thread_id):
                 yield chunk
 
             meta["time_cost"] = asyncio.get_event_loop().time() - start_time
+            try:
+                graph = await agent.get_graph()
+                state = await graph.aget_state(langgraph_config)
+                agent_state = _extract_agent_state(getattr(state, "values", {})) if state else {}
+            except Exception:
+                agent_state = {}
+
+            if agent_state:
+                yield make_chunk(status="agent_state", agent_state=agent_state, meta=meta)
+
             yield make_chunk(status="finished", meta=meta)
 
             # Save all messages from LangGraph state
diff --git a/src/agents/deep_agent/graph.py b/src/agents/deep_agent/graph.py
@@ -179,6 +179,8 @@ class DeepAgent(BaseAgent):
     context_schema = DeepContext
     capabilities = [
         "file_upload",
+        "todo",
+        "files",
     ]
 
     def __init__(self, **kwargs):
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
@@ -43,6 +43,20 @@
           </div>
         </div>
         <div class="header__right">
+          <!-- AgentState 显示按钮 - 只在智能体支持 todo 或 files 能力时显示 -->
+          <AgentPopover
+            v-model:visible="agentStatePopoverVisible"
+            :agent-state="currentAgentState"
+          >
+            <div
+              class="agent-nav-btn agent-state-btn"
+              :class="{ 'has-content': hasAgentStateContent }"
+              :title="hasAgentStateContent ? '查看工作状态' : '暂无工作状态'"
+            >
+              <Activity class="nav-btn-icon" size="18"/>
+              <span v-if="hasAgentStateContent" class="text">{{ totalAgentStateItems }}</span>
+            </div>
+          </AgentPopover>
           <!-- <div class="nav-btn" @click="shareChat" v-if="currentChatId && currentAgent">
             <ShareAltOutlined style="font-size: 18px;"/>
           </div> -->
@@ -202,7 +216,8 @@
         </div>
       </div>
     </div>
-  </div>
+
+    </div>
 </template>
 
 <script setup>
@@ -217,7 +232,7 @@ import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ImagePreviewComponent from '@/components/ImagePreviewComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
-import { PanelLeftOpen, MessageCirclePlus, LoaderCircle } from 'lucide-vue-next';
+import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Activity } from 'lucide-vue-next';
 import { handleChatError, handleValidationError } from '@/utils/errorHandler';
 import { ScrollController } from '@/utils/scrollController';
 import { AgentValidator } from '@/utils/agentValidator';
@@ -228,6 +243,7 @@ import { MessageProcessor } from '@/utils/messageProcessor';
 import { agentApi, threadApi } from '@/apis';
 import HumanApprovalModal from '@/components/HumanApprovalModal.vue';
 import { useApproval } from '@/composables/useApproval';
+import AgentPopover from '@/components/AgentPopover.vue';
 
 // ==================== PROPS & EMITS ====================
 const props = defineProps({
@@ -293,6 +309,9 @@ const attachmentState = reactive({
   isUploading: false,
 })
 
+// AgentState Popover 状态
+const agentStatePopoverVisible = ref(false);
+
 // ==================== COMPUTED PROPERTIES ====================
 const currentAgentId = computed(() => {
   if (props.singleMode) {
@@ -333,6 +352,37 @@ const supportsFileUpload = computed(() => {
   const capabilities = currentAgent.value.capabilities || [];
   return capabilities.includes('file_upload');
 });
+const supportsTodo = computed(() => {
+  if (!currentAgent.value) return false;
+  const capabilities = currentAgent.value.capabilities || [];
+  return capabilities.includes('todo');
+});
+
+const supportsFiles = computed(() => {
+  if (!currentAgent.value) return false;
+  const capabilities = currentAgent.value.capabilities || [];
+  return capabilities.includes('files');
+});
+
+// AgentState 相关计算属性
+const currentAgentState = computed(() => {
+  return currentChatId.value ? getThreadState(currentChatId.value)?.agentState || null : null;
+});
+
+const hasAgentStateContent = computed(() => {
+  const agentState = currentAgentState.value;
+  if (!agentState) return false;
+  return (agentState.todos && agentState.todos.length > 0) ||
+         (agentState.files && Object.keys(agentState.files).length > 0);
+});
+
+const totalAgentStateItems = computed(() => {
+  const agentState = currentAgentState.value;
+  if (!agentState) return 0;
+  const todoCount = agentState.todos ? agentState.todos.length : 0;
+  const fileCount = agentState.files ? Object.keys(agentState.files).length : 0;
+  return todoCount + fileCount;
+});
 
 const currentThreadMessages = computed(() => threadMessages.value[currentChatId.value] || []);
 
@@ -427,7 +477,7 @@ onMounted(() => {
 onUnmounted(() => {
   if (resizeObserver) resizeObserver.disconnect();
   scrollController.cleanup();
-  // 清理所有线程状态
+    // 清理所有线程状态
   resetOnGoingConv();
 });
 
@@ -439,7 +489,8 @@ const getThreadState = (threadId) => {
     chatState.threadStates[threadId] = {
       isStreaming: false,
       streamAbortController: null,
-      onGoingConv: createOnGoingConvState()
+      onGoingConv: createOnGoingConvState(),
+      agentState: null  // 添加 agentState 字段
     };
   }
   return chatState.threadStates[threadId];
@@ -548,10 +599,27 @@ const _processStreamChunk = (chunk, threadId) => {
     case 'human_approval_required':
       // 使用审批 composable 处理审批请求
       return processApprovalInStream(chunk, threadId, currentAgentId.value);
+    case 'agent_state':
+      if ((supportsTodo.value || supportsFiles.value) && chunk.agent_state) {
+        console.log('[AgentState]', {
+          threadId,
+          todos: chunk.agent_state?.todos || [],
+          files: chunk.agent_state?.files || []
+        });
+        threadState.agentState = chunk.agent_state;
+      }
+      return false;
     case 'finished':
       // 先标记流式结束，但保持消息显示直到历史记录加载完成
       if (threadState) {
         threadState.isStreaming = false;
+        if ((supportsTodo.value || supportsFiles.value) && threadState.agentState) {
+          console.log('[AgentState|Final]', {
+            threadId,
+            todos: threadState.agentState?.todos || [],
+            files: threadState.agentState?.files || []
+          });
+        }
       }
       // 异步加载历史记录，保持当前消息显示直到历史记录加载完成
       fetchThreadMessages({ agentId: currentAgentId.value, threadId: threadId })
@@ -1231,6 +1299,7 @@ const loadChatsList = async () => {
   }
 };
 
+
 const initAll = async () => {
   try {
     if (!agentStore.isInitialized) {
@@ -1244,7 +1313,7 @@ const initAll = async () => {
 onMounted(async () => {
   await initAll();
   scrollController.enableAutoScroll();
-});
+  });
 
 watch(currentAgentId, async (newAgentId, oldAgentId) => {
   if (newAgentId !== oldAgentId) {
@@ -1769,6 +1838,16 @@ watch(conversations, () => {
   }
 }
 
+/* AgentState 按钮有内容时的样式 */
+.agent-nav-btn.agent-state-btn.has-content {
+  color: var(--main-600);
+
+  &:hover:not(.is-disabled) {
+    color: var(--main-700);
+    background-color: var(--main-40);
+  }
+}
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
diff --git a/web/src/components/AgentMessageComponent.vue b/web/src/components/AgentMessageComponent.vue
@@ -194,11 +194,6 @@ const validToolCalls = computed(() => {
 });
 
 const parsedData = computed(() => {
-  // 调试工具调用处理
-  if (validToolCalls.value && validToolCalls.value.length > 0) {
-    console.log('Valid tool calls in message:', validToolCalls.value);
-  }
-
   // Start with default values from the prop to avoid mutation.
   let content = props.message.content.trim() || '';
   let reasoning_content = props.message.additional_kwargs?.reasoning_content || '';
diff --git a/web/src/components/AgentPopover.vue b/web/src/components/AgentPopover.vue

Original file line number	Diff line number	Diff line change
`@@ -179,6 +179,8 @@ class DeepAgent(BaseAgent):`
`179`	`179`	`context_schema = DeepContext`
`180`	`180`	`capabilities = [`
`181`	`181`	`"file_upload",`
	`182`	`+ "todo",`
	`183`	`+ "files",`
`182`	`184`	`]`
`183`	`185`
`184`	`186`	`def __init__(self, **kwargs):`