feat: Agent工具配置从系统工具列表动态选择

2026-04-14 17:02:49 +08:00
2 changed files with 136 additions and 20 deletions
--- a/templates/admin_v2/index.html
+++ b/templates/admin_v2/index.html
@@ -183,7 +183,10 @@
            <hr><h6>思考功能</h6>
            <div class="thinking-config"><div class="form-check"><input type="checkbox" class="form-check-input" id="agent-enable-thinking" checked><label class="form-check-label">启用思考</label></div><div class="mt-2"><label class="form-label">思考提示词</label><textarea class="form-control" id="agent-thinking-prompt" rows="2"></textarea></div><div class="row mt-2"><div class="col-md-6"><label class="form-label">前缀</label><input type="text" class="form-control" id="agent-thinking-prefix"></div><div class="col-md-6"><label class="form-label">后缀</label><input type="text" class="form-control" id="agent-thinking-suffix"></div></div></div>
            <hr><h6>工具配置</h6>
-            <div class="thinking-config"><div class="form-check"><input type="checkbox" class="form-check-input" id="agent-tool-search"><label class="form-check-label">启用搜索工具</label></div><small class="text-muted">启用后 Agent 可以使用搜索功能获取实时信息</small></div>
+            <div class="thinking-config">
+                <div id="agent-tools-list">加载中...</div>
+                <small class="text-muted">从系统工具列表中选择Agent可使用的工具</small>
+            </div>
        </form></div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary" onclick="saveAgent()">保存</button></div>
    </div></div></div>
@@ -252,7 +255,7 @@
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局数据
-        let providersData = [], agentsData = [], channelsData = [];
+        let providersData = [], agentsData = [], channelsData = [], toolsData = [];

        // 页面切换函数
        function loadPageData(page) {
@@ -262,6 +265,57 @@
            if (page === 'tools') loadTools();
            if (page === 'stats') loadStats();
        }
+        
+        // 加载工具列表（用于Agent配置）
+        async function loadToolsList() {
+            try {
+                const res = await fetch('/api/v2/tools');
+                const data = await res.json();
+                toolsData = data.tools || [];
+                renderAgentToolsList();
+            } catch (e) { console.error('加载工具列表失败:', e); }
+        }
+        
+        // 渲染Agent工具选择列表
+        function renderAgentToolsList(selectedTools = []) {
+            const container = document.getElementById('agent-tools-list');
+            if (!container) return;
+            
+            if (toolsData.length === 0) {
+                container.innerHTML = '<div class="text-muted">暂无可用工具，请先在「工具管理」中添加</div>';
+                return;
+            }
+            
+            container.innerHTML = toolsData.filter(t => t.is_active).map(t => {
+                const toolType = t.tool_type || 'unknown';
+                const isSelected = selectedTools.includes(toolType);
+                const icon = getToolIcon(toolType);
+                return `<div class="form-check">
+                    <input type="checkbox" class="form-check-input agent-tool-checkbox" id="agent-tool-${t.id}" value="${toolType}" ${isSelected ? 'checked' : ''}>
+                    <label class="form-check-label" for="agent-tool-${t.id}">
+                        <i class="${icon}"></i> ${t.name} <small class="text-muted">(${toolType})</small>
+                    </label>
+                </div>`;
+            }).join('');
+        }
+        
+        // 工具图标
+        function getToolIcon(toolType) {
+            const icons = {
+                'search': 'ri-search-line',
+                'calculator': 'ri-calculator-line',
+                'code': 'ri-code-line',
+                'image': 'ri-image-line',
+                'web': 'ri-global-line'
+            };
+            return icons[toolType] || 'ri-tools-line';
+        }
+        
+        // 获取Agent选中的工具列表
+        function getSelectedAgentTools() {
+            const checkboxes = document.querySelectorAll('.agent-tool-checkbox:checked');
+            return Array.from(checkboxes).map(cb => cb.value);
+        }

        // ===== 大模型池 =====
        async function loadProviders() {
@@ -403,6 +457,7 @@
            document.getElementById('agent-enable-thinking').checked = true;
            document.getElementById('agent-system-prompt').value = '你是一个有用的AI助手。';
            updateProviderSelect();
+            loadToolsList();  // 加载工具列表
            new bootstrap.Modal(document.getElementById('agentModal')).show();
        }

@@ -425,17 +480,16 @@
            document.getElementById('agent-thinking-prompt').value = a.thinking_prompt || '';
            document.getElementById('agent-thinking-prefix').value = a.thinking_prefix || '';
            document.getElementById('agent-thinking-suffix').value = a.thinking_suffix || '';
-            // 工具配置
-            const tools = a.tools || [];
-            document.getElementById('agent-tool-search').checked = tools.includes('search');
+            // 工具配置 - 从工具列表渲染并勾选Agent已有的工具
+            loadToolsList();
+            setTimeout(() => renderAgentToolsList(a.tools || []), 100);  // 等工具列表加载完成
            new bootstrap.Modal(document.getElementById('agentModal')).show();
        }

        async function saveAgent() {
            const id = document.getElementById('agent-id').value;
-            // 处理工具列表
-            const tools = [];
-            if (document.getElementById('agent-tool-search').checked) tools.push('search');
+            // 获取选中的工具列表
+            const tools = getSelectedAgentTools();
            
            const data = {
                name: document.getElementById('agent-name').value,
@@ -452,7 +506,7 @@
                thinking_prompt: document.getElementById('agent-thinking-prompt').value,
                thinking_prefix: document.getElementById('agent-thinking-prefix').value,
                thinking_suffix: document.getElementById('agent-thinking-suffix').value,
-                tools: tools  // 工具列表
+                tools: tools  // 工具列表（从系统工具中选择）
            };
            const res = await fetch(id ? `/api/v2/agents/${id}` : '/api/v2/agents', { method: id ? 'PUT' : 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
            const result = await res.json();
--- a/templates/index.html
+++ b/templates/index.html
@@ -130,6 +130,10 @@
        
        /* 快捷语句 - 横向扁平 */
        .quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
+        .tool-toggle-item { display: inline-flex; align-items: center; gap: 4px; }
+        .tool-toggle-item input { width: 14px; height: 14px; }
+        .tool-toggle-item label { font-size: 12px; color: #666; }
+        .tool-toggle-item label i { color: #10a37f; }
        .add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; flex-shrink: 0; }
        .add-phrase-btn:hover { background: #e8e8e8; }
        .phrase-list-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
@@ -201,10 +205,7 @@
                </div>
                <div class="file-preview-area" id="filePreviewArea"></div>
                <div class="quick-phrases-bar">
-                    <div class="tool-toggle" id="toolToggleArea">
-                        <input type="checkbox" id="enableSearch" checked onchange="showToolWarning()">
-                        <label for="enableSearch"><i class="ri-search-line"></i> 搜索</label>
-                    </div>
+                    <div id="toolToggleArea"></div>
                    <button class="add-phrase-btn" onclick="showAddPhraseModal()"><i class="ri-add-line"></i> 添加</button>
                    <div class="phrase-list-wrapper" id="phraseListWrapper" onwheel="scrollPhrases(event)">
                        <div class="phrase-list" id="quickPhrasesList"></div>
@@ -278,6 +279,7 @@
        
        document.addEventListener('DOMContentLoaded', () => {
            loadProviders();  // 加载大模型池
+            loadToolsData();  // 加载工具列表
            loadAgents();
            loadQuickPhrases();
            connectWebSocket();
@@ -315,13 +317,68 @@
        // 获取当前Agent不支持的工具列表（用户已启用但Agent不支持）
        function getUnsupportedTools() {
            const unsupported = [];
-            const enableSearch = document.getElementById('enableSearch').checked;
-            if (enableSearch && !checkAgentToolSupport('search')) {
-                unsupported.push('搜索');
-            }
+            // 检查所有工具checkbox
+            const toolCheckboxes = document.querySelectorAll('.tool-checkbox');
+            toolCheckboxes.forEach(cb => {
+                if (cb.checked && !checkAgentToolSupport(cb.dataset.toolType)) {
+                    // 获取工具显示名称
+                    const label = cb.nextElementSibling?.textContent?.trim() || cb.dataset.toolType;
+                    unsupported.push(label);
+                }
+            });
            return unsupported;
        }
        
+        // 渲染工具选择区域（根据系统工具列表）
+        function renderToolToggles() {
+            const container = document.getElementById('toolToggleArea');
+            if (!container || toolsData.length === 0) return;
+            
+            // 获取当前Agent支持的工具
+            const agent = agents.find(a => a.id === currentAgentId);
+            const agentTools = agent?.tools || [];
+            
+            // 渲染工具checkbox列表
+            let html = '';
+            toolsData.filter(t => t.is_active).forEach(t => {
+                const toolType = t.tool_type || 'unknown';
+                const isSupported = agentTools.includes(toolType);
+                const icon = getToolIconFrontend(toolType);
+                html += `<div class="tool-toggle-item" style="display:inline-flex;align-items:center;gap:4px;margin-right:12px;">
+                    <input type="checkbox" class="tool-checkbox" id="tool-${toolType}" data-tool-type="${toolType}" ${isSupported ? 'checked' : ''} onchange="showToolWarning()">
+                    <label for="tool-${toolType}" style="cursor:pointer;font-size:12px;"><i class="${icon}"></i> ${t.name}</label>
+                </div>`;
+            });
+            
+            // 保留原有的结构，只更新工具checkbox部分
+            const existingWarning = document.getElementById('tool-warning-tip');
+            container.innerHTML = html;
+            if (existingWarning) container.appendChild(existingWarning);
+        }
+        
+        // 前端工具图标
+        function getToolIconFrontend(toolType) {
+            const icons = {
+                'search': 'ri-search-line',
+                'calculator': 'ri-calculator-line',
+                'code': 'ri-code-line',
+                'image': 'ri-image-line',
+                'web': 'ri-global-line'
+            };
+            return icons[toolType] || 'ri-tools-line';
+        }
+        
+        // 加载工具列表
+        let toolsData = [];
+        async function loadToolsData() {
+            try {
+                const res = await fetch('/api/v2/tools');
+                const data = await res.json();
+                toolsData = data.tools || [];
+                renderToolToggles();
+            } catch (e) { console.error('加载工具列表失败:', e); }
+        }
+        
        // 显示工具不支持提示
        function showToolWarning() {
            const unsupported = getUnsupportedTools();
@@ -361,6 +418,8 @@
                renderAgentSelect();
                // 加载后检查工具支持
                showToolWarning();
+                // 渲染工具选择区域
+                renderToolToggles();
            } catch (e) { console.error('加载Agent失败:', e); }
        }
        
@@ -1108,10 +1167,13 @@
            pendingFiles = [];
            document.getElementById('filePreviewArea').innerHTML = '';
            
-            // 获取工具禁用状态
-            const enableSearch = document.getElementById('enableSearch').checked;
+            // 获取禁用的工具列表（所有系统工具 - 用户选中的工具）
            const disabledTools = [];
-            if (!enableSearch) disabledTools.push('search');
+            const allToolTypes = toolsData.filter(t => t.is_active).map(t => t.tool_type);
+            const selectedTools = Array.from(document.querySelectorAll('.tool-checkbox:checked')).map(cb => cb.dataset.toolType);
+            allToolTypes.forEach(t => {
+                if (!selectedTools.includes(t)) disabledTools.push(t);
+            });
            
            // 发送消息（包含文件）
            if (ws?.readyState === WebSocket.OPEN) {