大模型调用优化

pages/popup.js

@@ -123,18 +123,22 @@ document.addEventListener("DOMContentLoaded", async () => {
     llmResultContent.scrollTop = llmResultContent.scrollHeight;
   }
 
-  // 支持多次提问、历史堆叠
+  // 流式渲染智能助手
-  // 新增/修正流式渲染 assistant 的方式
   async function fetchLLMAnswer(question) {
     if (!question || !question.trim()) return;
-    appendLLMMsg(question, "user");
-    llmResultContainer.classList.remove("hidden");
 
-    // 创建 assistant 消息卡片并持续写入
+    // 追加用户提问
+    const userItem = document.createElement("div");
+    userItem.className = "llm-msg-item llm-user";
+    userItem.innerHTML = `<span style="color:#2a63c8;font-weight:bold;">我：</span> ${question}`;
+    llmResultContent.appendChild(userItem);
+    llmResultContainer.classList.remove("hidden");
+    llmResultContent.scrollTop = llmResultContent.scrollHeight;
+
+    // 创建 assistant 消息卡片
     const msgBox = document.createElement("div");
     msgBox.className = "llm-msg-item llm-assistant";
     msgBox.style.margin = "3px 0 7px 0";
-    msgBox.innerHTML = `<span style="color:#2453b5;">智能助手：</span> `;
     llmResultContent.appendChild(msgBox);
     llmResultContent.scrollTop = llmResultContent.scrollHeight;
 
@@ -160,7 +164,10 @@ document.addEventListener("DOMContentLoaded", async () => {
       let buffer = "";
       let done = false;
       let stop = false;
-      let answer = "";
+      let inThink = false;
+      let thinkStr = "";
+      let answerStr = "";
+
       while (!done) {
         const { value, done: readerDone } = await reader.read();
         done = readerDone;
@@ -174,15 +181,31 @@ document.addEventListener("DOMContentLoaded", async () => {
               try {
                 const chunk = JSON.parse(data);
                 if (chunk.type === "textResponseChunk") {
+                  let content = chunk.textResponse || "";
+                  if (content.includes("<think>")) {
+                    inThink = true;
+                    content = content.replace("<think>", "");
+                  }
+                  if (content.includes("</think>")) {
+                    inThink = false;
+                    content = content.replace("</think>", "");
+                  }
+                  if (inThink) {
+                    thinkStr += content.replace(/\n/g, "<br>");
+                  } else if (chunk.textResponse) {
+                    answerStr += content.replace(/\n/g, "<br>");
+                  }
+                  // 实时渲染，思考内容和正式回答分区块
+                  msgBox.innerHTML =
+                      (thinkStr
+                          ? `<div class="llm-think">模型思考过程：${thinkStr}</div>`
+                          : "") +
+                      `<span class="assistant-label">智能助手：</span>${answerStr}`;
+                  llmResultContent.scrollTop = llmResultContent.scrollHeight;
                   if (chunk.close) {
                     stop = true;
                     break;
                   }
-                  if (chunk.textResponse) {
-                    answer += chunk.textResponse.replace(/\n/g, "<br>");
-                    msgBox.innerHTML = `<span style="color:#2453b5;">智能助手：</span> ${answer}`;
-                    llmResultContent.scrollTop = llmResultContent.scrollHeight;
-                  }
                 }
               } catch (e) {}
             }
@@ -190,7 +213,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         }
         if (stop) break;
       }
-      if (!answer) {
+      if (!thinkStr && !answerStr) {
         msgBox.innerHTML += "无有效回答";
       }
     } catch (e) {
@@ -198,6 +221,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   }
 
+
   function log(...args) {
     const version = chrome?.runtime?.getManifest?.().version || "dev";
     console.log("[v" + version + "]", ...args);

pages/styles.css

@@ -375,7 +375,7 @@ h1 {
 }
 
 .llm-msg-item.llm-assistant {
-  color: #2453b5;
+  color: #233;                  /* 回答文本深灰色 */
   background: #e7eefb;
   border-radius: 5px;
   margin: 3px 0 9px 0;
@@ -384,11 +384,23 @@ h1 {
   font-weight: 500;
   border: 1px solid #b3cdfb;
 }
-
+/* 只让“智能助手：”四字蓝色，其它不变 */
-/* 只让“智能助手：”四字加粗/蓝色（需配合js输出span） */
+.assistant-label {
-.llm-msg-item.llm-assistant .assistant-label {
   color: #2560de;
   font-weight: bold;
   margin-right: 3px;
 }
 
+.llm-think {
+  background: #fffbe6;
+  color: #8d7a24;
+  font-size: 13px;
+  font-style: italic;
+  border-left: 3px solid #ffe16a;
+  border-radius: 5px;
+  margin-bottom: 6px;
+  padding: 7px 10px 7px 12px;
+  white-space: pre-wrap;
+}
+
+