From 68e7bd8300f318199b3ae076a8469966f7b5ecb0 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Mon, 11 Aug 2025 21:29:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E6=99=BA?=
 =?UTF-8?q?=E8=83=BD=E4=BD=93=E7=95=8C=E9=9D=A2=E4=BA=A4=E4=BA=92=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加单例模式支持，区分独立页面和普通视图
- 重构智能体选择器为按钮样式并优化交互
- 更新侧边栏组件以支持不同模式下的显示
- 统一智能体名称显示为"智能体助手"
- 调整按钮圆角样式提升视觉一致性
---
 src/agents/chatbot/graph.py                 |  2 +-
 web/src/components/AgentChatComponent.vue   | 31 ++++++++++-----
 web/src/components/ChatSidebarComponent.vue | 44 ++++++++++++++++++++-
 web/src/views/AgentSingleView.vue           |  2 +-
 web/src/views/AgentView.vue                 | 23 +++++------
 5 files changed, 77 insertions(+), 25 deletions(-)

diff --git a/src/agents/chatbot/graph.py b/src/agents/chatbot/graph.py
index 510e3a69..139d082a 100644
--- a/src/agents/chatbot/graph.py
+++ b/src/agents/chatbot/graph.py
@@ -18,7 +18,7 @@ from src.agents.chatbot.configuration import ChatbotConfiguration
 from src.agents.tools_factory import get_runnable_tools
 
 class ChatbotAgent(BaseAgent):
-    name = "问答助手"
+    name = "智能体助手"
     description = "基础的对话机器人，可以回答问题，默认不使用任何工具，可在配置中启用需要的工具。"
     config_schema = ChatbotConfiguration
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 35a5118c..a3dd4b3b 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="chat-container" ref="chatContainerRef">
     <ChatSidebarComponent
-      :current-agent-id="props.agentId"
       :current-chat-id="currentChatId"
       :chats-list="chatsList"
       :is-sidebar-open="state.isSidebarOpen"
       :is-initial-render="state.isInitialRender"
+      :single-mode="props.singleMode"
+      :agents="agents"
+      :selected-agent-id="props.agentId"
       @create-chat="createNewChat"
       @select-chat="selectChat"
       @delete-chat="deleteChat"
       @rename-chat="renameChat"
       @toggle-sidebar="toggleSidebar"
+      @open-agent-modal="openAgentModal"
       :class="{
         'floating-sidebar': isSmallContainer,
         'sidebar-open': state.isSidebarOpen,
@@ -71,9 +74,6 @@
           />
         </div>
       </div>
-
-
-
       <div class="chat-box" ref="messagesContainer">
         <div class="conv-box" v-for="(conv, index) in convs" :key="index">
           <AgentMessageComponent
@@ -163,9 +163,15 @@ const props = defineProps({
   state: {
     type: Object,
     default: () => ({})
+  },
+  singleMode: {
+    type: Boolean,
+    default: true
   }
 });
 
+const emit = defineEmits(['open-config', 'open-agent-modal']);
+
 // ==================== 状态管理 ====================
 
 // UI状态
@@ -417,9 +423,9 @@ const handleRenameChat = () => {
     message.warning('请先选择对话');
     return;
   }
-  
+
   let newTitle = currentChat.value.title;
-  
+
   Modal.confirm({
     title: '重命名对话',
     content: h('div', { style: { marginTop: '12px' } }, [
@@ -1286,6 +1292,11 @@ const toggleSidebar = () => {
   console.log("toggleSidebar", state.isSidebarOpen);
 }
 
+const openAgentModal = () => {
+  // 发送事件给父组件，让父组件处理打开智能体选择弹窗的逻辑
+  emit('open-agent-modal');
+}
+
 // 处理键盘事件
 const handleKeyDown = (e) => {
   if (e.key === 'Enter' && !e.shiftKey) {
@@ -1444,14 +1455,14 @@ const mergeMessageChunk = (chunks) => {
       display: flex;
       align-items: center;
       gap: 8px;
-      
+
       .center-title {
         max-width: 200px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      
+
       .rename-button {
          display: flex;
          align-items: center;
@@ -1462,11 +1473,11 @@ const mergeMessageChunk = (chunks) => {
          cursor: pointer;
          opacity: 0;
          transition: all 0.2s ease;
-         
+
          &.visible {
            opacity: 1;
          }
-         
+
          &:hover {
            background-color: var(--gray-100);
          }
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index e4c69295..b14bea8c 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="chat-sidebar" :class="{'sidebar-open': isSidebarOpen, 'no-transition': isInitialRender}">
     <div class="sidebar-header">
-      <div class="header-title">{{ currentAgentId }}</div>
+      <div class="header-title" v-if="singleMode">{{ selectedAgentName }}</div>
+      <div
+        v-else
+        class="agent-selector"
+        @click="openAgentModal"
+      > {{ selectedAgentName || '选择智能体' }}</div>
       <div class="header-actions">
         <div class="toggle-sidebar nav-btn" v-if="isSidebarOpen" @click="toggleCollapse">
           <PanelLeftClose size="20" color="var(--gray-800)"/>
@@ -90,13 +95,32 @@ const props = defineProps({
   isInitialRender: {
     type: Boolean,
     default: false
+  },
+  singleMode: {
+    type: Boolean,
+    default: true
+  },
+  agents: {
+    type: Object,
+    default: () => ({})
+  },
+  selectedAgentId: {
+    type: String,
+    default: null
   }
 });
 
-const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar']);
+const emit = defineEmits(['create-chat', 'select-chat', 'delete-chat', 'rename-chat', 'toggle-sidebar', 'open-agent-modal']);
 
 const loading = ref(false);
 
+const selectedAgentName = computed(() => {
+  if (props.selectedAgentId && props.agents && props.agents[props.selectedAgentId]) {
+    return props.agents[props.selectedAgentId].name;
+  }
+  return '';
+});
+
 const groupedChats = computed(() => {
   const groups = {
     '今天': [],
@@ -187,6 +211,10 @@ const renameChat = async (chatId) => {
 const toggleCollapse = () => {
   emit('toggle-sidebar');
 };
+
+const openAgentModal = () => {
+  emit('open-agent-modal');
+};
 </script>
 
 <style lang="less" scoped>
@@ -394,4 +422,16 @@ const toggleCollapse = () => {
     background-color: var(--gray-100);
   }
 }
+
+// 智能体选择器样式
+.agent-selector {
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--gray-900);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--main-500);
+  }
+}
 </style>
diff --git a/web/src/views/AgentSingleView.vue b/web/src/views/AgentSingleView.vue
index 822887f2..f1a6f270 100644
--- a/web/src/views/AgentSingleView.vue
+++ b/web/src/views/AgentSingleView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="agent-single-view">
     <!-- 智能体聊天界面 -->
-    <AgentChatComponent :agent-id="agentId">
+    <AgentChatComponent :agent-id="agentId" :single-mode="true">
       <template #header-right>
         <UserInfoComponent />
       </template>
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 6f64219b..d44adfd0 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -3,15 +3,9 @@
     <div class="agent-view-header">
       <div class="header-left">
         <div class="header-item">
-          <div
-            class="agent-selector"
-            @click="openAgentModal"
-            style="width: 220px; cursor: pointer;"
-          >
-            <div class="selected-agent-display">
-              <span class="agent-name">{{ selectedAgent.name || '选择智能体' }}</span>
-            </div>
-          </div>
+          <a-button class="header-button" @click="openAgentModal">
+            选择：{{ selectedAgent.name || '选择智能体' }}
+          </a-button>
         </div>
       </div>
       <div class="header-center">
@@ -27,9 +21,10 @@
             v-if="selectedAgentId"
           >
             <template #icon><LinkOutlined /></template>
-            打开独立页面
+            独立页面
           </a-button>
-
+        </div>
+        <div class="header-item">
           <a-tooltip :title="isDefaultAgent ? '当前为默认智能体' : '设为默认智能体'" placement="left">
             <a-button
               class="header-button primary-action"
@@ -291,7 +286,9 @@
           :agent-id="selectedAgentId"
           :config="agentConfig"
           :state="state"
+          :single-mode="false"
           @open-config="toggleConf"
+          @open-agent-modal="openAgentModal"
         >
         </AgentChatComponent>
       </div>
@@ -743,6 +740,10 @@ const toggleConf = () => {
     display: flex;
     align-items: center;
     gap: 10px;
+
+    button {
+      border-radius: 6px;
+    }
   }
 }