feat: 网页端添加文件上传功能

- 支持图片上传（预览显示）
- 支持文本文件上传（txt, md, json, csv等）
- 支持 PDF 和 Word 文档
- 文件内容自动添加到消息中供 AI 分析
- 多文件同时上传支持

main_v2.py

@@ -743,6 +743,7 @@ async def websocket_endpoint(websocket: WebSocket, user_id: str):
                                     "role": m.role,
                                     "content": m.content,
                                     "thinking_content": m.thinking_content,
+                                    "extra_data": m.extra_data,  # 包含搜索结果等
                                     "agent_id": m.agent_id,  # 每条消息的Agent ID
                                     "source": m.source,
                                     "created_at": m.created_at.isoformat()
@@ -765,6 +766,7 @@ async def websocket_endpoint(websocket: WebSocket, user_id: str):
                 
                 elif action == "chat":
                     message = data.get("message", "")
+                    files = data.get("files", [])  # 上传的文件
                     conversation_id = data.get("conversation_id")
                     enable_thinking = data.get("enable_thinking", True)
                     agent_id_override = data.get("agent_id")
@@ -775,9 +777,22 @@ async def websocket_endpoint(websocket: WebSocket, user_id: str):
                         if agent and agent.is_active:
                             current_agent_id = agent_id_override
                     
-                    if not message.strip():
+                    # 如果没有消息但有文件，构造消息
+                    if not message.strip() and files:
+                        message = "[上传文件]"
+                    
+                    if not message.strip() and not files:
                         continue
                     
+                    # 处理文件内容，添加到消息
+                    if files:
+                        for f in files:
+                            if f.get('type') and f['type'].startswith('image/'):
+                                message += f"\n[图片: {f['name']}]"
+                            elif f.get('content'):
+                                # 文本文件内容
+                                message += f"\n\n文件 {f['name']} 内容:\n{f['content'][:3000]}"
+                    
                     # 1. 获取Agent配置
                     agent_config = agent_service.get_agent_config(current_agent_id)
                     agent_tools = agent_config.get('agent', {}).get('tools', [])

templates/index.html

@@ -107,10 +107,23 @@
         .input-row { display: flex; gap: 12px; align-items: center; }
         .input-row textarea { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 12px; font-size: 16px; resize: none; outline: none; max-height: 200px; min-height: 48px; line-height: 1.5; }
         .input-row textarea:focus { border-color: #10a37f; }
+        .upload-btn { width: 48px; height: 48px; border-radius: 12px; background: #f5f5f5; border: 1px solid #ddd; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: #666; }
+        .upload-btn:hover { background: #e8e8e8; border-color: #10a37f; color: #10a37f; }
         .send-btn { width: 48px; height: 48px; border-radius: 12px; background: #10a37f; border: none; color: #fff; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
         .send-btn:hover { background: #0d8c6d; }
         .send-btn:disabled { background: #ccc; cursor: not-allowed; }
         
+        /* 文件预览 */
+        .file-preview-area { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
+        .file-preview-item { position: relative; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; background: #f8f9fa; max-width: 200px; }
+        .file-preview-item.image-preview { padding: 4px; }
+        .file-preview-item img { max-width: 180px; max-height: 120px; border-radius: 6px; }
+        .file-preview-item .file-icon { display: flex; align-items: center; gap: 8px; }
+        .file-preview-item .file-icon i { font-size: 24px; color: #10a37f; }
+        .file-preview-item .file-name { font-size: 12px; color: #666; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .file-preview-item .file-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: #ff4757; color: white; border: none; cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center; }
+        .file-preview-item .file-remove:hover { background: #ff6b7a; }
+        
         /* 快捷语句 - 横向扁平 */
         .quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
         .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; }
@@ -166,9 +179,12 @@
         <div class="input-container">
             <div class="input-area">
                 <div class="input-row">
+                    <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>
                     <button class="send-btn" id="sendBtn" onclick="sendMessage()"><i class="ri-send-plane-fill"></i></button>
                 </div>
+                <div class="file-preview-area" id="filePreviewArea"></div>
                 <div class="quick-phrases-bar">
                     <div class="tool-toggle">
                         <input type="checkbox" id="enableSearch" checked>
@@ -304,7 +320,7 @@
         }
         
         // 消息渲染
-        function appendMessage(role, content, thinking = null, agentName = null) {
+        function appendMessage(role, content, thinking = null, agentName = null, extraData = null) {
             const container = document.getElementById('messagesContainer');
             container.querySelector('.welcome')?.remove();
             
@@ -371,6 +387,23 @@
             
             html += '</div>';
             div.innerHTML = html;
+            
+            // 如果是用户消息且有搜索结果，在设置innerHTML后追加
+            if (role === 'user' && extraData) {
+                console.log('Processing extraData for user message:', extraData);
+                console.log('search_results exists:', extraData.search_results);
+                if (extraData.search_results && extraData.search_results.length > 0) {
+                    console.log('Building search results HTML for', extraData.search_results.length, 'results');
+                    const searchHtml = buildSearchResultsHtml(extraData.search_results, extraData.search_query || content);
+                    const bodyDiv = div.querySelector('.message-body');
+                    console.log('bodyDiv found:', bodyDiv != null);
+                    if (bodyDiv) {
+                        bodyDiv.insertAdjacentHTML('beforeend', searchHtml);
+                        console.log('Search results HTML inserted');
+                    }
+                }
+            }
+            
             container.appendChild(div);
             container.scrollTop = container.scrollHeight;
         }
@@ -623,29 +656,11 @@
             const container = document.getElementById('messagesContainer');
             container.innerHTML = '';
             messages.forEach(m => {
-                appendMessage(m.role, m.content, m.thinking_content);
-                // 如果用户消息有搜索结果，追加显示
-                if (m.role === 'user' && m.extra_data && m.extra_data.search_results) {
-                    displaySearchResultsForHistory(m.extra_data.search_results, m.extra_data.search_query || m.content);
-                }
+                console.log('displayHistory message:', m.role, 'extra_data:', m.extra_data);
+                appendMessage(m.role, m.content, m.thinking_content, null, m.extra_data);
             });
         }
         
-        function displaySearchResultsForHistory(results, query) {
-            if (!results || results.length === 0) return;
-            
-            const container = document.getElementById('messagesContainer');
-            const userMessages = container.querySelectorAll('.message.user');
-            const lastUserMsg = userMessages[userMessages.length - 1];
-            
-            if (lastUserMsg) {
-                const msgBody = lastUserMsg.querySelector('.message-body');
-                if (msgBody) {
-                    msgBody.innerHTML += buildSearchResultsHtml(results, query);
-                }
-            }
-        }
-        
         function clearMessages() {
             document.getElementById('messagesContainer').innerHTML = '<div class="welcome"><h2>👋 开始对话</h2></div>';
         }
@@ -774,32 +789,163 @@
         function sendMessage() {
             const input = document.getElementById('messageInput');
             const msg = input.value.trim();
-            if (!msg) return;
+            
+            // 如果没有消息且没有文件，不发送
+            if (!msg && pendingFiles.length === 0) return;
+            
             document.getElementById('sendBtn').disabled = true;
             input.value = '';
             input.style.height = 'auto';
             
-            // 立即显示用户消息（不等后端广播）
-            lastSentMessage = msg;  // 记录最后发送的消息，避免重复显示
-            appendMessage('user', msg);
+            // 立即显示用户消息（包含文件）
+            lastSentMessage = msg;
+            appendMessageWithFiles('user', msg, pendingFiles);
+            
+            // 清空文件预览
+            pendingFiles = [];
+            document.getElementById('filePreviewArea').innerHTML = '';
             
             // 获取工具禁用状态
             const enableSearch = document.getElementById('enableSearch').checked;
             const disabledTools = [];
             if (!enableSearch) disabledTools.push('search');
             
+            // 发送消息（包含文件）
             if (ws?.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify({ 
                     action: 'chat', 
                     message: msg, 
                     conversation_id: currentConversationId, 
                     agent_id: currentAgentId,
-                    disabled_tools: disabledTools  // 禁用的工具列表
+                    disabled_tools: disabledTools,
+                    files: lastSentFiles || []  // 发送的文件列表
                 }));
             }
+            
+            lastSentFiles = null;  // 清空
         }
         
-        let lastSentMessage = null;  // 记录最后发送的消息
+        let lastSentFiles = null;  // 记录发送的文件
+        
+        // 显示带文件的用户消息
+        function appendMessageWithFiles(role, content, files) {
+            const container = document.getElementById('messagesContainer');
+            container.querySelector('.welcome')?.remove();
+            
+            const div = document.createElement('div');
+            div.className = `message ${role}`;
+            
+            // 构建消息内容
+            let msgContent = content;
+            if (files && files.length > 0) {
+                lastSentFiles = files.map(f => ({
+                    name: f.name,
+                    type: f.type,
+                    content: f.content
+                }));
+                
+                // 添加文件信息到消息
+                let filesText = '\n\n[附件]';
+                for (const f of files) {
+                    if (f.type.startsWith('image/')) {
+                        filesText += `\n图片: ${f.name}`;
+                    } else {
+                        filesText += `\n文件: ${f.name}`;
+                        // 文本文件显示内容摘要
+                        if (!f.type.startsWith('image/') && f.content && f.content.length < 2000) {
+                            filesText += `\n内容: ${f.content.substring(0, 500)}${f.content.length > 500 ? '...' : ''}`;
+                        }
+                    }
+                }
+                msgContent += filesText;
+            }
+            
+            const avatar = role === 'user' ? '👤' : '🤖';
+            let html = `<div class="message-avatar">${avatar}</div><div class="message-body">`;
+            html += `<div class="message-content"><div class="user-message-text">${escapeHtml(msgContent)}</div></div>`;
+            html += `<input type="hidden" class="copy-source" value="${msgContent.replace(/"/g, '&quot;')}">`;
+            html += `<div class="message-actions"><button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button></div>`;
+            html += '</div>';
+            div.innerHTML = html;
+            container.appendChild(div);
+            
+            container.scrollTop = container.scrollHeight;
+        }
+        let pendingFiles = [];  // 待发送的文件
+        
+        // 文件上传处理
+        function handleFileUpload(event) {
+            const files = event.target.files;
+            const previewArea = document.getElementById('filePreviewArea');
+            
+            for (const file of files) {
+                const fileId = 'file-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+                
+                // 读取文件内容
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const fileData = {
+                        id: fileId,
+                        name: file.name,
+                        type: file.type,
+                        size: file.size,
+                        content: e.target.result
+                    };
+                    pendingFiles.push(fileData);
+                    
+                    // 显示预览
+                    const previewItem = document.createElement('div');
+                    previewItem.className = 'file-preview-item';
+                    previewItem.id = fileId + '-preview';
+                    
+                    if (file.type.startsWith('image/')) {
+                        previewItem.classList.add('image-preview');
+                        previewItem.innerHTML = `
+                            <img src="${e.target.result}" alt="${file.name}">
+                            <button class="file-remove" onclick="removeFile('${fileId}')"><i class="ri-close-line"></i></button>
+                        `;
+                    } else {
+                        // 文件图标
+                        let iconClass = 'ri-file-text-line';
+                        if (file.name.endsWith('.pdf')) iconClass = 'ri-file-pdf-line';
+                        else if (file.name.endsWith('.json')) iconClass = 'ri-code-line';
+                        else if (file.name.endsWith('.csv')) iconClass = 'ri-table-line';
+                        else if (file.type.includes('word') || file.name.endsWith('.doc') || file.name.endsWith('.docx')) iconClass = 'ri-file-word-line';
+                        
+                        previewItem.innerHTML = `
+                            <div class="file-icon">
+                                <i class="${iconClass}"></i>
+                                <span class="file-name">${file.name}</span>
+                            </div>
+                            <button class="file-remove" onclick="removeFile('${fileId}')"><i class="ri-close-line"></i></button>
+                        `;
+                    }
+                    
+                    previewArea.appendChild(previewItem);
+                };
+                
+                // 根据文件类型选择读取方式
+                if (file.type.startsWith('image/')) {
+                    reader.readAsDataURL(file);
+                } else if (file.type === 'application/pdf') {
+                    reader.readAsDataURL(file);
+                } else {
+                    // 文本类文件直接读取内容
+                    reader.readAsText(file);
+                }
+            }
+            
+            // 清空 input 以便再次选择
+            event.target.value = '';
+        }
+        
+        function removeFile(fileId) {
+            pendingFiles = pendingFiles.filter(f => f.id !== fileId);
+            const preview = document.getElementById(fileId + '-preview');
+            if (preview) preview.remove();
+        }
+        
+        // 发送消息
         
         function setupTextarea() {
             const textarea = document.getElementById('messageInput');