diff --git a/pages/popup.js b/pages/popup.js index 5919fc9..7943793 100644 --- a/pages/popup.js +++ b/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 = `我: ${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 = `智能助手: `; 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("")) { + inThink = true; + content = content.replace("", ""); + } + if (content.includes("")) { + inThink = false; + content = content.replace("", ""); + } + if (inThink) { + thinkStr += content.replace(/\n/g, "
"); + } else if (chunk.textResponse) { + answerStr += content.replace(/\n/g, "
"); + } + // 实时渲染,思考内容和正式回答分区块 + msgBox.innerHTML = + (thinkStr + ? `
模型思考过程:${thinkStr}
` + : "") + + `智能助手:${answerStr}`; + llmResultContent.scrollTop = llmResultContent.scrollHeight; if (chunk.close) { stop = true; break; } - if (chunk.textResponse) { - answer += chunk.textResponse.replace(/\n/g, "
"); - msgBox.innerHTML = `智能助手: ${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); diff --git a/pages/styles.css b/pages/styles.css index 7e6a16c..ba5fd0f 100644 --- a/pages/styles.css +++ b/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) */ -.llm-msg-item.llm-assistant .assistant-label { +/* 只让“智能助手:”四字蓝色,其它不变 */ +.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; +} + +