feat: 网页端添加文件上传功能
- 支持图片上传（预览显示） - 支持文本文件上传（txt, md, json, csv等） - 支持 PDF 和 Word 文档 - 文件内容自动添加到消息中供 AI 分析 - 多文件同时上传支持
This commit is contained in:
16
main_v2.py
16
main_v2.py
@@ -766,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")
|
||||
@@ -776,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', [])
|
||||
|
||||
@@ -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>
|
||||
@@ -773,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, '"')}">`;
|
||||
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');
|
||||
|
||||
Reference in New Issue
Block a user