From 86a2797d44f66d5d20d378354bbd5d0f7583fdfe Mon Sep 17 00:00:00 2001
From: Metona <metona@local>
Date: Sun, 5 Apr 2026 00:29:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=A8=20loading=20class=20=E7=B2=BE?=
 =?UTF-8?q?=E7=A1=AE=E5=AE=9A=E4=BD=8Dplaceholder=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8DRAG=E4=B8=8Bloading=E4=B8=8D=E6=B6=88=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上次用 :last-of-type 修复无效（:last-of-type 也是按元素类型div匹配，
系统消息也是div，一样命中不了placeholder）。

改用给 placeholder 加 .loading class 的方案：
- appendAssistantPlaceholder 添加 .loading class
- updateLastAssistantMessage 用 .message.assistant.loading 选择器
- 成功/失败后移除 .loading class

选择器不再依赖 DOM 位置，彻底不受 appendSystemMessage 影响。
---
 js/components/chat-area.js  | 5 +++--
 js/components/input-area.js | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/js/components/chat-area.js b/js/components/chat-area.js
index b9abb5a..3ad6f24 100644
--- a/js/components/chat-area.js
+++ b/js/components/chat-area.js
@@ -221,9 +221,10 @@ export function appendMessageDOM(msg, index) {
 
 /** 更新最后一条 assistant 消息（流式输出） */
 export function updateLastAssistantMessage(content, think, stats, model) {
-    const lastMsg = messagesContainerEl.querySelector('.message.assistant:last-of-type');
+    const lastMsg = messagesContainerEl.querySelector('.message.assistant.loading');
     if (!lastMsg) return;
 
+    lastMsg.classList.remove('loading');
     const loadingDots = lastMsg.querySelector('.loading-dots');
     const loadingText = lastMsg.querySelector('.loading-text');
     if (loadingDots) loadingDots.remove();
@@ -284,7 +285,7 @@ export function updateLastAssistantMessage(content, think, stats, model) {
 /** 追加临时的 assistant 消息占位 */
 export function appendAssistantPlaceholder() {
     const div = document.createElement('div');
-    div.className = 'message assistant';
+    div.className = 'message assistant loading';
     div.innerHTML = `
         <div class="msg-avatar">🤖</div>
         <div class="msg-body">
diff --git a/js/components/input-area.js b/js/components/input-area.js
index 7411eae..13a5422 100644
--- a/js/components/input-area.js
+++ b/js/components/input-area.js
@@ -511,11 +511,12 @@ ${ragContext}
         console.error('[InputArea] 流式聊天错误:', err);
 
         if (err.name === 'AbortError') {
-            const placeholder = document.querySelector('#messagesContainer .message.assistant:last-of-type');
+            const placeholder = document.querySelector('#messagesContainer .message.assistant.loading');
             const loadingDots = placeholder?.querySelector('.loading-dots');
             const loadingText = placeholder?.querySelector('.loading-text');
             if (loadingDots) loadingDots.remove();
             if (loadingText) loadingText.remove();
+            placeholder?.classList.remove('loading');
 
             const contentDiv = placeholder?.querySelector('.msg-content');
 
@@ -547,11 +548,12 @@ ${ragContext}
             return;
         }
 
-        const placeholder = document.querySelector('#messagesContainer .message.assistant:last-of-type');
+        const placeholder = document.querySelector('#messagesContainer .message.assistant.loading');
         const loadingDots = placeholder?.querySelector('.loading-dots');
         const loadingText = placeholder?.querySelector('.loading-text');
         if (loadingDots) loadingDots.remove();
         if (loadingText) loadingText.remove();
+        placeholder?.classList.remove('loading');
 
         const contentDiv = placeholder?.querySelector('.msg-content');