diff --git a/docs/changelog/update.md b/docs/changelog/update.md
index e0938a0a..73fc635d 100644
--- a/docs/changelog/update.md
+++ b/docs/changelog/update.md
@@ -20,7 +20,6 @@
 - [x] 文件上传模块 UI的边距、配色有问题
 - [x] 知识图谱页面的节点数量统计方法 #236
 - [x] 当没有手动添加节点的时候，尝试检索，会出现为创建索引的情况 #236
-- [ ] 删除知识库的时候，没有正常将数据从 Neo4j / Milvus 数据库中删除（需要添加检测脚本）
 
 # 💯 More:
 
diff --git a/web/src/components/AgentChatComponent.vue b/web/src/components/AgentChatComponent.vue
index a3dd4b3b..333cddb9 100644
--- a/web/src/components/AgentChatComponent.vue
+++ b/web/src/components/AgentChatComponent.vue
@@ -1222,7 +1222,6 @@ watch([convs, () => onGoingConv.messages], () => {
   scrollToBottom();
 }, { deep: true });
 
-
 // ==================== 用户交互处理 ====================
 
 // 检查是否在底部（允许一定误差）
@@ -1289,6 +1288,10 @@ const scrollToBottom = async () => {
 const toggleSidebar = () => {
   state.isSidebarOpen = !state.isSidebarOpen;
   localStorage.setItem('chat_sidebar_open', state.isSidebarOpen);
+  // 当打开聊天侧边栏时，关闭配置侧边栏
+  if (state.isSidebarOpen) {
+    emit('close-config-sidebar');
+  }
   console.log("toggleSidebar", state.isSidebarOpen);
 }
 
diff --git a/web/src/components/AgentConfigSidebar.vue b/web/src/components/AgentConfigSidebar.vue
new file mode 100644
index 00000000..4ab58da0
--- /dev/null
+++ b/web/src/components/AgentConfigSidebar.vue
@@ -0,0 +1,1073 @@
+<template>
+  <div class="agent-config-sidebar" :class="{ 'open': isOpen }">
+    <!-- 侧边栏头部 -->
+    <div class="sidebar-header">
+      <div class="sidebar-title">
+        <SettingOutlined class="title-icon" />
+        <span>智能体配置</span>
+      </div>
+      <a-button
+        type="text"
+        size="small"
+        @click="closeSidebar"
+        class="close-btn"
+      >
+        <CloseOutlined />
+      </a-button>
+    </div>
+
+    <!-- 侧边栏内容 -->
+    <div class="sidebar-content">
+      <div class="agent-info">
+        <div class="agent-basic-info">
+          <h4>{{ selectedAgent.name || '未选择智能体' }}</h4>
+          <p class="agent-description">{{ selectedAgent.description }}</p>
+          <div class="debug-toggle" v-if="selectedAgent.name">
+            <span class="debug-text">调试信息</span>
+            <a-switch v-model:checked="debugMode" size="small" />
+          </div>
+          <pre v-if="debugMode && selectedAgent.name" class="debug-info">{{ selectedAgent }}</pre>
+        </div>
+
+        <a-divider />
+
+        <div v-if="selectedAgentId && configSchema" class="config-form-content">
+          <!-- 配置表单 -->
+          <a-form :model="agentConfig" layout="vertical" class="config-form">
+            <a-alert
+              v-if="isEmptyConfig"
+              type="warning"
+              message="该智能体没有配置项"
+              show-icon
+              class="config-alert"
+            />
+            <a-alert
+              v-if="!selectedAgent.has_checkpointer"
+              type="error"
+              message="该智能体没有配置 Checkpointer，功能无法正常使用"
+              show-icon
+              class="config-alert"
+            />
+
+            <!-- 统一显示所有配置项 -->
+            <template v-for="(value, key) in configurableItems" :key="key">
+              <a-form-item
+                :label="getConfigLabel(key, value)"
+                :name="key"
+                class="config-item"
+              >
+                <p v-if="value.description" class="config-description">{{ value.description }}</p>
+
+                <!-- 模型选择 -->
+                <div v-if="key === 'model'" class="model-selector">
+                  <ModelSelectorComponent
+                    @select-model="handleModelChange"
+                    :model_name="agentConfig[key] ? agentConfig[key].split('/').slice(1).join('/') : ''"
+                    :model_provider="agentConfig[key] ? agentConfig[key].split('/')[0] : ''"
+                  />
+                </div>
+
+                <!-- 系统提示词 -->
+                <a-textarea
+                  v-else-if="key === 'system_prompt'"
+                  v-model:value="agentConfig[key]"
+                  :rows="3"
+                  :placeholder="getPlaceholder(key, value)"
+                  class="system-prompt-input"
+                />
+
+                <!-- 工具选择 -->
+                <div v-else-if="key === 'tools'" class="tools-selector">
+                  <div class="tools-summary">
+                    <div class="tools-summary-info">
+                      <span class="tools-count">已选择 {{ getSelectedCount(key) }} 个工具</span>
+                      <a-button
+                        type="link"
+                        size="small"
+                        @click="clearSelection(key)"
+                        v-if="getSelectedCount(key) > 0"
+                        class="clear-btn"
+                      >
+                        清空
+                      </a-button>
+                    </div>
+                    <a-button
+                      type="primary"
+                      @click="openToolsModal"
+                      class="select-tools-btn"
+                      size="small"
+                    >
+                      选择工具
+                    </a-button>
+                  </div>
+                  <div v-if="getSelectedCount(key) > 0" class="selected-tools-preview">
+                    <a-tag
+                      v-for="toolId in agentConfig[key]"
+                      :key="toolId"
+                      closable
+                      @close="removeSelectedTool(toolId)"
+                      class="tool-tag"
+                    >
+                      {{ getToolNameById(toolId) }}
+                    </a-tag>
+                  </div>
+                </div>
+
+                <!-- 布尔类型 -->
+                <a-switch
+                  v-else-if="typeof agentConfig[key] === 'boolean'"
+                  v-model:checked="agentConfig[key]"
+                />
+
+                <!-- 单选 -->
+                <a-select
+                  v-else-if="value?.options && (value?.type === 'str' || value?.type === 'select')"
+                  v-model:value="agentConfig[key]"
+                  class="config-select"
+                >
+                  <a-select-option v-for="option in value.options" :key="option" :value="option">
+                    {{ option.label || option }}
+                  </a-select-option>
+                </a-select>
+
+                <!-- 多选 -->
+                <div v-else-if="value?.options && value?.type === 'list'" class="multi-select-cards">
+                  <div class="multi-select-label">
+                    <span>已选择 {{ getSelectedCount(key) }} 项</span>
+                    <a-button
+                      type="link"
+                      size="small"
+                      @click="clearSelection(key)"
+                      v-if="getSelectedCount(key) > 0"
+                    >
+                      清空
+                    </a-button>
+                  </div>
+                  <div class="options-grid">
+                    <div
+                      v-for="option in value.options"
+                      :key="option"
+                      class="option-card"
+                      :class="{
+                        'selected': isOptionSelected(key, option),
+                        'unselected': !isOptionSelected(key, option)
+                      }"
+                      @click="toggleOption(key, option)"
+                    >
+                      <div class="option-content">
+                        <span class="option-text">{{ option }}</span>
+                        <div class="option-indicator">
+                          <CheckCircleOutlined v-if="isOptionSelected(key, option)" />
+                          <PlusCircleOutlined v-else />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 数字 -->
+                <a-input-number
+                  v-else-if="value?.type === 'number'"
+                  v-model:value="agentConfig[key]"
+                  :placeholder="getPlaceholder(key, value)"
+                  class="config-input-number"
+                />
+
+                <!-- 滑块 -->
+                <a-slider
+                  v-else-if="value?.type === 'slider'"
+                  v-model:value="agentConfig[key]"
+                  :min="value.min"
+                  :max="value.max"
+                  :step="value.step"
+                  class="config-slider"
+                />
+
+                <!-- 其他类型 -->
+                <a-input
+                  v-else
+                  v-model:value="agentConfig[key]"
+                  :placeholder="getPlaceholder(key, value)"
+                  class="config-input"
+                />
+              </a-form-item>
+            </template>
+
+          </a-form>
+        </div>
+      </div>
+
+      <!-- 固定在底部的操作按钮 -->
+      <div class="sidebar-footer" v-if="!isEmptyConfig">
+        <div class="form-actions">
+          <a-button type="primary" @click="saveConfig" class="save-btn">
+            保存配置
+          </a-button>
+          <a-button @click="resetConfig" class="reset-btn">
+            重置
+          </a-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 工具选择弹窗 -->
+    <a-modal
+      v-model:open="toolsModalOpen"
+      title="选择工具"
+      :width="600"
+      :footer="null"
+      :maskClosable="false"
+      class="tools-modal"
+    >
+      <div class="tools-modal-content">
+        <div class="tools-search">
+          <a-input
+            v-model:value="toolsSearchText"
+            placeholder="搜索工具..."
+            allow-clear
+            class="search-input"
+          >
+            <template #prefix>
+              <SearchOutlined class="search-icon" />
+            </template>
+          </a-input>
+        </div>
+
+        <div class="tools-list">
+          <div
+            v-for="tool in filteredTools"
+            :key="tool.id"
+            class="tool-item"
+            :class="{ 'selected': selectedTools.includes(tool.id) }"
+            @click="toggleToolSelection(tool.id)"
+          >
+            <div class="tool-content">
+              <div class="tool-header">
+                <span class="tool-name">{{ tool.name }}</span>
+                <div class="tool-indicator">
+                  <CheckCircleOutlined v-if="selectedTools.includes(tool.id)" />
+                  <PlusCircleOutlined v-else />
+                </div>
+              </div>
+              <div class="tool-description">{{ tool.description }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tools-modal-footer">
+          <div class="selected-count">
+            已选择 {{ selectedTools.length }} 个工具
+          </div>
+          <div class="modal-actions">
+            <a-button @click="cancelToolsSelection">取消</a-button>
+            <a-button type="primary" @click="confirmToolsSelection">确认</a-button>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import {
+  SettingOutlined,
+  CloseOutlined,
+  CheckCircleOutlined,
+  PlusCircleOutlined,
+  SearchOutlined
+} from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
+import { agentConfigApi } from '@/apis/system_api';
+import { toolsApi } from '@/apis/tools';
+
+// Props
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  selectedAgent: {
+    type: Object,
+    default: () => ({})
+  },
+  selectedAgentId: {
+    type: String,
+    default: null
+  },
+  agentConfig: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// Emits
+const emit = defineEmits([
+  'close',
+  'update:agentConfig',
+  'config-saved',
+  'config-reset'
+]);
+
+// 本地状态
+const debugMode = ref(false);
+const toolsModalOpen = ref(false);
+const availableTools = ref([]);
+const selectedTools = ref([]);
+const toolsSearchText = ref('');
+
+// 计算属性
+const configSchema = computed(() => props.selectedAgent.config_schema || {});
+
+const configurableItems = computed(() => {
+  const items = configSchema.value.configurable_items || {};
+  // 遍历所有的配置项，将所有的 x_oap_ui_config 的层级提升到上一层
+  Object.keys(items).forEach(key => {
+    const item = items[key];
+    if (item.x_oap_ui_config) {
+      items[key] = { ...item, ...item.x_oap_ui_config };
+      delete items[key].x_oap_ui_config;
+    }
+  });
+  return items;
+});
+
+const isEmptyConfig = computed(() => {
+  return !props.selectedAgentId || Object.keys(configurableItems.value).length === 0;
+});
+
+const filteredTools = computed(() => {
+  if (!toolsSearchText.value) {
+    return availableTools.value;
+  }
+  const searchLower = toolsSearchText.value.toLowerCase();
+  return availableTools.value.filter(tool =>
+    tool.name.toLowerCase().includes(searchLower) ||
+    tool.description.toLowerCase().includes(searchLower)
+  );
+});
+
+// 方法
+const closeSidebar = () => {
+  emit('close');
+};
+
+const toggleDebugMode = () => {
+  debugMode.value = !debugMode.value;
+};
+
+const getConfigLabel = (key, value) => {
+  if (value.description && value.name !== key) {
+    return `${value.name}（${key}）`;
+  }
+  return key;
+};
+
+const getPlaceholder = (key, value) => {
+  return `（默认: ${value.default}）`;
+};
+
+const handleModelChange = (data) => {
+  const newConfig = { ...props.agentConfig };
+  newConfig.model = `${data.provider}/${data.name}`;
+  emit('update:agentConfig', newConfig);
+};
+
+// 多选相关方法
+const ensureArray = (key) => {
+  const config = { ...props.agentConfig };
+  if (!config[key] || !Array.isArray(config[key])) {
+    config[key] = [];
+  }
+  return config;
+};
+
+const isOptionSelected = (key, option) => {
+  const config = ensureArray(key);
+  return config[key].includes(option);
+};
+
+const getSelectedCount = (key) => {
+  const config = ensureArray(key);
+  return config[key].length;
+};
+
+const toggleOption = (key, option) => {
+  const config = ensureArray(key);
+  const currentOptions = [...config[key]];
+  const index = currentOptions.indexOf(option);
+
+  if (index > -1) {
+    currentOptions.splice(index, 1);
+  } else {
+    currentOptions.push(option);
+  }
+
+  config[key] = currentOptions;
+  emit('update:agentConfig', config);
+};
+
+const clearSelection = (key) => {
+  const config = { ...props.agentConfig };
+  config[key] = [];
+  emit('update:agentConfig', config);
+};
+
+// 工具相关方法
+const getToolNameById = (toolId) => {
+  const tool = availableTools.value.find(t => t.id === toolId);
+  return tool ? tool.name : toolId;
+};
+
+const loadAvailableTools = async () => {
+  try {
+    const response = await toolsApi.getTools();
+    availableTools.value = Object.values(response.tools || {});
+  } catch (error) {
+    console.error('加载工具列表失败:', error);
+  }
+};
+
+const openToolsModal = async () => {
+  try {
+    if (availableTools.value.length === 0) {
+      await loadAvailableTools();
+    }
+    selectedTools.value = [...(props.agentConfig.tools || [])];
+    toolsModalOpen.value = true;
+  } catch (error) {
+    console.error('打开工具选择弹窗失败:', error);
+    message.error('打开工具选择弹窗失败');
+  }
+};
+
+const toggleToolSelection = (toolId) => {
+  const index = selectedTools.value.indexOf(toolId);
+  if (index > -1) {
+    selectedTools.value.splice(index, 1);
+  } else {
+    selectedTools.value.push(toolId);
+  }
+};
+
+const removeSelectedTool = (toolId) => {
+  const config = { ...props.agentConfig };
+  const index = config.tools.indexOf(toolId);
+  if (index > -1) {
+    config.tools.splice(index, 1);
+    emit('update:agentConfig', config);
+  }
+};
+
+const confirmToolsSelection = () => {
+  const config = { ...props.agentConfig };
+  config.tools = [...selectedTools.value];
+  emit('update:agentConfig', config);
+  toolsModalOpen.value = false;
+  toolsSearchText.value = '';
+};
+
+const cancelToolsSelection = () => {
+  toolsModalOpen.value = false;
+  toolsSearchText.value = '';
+  selectedTools.value = [];
+};
+
+// 配置保存和重置
+const saveConfig = async () => {
+  if (!props.selectedAgentId) {
+    message.error('没有选择智能体');
+    return;
+  }
+
+  try {
+    await agentConfigApi.saveAgentConfig(props.selectedAgentId, props.agentConfig);
+    message.success('配置已保存到服务器');
+    emit('config-saved');
+  } catch (error) {
+    console.error('保存配置到服务器出错:', error);
+    message.error('保存配置到服务器失败');
+  }
+};
+
+const resetConfig = async () => {
+  if (!props.selectedAgentId) {
+    message.error('没有选择智能体');
+    return;
+  }
+
+  try {
+    await agentConfigApi.saveAgentConfig(props.selectedAgentId, {});
+    emit('config-reset');
+    message.info('配置已重置');
+  } catch (error) {
+    console.error('重置配置出错:', error);
+    message.error('重置配置失败');
+  }
+};
+
+// 监听器
+watch(() => props.isOpen, (newVal) => {
+  if (newVal && availableTools.value.length === 0) {
+    loadAvailableTools();
+  }
+});
+</script>
+
+<style lang="less" scoped>
+
+@padding-bottom: 40px;
+.agent-config-sidebar {
+  position: relative;
+  width: 0;
+  height: 100vh;
+  background: white;
+  border-left: 1px solid #e8e8e8;
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  &.open {
+    width: 400px;
+  }
+
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    border-bottom: 1px solid var(--gray-200);
+    background: #fff;
+    flex-shrink: 0;
+    min-width: 400px;
+
+    .sidebar-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--gray-900);
+
+      .title-icon {
+        color: var(--main-color);
+      }
+    }
+
+    .close-btn {
+      color: var(--gray-600);
+      border: none;
+      padding: 4px;
+
+      &:hover {
+        color: var(--gray-900);
+        background: var(--gray-100);
+      }
+    }
+  }
+
+  .sidebar-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 12px;
+    min-width: 400px;
+    padding-bottom: @padding-bottom;
+
+    .agent-info {
+      .agent-basic-info {
+        margin-bottom: 16px;
+
+        h4 {
+          margin: 0 0 8px 0;
+          font-size: 18px;
+          font-weight: 600;
+          color: var(--gray-900);
+        }
+
+        .agent-description {
+          margin: 0 0 12px 0;
+          font-size: 14px;
+          color: var(--gray-700);
+          line-height: 1.5;
+        }
+
+        .debug-toggle {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 0;
+          cursor: pointer;
+
+          .debug-text {
+            font-size: 13px;
+            color: var(--gray-600);
+          }
+        }
+
+        .debug-info {
+          margin-top: 12px;
+          padding: 12px;
+          background: var(--gray-50);
+          border-radius: 6px;
+          font-size: 12px;
+          color: var(--gray-700);
+          max-height: 200px;
+          overflow-y: auto;
+        }
+      }
+    }
+
+    .sidebar-footer {
+      position: sticky;
+      bottom: 16px;
+      padding: 12px 0;
+      border-top: 1px solid var(--gray-200);
+      background: #fff;
+      // min-width: 400px;
+      z-index: 10;
+
+      .form-actions {
+        display: flex;
+        gap: 12px;
+        justify-content: space-between;
+
+        .save-btn {
+          flex: 1;
+          background: var(--main-color);
+          border: none;
+          border-radius: 6px;
+          font-weight: 500;
+          font-size: 14px;
+
+          &:hover {
+            background: var(--main-color);
+            opacity: 0.9;
+          }
+        }
+
+        .reset-btn {
+          flex: 1;
+          border: 1px solid var(--gray-300);
+          border-radius: 6px;
+          color: var(--gray-700);
+          font-size: 14px;
+
+          &:hover {
+            border-color: var(--main-color);
+            color: var(--main-color);
+          }
+        }
+      }
+    }
+
+    .config-form-content {
+      .config-form {
+        .config-alert {
+          margin-bottom: 16px;
+        }
+
+        .config-item {
+          margin-bottom: 20px;
+
+          .config-description {
+            margin: 4px 0 8px 0;
+            font-size: 12px;
+            color: var(--gray-600);
+            line-height: 1.4;
+          }
+
+          .model-selector {
+            width: 100%;
+          }
+
+          .system-prompt-input {
+            resize: vertical;
+          }
+
+          .config-select,
+          .config-input,
+          .config-input-number {
+            width: 100%;
+          }
+
+          .config-slider {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// 工具选择器样式
+.tools-selector {
+  .tools-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 12px;
+    background: var(--gray-50);
+    border-radius: 8px;
+    border: 1px solid var(--gray-200);
+    margin-bottom: 8px;
+
+    .tools-summary-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--gray-700);
+
+      .tools-count {
+        color: var(--gray-900);
+        font-weight: 500;
+      }
+
+      .clear-btn {
+        padding: 0;
+        height: auto;
+        font-size: 12px;
+      }
+    }
+
+    .select-tools-btn {
+      background: var(--main-color);
+      border: none;
+      border-radius: 6px;
+      height: 28px;
+      font-size: 12px;
+      font-weight: 500;
+
+      &:hover {
+        background: var(--main-color);
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .selected-tools-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+
+    .tool-tag {
+      margin: 0;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: var(--gray-100);
+      border: 1px solid var(--gray-300);
+      color: var(--gray-900);
+      font-size: 12px;
+
+      :deep(.anticon-close) {
+        color: var(--gray-600);
+        margin-left: 4px;
+
+        &:hover {
+          color: var(--gray-900);
+        }
+      }
+    }
+  }
+}
+
+// 多选卡片样式
+.multi-select-cards {
+  .multi-select-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    font-size: 12px;
+    color: var(--gray-600);
+  }
+
+  .options-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .option-card {
+    border: 1px solid var(--gray-300);
+    border-radius: 6px;
+    padding: 10px 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: white;
+
+    &:hover {
+      border-color: var(--main-color);
+    }
+
+    &.selected {
+      border-color: var(--main-color);
+      background: var(--main-10);
+
+      .option-indicator {
+        color: var(--main-color);
+      }
+
+      .option-text {
+        color: var(--main-color);
+        font-weight: 500;
+      }
+    }
+
+    &.unselected {
+      .option-indicator {
+        color: var(--gray-400);
+      }
+
+      .option-text {
+        color: var(--gray-700);
+      }
+    }
+
+    .option-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+
+      .option-text {
+        flex: 1;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+
+      .option-indicator {
+        flex-shrink: 0;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+// 工具选择弹窗样式
+.tools-modal {
+  :deep(.ant-modal-content) {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    border: 1px solid var(--gray-200);
+  }
+
+  :deep(.ant-modal-header) {
+    background: white;
+    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: white;
+  }
+
+  .tools-modal-content {
+    .tools-search {
+      margin-bottom: 16px;
+
+      .search-input {
+        border-radius: 8px;
+        border: 1px solid var(--gray-300);
+        height: 36px;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        background: white;
+
+        .search-icon {
+          color: var(--gray-500);
+          font-size: 16px;
+        }
+
+        &:focus-within {
+          border-color: var(--main-color);
+          box-shadow: 0 0 0 2px rgba(var(--main-color-rgb), 0.1);
+          
+          .search-icon {
+            color: var(--main-color);
+          }
+        }
+
+        &:hover {
+          border-color: var(--gray-400);
+        }
+      }
+    }
+
+    .tools-list {
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid var(--gray-200);
+      border-radius: 8px;
+      margin-bottom: 16px;
+      background: white;
+      padding: 4px;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--gray-100);
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--gray-400);
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: var(--gray-500);
+      }
+
+      .tool-item {
+        padding: 12px 16px;
+        border-bottom: none;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 8px;
+        margin-bottom: 4px;
+        background: white;
+        border: 1px solid var(--gray-200);
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        &:hover {
+          border-color: var(--main-color);
+          background: var(--gray-50);
+        }
+
+        &.selected {
+          background: var(--main-10);
+          border-color: var(--main-color);
+
+          .tool-name {
+            color: var(--main-color);
+            font-weight: 600;
+          }
+
+          .tool-description {
+            color: var(--gray-700);
+          }
+
+          .tool-indicator {
+            color: var(--main-color);
+          }
+        }
+
+        .tool-content {
+          .tool-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 6px;
+            gap: 8px;
+
+            .tool-name {
+              font-size: 14px;
+              font-weight: 500;
+              color: var(--gray-900);
+              line-height: 1.3;
+              flex: 1;
+            }
+
+            .tool-indicator {
+              color: var(--gray-400);
+              font-size: 16px;
+              transition: all 0.2s ease;
+              flex-shrink: 0;
+            }
+          }
+
+          .tool-description {
+            font-size: 12px;
+            color: var(--gray-600);
+            line-height: 1.4;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+
+    .tools-modal-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 16px;
+      border-top: 1px solid var(--gray-200);
+
+      .selected-count {
+        font-size: 14px;
+        color: var(--gray-700);
+        font-weight: 500;
+        padding: 6px 12px;
+        background: var(--gray-50);
+        border-radius: 8px;
+        border: 1px solid var(--gray-200);
+      }
+
+      .modal-actions {
+        display: flex;
+        gap: 12px;
+
+        :deep(.ant-btn) {
+          border-radius: 8px;
+          height: 36px;
+          font-size: 14px;
+          font-weight: 500;
+          padding: 0 16px;
+          transition: all 0.2s ease;
+
+          &.ant-btn-default {
+            border: 1px solid var(--gray-300);
+            color: var(--gray-700);
+            background: white;
+
+            &:hover {
+              border-color: var(--main-color);
+              color: var(--main-color);
+            }
+          }
+
+          &.ant-btn-primary {
+            background: var(--main-color);
+            border: none;
+            color: white;
+
+            &:hover {
+              background: var(--main-color);
+              opacity: 0.9;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .agent-config-sidebar {
+    width: 100vw;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 850f6c66..bfe9e063 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -4,6 +4,7 @@
       <div class="header-left">
         <div class="header-item">
           <a-button class="header-button" @click="openAgentModal">
+            <Bot size="18" stroke-width="1.75" />
             选择：{{ selectedAgent.name || '选择智能体' }}
           </a-button>
         </div>
@@ -27,213 +28,6 @@
       </div>
     </div>
     <div class="agent-view-body">
-      <!-- 配置弹窗 -->
-      <a-modal
-        v-model:open="state.agentConfOpen"
-        title="智能体详细配置"
-        :width="800"
-        :footer="null"
-        :maskClosable="false"
-        class="conf-modal"
-      >
-        <div class="conf-content">
-          <div class="agent-info">
-            <p>详细配置信<span @click="toggleDebugMode">息</span></p>
-            <p>{{ selectedAgent.description }}</p>
-            <pre v-if="state.debug_mode">{{ selectedAgent }}</pre>
-
-            <a-divider />
-
-            <div v-if="selectedAgentId && configSchema" class="config-modal-content">
-              <!-- 配置表单 -->
-              <a-form :model="agentConfig" layout="vertical">
-                <a-alert  v-if="state.isEmptyConfig" type="warning" message="该智能体没有配置项" show-icon/>
-                <a-alert v-if="!selectedAgent.has_checkpointer" type="error" message="该智能体没有配置 Checkpointer，功能无法正常使用，参考：https://langchain-ai.github.io/langgraph/concepts/persistence/" show-icon/>
-                <!-- 统一显示所有配置项 -->
-                <template v-for="(value, key) in configurableItems" :key="key">
-                  <a-form-item
-                    :label="getConfigLabel(key, value)"
-                    :name="key"
-                    class="config-item"
-                  >
-                    <p v-if="value.description" class="description">{{ value.description }}</p>
-
-                    <!-- key匹配 -->
-                    <div v-if="key === 'model'" class="agent-model">
-                      <!-- <p><small>注意，部分模型对于 Tool Calling 的支持不稳定，建议采用{{ value.options }} </small></p> -->
-                      <ModelSelectorComponent
-                        @select-model="handleModelChange"
-                        :model_name="agentConfig[key] ? agentConfig[key].split('/').slice(1).join('/') : ''"
-                        :model_provider="agentConfig[key] ? agentConfig[key].split('/')[0] : ''"
-                      />
-                    </div>
-                    <a-textarea
-                      v-else-if="key === 'system_prompt'"
-                      v-model:value="agentConfig[key]"
-                      :rows="2"
-                      :placeholder="getPlaceholder(key, value)"
-                    />
-
-                    <!-- 工具选择特殊处理 -->
-                    <div v-else-if="key === 'tools'" class="tools-selector">
-                      <div class="tools-summary">
-                        <div class="tools-summary-left">
-                          <span class="tools-count">已选择 {{ getSelectedCount(key) }} 个工具</span>
-                          <a-button type="link" size="small" @click="clearSelection(key)" v-if="getSelectedCount(key) > 0">
-                            清空
-                          </a-button>
-                        </div>
-                        <a-button type="primary" @click="openToolsModal" class="select-tools-btn">
-                          选择工具
-                        </a-button>
-                      </div>
-                      <div v-if="getSelectedCount(key) > 0" class="selected-tools-preview">
-                        <a-tag v-for="toolId in agentConfig[key]" :key="toolId" closable @close="removeSelectedTool(toolId)">
-                          {{ getToolNameById(toolId) }}
-                        </a-tag>
-                      </div>
-                    </div>
-
-                    <!-- 数据类型匹配 -->
-
-                    <!-- 布尔类型 -->
-                    <a-switch
-                      v-else-if="typeof agentConfig[key] === 'boolean'"
-                      v-model:checked="agentConfig[key]"
-                    />
-
-                    <!-- 单选 -->
-                    <a-select
-                      v-else-if="value?.options && (value?.type === 'str' || value?.type === 'select')"
-                      v-model:value="agentConfig[key]"
-                    >
-                      <a-select-option v-for="option in value.options" :key="option" :value="option">
-                        {{ option.label || option }}
-                      </a-select-option>
-                    </a-select>
-
-                    <!-- 多选 -->
-                    <div v-else-if="value?.options && value?.type === 'list'" class="multi-select-cards">
-                      <div class="multi-select-label">
-                        <span>已选择 {{ getSelectedCount(key) }} 项</span>
-                        <a-button type="link" size="small" @click="clearSelection(key)" v-if="getSelectedCount(key) > 0" >
-                          清空
-                        </a-button>
-                      </div>
-                      <div class="options-grid">
-                        <div
-                          v-for="option in value.options"
-                          :key="option"
-                          class="option-card"
-                          :class="{
-                            'selected': isOptionSelected(key, option),
-                            'unselected': !isOptionSelected(key, option)
-                          }"
-                          @click="toggleOption(key, option)"
-                        >
-                          <div class="option-content">
-                            <span class="option-text">{{ getToolNameById(toolId) }}</span>
-                            <div class="option-indicator">
-                              <CheckCircleOutlined v-if="isOptionSelected(key, option)" />
-                              <PlusCircleOutlined v-else />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 数字 -->
-                    <a-input-number
-                      v-else-if="value?.type === 'number'"
-                      v-model:value="agentConfig[key]"
-                      :placeholder="getPlaceholder(key, value)"
-                    />
-
-                    <!-- 滑块 -->
-                    <a-slider
-                      v-else-if="value?.type === 'slider'"
-                      v-model:value="agentConfig[key]"
-                      :min="value.min"
-                      :max="value.max"
-                      :step="value.step"
-                      style="max-width: 300px;"
-                    />
-
-                    <!-- 其他类型 -->
-                    <a-input
-                      v-else
-                      v-model:value="agentConfig[key]"
-                      :placeholder="getPlaceholder(key, value)"
-                    />
-                  </a-form-item>
-                </template>
-
-                <a-divider />
-
-                <!-- 弹窗底部按钮 -->
-                <div class="form-actions" v-if="!state.isEmptyConfig">
-                  <div class="form-actions-left">
-                    <a-button type="primary" @click="saveConfig">保存并发布配置</a-button>
-                    <a-button @click="resetConfig">重置</a-button>
-                  </div>
-                </div>
-              </a-form>
-            </div>
-
-          </div>
-        </div>
-      </a-modal>
-
-      <!-- 工具选择弹窗 -->
-      <a-modal
-        v-model:open="state.toolsModalOpen"
-        title="选择工具"
-        :width="800"
-        :footer="null"
-        :maskClosable="false"
-        class="tools-modal"
-      >
-        <div class="tools-modal-content">
-          <div class="tools-search">
-            <a-input
-              v-model:value="toolsSearchText"
-              placeholder="搜索工具..."
-              allow-clear
-            />
-          </div>
-          <div class="tools-list">
-            <div
-              v-for="tool in filteredTools"
-              :key="tool.id"
-              class="tool-item"
-              :class="{ 'selected': selectedTools.includes(tool.id) }"
-              @click="toggleToolSelection(tool.id)"
-            >
-              <div class="tool-content">
-                <div class="tool-header">
-                  <span class="tool-name">{{ tool.name }}</span>
-                  <div class="tool-indicator">
-                    <CheckCircleOutlined v-if="selectedTools.includes(tool.id)" />
-                    <PlusCircleOutlined v-else />
-                  </div>
-                </div>
-                <div class="tool-description">{{ tool.description }}</div>
-
-              </div>
-            </div>
-          </div>
-          <div class="tools-modal-footer">
-            <div class="selected-count">
-              已选择 {{ selectedTools.length }} 个工具
-            </div>
-            <div class="modal-actions">
-              <a-button @click="cancelToolsSelection">取消</a-button>
-              <a-button type="primary" @click="confirmToolsSelection">确认</a-button>
-            </div>
-          </div>
-        </div>
-      </a-modal>
-
       <!-- 智能体选择弹窗 -->
       <a-modal
         v-model:open="state.agentModalOpen"
@@ -274,9 +68,22 @@
           :single-mode="false"
           @open-config="toggleConf"
           @open-agent-modal="openAgentModal"
+          @close-config-sidebar="() => state.isConfigSidebarOpen = false"
         >
         </AgentChatComponent>
       </div>
+
+      <!-- 配置侧边栏 -->
+      <AgentConfigSidebar
+        :isOpen="state.isConfigSidebarOpen"
+        :selectedAgent="selectedAgent"
+        :selectedAgentId="selectedAgentId"
+        :agentConfig="agentConfig"
+        @close="() => state.isConfigSidebarOpen = false"
+        @update:agentConfig="(config) => agentConfig = config"
+        @config-saved="loadAgentConfig"
+        @config-reset="loadAgentConfig"
+      />
     </div>
   </div>
 </template>
@@ -294,12 +101,13 @@ import {
   PlusCircleOutlined
 } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
+import { Bot } from 'lucide-vue-next';
 import AgentChatComponent from '@/components/AgentChatComponent.vue';
 import ModelSelectorComponent from '@/components/ModelSelectorComponent.vue';
+import AgentConfigSidebar from '@/components/AgentConfigSidebar.vue';
 import { useUserStore } from '@/stores/user';
 import { chatApi } from '@/apis/auth_api';
 import { agentConfigApi } from '@/apis/system_api';
-import { toolsApi } from '@/apis/tools';
 
 // 路由
 const router = useRouter();
@@ -310,38 +118,16 @@ const agents = ref({});
 const selectedAgentId = ref(null);
 const defaultAgentId = ref(null); // 存储默认智能体ID
 const state = reactive({
-  agentConfOpen: false,
   debug_mode: false,
-  toolsModalOpen: false,
   agentModalOpen: false,
+  isConfigSidebarOpen: false,
   isEmptyConfig: computed(() =>
     !selectedAgentId.value ||
     Object.keys(configurableItems.value).length === 0
   )
 });
 
-// 工具相关状态
-const availableTools = ref([]);
-const selectedTools = ref([]);
-const toolsSearchText = ref('');
 
-// 过滤后的工具列表
-const filteredTools = computed(() => {
-  if (!toolsSearchText.value) {
-    return availableTools.value;
-  }
-  const searchLower = toolsSearchText.value.toLowerCase();
-  return availableTools.value.filter(tool =>
-    tool.name.toLowerCase().includes(searchLower) ||
-    tool.description.toLowerCase().includes(searchLower)
-  );
-});
-
-// 根据工具ID获取工具名称
-const getToolNameById = (toolId) => {
-  const tool = availableTools.value.find(t => t.id === toolId);
-  return tool ? tool.name : toolId;
-};
 
 const selectedAgent = computed(() => agents.value[selectedAgentId.value] || {});
 const configSchema = computed(() => selectedAgent.value.config_schema || {});
@@ -380,88 +166,9 @@ const setAsDefaultAgent = async () => {
   }
 };
 
-// 多选组件相关方法
-const ensureArray = (key) => {
-  if (!agentConfig.value[key] || !Array.isArray(agentConfig.value[key])) {
-    agentConfig.value[key] = [];
-  }
-};
 
-const isOptionSelected = (key, option) => {
-  ensureArray(key);
-  return agentConfig.value[key].includes(option);
-};
 
-const getSelectedCount = (key) => {
-  ensureArray(key);
-  return agentConfig.value[key].length;
-};
 
-const toggleOption = (key, option) => {
-  ensureArray(key);
-
-  const currentOptions = [...agentConfig.value[key]];
-  const index = currentOptions.indexOf(option);
-
-  if (index > -1) {
-    currentOptions.splice(index, 1);
-  } else {
-    currentOptions.push(option);
-  }
-
-  agentConfig.value[key] = currentOptions;
-};
-
-const clearSelection = (key) => {
-  agentConfig.value[key] = [];
-};
-
-// 工具选择相关方法
-const openToolsModal = async () => {
-  try {
-    // 如果工具列表还没有加载，则加载
-    if (availableTools.value.length === 0) {
-      await loadAvailableTools();
-    }
-
-    // 初始化已选择的工具
-    selectedTools.value = [...(agentConfig.value.tools || [])];
-
-    // 打开弹窗
-    state.toolsModalOpen = true;
-  } catch (error) {
-    console.error('打开工具选择弹窗失败:', error);
-    message.error('打开工具选择弹窗失败');
-  }
-};
-
-const toggleToolSelection = (toolId) => {
-  const index = selectedTools.value.indexOf(toolId);
-  if (index > -1) {
-    selectedTools.value.splice(index, 1);
-  } else {
-    selectedTools.value.push(toolId);
-  }
-};
-
-const removeSelectedTool = (toolId) => {
-  const index = agentConfig.value.tools.indexOf(toolId);
-  if (index > -1) {
-    agentConfig.value.tools.splice(index, 1);
-  }
-};
-
-const confirmToolsSelection = () => {
-  agentConfig.value.tools = [...selectedTools.value];
-  state.toolsModalOpen = false;
-  toolsSearchText.value = '';
-};
-
-const cancelToolsSelection = () => {
-  state.toolsModalOpen = false;
-  toolsSearchText.value = '';
-  selectedTools.value = [];
-};
 
 // 获取默认智能体ID
 const fetchDefaultAgent = async () => {
@@ -627,15 +334,7 @@ const selectAgentFromModal = (agentId) => {
   state.agentModalOpen = false;
 };
 
-// 加载工具列表
-const loadAvailableTools = async () => {
-  try {
-    const response = await toolsApi.getTools();
-    availableTools.value = Object.values(response.tools || {});
-  } catch (error) {
-    console.error('加载工具列表失败:', error);
-  }
-};
+
 
 // 初始化
 onMounted(async () => {
@@ -644,7 +343,7 @@ onMounted(async () => {
   // 获取智能体列表
   await fetchAgents();
   // 加载工具列表
-  await loadAvailableTools();
+
 
   // 恢复上次选择的智能体
   const lastSelectedAgent = localStorage.getItem('last-selected-agent');
@@ -690,7 +389,11 @@ const toggleDebugMode = () => {
 };
 
 const toggleConf = () => {
-  state.agentConfOpen = !state.agentConfOpen
+  state.isConfigSidebarOpen = !state.isConfigSidebarOpen
+  // 当打开配置侧边栏时，关闭聊天侧边栏
+  if (state.isConfigSidebarOpen) {
+    state.isChatSidebarOpen = false
+  }
 }
 </script>
 
@@ -726,8 +429,11 @@ const toggleConf = () => {
     align-items: center;
     gap: 10px;
 
-    button {
+    button.header-button {
       border-radius: 6px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
     }
   }
 }
@@ -735,10 +441,12 @@ const toggleConf = () => {
 .agent-view-body {
   --gap-radius: 6px;
   display: flex;
+  flex-direction: row;
   width: 100%;
   flex: 1;
   min-height: calc(100% - var(--agent-view-header-height));
   overflow: hidden;
+  position: relative;
   // padding: var(--gap-radius);
   // gap: var(--gap-radius);