From f5a7a3eec9931148dc3a244640e103ee053ac4f5 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 5 Apr 2025 02:23:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=99=BA=E8=83=BD=E4=BD=93?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/routers/chat_router.py                |  32 +++---
 web/src/components/AgentChatComponent.vue    |  19 +++-
 web/src/components/TokenManagerComponent.vue |   2 +-
 web/src/views/AgentView.vue                  | 114 +++++++++++++++----
 4 files changed, 127 insertions(+), 40 deletions(-)

diff --git a/server/routers/chat_router.py b/server/routers/chat_router.py
index 0bd56ca5..55959402 100644
--- a/server/routers/chat_router.py
+++ b/server/routers/chat_router.py
@@ -174,21 +174,25 @@ def chat_agent(agent_name: str,
     def stream_messages():
         content = ""
         yield make_chunk(status="init", meta=meta)
-        for msg, metadata in agent.stream_messages(messages, config_schema=runnable_config):
-            if isinstance(msg, AIMessageChunk) and msg.content != "<tool_call>":
-                content += msg.content
-                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")
+        try:
+            for msg, metadata in agent.stream_messages(messages, config_schema=runnable_config):
+                if isinstance(msg, AIMessageChunk) and msg.content != "<tool_call>":
+                    content += msg.content
+                    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")
 
-        yield make_chunk(status="finished",
-                         history=history_manager.update_ai(content),
-                         meta=meta)
+            yield make_chunk(status="finished",
+                            history=history_manager.update_ai(content),
+                            meta=meta)
+        except Exception as e:
+            logger.error(f"Error streaming messages: {e}")
+            yield make_chunk(message=f"Error streaming messages: {e}", status="error")
 
     return StreamingResponse(stream_messages(), media_type='application/json')
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 718299a3..d28caca3 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -444,6 +444,8 @@ const handleStreamResponse = async (response) => {
             await handleInit(value);
           } else if (value.status === 'finished') {
             await handleFinished(value);
+          } else if (value.status === 'error') {
+            await handleError(value);
           } else {
             await handleMessageById(value);
           }
@@ -552,7 +554,7 @@ const handleFinished = async (data) => {
 const handleMessageById = async (data) => {
   const msgId = data.msg.id;
   const msgType = data.msg.type;
-  // console.log("data", data);
+  console.log("data", data);
 
   // 查找现有消息
   const existingMsgIndex = messageMap.value.get(msgId);
@@ -678,11 +680,26 @@ const updateExistingMessage = async (data, existingMsgIndex) => {
     }
   }
 
+  // 如果状态是error，则更新为error
+  if (data.status === 'error') {
+    msgInstance.status = 'error';
+    msgInstance.message = data.message;
+  }
+
   // 确保变更生效
   await nextTick();
   await scrollToBottom();
 };
 
+const handleError = async (data) => {
+  console.error('处理错误状态:', data);
+  const lastMsg = messages.value[messages.value.length - 1];
+  if (lastMsg) {
+    lastMsg.status = 'error';
+    lastMsg.message = data.message;
+  }
+  isProcessing.value = false;
+};
 
 const appendToolMessageToExistingAssistant = async (data) => {
   // console.log("appendToolMessageToExistingAssistant", data);
diff --git a/web/src/components/TokenManagerComponent.vue b/web/src/components/TokenManagerComponent.vue
index bcf6adb7..4b074f85 100644
--- a/web/src/components/TokenManagerComponent.vue
+++ b/web/src/components/TokenManagerComponent.vue
@@ -42,7 +42,7 @@
 
     <!-- 添加令牌弹窗 -->
     <a-modal
-      v-model:visible="addTokenModalVisible"
+      v-model:open="addTokenModalVisible"
       title="添加访问令牌"
       ok-text="创建"
       cancel-text="取消"
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index a3846864..9db3c27f 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -27,6 +27,34 @@
           {{ agents[selectedAgentId]?.description }}
         </p>
 
+        <!-- 添加配置按钮 -->
+        <div class="agent-action-buttons">
+          <a-button
+            class="action-button"
+            @click="openConfigModal"
+          >
+            <template #icon><SettingOutlined /></template>
+            智能体配置
+          </a-button>
+
+          <a-button
+            class="action-button"
+            @click="openTokenModal"
+          >
+            <template #icon><KeyOutlined /></template>
+            访问令牌
+          </a-button>
+
+          <a-button
+            class="action-button"
+            @click="goToAgentPage"
+            v-if="selectedAgentId"
+          >
+            <template #icon><LinkOutlined /></template>
+            打开独立页面
+          </a-button>
+        </div>
+
         <!-- 添加requirements显示部分 -->
         <div v-if="agents[selectedAgentId]?.requirements && agents[selectedAgentId]?.requirements.length > 0" class="info-section">
           <h3>所需环境变量:</h3>
@@ -62,12 +90,12 @@
             <img src="@/assets/icons/sidebar_left.svg" class="iconfont icon-20" alt="设置" />
           </div>
         </template>
-        <template #header-right>
+        <!-- <template #header-right>
           <div class="toggle-sidebar nav-btn" @click="toggleConfigSidebar()">
             <SettingOutlined class="iconfont icon-20" />
             <span class="text">配置</span>
           </div>
-        </template>
+        </template> -->
       </AgentChatComponent>
     </div>
 
@@ -80,33 +108,18 @@
         </div>
       </h2>
       <div v-if="selectedAgentId" class="config-form">
-        <!-- 打开配置弹窗的按钮 -->
-        <a-button
-          type="primary"
-          block
-          @click="openConfigModal"
-        >
-          打开智能体配置
-        </a-button>
-
-        <!-- 添加令牌管理按钮 -->
-        <a-button
-          style="margin-top: 16px;"
-          type="primary"
-          block
-          @click="openTokenModal"
-        >
-          访问令牌管理
-        </a-button>
+        <!-- 已将按钮移至左侧边栏 -->
       </div>
       <div v-else class="no-agent-selected">
         请先选择一个智能体
       </div>
+      <p>你好，智能体</p>
     </div>
 
+
     <!-- 配置弹窗 -->
     <a-modal
-      v-model:visible="state.configModalVisible"
+      v-model:open="state.configModalVisible"
       title="智能体配置"
       width="650px"
       :footer="null"
@@ -162,7 +175,7 @@
 
     <!-- 令牌管理弹窗 -->
     <a-modal
-      v-model:visible="state.tokenModalVisible"
+      v-model:open="state.tokenModalVisible"
       title="访问令牌管理"
       width="650px"
       :footer="null"
@@ -175,17 +188,23 @@
 
 <script setup>
 import { ref, onMounted, reactive, watch, computed, h } from 'vue';
+import { useRouter } from 'vue-router';
 import {
   RobotOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   CloseOutlined,
-  SettingOutlined
+  SettingOutlined,
+  KeyOutlined,
+  LinkOutlined
 } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import AgentChatComponent from '@/components/AgentChatComponent.vue';
 import TokenManagerComponent from '@/components/TokenManagerComponent.vue';
 
+// 路由
+const router = useRouter();
+
 // 状态
 const agents = ref({});
 const selectedAgentId = ref(null);
@@ -323,7 +342,7 @@ const fetchAgents = async () => {
         acc[agent.name] = agent;
         return acc;
       }, {});
-      console.log("agents", agents.value);
+      // console.log("agents", agents.value);
 
       // 加载当前选中智能体的配置
       if (selectedAgentId.value) {
@@ -392,6 +411,13 @@ const getPlaceholder = (key, value) => {
   // 返回描述作为占位符
   return `（默认: ${value.default}）` ;
 };
+
+// 跳转到独立智能体页面
+const goToAgentPage = () => {
+  if (selectedAgentId.value) {
+    window.open(`/agent/${selectedAgentId.value}`, '_blank');
+  }
+};
 </script>
 
 <style lang="less" scoped>
@@ -531,6 +557,22 @@ const getPlaceholder = (key, value) => {
 .agent-info {
   padding: 16px;
   min-width: calc(var(--agent-sidebar-width) - 16px);
+  overflow-y: auto;
+  max-height: calc(100vh - 60px); /* 减去标题栏的高度 */
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--main-light-4);
+    border-radius: 4px;
+  }
 }
 
 .agent-name {
@@ -623,6 +665,30 @@ const getPlaceholder = (key, value) => {
     gap: 10px;
   }
 }
+
+// 添加新按钮的样式
+.agent-action-buttons {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.action-button {
+  background-color: white;
+  border: 1px solid var(--main-light-3);
+  text-align: left;
+  height: auto;
+  padding: 8px 12px;
+
+  &:hover {
+    background-color: var(--main-light-4);
+  }
+
+  .anticon {
+    margin-right: 8px;
+  }
+}
 </style>