feat: AI生成回复时显示停止生成按钮

This commit is contained in:
2026-04-26 17:54:01 +08:00
parent d550461e0b
commit 691b7f0e08
3 changed files with 88 additions and 3 deletions

View File

@@ -781,6 +781,9 @@ async function streamGenerate(userMsgIndex) {
}
contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
// 显示停止生成按钮
showStopGenerateBtn();
try {
// 构建请求体 - 统一使用 glm-4.5-air通过 thinking 参数控制
@@ -814,8 +817,30 @@ async function streamGenerate(userMsgIndex) {
const decoder = new TextDecoder();
let buffer = '';
let thinkingOutputStarted = false; // 正式内容是否开始输出
let abortController = new AbortController(); // 用于中断流
// 绑定停止按钮事件
const stopBtn = document.getElementById('stopGenerateBtn');
if (stopBtn) {
stopBtn.onclick = () => {
abortController.abort();
isLoading = false;
sendBtn.disabled = false;
hideStopGenerateBtn();
// 更新最终内容
if (thinkingEl && enableThinking && currentConversation.messages[aiMessageIndex].thinking) {
thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
}
contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
currentConversation.updatedAt = Date.now();
saveConversations();
renderMessages();
};
}
while (true) {
if (abortController.signal.aborted) break; // 检查是否已停止
const { done, value } = await reader.read();
if (done) break;
@@ -877,6 +902,7 @@ async function streamGenerate(userMsgIndex) {
} finally {
isLoading = false;
sendBtn.disabled = false;
hideStopGenerateBtn();
currentConversation.updatedAt = Date.now();
saveConversations();
renderMessages();
@@ -889,6 +915,33 @@ async function streamGenerate(userMsgIndex) {
}
}
// 显示停止生成按钮
function showStopGenerateBtn() {
// 检查是否已存在
if (document.getElementById('stopGenerateBtn')) return;
const stopBtn = document.createElement('button');
stopBtn.id = 'stopGenerateBtn';
stopBtn.className = 'stop-generate-btn';
stopBtn.innerHTML = `
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 6h12v12H6z"/></svg>
<span>停止生成</span>
`;
// 插入到消息容器底部
if (messagesContainer) {
messagesContainer.appendChild(stopBtn);
}
}
// 隐藏停止生成按钮
function hideStopGenerateBtn() {
const stopBtn = document.getElementById('stopGenerateBtn');
if (stopBtn) {
stopBtn.remove();
}
}
// 生成对话标题
async function generateConversationTitle() {
if (!currentConversation) return;