From 386a2c422f214333b81511ed957174705e4ccc57 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 9 Aug 2025 23:18:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92?=
 =?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                |   2 +-
 web/src/apis/auth_api.js                     |   2 +-
 web/src/components/AgentChatComponent.vue    |  73 +++-
 web/src/components/ChatSidebarComponent.vue  |  10 +-
 web/src/components/MessageInputComponent.vue | 398 ++++++++++++++-----
 web/src/views/AgentView.vue                  | 221 +++++++++-
 6 files changed, 554 insertions(+), 152 deletions(-)

diff --git a/server/routers/chat_router.py b/server/routers/chat_router.py
index f0e81a71..9b1946da 100644
--- a/server/routers/chat_router.py
+++ b/server/routers/chat_router.py
@@ -285,7 +285,7 @@ async def create_thread(
         id=thread_id,
         user_id=str(current_user.id),
         agent_id=thread.agent_id,
-        title=thread.title or "新对话",
+        title=thread.title or "新的对话",
         description=thread.description,
     )
 
diff --git a/web/src/apis/auth_api.js b/web/src/apis/auth_api.js
index 69e93641..9310bfe9 100644
--- a/web/src/apis/auth_api.js
+++ b/web/src/apis/auth_api.js
@@ -120,7 +120,7 @@ export const threadApi = {
    */
   createThread: (agentId, title, metadata) => apiPost('/api/chat/thread', {
     agent_id: agentId,
-    title: title || '新对话',
+    title: title || '新的对话',
     metadata: metadata || {}
   }, {}, true),
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index 646bca26..23348dfa 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -27,7 +27,7 @@
             <PanelLeftOpen size="20" color="var(--gray-800)"/>
           </div>
           <div class="newchat nav-btn" @click="createNewChat" :disabled="state.isProcessingRequest || state.creatingNewChat">
-            <MessageSquarePlus size="20" color="var(--gray-800)"/> <span class="text" :class="{'hide-text': isMediumContainer}">新对话</span>
+            <MessageSquarePlus size="20" color="var(--gray-800)"/> <span class="text" :class="{'hide-text': isMediumContainer}">新的对话</span>
           </div>
         </div>
         <div class="header__center">
@@ -56,8 +56,21 @@
       <div v-else-if="convs.length === 0 && !onGoingConv.messages.length" class="chat-examples">
         <h1>{{ currentAgent ? currentAgent.name : '请选择一个智能体开始对话' }}</h1>
         <p>{{ currentAgent ? currentAgent.description : '不同的智能体有不同的专长和能力' }}</p>
+        <div class="inputer-init">
+          <MessageInputComponent
+            v-model="userInput"
+            :is-loading="state.isProcessingRequest"
+            :disabled="!currentAgent"
+            :send-button-disabled="!userInput || !currentAgent || state.isProcessingRequest"
+            :placeholder="'输入问题...'"
+            @send="handleSendMessage"
+            @keydown="handleKeyDown"
+          />
+        </div>
       </div>
 
+
+
       <div class="chat-box" ref="messagesContainer">
         <div class="conv-box" v-for="(conv, index) in convs" :key="index">
           <AgentMessageComponent
@@ -104,7 +117,7 @@
         </div>
       </div>
       <div class="bottom">
-        <div class="message-input-wrapper">
+        <div class="message-input-wrapper" v-if="convs.length > 0 || onGoingConv.messages.length > 0">
           <MessageInputComponent
             v-model="userInput"
             :is-loading="state.isProcessingRequest"
@@ -301,7 +314,7 @@ const createNewChat = async () => {
   try {
     // 调用API创建新对话
     state.creatingNewChat = true;
-    const response = await threadApi.createThread(props.agentId, '新对话');
+    const response = await threadApi.createThread(props.agentId, '新的对话');
     if (!response || !response.id) {
       throw new Error('创建对话失败');
     }
@@ -1436,13 +1449,20 @@ const mergeMessageChunk = (chunks) => {
 
   h1 {
     margin-bottom: 20px;
-    font-size: 1.2rem;
-    color: var(--gray-900);
+    font-size: 1.3rem;
+    color: var(--gray-1000);
   }
 
   p {
+    font-size: 1.1rem;
     color: var(--gray-700);
   }
+
+  .inputer-init {
+    margin: 40px auto;
+    width: 80%;
+    max-width: 800px;
+  }
 }
 
 .chat-loading {
@@ -1550,16 +1570,16 @@ const mergeMessageChunk = (chunks) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 3px;
 }
 
 .loading-dots div {
-  width: 8px;
-  height: 8px;
-  margin: 0 4px;
-  background-color: var(--gray-700);
+  width: 6px;
+  height: 6px;
+  background: linear-gradient(135deg, var(--main-color), var(--main-700));
   border-radius: 50%;
-  opacity: 0.3;
-  animation: pulse 0.5s infinite ease-in-out both;
+  animation: dotPulse 1.4s infinite ease-in-out both;
+  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
 }
 
 .loading-dots div:nth-child(1) {
@@ -1570,25 +1590,29 @@ const mergeMessageChunk = (chunks) => {
   animation-delay: -0.16s;
 }
 
+.loading-dots div:nth-child(3) {
+  animation-delay: 0s;
+}
+
 .generating-status {
   display: flex;
   justify-content: flex-start;
-  padding: 0.8rem 0;
-  animation: fadeInUp 0.3s ease-out;
+  padding: 1rem 0;
+  animation: fadeInUp 0.4s ease-out;
+  transition: all 0.2s;
 }
 
 .generating-indicator {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem 0.5rem 0.5rem;
-  background: var(--gray-100);
-  border-radius: 12px;
-  border: 1px solid var(--gray-200);
+  padding: 0.75rem 0rem;
 
   .generating-text {
     margin-left: 12px;
     color: var(--gray-700);
     font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.025em;
   }
 }
 
@@ -1625,17 +1649,26 @@ const mergeMessageChunk = (chunks) => {
   }
 }
 
-@keyframes pulse {
+@keyframes dotPulse {
   0%, 80%, 100% {
     transform: scale(0.8);
-    opacity: 0.3;
+    opacity: 0.5;
   }
   40% {
-    transform: scale(1);
+    transform: scale(1.1);
     opacity: 1;
   }
 }
 
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
 @keyframes swing-in-top-fwd {
   0% {
     transform: rotateX(-100deg);
diff --git a/web/src/components/ChatSidebarComponent.vue b/web/src/components/ChatSidebarComponent.vue
index 5f452736..e4c69295 100644
--- a/web/src/components/ChatSidebarComponent.vue
+++ b/web/src/components/ChatSidebarComponent.vue
@@ -25,7 +25,7 @@
             :class="{ 'active': currentChatId === chat.id }"
             @click="selectChat(chat)"
           >
-            <div class="conversation-title">{{ chat.title || '新对话' }}</div>
+            <div class="conversation-title">{{ chat.title || '新的对话' }}</div>
             <div class="actions-mask"></div>
             <div class="conversation-actions">
               <a-dropdown :trigger="['click']" @click.stop>
@@ -244,7 +244,7 @@ const toggleCollapse = () => {
       width: 100%;
       padding: 8px 12px;
       border-radius: 6px;
-      background-color: var(--main-50);
+      background-color: var(--gray-50);
       color: var(--main-color);
       border: none;
       transition: all 0.2s ease;
@@ -332,7 +332,7 @@ const toggleCollapse = () => {
       }
 
       &:hover {
-        background-color: var(--gray-100);
+        background-color: var(--gray-50);
 
         .actions-mask {
             background: linear-gradient(to right, transparent, var(--gray-100) 20px);
@@ -344,14 +344,14 @@ const toggleCollapse = () => {
       }
 
       &.active {
-        background-color: var(--main-50);
+        background-color: var(--gray-100);
 
         .conversation-title {
           color: var(--main-600);
           font-weight: 500;
         }
         .actions-mask {
-          background: linear-gradient(to right, transparent, var(--main-50) 20px);
+          background: linear-gradient(to right, transparent, var(--gray-100) 20px);
         }
       }
     }
diff --git a/web/src/components/MessageInputComponent.vue b/web/src/components/MessageInputComponent.vue
index e439f80e..117272f8 100644
--- a/web/src/components/MessageInputComponent.vue
+++ b/web/src/components/MessageInputComponent.vue
@@ -1,48 +1,76 @@
 <template>
-  <div class="input-box" :class="customClasses" @click="focusInput">
-    <div class="input-area">
-      <a-textarea
-        ref="inputRef"
-        class="user-input"
-        v-model:value="inputValue"
-        @keydown="handleKeyPress"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :auto-size="autoSize"
-      />
+  <div class="input-box" :class="[customClasses, { 'single-line': isSingleLine }]" @click="focusInput">
+    <div class="expand-options" v-if="hasOptionsLeft">
+      <a-popover
+        v-model:open="optionsExpanded"
+        placement="bottomLeft"
+        trigger="click"
+      >
+        <template #content>
+          <div class="popover-options">
+            <slot name="options-left">
+              <div class="no-options">没有配置 options</div>
+            </slot>
+          </div>
+        </template>
+        <a-button
+          type="text"
+          size="small"
+          class="expand-btn"
+        >
+          <template #icon>
+            <PlusOutlined :class="{ 'rotated': optionsExpanded }" />
+          </template>
+        </a-button>
+      </a-popover>
     </div>
-    <div class="input-options">
-      <div class="options__left">
-        <slot name="options-left"></slot>
-      </div>
-      <div class="options__right">
-        <a-tooltip :title="isLoading ? '停止回答' : ''">
-          <a-button
-            @click="handleSendOrStop"
-            :disabled="sendButtonDisabled"
-            type="link"
-          >
+
+    <textarea
+      ref="inputRef"
+      class="user-input"
+      :value="inputValue"
+      @keydown="handleKeyPress"
+      @input="handleInput"
+      @focus="focusInput"
+      :placeholder="placeholder"
+      :disabled="disabled"
+    />
+
+    <div class="send-button-container">
+      <a-tooltip :title="isLoading ? '停止回答' : ''">
+        <a-button
+          @click="handleSendOrStop"
+          :disabled="sendButtonDisabled"
+          type="link"
+          class="send-button"
+        >
           <template #icon>
             <component :is="getIcon" class="send-btn"/>
           </template>
-          </a-button>
-        </a-tooltip>
-      </div>
+        </a-button>
+      </a-tooltip>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, toRefs, onMounted } from 'vue';
+import { ref, computed, toRefs, onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
 import {
   SendOutlined,
   ArrowUpOutlined,
   LoadingOutlined,
-  PauseOutlined
+  PauseOutlined,
+  PlusOutlined
 } from '@ant-design/icons-vue';
 
 
 const inputRef = ref(null);
+const isSingleLine = ref(true);
+const optionsExpanded = ref(false);
+const hasOptionsLeft = ref(false);
+const singleLineHeight = ref(0); // Add this
+// 用于防抖的定时器
+const debounceTimer = ref(null);
 const props = defineProps({
   modelValue: {
     type: String,
@@ -106,11 +134,71 @@ const handleKeyPress = (e) => {
   emit('keydown', e);
 };
 
+// 处理输入事件
+const handleInput = (e) => {
+  const value = e.target.value;
+  emit('update:modelValue', value);
+};
+
 // 处理发送按钮点击
 const handleSendOrStop = () => {
   emit('send');
 };
 
+// 用于存储固定的单行宽度基准
+const singleLineWidth = ref(0);
+
+// 检查行数
+const checkLineCount = () => {
+  if (!inputRef.value || singleLineHeight.value === 0) {
+    return;
+  }
+  const textarea = inputRef.value;
+  const content = inputValue.value;
+
+  // 主要判断依据：内容是否包含换行符
+  const hasNewlines = content.includes('\n');
+
+  // 辅助判断：内容是否超出单行宽度（使用固定的单行宽度基准）
+  let contentExceedsWidth = false;
+  if (!hasNewlines && content.trim() && singleLineWidth.value > 0) {
+    // 使用固定的单行宽度作为测量基准，避免因模式切换导致的宽度变化
+    const measureDiv = document.createElement('div');
+    measureDiv.style.cssText = `
+      position: absolute;
+      visibility: hidden;
+      white-space: nowrap;
+      font-family: ${getComputedStyle(textarea).fontFamily};
+      font-size: ${getComputedStyle(textarea).fontSize};
+      line-height: ${getComputedStyle(textarea).lineHeight};
+      padding: 0;
+      border: none;
+      width: ${singleLineWidth.value}px;
+    `;
+    measureDiv.textContent = content;
+    document.body.appendChild(measureDiv);
+
+    // 检查内容是否会换行（基于固定的单行宽度）
+    contentExceedsWidth = measureDiv.scrollWidth > measureDiv.clientWidth;
+    document.body.removeChild(measureDiv);
+  }
+
+  const shouldBeMultiLine = hasNewlines || contentExceedsWidth;
+  isSingleLine.value = !shouldBeMultiLine;
+
+  // 根据模式调整高度
+  if (shouldBeMultiLine) {
+    // 多行模式：让textarea自适应内容高度
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.max(textarea.scrollHeight, singleLineHeight.value)}px`;
+  } else {
+    // 单行模式：清除内联样式，让CSS控制高度
+    textarea.style.height = '';
+  }
+};
+
+
+
 // 聚焦输入框
 const focusInput = () => {
   if (inputRef.value && !props.disabled) {
@@ -118,30 +206,89 @@ const focusInput = () => {
   }
 };
 
+// 检查是否有左侧选项
+const checkOptionsLeft = () => {
+  // 这里可以通过检查slot内容来判断是否有选项
+  // 暂时设为true，实际使用时可以根据slot内容动态判断
+  hasOptionsLeft.value = true;
+};
+
+// 监听输入值变化
+watch(inputValue, () => {
+  nextTick(() => {
+    checkLineCount();
+  });
+});
+
+// 监听输入框尺寸变化
+/* const observeTextareaResize = () => {
+  if (inputRef.value) {
+    const textarea = inputRef.value;
+    if (textarea) {
+      // 创建 ResizeObserver 来监听文本域尺寸变化
+      const resizeObserver = new ResizeObserver(() => {
+        checkLineCount();
+      });
+      resizeObserver.observe(textarea);
+
+      // 在组件卸载时断开观察器
+      onBeforeUnmount(() => {
+        resizeObserver.disconnect();
+      });
+    }
+  }
+}; */
+
 // Wait for component to mount before setting up onStartTyping
 onMounted(() => {
-  // Use the template ref element for onStartTyping
-  setTimeout(() => {
+  console.log('Component mounted');
+  checkOptionsLeft();
+  nextTick(() => {
     if (inputRef.value) {
+      // 记录单行模式下的高度和宽度基准
+      singleLineHeight.value = inputRef.value.clientHeight;
+      singleLineWidth.value = inputRef.value.clientWidth;
+      checkLineCount();
       inputRef.value.focus();
     }
-  }, 100);
+  });
+  // observeTextareaResize();
+});
+
+// 组件卸载时清除定时器
+onBeforeUnmount(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value);
+  }
 });
 
 </script>
 
 <style lang="less" scoped>
 .input-box {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   width: 100%;
-  height: auto;
   margin: 0 auto;
-  padding: 0.6rem 0.75rem 0.4rem 0.75rem;
   border: 2px solid var(--gray-200);
   border-radius: 0.8rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  gap: 8px;
+
+  /* Default: Multi-line layout */
+  padding: 0.8rem 0.75rem 0.6rem 0.75rem;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "input input"
+    "options send";
+
+  .expand-options {
+    justify-self: start;
+  }
+  .send-button-container {
+    justify-self: end;
+  }
 
   &:focus-within {
     border-color: var(--main-500);
@@ -149,82 +296,127 @@ onMounted(() => {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }
 
-  .input-area {
-    display: flex;
-    align-items: flex-end;
-    gap: 8px;
-  }
+  &.single-line {
+    padding: 0.75rem 0.75rem;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: 1fr;
+    grid-template-areas: "options input send";
+    align-items: center;
 
-  .user-input {
-    flex: 1;
-    min-height: 44px;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    margin: 0;
-    color: #222222;
-    font-size: 14px;
-    outline: none;
-    resize: none;
-    line-height: 1.6;
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
+    .user-input {
+      min-height: 24px;
+      height: 24px; /* Fix height for single line */
+      align-self: center;
+      white-space: nowrap;
+      overflow: hidden;
     }
 
-    &:active {
-      outline: none;
-    }
-
-    &::placeholder {
-      color: #888888;
-    }
-  }
-
-  .input-options {
-    display: flex;
-    // border-top: 1px solid var(--gray-100);
-
-    .options__left,
-    .options__right {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    .options__right {
-      width: fit-content;
-    }
-
-    .options__left {
-      flex: 1;
-
-      :deep(.opt-item) {
-        border-radius: 12px;
-        border: 1px solid var(--gray-300);
-        padding: 5px 10px;
-        cursor: pointer;
-        font-size: 12px;
-        color: var(--gray-700);
-        transition: all 0.2s ease;
-
-        &:hover {
-          background-color: var(--main-10);
-          color: var(--main-color);
-        }
-
-        &.active {
-          color: var(--main-color);
-          border: 1px solid var(--main-500);
-          background-color: var(--main-10);
-        }
-      }
+    .expand-options, .send-button-container {
+      align-self: center;
     }
   }
 }
 
-button.ant-btn-icon-only {
+.expand-options {
+  grid-area: options;
+  display: flex;
+  align-items: center;
+}
+
+.user-input {
+  grid-area: input;
+  width: 100%;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  color: #222222;
+  font-size: 15px;
+  outline: none;
+  resize: none;
+  line-height: 1.5;
+  font-family: inherit;
+  min-height: 44px; /* Default min-height for multi-line */
+  max-height: 200px;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &::placeholder {
+    color: #888888;
+  }
+}
+
+.send-button-container {
+  grid-area: send;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.expand-btn {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-600);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--gray-100);
+    color: var(--main-500);
+  }
+
+  .anticon {
+    font-size: 12px;
+    transition: transform 0.2s ease;
+
+    &.rotated {
+      transform: rotate(45deg);
+    }
+  }
+}
+
+// Popover 选项样式
+.popover-options {
+  min-width: 200px;
+  max-width: 300px;
+
+  .no-options {
+    color: var(--gray-700);
+    font-size: 12px;
+    text-align: center;
+  }
+
+  :deep(.opt-item) {
+    border-radius: 12px;
+    border: 1px solid var(--gray-300);
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--gray-700);
+    transition: all 0.2s ease;
+    margin: 4px;
+    display: inline-block;
+
+    &:hover {
+      background-color: var(--main-10);
+      color: var(--main-color);
+    }
+
+    &.active {
+      color: var(--main-color);
+      border: 1px solid var(--main-500);
+      background-color: var(--main-10);
+    }
+  }
+}
+
+.send-button.ant-btn-icon-only {
   height: 32px;
   width: 32px;
   cursor: pointer;
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 1c8e01ac..6f64219b 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -3,34 +3,23 @@
     <div class="agent-view-header">
       <div class="header-left">
         <div class="header-item">
-          <a-select
-            v-model:value="selectedAgentId"
-            class="agent-list"
-            style="width: 220px"
-            @change="selectAgent"
+          <div
+            class="agent-selector"
+            @click="openAgentModal"
+            style="width: 220px; cursor: pointer;"
           >
-            <a-select-option
-              v-for="(agent, id) in agents"
-              :key="id"
-              :value="id"
-            >
-              <div class="agent-option">
-                <div class="agent-option-content">
-                  <p class="agent-option-name">{{ agent.name }} <StarFilled v-if="id === defaultAgentId" class="default-icon" /></p>
-                  <p class="agent-option-description">{{ agent.description }}</p>
-                </div>
-
-              </div>
-            </a-select-option>
-          </a-select>
-        </div>
-        <div class="header-item">
-          <a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
+            <div class="selected-agent-display">
+              <span class="agent-name">{{ selectedAgent.name || '选择智能体' }}</span>
+            </div>
+          </div>
         </div>
       </div>
       <div class="header-center">
       </div>
       <div class="header-right">
+        <div class="header-item">
+          <a-button class="header-button" @click="toggleConf" :icon="h(SettingOutlined)"> 配置 </a-button>
+        </div>
         <div class="header-item">
           <a-button
             class="header-button"
@@ -263,6 +252,39 @@
         </div>
       </a-modal>
 
+      <!-- 智能体选择弹窗 -->
+      <a-modal
+        v-model:open="state.agentModalOpen"
+        title="选择智能体"
+        :width="800"
+        :footer="null"
+        :maskClosable="true"
+        class="agent-modal"
+      >
+        <div class="agent-modal-content">
+          <div class="agents-grid">
+            <div
+              v-for="(agent, id) in agents"
+              :key="id"
+              class="agent-card"
+              :class="{ 'selected': id === selectedAgentId }"
+              @click="selectAgentFromModal(id)"
+            >
+              <div class="agent-card-header">
+                <div class="agent-card-title">
+                  <span class="agent-card-name">{{ agent.name }}</span>
+                  <StarFilled v-if="id === defaultAgentId" class="default-icon" />
+                </div>
+                <div class="agent-card-indicator">
+                  <CheckCircleOutlined v-if="id === selectedAgentId" />
+                </div>
+              </div>
+              <div class="agent-card-description">{{ agent.description }}</div>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+
       <!-- 中间内容区域 -->
       <div class="content">
         <AgentChatComponent
@@ -309,6 +331,7 @@ const state = reactive({
   agentConfOpen: false,
   debug_mode: false,
   toolsModalOpen: false,
+  agentModalOpen: false,
   isEmptyConfig: computed(() =>
     !selectedAgentId.value ||
     Object.keys(configurableItems.value).length === 0
@@ -611,6 +634,17 @@ const selectAgent = (agentId) => {
   loadAgentConfig();
 };
 
+// 打开智能体选择弹窗
+const openAgentModal = () => {
+  state.agentModalOpen = true;
+};
+
+// 从弹窗中选择智能体
+const selectAgentFromModal = (agentId) => {
+  selectAgent(agentId);
+  state.agentModalOpen = false;
+};
+
 // 加载工具列表
 const loadAvailableTools = async () => {
   try {
@@ -1137,6 +1171,149 @@ const toggleConf = () => {
   }
 }
 
+// 智能体选择器样式
+.agent-selector {
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  padding: 8px 12px;
+  background: white;
+  transition: border-color 0.2s ease;
+
+  &:hover {
+    border-color: var(--main-color);
+  }
+
+  .selected-agent-display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .agent-name {
+      font-size: 14px;
+      color: var(--gray-900);
+      font-weight: 500;
+    }
+
+    .default-icon {
+      color: #faad14;
+      font-size: 14px;
+    }
+  }
+}
+
+// 智能体选择弹窗样式
+.agent-modal {
+  :deep(.ant-modal-content) {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  :deep(.ant-modal-header) {
+    background: #fff;
+    border-bottom: 1px solid var(--gray-200);
+    padding: 16px 20px;
+
+    .ant-modal-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--gray-900);
+    }
+  }
+
+  :deep(.ant-modal-body) {
+    padding: 20px;
+    background: #fff;
+  }
+
+  .agent-modal-content {
+    .agents-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 12px;
+      max-height: 500px;
+      overflow-y: auto;
+    }
+
+    .agent-card {
+      border: 1px solid var(--gray-200);
+      border-radius: 8px;
+      padding: 16px;
+      cursor: pointer;
+      transition: border-color 0.2s ease;
+      background: white;
+
+      &:hover {
+        border-color: var(--main-color);
+      }
+
+      &.selected {
+        border-color: var(--main-color);
+        background: var(--main-10);
+
+        .agent-card-indicator {
+          color: var(--main-color);
+        }
+      }
+
+      .agent-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 12px;
+
+        .agent-card-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 1;
+
+          .agent-card-name {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--gray-900);
+            line-height: 1.4;
+          }
+
+          .default-icon {
+            color: #faad14;
+            font-size: 16px;
+            flex-shrink: 0;
+          }
+        }
+
+        .agent-card-indicator {
+          font-size: 20px;
+          color: var(--gray-400);
+          transition: color 0.2s ease;
+          flex-shrink: 0;
+        }
+      }
+
+      .agent-card-description {
+        font-size: 14px;
+        color: var(--gray-700);
+        line-height: 1.5;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+// 响应式适配智能体弹窗
+@media (max-width: 768px) {
+  .agent-modal {
+    .agent-modal-content {
+      .agents-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+}
+
 </style>