mirror of
https://gitcode.com/JianFeeeee/TrulyMEM-TrueHumanMEM.git
synced 2026-09-20 08:58:15 +00:00
refactor: 文件上传直接填入输入框,支持光标位置插入
This commit is contained in:
@ -194,39 +194,7 @@ body {
|
||||
background: var(--surface-darken);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
background: var(--surface-darken);
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.file-info.attached {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.file-info-name {
|
||||
color: var(--success);
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-info-remove {
|
||||
cursor: pointer;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.file-info-remove:hover {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 6px 16px;
|
||||
@ -635,10 +603,7 @@ body {
|
||||
<div class="file-upload-row">
|
||||
<input type="file" class="file-input" id="fileInput">
|
||||
<button class="file-upload-btn" id="fileUploadBtn">📎 添加文件</button>
|
||||
<span class="file-info" id="fileInfo">
|
||||
<span class="file-info-name" id="fileInfoName"></span>
|
||||
<span class="file-info-remove" id="fileInfoRemove">✕</span>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div class="input-buttons">
|
||||
<button class="btn" id="sendBtn">发送</button>
|
||||
@ -758,10 +723,6 @@ const closeHelpBtn = document.getElementById('closeHelp');
|
||||
// File upload
|
||||
const fileInputEl = document.getElementById('fileInput');
|
||||
const fileUploadBtn = document.getElementById('fileUploadBtn');
|
||||
const fileInfoEl = document.getElementById('fileInfo');
|
||||
const fileInfoNameEl = document.getElementById('fileInfoName');
|
||||
const fileInfoRemoveEl = document.getElementById('fileInfoRemove');
|
||||
let attachedFile = null;
|
||||
|
||||
// Config inputs
|
||||
const apiKeyEl = document.getElementById('apiKey');
|
||||
@ -1036,8 +997,8 @@ function readFileAsText(file) {
|
||||
|
||||
// Send Message
|
||||
async function sendMessage() {
|
||||
let message = messageInputEl.value.trim();
|
||||
if (!message && !attachedFile) return;
|
||||
const message = messageInputEl.value.trim();
|
||||
if (!message) return;
|
||||
|
||||
// Check if API is configured
|
||||
if (apiStatusEl.textContent === '未配置') {
|
||||
@ -1045,19 +1006,6 @@ async function sendMessage() {
|
||||
return;
|
||||
}
|
||||
|
||||
// If file is attached, read it and prepend to message
|
||||
if (attachedFile) {
|
||||
try {
|
||||
const fileContent = await readFileAsText(attachedFile);
|
||||
const fileBlock = `文件名:${attachedFile.name}\n内容:\n\`\`\`\n${fileContent}\n\`\`\``;
|
||||
message = message ? `${fileBlock}\n\n${message}` : fileBlock;
|
||||
} catch (e) {
|
||||
updateLatestMessage(`❌ 文件读取失败: ${e.message}`);
|
||||
return;
|
||||
}
|
||||
clearFile();
|
||||
}
|
||||
|
||||
// Add user message to UI
|
||||
addMessageToUI('user', message);
|
||||
messageInputEl.value = '';
|
||||
@ -1177,27 +1125,30 @@ function closeSidebar() {
|
||||
}
|
||||
|
||||
// File upload helpers
|
||||
function attachFile(file) {
|
||||
attachedFile = file;
|
||||
fileInfoNameEl.textContent = file.name;
|
||||
fileInfoEl.classList.add('attached');
|
||||
fileUploadBtn.textContent = '📎 更换文件';
|
||||
}
|
||||
|
||||
function clearFile() {
|
||||
attachedFile = null;
|
||||
fileInputEl.value = '';
|
||||
fileInfoEl.classList.remove('attached');
|
||||
fileUploadBtn.textContent = '📎 添加文件';
|
||||
function insertFileContent(file) {
|
||||
readFileAsText(file).then(content => {
|
||||
const block = `文件名:${file.name}\n内容:\n${content}`;
|
||||
const current = messageInputEl.value;
|
||||
const cursorPos = messageInputEl.selectionStart;
|
||||
if (current.length === 0) {
|
||||
messageInputEl.value = block;
|
||||
} else {
|
||||
// 插入到光标位置
|
||||
messageInputEl.value = current.slice(0, cursorPos) + block + '\n\n' + current.slice(cursorPos);
|
||||
}
|
||||
messageInputEl.focus();
|
||||
fileInputEl.value = '';
|
||||
}).catch(e => {
|
||||
alert(`文件读取失败: ${e.message}`);
|
||||
});
|
||||
}
|
||||
|
||||
fileUploadBtn.addEventListener('click', () => fileInputEl.click());
|
||||
fileInputEl.addEventListener('change', () => {
|
||||
if (fileInputEl.files && fileInputEl.files[0]) {
|
||||
attachFile(fileInputEl.files[0]);
|
||||
insertFileContent(fileInputEl.files[0]);
|
||||
}
|
||||
});
|
||||
fileInfoRemoveEl.addEventListener('click', clearFile);
|
||||
|
||||
// Event Listeners
|
||||
sendBtn.addEventListener('click', sendMessage);
|
||||
|
||||
Reference in New Issue
Block a user