feat: 工具按钮放输入框右边，面板向上弹出

templates/index.html

@@ -130,10 +130,40 @@
         
         /* 快捷语句 - 横向扁平 */
         .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; }
+        
+        /* 工具折叠面板 - 放在输入行内 */
+        .tools-collapsible { position: relative; }
+        .tools-toggle-btn { 
+            width: 40px; height: 40px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; 
+            cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #666;
+            transition: all 0.2s; position: relative;
+        }
+        .tools-toggle-btn:hover { background: #e8e8e8; border-color: #10a37f; color: #10a37f; }
+        .tools-toggle-btn.active { background: #e8f5e9; border-color: #10a37f; color: #10a37f; }
+        .tools-badge { 
+            position: absolute; top: -4px; right: -4px;
+            background: #10a37f; color: white; font-size: 10px; padding: 1px 4px; border-radius: 10px; 
+            min-width: 14px; text-align: center;
+        }
+        .tools-panel { 
+            display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px;
+            background: white; border: 1px solid #e0e0e0; border-radius: 12px; 
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15); min-width: 180px; z-index: 100;
+        }
+        .tools-panel.show { display: block; }
+        .tools-panel-header { 
+            display: flex; justify-content: space-between; align-items: center; 
+            padding: 10px 14px; border-bottom: 1px solid #eee; font-weight: 500; color: #333; font-size: 13px;
+        }
+        .tools-panel-header button { background: none; border: none; color: #999; cursor: pointer; padding: 2px; }
+        .tools-panel-header button:hover { color: #666; }
+        .tools-panel-content { padding: 10px 14px; max-height: 280px; overflow-y: auto; }
+        .tool-item { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
+        .tool-item input { width: 14px; height: 14px; }
+        .tool-item label { cursor: pointer; font-size: 13px; color: #333; display: flex; align-items: center; gap: 4px; }
+        .tool-item label i { color: #10a37f; font-size: 14px; }
+        .tool-item.disabled { opacity: 0.5; }
+        .tool-item.disabled label { color: #999; cursor: not-allowed; }
         .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,11 +231,26 @@
                     <input type="file" id="fileInput" multiple accept="image/*,.pdf,.txt,.md,.json,.csv,.doc,.docx" style="display:none" onchange="handleFileUpload(event)">
                     <button class="upload-btn" onclick="document.getElementById('fileInput').click()" title="上传文件"><i class="ri-attachment-2"></i></button>
                     <textarea id="messageInput" placeholder="输入消息..." rows="1"></textarea>
+                    <!-- 工具按钮放在右边 -->
+                    <div class="tools-collapsible">
+                        <button class="tools-toggle-btn" onclick="toggleToolsPanel()" title="工具设置">
+                            <i class="ri-tools-line"></i>
+                            <span class="tools-badge" id="toolsBadge" style="display:none;">0</span>
+                        </button>
+                        <div class="tools-panel" id="toolsPanel">
+                            <div class="tools-panel-header">
+                                <span>工具设置</span>
+                                <button onclick="toggleToolsPanel()"><i class="ri-close-line"></i></button>
+                            </div>
+                            <div class="tools-panel-content" id="toolsPanelContent"></div>
+                        </div>
+                    </div>
                     <button class="send-btn" id="sendBtn" onclick="sendMessage()"><i class="ri-send-plane-fill"></i></button>
                 </div>
+                <!-- 工具警告提示 -->
+                <div id="tool-warning-tip" style="display:none;margin-top:4px;padding:6px 10px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:12px;color:#856404;"></div>
                 <div class="file-preview-area" id="filePreviewArea"></div>
                 <div class="quick-phrases-bar">
-                    <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>
@@ -317,13 +362,16 @@
         // 获取当前Agent不支持的工具列表（用户已启用但Agent不支持）
         function getUnsupportedTools() {
             const unsupported = [];
-            // 检查所有工具checkbox
-            const toolCheckboxes = document.querySelectorAll('.tool-checkbox');
+            // 检查所有工具checkbox（排除disabled的）
+            const toolCheckboxes = document.querySelectorAll('.tool-checkbox:not([disabled])');
             toolCheckboxes.forEach(cb => {
-                if (cb.checked && !checkAgentToolSupport(cb.dataset.toolType)) {
-                    // 获取工具显示名称
-                    const label = cb.nextElementSibling?.textContent?.trim() || cb.dataset.toolType;
-                    unsupported.push(label);
+                if (cb.checked) {
+                    // 检查Agent是否支持
+                    if (!checkAgentToolSupport(cb.dataset.toolType)) {
+                        // 获取工具显示名称
+                        const label = cb.closest('.tool-item')?.querySelector('label')?.textContent?.trim() || cb.dataset.toolType;
+                        unsupported.push(label);
+                    }
                 }
             });
             return unsupported;
@@ -331,7 +379,7 @@
         
         // 渲染工具选择区域（根据系统工具列表）
         function renderToolToggles() {
-            const container = document.getElementById('toolToggleArea');
+            const container = document.getElementById('toolsPanelContent');
             if (!container || toolsData.length === 0) return;
             
             // 获取当前Agent支持的工具
@@ -344,16 +392,37 @@
                 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>
+                const disabledClass = isSupported ? '' : 'disabled';
+                html += `<div class="tool-item ${disabledClass}">
+                    <input type="checkbox" class="tool-checkbox" id="tool-${toolType}" data-tool-type="${toolType}" ${isSupported ? 'checked' : ''} ${!isSupported ? 'disabled' : ''} onchange="showToolWarning()">
+                    <label for="tool-${toolType}"><i class="${icon}"></i> ${t.name}</label>
                 </div>`;
             });
             
-            // 保留原有的结构，只更新工具checkbox部分
-            const existingWarning = document.getElementById('tool-warning-tip');
-            container.innerHTML = html;
-            if (existingWarning) container.appendChild(existingWarning);
+            container.innerHTML = html || '<div class="text-muted" style="padding:8px;">暂无可用工具</div>';
+            
+            // 更新工具数量badge
+            updateToolsBadge();
+        }
+        
+        // 更新工具数量badge
+        function updateToolsBadge() {
+            const badge = document.getElementById('toolsBadge');
+            const selectedCount = document.querySelectorAll('.tool-checkbox:checked').length;
+            if (selectedCount > 0) {
+                badge.textContent = selectedCount;
+                badge.style.display = 'inline';
+            } else {
+                badge.style.display = 'none';
+            }
+        }
+        
+        // 切换工具面板显示
+        function toggleToolsPanel() {
+            const panel = document.getElementById('toolsPanel');
+            const btn = document.querySelector('.tools-toggle-btn');
+            panel.classList.toggle('show');
+            btn.classList.toggle('active');
         }
         
         // 前端工具图标
@@ -381,6 +450,8 @@
         
         // 显示工具不支持提示
         function showToolWarning() {
+            updateToolsBadge();  // 更新badge数量
+            
             const unsupported = getUnsupportedTools();
             const warningDiv = document.getElementById('tool-warning-tip');
             
@@ -389,20 +460,12 @@
                 const agentName = agent?.display_name || agent?.name || '当前Agent';
                 const msg = `<i class="ri-alert-line"></i> <strong>${agentName}</strong> 不支持 <strong>${unsupported.join('、')}</strong> 工具，请关闭或切换Agent`;
                 
-                if (warningDiv) {
-                    warningDiv.innerHTML = msg;
-                    warningDiv.style.display = 'block';
-                } else {
-                    const newWarning = document.createElement('div');
-                    newWarning.id = 'tool-warning-tip';
-                    newWarning.style.cssText = 'margin-top:8px;padding:8px 12px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;font-size:13px;color:#856404;';
-                    newWarning.innerHTML = msg;
-                    document.getElementById('toolToggleArea').appendChild(newWarning);
-                }
+                warningDiv.innerHTML = msg;
+                warningDiv.style.display = 'block';
                 // 禁用发送按钮
                 document.getElementById('sendBtn').disabled = true;
             } else {
-                if (warningDiv) warningDiv.style.display = 'none';
+                warningDiv.style.display = 'none';
                 document.getElementById('sendBtn').disabled = false;
             }
         }