coder/ai-chat-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复文件上传显示重复问题

Browse Source 
- 使用 lastSentMessageWithFiles 判断避免重复显示
- 图片在前端直接显示预览（base64）
- 文本文件显示名称和内容摘要
- extra_data 保存图片/文件信息用于历史记录
This commit is contained in:
hubian
2026-04-13 23:45:17 +08:00
parent fe65f23fa7
commit 2bdb9e7f10
2 changed files with 63 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/index.html
View File

@@ -296,11 +296,12 @@
case 'stream_end': document.getElementById('sendBtn').disabled = false; break;
case 'user_message':
lastUserMessage = data.message.content; // 存储最后一条用户消息
// 如果是刚发送的消息，已经显示了，不再重复显示
if (!isRegenerating && data.message.content !== lastSentMessage) {
// 如果是刚发送的消息（包含文件），已经显示了，不再重复显示
if (!isRegenerating && data.message.content !== lastSentMessage && data.message.content !== lastSentMessageWithFiles) {
appendMessage('user', data.message.content);
}
lastSentMessage = null; // 清除标记
lastSentMessage = null;
lastSentMessageWithFiles = null; // 清除标记
// 注意：不要在这里重置 isRegenerating，要等 assistant_message 处理后再重置
break;
case 'assistant_message':
@@ -826,6 +827,7 @@
}
let lastSentFiles = null; // 记录发送的文件
let lastSentMessageWithFiles = null; // 记录包含文件信息的完整消息
// 显示带文件的用户消息
function appendMessageWithFiles(role, content, files) {
@@ -835,35 +837,49 @@
const div = document.createElement('div');
div.className = `message ${role}`;
// 构建消息内容
let msgContent = content;
const avatar = role === 'user' ? '👤' : '🤖';
let html = `<div class="message-avatar">${avatar}</div><div class="message-body">`;
// 显示文本内容
if (content) {
html += `<div class="message-content"><div class="user-message-text">${escapeHtml(content)}</div></div>`;
}
// 显示文件（图片直接显示，文本文件显示名称）
if (files && files.length > 0) {
html += '<div class="uploaded-files" style="margin-top:8px">';
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}`;
// 图片直接显示
html += `<div class="uploaded-image" style="margin-bottom:8px"><img src="${f.content}" style="max-width:300px;border-radius:8px"></div>`;
} 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 ? '...' : ''}`;
// 文本文件显示名称和内容摘要
html += `<div class="uploaded-file" style="padding:8px;background:#f5f5f5;border-radius:6px;margin-bottom:8px">`;
html += `<div style="font-size:13px;color:#10a37f"><i class="ri-file-text-line"></i> ${f.name}</div>`;
if (f.content && f.content.length < 2000) {
html += `<div style="font-size:12px;color:#666;margin-top:4px">${escapeHtml(f.content.substring(0, 300))}${f.content.length > 300 ? '...' : ''}</div>`;
}
html += '</div>';
}
}
msgContent += filesText;
html += '</div>';
// 记录完整消息（用于判断是否重复显示）
lastSentMessageWithFiles = content + '\n[文件:' + files.map(f => f.name).join(',') + ']';
}
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>';
div.innerHTML = html;
container.appendChild(div);
container.scrollTop = container.scrollHeight;
}
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;