CalvinBackup/CyberStrikeAI
1
0
Fork 0
mirror of https://github.com/Ed1s0nZ/CyberStrikeAI.git synced 2026-05-15 12:58:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
公明
2026-03-29 03:24:22 +08:00
committed by GitHub
parent 324ac638d9
commit e0c9a3bd8e
7 changed files with 330 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/style.css
+54
View File
@@ -1803,6 +1803,16 @@ header {
color: var(--text-primary);
}
.chat-file-chip--uploading {
opacity: 0.92;
border-style: dashed;
}
.chat-file-chip--error {
border-color: rgba(220, 38, 38, 0.45);
background: rgba(220, 38, 38, 0.06);
}
.chat-file-input-hidden {
position: absolute;
width: 0;
@@ -14622,3 +14632,47 @@ button.chat-files-dropdown-item:hover:not(:disabled) {
transform: translateX(-50%) translateY(0);
}
/* 对话附件读取 / 文件管理上传 进度条 */
/* [hidden] 默认会被本类的 display:flex 覆盖，须显式隐藏否则空闲时仍露出灰条 */
.chat-upload-progress-row[hidden] {
display: none !important;
}
.chat-upload-progress-row {
display: flex;
flex-direction: column;
gap: 6px;
margin: 8px 0 4px;
padding: 8px 10px;
border-radius: 8px;
background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
}
.chat-upload-progress-row--files {
margin-top: 12px;
margin-bottom: 0;
}
.chat-upload-progress-track {
height: 6px;
border-radius: 4px;
background: var(--border-color, rgba(0, 0, 0, 0.1));
overflow: hidden;
}
.chat-upload-progress-fill {
height: 100%;
width: 0%;
border-radius: 4px;
background: var(--accent-primary, #2563eb);
transition: width 0.12s ease-out;
}
.chat-upload-progress-label {
font-size: 0.8rem;
color: var(--text-secondary, #666);
line-height: 1.35;
word-break: break-all;
}
web/static/i18n/en-US.json
+8
View File
@@ -123,6 +123,13 @@
"inputPlaceholder": "Enter target or command... (type @ to select tools | Shift+Enter newline, Enter send)",
"selectFile": "Select file",
"uploadFile": "Upload file (multi-select or drag & drop)",
"readingAttachmentsDetail": "Reading attachment {{current}}/{{total}} · {{name}} · {{percent}}%",
"uploadingAttachmentsDetail": "Uploading attachments · {{done}}/{{total}} done · {{percent}}% overall",
"waitingAttachmentsUpload": "Waiting for attachments to finish uploading…",
"attachmentsUploadIncomplete": "Some attachments failed to upload. Remove the failed items or pick files again before sending.",
"attachmentUploading": "Uploading…",
"attachmentUploadFailed": "Failed",
"attachmentUploadAlert": "Upload failed: {{name}}",
"send": "Send",
"searchInGroup": "Search in group...",
"loadingTools": "Loading tools...",
@@ -1124,6 +1131,7 @@
"copyPathTitle": "Copy the absolute path on the server; paste into chat to reference this file",
"pathCopied": "Path copied — paste it into chat",
"uploadOkHint": "Uploaded. Use “Copy path” to copy the absolute path.",
"uploadingFile": "Uploading {{name}} · {{percent}}%",
"moreActions": "More: open chat, edit, rename, delete",
"download": "Download",
"edit": "Edit",
web/static/i18n/zh-CN.json
+8
View File
@@ -123,6 +123,13 @@
"inputPlaceholder": "输入测试目标或命令... (输入 @ 选择工具 | Shift+Enter 换行，Enter 发送)",
"selectFile": "选择文件",
"uploadFile": "上传文件（可多选或拖拽到此处）",
"readingAttachmentsDetail": "读取附件 {{current}}/{{total}} · {{name}} · {{percent}}%",
"uploadingAttachmentsDetail": "上传附件 · {{done}}/{{total}} 已完成 · 总进度 {{percent}}%",
"waitingAttachmentsUpload": "正在等待附件上传完成…",
"attachmentsUploadIncomplete": "部分附件未上传成功，请移除失败项或重新选择文件后再发送。",
"attachmentUploading": "上传中…",
"attachmentUploadFailed": "失败",
"attachmentUploadAlert": "上传失败：{{name}}",
"send": "发送",
"searchInGroup": "搜索分组中的对话...",
"loadingTools": "正在加载工具...",
@@ -1124,6 +1131,7 @@
"copyPathTitle": "复制服务器上的绝对路径，可粘贴到对话中让模型引用该文件",
"pathCopied": "路径已复制，可到对话中粘贴使用",
"uploadOkHint": "上传成功。点击「复制路径」可复制绝对路径到剪贴板。",
"uploadingFile": "正在上传 {{name}} · {{percent}}%",
"moreActions": "更多：打开对话、编辑、重命名、删除",
"download": "下载",
"edit": "编辑",
web/static/js/auth.js
+48
View File
@@ -163,6 +163,54 @@ async function apiFetch(url, options = {}) {
return response;
}
/**
* multipart POST with XMLHttpRequest so upload progress is available (fetch 无法可靠上报进度).
* 返回与 fetch 类似的对象：ok、status、json()、text()
*/
async function apiUploadWithProgress(url, formData, options = {}) {
await ensureAuthenticated();
const onProgress = typeof options.onProgress === 'function' ? options.onProgress : null;
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url);
if (authToken) {
xhr.setRequestHeader('Authorization', `Bearer ${authToken}`);
}
xhr.upload.onprogress = (e) => {
if (!onProgress || !e.lengthComputable) return;
const percent = e.total > 0 ? Math.round((e.loaded / e.total) * 100) : 0;
onProgress({ loaded: e.loaded, total: e.total, percent });
};
xhr.onerror = () => {
reject(new Error('Network error'));
};
xhr.onload = () => {
if (xhr.status === 401) {
handleUnauthorized();
const msg = (typeof window !== 'undefined' && typeof window.t === 'function')
? window.t('auth.unauthorized')
: '未授权访问';
reject(new Error(msg));
return;
}
const responseText = xhr.responseText || '';
resolve({
ok: xhr.status >= 200 && xhr.status < 300,
status: xhr.status,
text: async () => responseText,
json: async () => {
try {
return responseText ? JSON.parse(responseText) : {};
} catch (err) {
throw err;
}
},
});
};
xhr.send(formData);
});
}
async function submitLogin(event) {
event.preventDefault();
const passwordInput = document.getElementById('login-password');
web/static/js/chat-files.js
+49 -4
View File
@@ -12,6 +12,8 @@ const CHAT_FILES_BROWSE_PATH_KEY = 'csai_chat_files_browse_path';
let chatFilesBrowsePath = [];
/** 非空时，下一次上传文件落到此相对路径（chat_uploads 下目录），如 2026-03-21/uuid/sub */
let chatFilesPendingUploadDir = '';
/** 文件管理页面向服务器上传进行中，避免重复选择并禁用顶栏按钮 */
let chatFilesXHRUploadBusy = false;
/** 仅前端记录的「空目录」键 parentPath（'' 表示 chat_uploads 根）-> 子目录名列表，与树合并以便 mkdir 后可见 */
const CHAT_FILES_SYNTHETIC_DIRS_KEY = 'csai_chat_files_synthetic_dirs';
@@ -301,7 +303,7 @@ function chatFilesNameFilter(files) {
/** 仅前端按文件名筛选，不重新请求 */
function chatFilesFilterNameOnInput() {
if (!chatFilesCache.length) return;
if (!chatFilesCache.length && chatFilesGetGroupByMode() !== 'folder') return;
renderChatFilesTable();
}
@@ -554,8 +556,10 @@ function renderChatFilesTable() {
if (!wrap) return;
chatFilesDisplayed = chatFilesNameFilter(chatFilesCache);
const groupMode = chatFilesGetGroupByMode();
const emptyMsg = (typeof window.t === 'function') ? window.t('chatFilesPage.empty') : '暂无文件';
if (!chatFilesDisplayed.length) {
// 「按文件夹」模式下即使尚无文件，也要显示 chat_uploads 路径栏与「新建文件夹」，否则无法先建目录
if (!chatFilesDisplayed.length && groupMode !== 'folder') {
wrap.classList.remove('chat-files-table-wrap--grouped');
wrap.classList.remove('chat-files-table-wrap--tree');
wrap.innerHTML = '<div class="empty-state" data-i18n="chatFilesPage.empty">' + escapeHtml(emptyMsg) + '</div>';
@@ -665,7 +669,6 @@ function renderChatFilesTable() {
<th>${escapeHtml(thActions)}</th>
</tr></thead>`;
const groupMode = chatFilesGetGroupByMode();
let innerHtml;
if (groupMode === 'folder') {
@@ -1197,7 +1200,36 @@ async function submitChatFilesMkdir() {
}
}
function chatFilesSetUploadProgressUI(visible, percent, fileName) {
const wrap = document.getElementById('chat-files-upload-progress');
const fill = document.getElementById('chat-files-upload-progress-fill');
const label = document.getElementById('chat-files-upload-progress-label');
if (!wrap || !fill || !label) return;
if (!visible) {
wrap.hidden = true;
fill.style.width = '0%';
label.textContent = '';
return;
}
wrap.hidden = false;
const p = Math.min(100, Math.max(0, Math.round(percent)));
fill.style.width = p + '%';
const name = fileName || '';
label.textContent = (typeof window.t === 'function')
? window.t('chatFilesPage.uploadingFile', { name: name, percent: p })
: ('正在上传 ' + name + ' · ' + p + '%');
}
function chatFilesSetUploadBusy(busy) {
chatFilesXHRUploadBusy = !!busy;
['chat-files-header-upload-btn', 'chat-files-refresh-btn'].forEach(function (id) {
const el = document.getElementById(id);
if (el) el.disabled = chatFilesXHRUploadBusy;
});
}
function chatFilesOpenUploadPicker() {
if (chatFilesXHRUploadBusy) return;
if (chatFilesGetGroupByMode() === 'folder') {
chatFilesPendingUploadDir = chatFilesBrowsePath.join('/');
} else {
@@ -1209,6 +1241,7 @@ function chatFilesOpenUploadPicker() {
function chatFilesUploadToFolderClick(ev, btn) {
if (ev) ev.stopPropagation();
if (chatFilesXHRUploadBusy) return;
const raw = btn.getAttribute('data-upload-dir');
if (!raw) return;
try {
@@ -1237,12 +1270,22 @@ async function onChatFilesUploadPick(ev) {
form.append('conversationId', conv.value.trim());
}
}
chatFilesSetUploadBusy(true);
chatFilesSetUploadProgressUI(true, 0, file.name);
try {
const res = await apiFetch('/api/chat-uploads', { method: 'POST', body: form });
const doXhr = typeof apiUploadWithProgress === 'function';
const res = doXhr
? await apiUploadWithProgress('/api/chat-uploads', form, {
onProgress: function (p) {
chatFilesSetUploadProgressUI(true, p.percent, file.name);
}
})
: await apiFetch('/api/chat-uploads', { method: 'POST', body: form });
if (!res.ok) {
throw new Error(await res.text());
}
const data = await res.json().catch(() => ({}));
chatFilesSetUploadProgressUI(true, 100, file.name);
loadChatFilesPage();
if (data && data.ok) {
const msg = (typeof window.t === 'function')
@@ -1253,6 +1296,8 @@ async function onChatFilesUploadPick(ev) {
} catch (e) {
alert((e && e.message) ? e.message : String(e));
} finally {
chatFilesSetUploadBusy(false);
chatFilesSetUploadProgressUI(false);
input.value = '';
}
}
web/static/js/chat.js
+152 -39
View File
@@ -25,8 +25,12 @@ const DRAFT_SAVE_DELAY = 500; // 500ms防抖延迟
// 对话文件上传相关（后端会拼接路径与内容发给大模型，前端不再重复发文件列表）
const MAX_CHAT_FILES = 10;
const CHAT_FILE_DEFAULT_PROMPT = '请根据上传的文件内容进行分析。';
/** @type {{ fileName: string, content: string, mimeType: string }[]} */
/**
* 对话附件：选文件后异步 POST /api/chat-uploads，发送时只传 serverPath（绝对路径），请求体不再内联大文件内容。
* @type {{ id: number, fileName: string, mimeType: string, serverPath: string|null, uploading: boolean, uploadPercent: number, uploadPromise: Promise<void>|null, uploadError: string|null }[]}
*/
let chatAttachments = [];
let chatAttachmentSeq = 0;
// 多代理（Eino）：需后端 multi_agent.enabled，与单代理 /agent-loop 并存
const AGENT_MODE_STORAGE_KEY = 'cyberstrike-chat-agent-mode';
@@ -236,6 +240,30 @@ async function sendMessage() {
if (!message && !hasAttachments) {
return;
}
if (hasAttachments) {
const needWait = chatAttachments.some((a) => a.uploading);
if (needWait) {
const waitLabel = (typeof window.t === 'function')
? window.t('chat.waitingAttachmentsUpload')
: '正在等待附件上传完成…';
chatAttachmentProgressSet(true, 0, waitLabel);
}
try {
await Promise.all(chatAttachments.map((a) => (a.uploadPromise ? a.uploadPromise : Promise.resolve())));
} finally {
refreshChatAttachmentUploadProgress();
}
const bad = chatAttachments.filter((a) => !a.serverPath);
if (bad.length) {
const hint = (typeof window.t === 'function')
? window.t('chat.attachmentsUploadIncomplete')
: '部分附件未上传成功，请移除失败项或重新选择文件后再发送。';
alert(hint);
return;
}
}
// 有附件且用户未输入时，发一句简短默认提示即可（后端会拼接路径和文件内容给大模型）
if (hasAttachments && !message) {
message = CHAT_FILE_DEFAULT_PROMPT;
@@ -274,10 +302,10 @@ async function sendMessage() {
role: typeof getCurrentRole === 'function' ? getCurrentRole() : ''
};
if (hasAttachments) {
body.attachments = chatAttachments.map(a => ({
body.attachments = chatAttachments.map((a) => ({
fileName: a.fileName,
content: a.content,
mimeType: a.mimeType || ''
mimeType: a.mimeType || '',
serverPath: a.serverPath
}));
}
// 发送后清空附件列表
@@ -386,11 +414,19 @@ function renderChatFileChips() {
chatAttachments.forEach((a, i) => {
const chip = document.createElement('div');
chip.className = 'chat-file-chip';
if (a.uploading) chip.classList.add('chat-file-chip--uploading');
if (a.uploadError) chip.classList.add('chat-file-chip--error');
chip.setAttribute('role', 'listitem');
const name = document.createElement('span');
name.className = 'chat-file-chip-name';
name.title = a.fileName;
name.textContent = a.fileName;
let label = a.fileName;
if (a.uploading) {
label += ' · ' + ((typeof window.t === 'function') ? window.t('chat.attachmentUploading') : '上传中…');
} else if (a.uploadError) {
label += ' · ' + ((typeof window.t === 'function') ? window.t('chat.attachmentUploadFailed') : '失败');
}
name.textContent = label;
const remove = document.createElement('button');
remove.type = 'button';
remove.className = 'chat-file-chip-remove';
@@ -407,6 +443,7 @@ function renderChatFileChips() {
function removeChatAttachment(index) {
chatAttachments.splice(index, 1);
renderChatFileChips();
refreshChatAttachmentUploadProgress();
}
// 有附件且输入框为空时，填入一句默认提示（可编辑）；后端会单独拼接路径与内容给大模型
@@ -419,46 +456,122 @@ function appendChatFilePrompt() {
}
}
function readFileAsAttachment(file) {
return new Promise((resolve, reject) => {
const mimeType = file.type || '';
const isTextLike = /^text\//i.test(mimeType) || /^(application\/(json|xml|javascript)|image\/svg\+xml)/i.test(mimeType);
const reader = new FileReader();
reader.onload = () => {
let content = reader.result;
if (typeof content === 'string' && content.startsWith('data:')) {
content = content.replace(/^data:[^;]+;base64,/, '');
}
resolve({ fileName: file.name, content: content, mimeType: mimeType });
};
reader.onerror = () => reject(reader.error);
if (isTextLike) {
reader.readAsText(file, 'UTF-8');
} else {
reader.readAsDataURL(file);
}
});
function chatAttachmentProgressSet(visible, percent, detailText) {
const wrap = document.getElementById('chat-attachment-progress');
const fill = document.getElementById('chat-attachment-progress-fill');
const label = document.getElementById('chat-attachment-progress-label');
if (!wrap || !fill || !label) return;
if (!visible) {
wrap.hidden = true;
fill.style.width = '0%';
label.textContent = '';
return;
}
wrap.hidden = false;
const p = Math.min(100, Math.max(0, Math.round(percent)));
fill.style.width = p + '%';
label.textContent = detailText || '';
}
function addFilesToChat(files) {
function refreshChatAttachmentUploadProgress() {
if (!chatAttachments.length) {
chatAttachmentProgressSet(false);
return;
}
const uploading = chatAttachments.filter((a) => a.uploading);
if (!uploading.length) {
chatAttachmentProgressSet(false);
return;
}
let sum = 0;
chatAttachments.forEach((a) => {
sum += a.uploading ? (a.uploadPercent || 0) : 100;
});
const overall = Math.round(sum / chatAttachments.length);
const line = (typeof window.t === 'function')
? window.t('chat.uploadingAttachmentsDetail', {
done: chatAttachments.length - uploading.length,
total: chatAttachments.length,
percent: overall
})
: ('上传附件 ' + (chatAttachments.length - uploading.length) + '/' + chatAttachments.length + ' · ' + overall + '%');
chatAttachmentProgressSet(true, overall, line);
}
async function uploadOneChatAttachment(entry, file) {
const form = new FormData();
form.append('file', file);
const conv = currentConversationId;
if (conv && String(conv).trim()) {
form.append('conversationId', String(conv).trim());
}
const entryId = entry.id;
try {
const res = typeof apiUploadWithProgress === 'function'
? await apiUploadWithProgress('/api/chat-uploads', form, {
onProgress: function (p) {
const cur = chatAttachments.find((x) => x.id === entryId);
if (cur) {
cur.uploadPercent = p.percent;
refreshChatAttachmentUploadProgress();
}
}
})
: await apiFetch('/api/chat-uploads', { method: 'POST', body: form });
if (!res.ok) {
throw new Error(await res.text());
}
const data = await res.json().catch(() => ({}));
const abs = data.absolutePath ? String(data.absolutePath).trim() : '';
if (!abs) {
throw new Error('no absolutePath in response');
}
const cur = chatAttachments.find((x) => x.id === entryId);
if (cur) {
cur.serverPath = abs;
cur.uploading = false;
cur.uploadPercent = 100;
cur.uploadError = null;
}
} catch (e) {
const msg = (e && e.message) ? e.message : String(e);
const cur = chatAttachments.find((x) => x.id === entryId);
if (cur) {
cur.uploading = false;
cur.uploadError = msg;
cur.serverPath = null;
}
alert(((typeof window.t === 'function') ? window.t('chat.attachmentUploadAlert', { name: file.name }) : ('上传失败：' + file.name)) + '\n' + msg);
}
renderChatFileChips();
refreshChatAttachmentUploadProgress();
}
async function addFilesToChat(files) {
if (!files || !files.length) return;
const next = Array.from(files);
if (chatAttachments.length + next.length > MAX_CHAT_FILES) {
alert('最多同时上传 ' + MAX_CHAT_FILES + ' 个文件，当前已选 ' + chatAttachments.length + ' 个。');
return;
}
const addOne = (file) => {
return readFileAsAttachment(file).then((a) => {
chatAttachments.push(a);
renderChatFileChips();
appendChatFilePrompt();
}).catch(() => {
alert('读取文件失败：' + file.name);
});
};
let p = Promise.resolve();
next.forEach((file) => { p = p.then(() => addOne(file)); });
p.then(() => {});
next.forEach((file) => {
const id = ++chatAttachmentSeq;
const entry = {
id: id,
fileName: file.name,
mimeType: file.type || '',
serverPath: null,
uploading: true,
uploadPercent: 0,
uploadPromise: null,
uploadError: null
};
entry.uploadPromise = uploadOneChatAttachment(entry, file);
chatAttachments.push(entry);
});
renderChatFileChips();
refreshChatAttachmentUploadProgress();
appendChatFilePrompt();
}
function setupChatFileUpload() {
@@ -469,7 +582,7 @@ function setupChatFileUpload() {
inputEl.addEventListener('change', function () {
const files = this.files;
if (files && files.length) {
addFilesToChat(files);
addFilesToChat(files).catch(function () { /* addFilesToChat 已提示 */ });
}
this.value = '';
});
@@ -491,7 +604,7 @@ function setupChatFileUpload() {
e.stopPropagation();
this.classList.remove('drag-over');
const files = e.dataTransfer && e.dataTransfer.files;
if (files && files.length) addFilesToChat(files);
if (files && files.length) addFilesToChat(files).catch(function () { /* addFilesToChat 已提示 */ });
});
}
web/templates/index.html
+11 -3
View File
@@ -626,6 +626,10 @@
</div>
<div class="chat-input-with-files">
<div id="chat-file-list" class="chat-file-list" aria-label="已选文件列表"></div>
<div id="chat-attachment-progress" class="chat-upload-progress-row" hidden role="status" aria-live="polite">
<div class="chat-upload-progress-track" aria-hidden="true"><div class="chat-upload-progress-fill" id="chat-attachment-progress-fill"></div></div>
<span class="chat-upload-progress-label" id="chat-attachment-progress-label"></span>
</div>
<div class="chat-input-field">
<textarea id="chat-input" data-i18n="chat.inputPlaceholder" data-i18n-attr="placeholder" data-i18n-skip-text="true" placeholder="输入测试目标或命令... (输入 @ 选择工具 | Shift+Enter 换行，Enter 发送)" rows="1"></textarea>
<div id="mention-suggestions" class="mention-suggestions" role="listbox" aria-label="工具提及候选"></div>
@@ -637,7 +641,7 @@
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="send-btn" onclick="sendMessage()">
<button type="button" class="send-btn" id="chat-send-btn" onclick="sendMessage()">
<span data-i18n="chat.send">发送</span>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -1074,9 +1078,9 @@
<div class="page-header">
<h2 data-i18n="chatFilesPage.title">文件管理</h2>
<div class="page-header-actions">
<button type="button" class="btn-primary" onclick="chatFilesOpenUploadPicker()" data-i18n="chatFilesPage.upload">上传文件</button>
<button type="button" class="btn-primary" id="chat-files-header-upload-btn" onclick="chatFilesOpenUploadPicker()" data-i18n="chatFilesPage.upload">上传文件</button>
<input type="file" id="chat-files-upload-input" style="display:none" onchange="onChatFilesUploadPick(event)" />
<button class="btn-secondary" onclick="loadChatFilesPage()" data-i18n="common.refresh">刷新</button>
<button type="button" class="btn-secondary" id="chat-files-refresh-btn" onclick="loadChatFilesPage()" data-i18n="common.refresh">刷新</button>
</div>
</div>
<div class="page-content">
@@ -1101,6 +1105,10 @@
</label>
<button class="btn-secondary" type="button" onclick="loadChatFilesPage()" data-i18n="common.search">搜索</button>
</div>
<div id="chat-files-upload-progress" class="chat-upload-progress-row chat-upload-progress-row--files" hidden role="status" aria-live="polite">
<div class="chat-upload-progress-track" aria-hidden="true"><div class="chat-upload-progress-fill" id="chat-files-upload-progress-fill"></div></div>
<span class="chat-upload-progress-label" id="chat-files-upload-progress-label"></span>
</div>
<div id="chat-files-list-wrap" class="chat-files-table-wrap">
<div class="loading-spinner" data-i18n="common.loading">加载中…</div>
</div>