feat: 用户消息编辑功能,编辑后重新请求AI回复
This commit is contained in:
@@ -60,6 +60,10 @@
|
||||
.action-btn:hover { background: #e8e8e8; border-color: #ccc; }
|
||||
.action-btn.copied { color: #10a37f; border-color: #10a37f; background: #e8f5e9; }
|
||||
.action-btn.regenerate:hover { color: #667eea; border-color: #667eea; }
|
||||
.action-btn.edit:hover { color: #10a37f; border-color: #10a37f; }
|
||||
|
||||
/* 用户消息编辑样式 */
|
||||
.edit-textarea:focus { outline: none; border-color: #10a37f; box-shadow: 0 0 0 2px rgba(16,163,127,0.1); }
|
||||
|
||||
/* 版本切换控件 - 简洁版 */
|
||||
.version-switcher { display: none; align-items: center; gap: 4px; margin-left: 4px; }
|
||||
@@ -440,6 +444,9 @@
|
||||
html += `<span class="version-label" id="${messageId}_version_label">1/1</span>`;
|
||||
html += `<button class="version-arrow" onclick="switchVersion('${messageId}', 1)" data-dir="next"><i class="ri-arrow-right-s-line"></i></button>`;
|
||||
html += `</span>`;
|
||||
} else {
|
||||
// 用户消息添加编辑按钮
|
||||
html += `<button class="action-btn edit" onclick="editUserMessage(this)" title="编辑并重新发送"><i class="ri-edit-line"></i> 编辑</button>`;
|
||||
}
|
||||
html += `</div>`;
|
||||
|
||||
@@ -742,6 +749,136 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑用户消息并重新发送
|
||||
let editingUserMessage = null; // 正在编辑的用户消息元素
|
||||
|
||||
function editUserMessage(btn) {
|
||||
const messageDiv = btn.closest('.message.user');
|
||||
if (!messageDiv) return;
|
||||
|
||||
// 获取消息内容
|
||||
const contentDiv = messageDiv.querySelector('.user-message-text');
|
||||
const originalContent = contentDiv.textContent;
|
||||
const actionsDiv = messageDiv.querySelector('.message-actions');
|
||||
|
||||
// 保存原始状态用于取消
|
||||
editingUserMessage = {
|
||||
element: messageDiv,
|
||||
originalContent: originalContent,
|
||||
contentDiv: contentDiv,
|
||||
actionsDiv: actionsDiv
|
||||
};
|
||||
|
||||
// 将消息文本变成可编辑的textarea
|
||||
contentDiv.innerHTML = `<textarea class="edit-textarea" style="width:100%;min-height:60px;padding:8px;border:1px solid #ddd;border-radius:8px;font-size:15px;resize:vertical;">${escapeHtml(originalContent)}</textarea>`;
|
||||
|
||||
// 隐藏原有操作按钮,显示编辑操作按钮
|
||||
actionsDiv.innerHTML = `
|
||||
<button class="action-btn" onclick="confirmEditMessage()" style="background:#10a37f;color:white;border-color:#10a37f;"><i class="ri-check-line"></i> 确认</button>
|
||||
<button class="action-btn" onclick="cancelEditMessage()"><i class="ri-close-line"></i> 取消</button>
|
||||
`;
|
||||
|
||||
// 聚焦到textarea
|
||||
const textarea = contentDiv.querySelector('.edit-textarea');
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
|
||||
|
||||
// 添加Ctrl+Enter快捷键确认
|
||||
textarea.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
confirmEditMessage();
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
cancelEditMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function cancelEditMessage() {
|
||||
if (!editingUserMessage) return;
|
||||
|
||||
// 恢复原始内容
|
||||
editingUserMessage.contentDiv.innerHTML = escapeHtml(editingUserMessage.originalContent);
|
||||
|
||||
// 恢复原始操作按钮
|
||||
editingUserMessage.actionsDiv.innerHTML = `
|
||||
<button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>
|
||||
<button class="action-btn edit" onclick="editUserMessage(this)" title="编辑并重新发送"><i class="ri-edit-line"></i> 编辑</button>
|
||||
`;
|
||||
|
||||
editingUserMessage = null;
|
||||
}
|
||||
|
||||
function confirmEditMessage() {
|
||||
if (!editingUserMessage) return;
|
||||
|
||||
const textarea = editingUserMessage.contentDiv.querySelector('.edit-textarea');
|
||||
const newContent = textarea.value.trim();
|
||||
|
||||
if (!newContent) {
|
||||
alert('消息内容不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果内容没有变化,直接取消编辑
|
||||
if (newContent === editingUserMessage.originalContent) {
|
||||
cancelEditMessage();
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新消息内容
|
||||
editingUserMessage.contentDiv.innerHTML = escapeHtml(newContent);
|
||||
|
||||
// 恢复操作按钮
|
||||
editingUserMessage.actionsDiv.innerHTML = `
|
||||
<button class="action-btn" onclick="copyMessage(this)"><i class="ri-file-copy-line"></i> 复制</button>
|
||||
<button class="action-btn edit" onclick="editUserMessage(this)" title="编辑并重新发送"><i class="ri-edit-line"></i> 编辑</button>
|
||||
`;
|
||||
|
||||
// 更新最后用户消息记录
|
||||
lastUserMessage = newContent;
|
||||
|
||||
// 找到下一条assistant消息,设置重新生成标志
|
||||
const container = document.getElementById('messagesContainer');
|
||||
const allMessages = container.querySelectorAll('.message');
|
||||
let nextAssistantId = null;
|
||||
|
||||
for (let i = 0; i < allMessages.length; i++) {
|
||||
if (allMessages[i] === editingUserMessage.element && i + 1 < allMessages.length) {
|
||||
const nextMsg = allMessages[i + 1];
|
||||
if (nextMsg.classList.contains('assistant')) {
|
||||
nextAssistantId = nextMsg.id || nextMsg.dataset.messageId;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (nextAssistantId) {
|
||||
isRegenerating = true;
|
||||
regeneratingMessageId = nextAssistantId;
|
||||
showLoadingIndicator(nextAssistantId);
|
||||
} else {
|
||||
// 没有assistant消息,需要创建新的
|
||||
isRegenerating = false;
|
||||
regeneratingMessageId = null;
|
||||
}
|
||||
|
||||
editingUserMessage = null;
|
||||
|
||||
// 重新发送编辑后的消息
|
||||
document.getElementById('sendBtn').disabled = true;
|
||||
if (ws?.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({
|
||||
action: 'chat',
|
||||
message: newContent,
|
||||
conversation_id: currentConversationId,
|
||||
agent_id: currentAgentId
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
BIN
uploads/images/1776137541_298f5318.png
Normal file
BIN
uploads/images/1776137541_298f5318.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Reference in New Issue
Block a user