@bolloon/bolloon-agent 0.3.22 → 0.3.24

package/dist/web/ui/message-renderer.js

@@ -1,572 +1,433 @@
-/**
- * message-renderer.ts — 对话显示 UI (2026-06-15 从 client.js 拆出, .js → .ts)
- *
- * 职责 (单一):
- *   - 把 user / AI 内容渲染成 DOM 气泡 (含 marked.parse 渲染)
- *   - 处理流式 token 累积 (textNode 增量, O(1), 不重排)
- *   - finalize 流式消息为正式 AI 气泡
- *   - 折叠 think / environment_details 块
- *   - 复制 / 重新回答 / 蒸馏为判断 按钮
- *   - 挂载 step-timeline (2026-06-15) 步骤状态条到每条 AI 消息内
- *
- * 状态 (本模块私有):
- *   - streamingMessageEl / streamingTextNode / streamingText
- *   - lastUserCommand / lastAiContent  (去重)
- *
- * 依赖 (import):
- *   - 浏览器 API (document, marked, fetch, navigator)
- *   - ./step-timeline (4 状态步骤条模块)
- *
- * 不依赖 (零业务 import, 防循环):
- *   - 不 import client.js
- *   - 不 import 任何业务模块
- *
- * 输入 (从 client.js 调用):
- *   - addMessage(content, type, save, container, usedIds, ctx)
- *   - handleStreamTokenEvent({ streamType, content }, ctx)
- *   - finalizeTimelineAsMessage(ctx)
- *   - handleStepEvent({ type: 'step_start'|'step_done'|'step_error', ... }, ctx)
- *   - escapeHtml(s)
- *   - getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl)
- *
- * 输出 (DOM):
- *   - .message / .bubble / .think-container / .env-container
- *   - .message-streaming (流式期间, finalize 时移除)
- *   - .message-actions (复制/重新回答/蒸馏按钮)
- *   - .used-judgments-link (P0.5 反向引用)
- *   - .step-timeline (气泡内步骤状态条, 由 ./step-timeline 渲染)
- */
-// ---------------------------------------------------------------------------
-// 类型定义
-// ---------------------------------------------------------------------------
-import { mountStepTimeline, pushStepToTimeline, migrateStepTimeline, getStepTimeline, } from './step-timeline.js';
-// 2026-07-01 (v0.2.6): 共享后端切 LLM 输出. 消除 <invoke>/<function_calls>/<tool_call>
-//   等各种 LLM 格式在前端气泡里出现的 bug.
-import { segmentChatReply } from '../../agents/chat-segmenter.js';
-// ---------------------------------------------------------------------------
-// 模块私有状态
-// ---------------------------------------------------------------------------
+import {
+  mountStepTimeline,
+  pushStepToTimeline,
+  migrateStepTimeline,
+  getStepTimeline
+} from "./step-timeline.js";
+import { segmentChatReply } from "../../agents/chat-segmenter.js";
 let streamingMessageEl = null;
 let streamingTextNode = null;
-let streamingText = '';
-let lastUserCommand = '';
-let lastAiContent = '';
-// 2026-07-20: Bug 1 — 非流式模式 step 事件缓冲, 按 channelId 分组
-const stepEventBuffer = new Map();
-/**
- * 2026-06-17: 流式状态查询 — 客户端用它在收到 server `ai` 事件时判断是否需要跳过 addMessage,
- *   避免和后续 `done` → finalizeTimelineAsMessage 产生双气泡.
- *   流式过程中 (streamingText > 0) server 推 `ai(content=fullResponse)` 时跳过,
- *   真正渲染走 `done` 触发的 finalizeTimelineAsMessage.
- */
-export function hasStreamingText() {
-    return streamingText.length > 0;
+let streamingText = "";
+let lastUserCommand = "";
+let lastAiContent = "";
+const stepEventBuffer = /* @__PURE__ */ new Map();
+function hasStreamingText() {
+  return streamingText.length > 0;
 }
-// 2026-07-06: SSE 重连恢复用 — 把 streamingText 替换成 server 给的 fullContent
-//   然后 caller 调 finalizeTimelineAsMessage 把它落定为正式气泡
-export function replaceStreamingText(fullContent) {
-    if (!streamingTextNode || !streamingMessageEl) {
-        // 还没启动流式元素 — 不动, 让 caller 自己 addMessage
-        return;
-    }
-    streamingTextNode.nodeValue = String(fullContent || '');
-    streamingText = String(fullContent || '');
+function replaceStreamingText(fullContent) {
+  if (!streamingTextNode || !streamingMessageEl) {
+    return;
+  }
+  streamingTextNode.nodeValue = String(fullContent || "");
+  streamingText = String(fullContent || "");
 }
-// 2026-07-06: SSE 重连时 server 说"还在生成", 把现有的 streamingMessageEl 填上 partialText
-//   让用户看到 AI 在生成中的状态, 不会卡死
-export function injectRecoveredText(partialText, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
-    if (streamingMessageEl && streamingTextNode) {
-        streamingTextNode.nodeValue = String(partialText || '');
-        streamingText = String(partialText || '');
-        return;
-    }
-    // 还没流式元素 — 创建一个空流式容器, 然后把 partialText 灌进去, 用户看到"AI 在思考"
-    handleStreamTokenEvent({
-        type: 'token',
-        streamType: 'token',
-        content: String(partialText || ''),
-        delta: String(partialText || ''),
-    }, ctx);
+function injectRecoveredText(partialText, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  if (streamingMessageEl && streamingTextNode) {
+    streamingTextNode.nodeValue = String(partialText || "");
+    streamingText = String(partialText || "");
+    return;
+  }
+  handleStreamTokenEvent(
+    {
+      type: "token",
+      streamType: "token",
+      content: String(partialText || ""),
+      delta: String(partialText || "")
+    },
+    ctx
+  );
 }
-// 滚动限频 (60ms 16fps, 减 reflow)
 let scrollToBottomTimer = null;
 function scheduleScrollToBottom(container) {
-    if (!container)
-        return;
-    if (scrollToBottomTimer)
-        return;
-    scrollToBottomTimer = setTimeout(() => {
-        container.scrollTop = container.scrollHeight;
-        scrollToBottomTimer = null;
-    }, 60);
+  if (!container) return;
+  if (scrollToBottomTimer) return;
+  scrollToBottomTimer = setTimeout(() => {
+    container.scrollTop = container.scrollHeight;
+    scrollToBottomTimer = null;
+  }, 60);
 }
-// ---------------------------------------------------------------------------
-// 容器选择 (主入口或 per-channel 容器)
-// ---------------------------------------------------------------------------
-export function getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl) {
-    if (currentChannelId && messagesContainers.get(currentChannelId)) {
-        return messagesContainers.get(currentChannelId) || null;
-    }
-    return messagesEl;
+function getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl) {
+  if (currentChannelId && messagesContainers.get(currentChannelId)) {
+    return messagesContainers.get(currentChannelId) || null;
+  }
+  return messagesEl;
 }
-// ---------------------------------------------------------------------------
-// HTML escape (供 think / env 折叠块用)
-// ---------------------------------------------------------------------------
-export function escapeHtml(s) {
-    return String(s ?? '').replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-    }[c]));
+function escapeHtml(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[c]);
 }
-// ---------------------------------------------------------------------------
-// 主入口: 渲染一条消息气泡 (user / ai / system)
-// ---------------------------------------------------------------------------
-export function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }, 
-// 2026-07-15 修 Bug 2: 历史消息恢复时传历史 timestamp, 不传 = 用"现在" (新消息默认值, 防破坏 LLM 流式事件链).
-timestamp) {
-    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
-    const messagesContainers = ctx.messagesContainers || new Map();
-    const currentChannelId = ctx.currentChannelId;
-    const msgContainer = container || getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-    // 内存保护: 单个 channel 容器超过 200 条, 旧会话加载时淘汰最旧
-    if (!save && msgContainer && msgContainer.children.length > 200) {
-        const toRemove = msgContainer.children.length - 200;
-        for (let i = 0; i < toRemove; i++) {
-            const first = msgContainer.firstElementChild;
-            if (first)
-                msgContainer.removeChild(first);
-        }
-    }
-    // 去重 (save=true 时)
-    if (save) {
-        const lastContent = type === 'user' ? lastUserCommand : lastAiContent;
-        if (lastContent && content === lastContent) {
-            console.log(`[addMessage] 跳过重复的 ${type} 消息`);
-            return;
-        }
-        if (type === 'user')
-            lastUserCommand = content;
-        else
-            lastAiContent = content;
+function addMessage(content, type, save = true, container, usedJudgmentIds = [], ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }, timestamp) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const msgContainer = container || getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!save && msgContainer && msgContainer.children.length > 200) {
+    const toRemove = msgContainer.children.length - 200;
+    for (let i = 0; i < toRemove; i++) {
+      const first = msgContainer.firstElementChild;
+      if (first) msgContainer.removeChild(first);
     }
-    const div = document.createElement('div');
-    div.className = `message message-${type}`;
-    // 2026-07-06: 非流式模式 — AI 完整响应含 <think>...</think> + 实际回复 + <final gen>
-    //   统一清洗: 去 think 块 (LLM 思考过程不渲染), 取 <final gen> 之前内容作为实际回复
-    let cleanContent = content;
-    if (type === 'ai') {
-        cleanContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/g, '');
-        const finalGenIdx = cleanContent.indexOf('<final gen>');
-        if (finalGenIdx >= 0) {
-            cleanContent = cleanContent.substring(0, finalGenIdx).trim();
-        }
+  }
+  if (save) {
+    const lastContent = type === "user" ? lastUserCommand : lastAiContent;
+    if (lastContent && content === lastContent) {
+      console.log(`[addMessage] \u8DF3\u8FC7\u91CD\u590D\u7684 ${type} \u6D88\u606F`);
+      return;
     }
-    // 2026-07-01 (v0.2.6 前后端分离): 改用 chat-segmenter 纯函数切 LLM 输出.
-    //   之前 8 行正则漏 minimax <invoke> / Qwen function_calls / <tool_call> / {tool:..}.
-    //   单一来源: src/agents/chat-segmenter.ts (server + client 共享).
-    //   knownToolNames: 用 ctx 传入的注册表, fallback 空集 (不识别 tool_call 就 strip 不显示).
-    const knownToolNames = (ctx && ctx.knownToolNames) || new Set();
-    const segments = segmentChatReply(cleanContent, { knownToolNames });
-    // 没有可显示的 segment, 不上屏
-    if (segments.length === 0) {
-        return;
+    if (type === "user") lastUserCommand = content;
+    else lastAiContent = content;
+  }
+  const div = document.createElement("div");
+  div.className = `message message-${type}`;
+  let cleanContent = content;
+  if (type === "ai") {
+    cleanContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/g, "");
+    const finalGenIdx = cleanContent.indexOf("<final gen>");
+    if (finalGenIdx >= 0) {
+      cleanContent = cleanContent.substring(0, finalGenIdx).trim();
     }
-    // 渲染各 segment (按 type 走不同容器)
-    let thinkContainer = null;
-    let renderedAny = false;
-    for (const seg of segments) {
-        if (seg.type === 'think' && seg.content) {
-            thinkContainer = buildThinkContainer(seg.content);
-            div.appendChild(thinkContainer);
-            renderedAny = true;
-        }
-        else if (seg.type === 'env_details' && seg.content) {
-            div.appendChild(buildEnvContainer(seg.content));
-            renderedAny = true;
-        }
-        else if (seg.type === 'text' && seg.content) {
-            if (thinkContainer)
-                div.appendChild(thinkContainer);
-            thinkContainer = null;
-            div.appendChild(buildBubble(seg.content, type));
-            renderedAny = true;
-        }
-        else if (seg.type === 'final' && seg.content) {
-            if (thinkContainer)
-                div.appendChild(thinkContainer);
-            thinkContainer = null;
-            // final 段渲染为特殊气泡 (顶部有标记, 表示 LLM 显式终止)
-            const finalEl = buildBubble(seg.content, type);
-            finalEl.classList.add('bubble-final');
-            div.appendChild(finalEl);
-            renderedAny = true;
-        }
-        else if (seg.type === 'tool_call' && seg.tool) {
-            // tool_call segment 不渲染文字 — 走 step-timeline (步骤状态条)
-            //   这里只记录到 ctx 让外层在 addMessage 后挂到 timeline
-            if (ctx && ctx.toolCallCallback) {
-                ctx.toolCallCallback(seg.tool, div);
-            }
-            renderedAny = true; // 即使没文字, tool_call 也算"有意义"
-        }
+  }
+  const knownToolNames = ctx && ctx.knownToolNames || /* @__PURE__ */ new Set();
+  const segments = segmentChatReply(cleanContent, { knownToolNames });
+  if (segments.length === 0) {
+    return;
+  }
+  let thinkContainer = null;
+  let renderedAny = false;
+  for (const seg of segments) {
+    if (seg.type === "think" && seg.content) {
+      thinkContainer = buildThinkContainer(seg.content);
+      div.appendChild(thinkContainer);
+      renderedAny = true;
+    } else if (seg.type === "env_details" && seg.content) {
+      div.appendChild(buildEnvContainer(seg.content));
+      renderedAny = true;
+    } else if (seg.type === "text" && seg.content) {
+      if (thinkContainer) div.appendChild(thinkContainer);
+      thinkContainer = null;
+      div.appendChild(buildBubble(seg.content, type));
+      renderedAny = true;
+    } else if (seg.type === "final" && seg.content) {
+      if (thinkContainer) div.appendChild(thinkContainer);
+      thinkContainer = null;
+      const finalEl = buildBubble(seg.content, type);
+      finalEl.classList.add("bubble-final");
+      div.appendChild(finalEl);
+      renderedAny = true;
+    } else if (seg.type === "tool_call" && seg.tool) {
+      if (ctx && ctx.toolCallCallback) {
+        ctx.toolCallCallback(seg.tool, div);
+      }
+      renderedAny = true;
     }
-    if (!renderedAny) {
-        return; // 没有渲染任何东西, 不上屏
-    }
-    // 纯文本用于复制按钮 — 现在从 segments 拼, 不再依赖 cleanContent 变量
-    const rawContent = segments
-        .filter(s => s.type === 'text' || s.type === 'final')
-        .map(s => s.content || '')
-        .join('\n');
-    // 时间 — 2026-07-15 修 Bug 2: 历史消息恢复时用历史 timestamp, 不传则用"现在"
-    let timeLabel = '';
-    try {
-        if (timestamp !== undefined && timestamp !== null) {
-            const d = timestamp instanceof Date ? timestamp : new Date(timestamp);
-            if (!isNaN(d.getTime())) {
-                timeLabel = d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-            }
-        }
-    }
-    catch { /* fallback below */ }
-    if (!timeLabel)
-        timeLabel = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
-    const time = document.createElement('div');
-    time.className = 'time';
-    time.textContent = timeLabel;
-    // AI 消息操作按钮
-    if (type === 'ai') {
-        div.appendChild(buildMessageActions(div, rawContent, ctx));
-    }
-    // P0.5 反向引用
-    if (type === 'ai' && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
-        const link = document.createElement('a');
-        link.className = 'used-judgments-link';
-        link.textContent = `📎 参考 ${usedJudgmentIds.length} 条原则`;
-        link.onclick = (e) => {
-            e.preventDefault();
-            if (typeof ctx.openJudgmentsModalWithFilter === 'function') {
-                ctx.openJudgmentsModalWithFilter(usedJudgmentIds);
-            }
-        };
-        div.appendChild(link);
-    }
-    // 2026-06-15: 每条 AI 消息挂一个空 step-timeline 占位 (用户决策)
-    //   后续 step_start/step_done 事件会通过 handleStepEvent 推入
-    if (type === 'ai' && msgContainer) {
-        mountStepTimeline(div, currentChannelId);
-        // 2026-07-20 Bug 1: AI 消息创建后回放此前缓冲的 step 事件
-        flushStepEventBuffer(currentChannelId, ctx);
-    }
-    div.appendChild(time);
-    if (msgContainer) {
-        msgContainer.appendChild(div);
-        scheduleScrollToBottom(msgContainer);
+  }
+  if (!renderedAny) {
+    return;
+  }
+  const rawContent = segments.filter((s) => s.type === "text" || s.type === "final").map((s) => s.content || "").join("\n");
+  let timeLabel = "";
+  try {
+    if (timestamp !== void 0 && timestamp !== null) {
+      const d = timestamp instanceof Date ? timestamp : new Date(timestamp);
+      if (!isNaN(d.getTime())) {
+        timeLabel = d.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+      }
     }
+  } catch {
+  }
+  if (!timeLabel) timeLabel = (/* @__PURE__ */ new Date()).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
+  const time = document.createElement("div");
+  time.className = "time";
+  time.textContent = timeLabel;
+  if (type === "ai") {
+    div.appendChild(buildMessageActions(div, rawContent, ctx));
+  }
+  if (type === "ai" && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
+    const link = document.createElement("a");
+    link.className = "used-judgments-link";
+    link.textContent = `\u{1F4CE} \u53C2\u8003 ${usedJudgmentIds.length} \u6761\u539F\u5219`;
+    link.onclick = (e) => {
+      e.preventDefault();
+      if (typeof ctx.openJudgmentsModalWithFilter === "function") {
+        ctx.openJudgmentsModalWithFilter(usedJudgmentIds);
+      }
+    };
+    div.appendChild(link);
+  }
+  if (type === "ai" && msgContainer) {
+    mountStepTimeline(div, currentChannelId);
+    flushStepEventBuffer(currentChannelId, ctx);
+  }
+  div.appendChild(time);
+  if (msgContainer) {
+    msgContainer.appendChild(div);
+    scheduleScrollToBottom(msgContainer);
+  }
 }
-// ---------------------------------------------------------------------------
-// 私有: think 折叠块
-// ---------------------------------------------------------------------------
 function buildThinkContainer(thinkContent) {
-    const container = document.createElement('div');
-    container.className = 'think-container';
-    const toggle = document.createElement('div');
-    toggle.className = 'think-toggle';
-    toggle.innerHTML = '💭 思考过程 <span class="think-arrow">▸</span>';
-    toggle.onclick = function () {
-        const details = container.querySelector('.think-content');
-        const arrow = toggle.querySelector('.think-arrow');
-        if (!details || !arrow)
-            return;
-        if (details.style.display === 'none') {
-            details.style.display = 'block';
-            arrow.textContent = '▾';
-        }
-        else {
-            details.style.display = 'none';
-            arrow.textContent = '▸';
-        }
-    };
-    const content = document.createElement('div');
-    content.className = 'think-content';
-    content.style.display = 'none';
-    content.innerHTML = `<pre>${escapeHtml(thinkContent)}</pre>`;
-    container.appendChild(toggle);
-    container.appendChild(content);
-    return container;
+  const container = document.createElement("div");
+  container.className = "think-container";
+  const toggle = document.createElement("div");
+  toggle.className = "think-toggle";
+  toggle.innerHTML = '\u{1F4AD} \u601D\u8003\u8FC7\u7A0B <span class="think-arrow">\u25B8</span>';
+  toggle.onclick = function() {
+    const details = container.querySelector(".think-content");
+    const arrow = toggle.querySelector(".think-arrow");
+    if (!details || !arrow) return;
+    if (details.style.display === "none") {
+      details.style.display = "block";
+      arrow.textContent = "\u25BE";
+    } else {
+      details.style.display = "none";
+      arrow.textContent = "\u25B8";
+    }
+  };
+  const content = document.createElement("div");
+  content.className = "think-content";
+  content.style.display = "none";
+  content.innerHTML = `<pre>${escapeHtml(thinkContent)}</pre>`;
+  container.appendChild(toggle);
+  container.appendChild(content);
+  return container;
 }
-// ---------------------------------------------------------------------------
-// 私有: environment_details 折叠块
-// ---------------------------------------------------------------------------
 function buildEnvContainer(envDetails) {
-    const container = document.createElement('div');
-    container.className = 'env-container';
-    const toggle = document.createElement('div');
-    toggle.className = 'env-toggle';
-    toggle.innerHTML = '⚙️ 环境信息 <span class="env-arrow">▸</span>';
-    toggle.onclick = function () {
-        const details = container.querySelector('.environment-details');
-        const arrow = toggle.querySelector('.env-arrow');
-        if (!details || !arrow)
-            return;
-        if (details.style.display === 'none') {
-            details.style.display = 'block';
-            arrow.textContent = '▾';
-        }
-        else {
-            details.style.display = 'none';
-            arrow.textContent = '▸';
-        }
-    };
-    const content = document.createElement('div');
-    content.className = 'environment-details';
-    content.style.display = 'none';
-    content.innerHTML = `<pre>${escapeHtml(envDetails)}</pre>`;
-    container.appendChild(toggle);
-    container.appendChild(content);
-    return container;
+  const container = document.createElement("div");
+  container.className = "env-container";
+  const toggle = document.createElement("div");
+  toggle.className = "env-toggle";
+  toggle.innerHTML = '\u2699\uFE0F \u73AF\u5883\u4FE1\u606F <span class="env-arrow">\u25B8</span>';
+  toggle.onclick = function() {
+    const details = container.querySelector(".environment-details");
+    const arrow = toggle.querySelector(".env-arrow");
+    if (!details || !arrow) return;
+    if (details.style.display === "none") {
+      details.style.display = "block";
+      arrow.textContent = "\u25BE";
+    } else {
+      details.style.display = "none";
+      arrow.textContent = "\u25B8";
+    }
+  };
+  const content = document.createElement("div");
+  content.className = "environment-details";
+  content.style.display = "none";
+  content.innerHTML = `<pre>${escapeHtml(envDetails)}</pre>`;
+  container.appendChild(toggle);
+  container.appendChild(content);
+  return container;
 }
-// ---------------------------------------------------------------------------
-// 私有: 气泡 (marked.parse 渲染)
-// ---------------------------------------------------------------------------
 function buildBubble(text, type) {
-    const bubble = document.createElement('div');
-    bubble.className = `bubble bubble-${type}`;
-    // 安全降级: CDN 加载失败时 marked 是 escape 版本, 这里不需要二次 escape
-    // window.marked 在 ts 类型上不一定有, 用 any 兜底
-    const marked = window.marked;
-    bubble.innerHTML = marked ? marked.parse(text) : escapeHtml(text);
-    return bubble;
+  const bubble = document.createElement("div");
+  bubble.className = `bubble bubble-${type}`;
+  const marked = window.marked;
+  bubble.innerHTML = marked ? marked.parse(text) : escapeHtml(text);
+  return bubble;
 }
-// ---------------------------------------------------------------------------
-// 私有: 消息操作按钮 (复制 / 重新回答 / 蒸馏为判断)
-// ---------------------------------------------------------------------------
 function buildMessageActions(div, rawContent, ctx) {
-    const actions = document.createElement('div');
-    actions.className = 'message-actions';
-    // 复制
-    const copyBtn = document.createElement('button');
-    copyBtn.className = 'action-btn copy-btn';
-    copyBtn.innerHTML = copyIcon() + ' 复制';
-    copyBtn.title = '复制消息';
-    copyBtn.onclick = () => {
-        navigator.clipboard.writeText(rawContent).then(() => {
-            copyBtn.innerHTML = checkIcon() + ' 已复制';
-            setTimeout(() => { copyBtn.innerHTML = copyIcon() + ' 复制'; }, 2000);
-        });
-    };
-    actions.appendChild(copyBtn);
-    // 蒸馏为判断
-    const saveJudgmentBtn = document.createElement('button');
-    saveJudgmentBtn.className = 'action-btn save-as-judgment';
-    saveJudgmentBtn.title = 'AI 蒸馏为 30-80 字判断力 + 自动演化对齐';
-    saveJudgmentBtn.setAttribute('data-decision', rawContent.substring(0, 800));
-    if (ctx.currentChannelId)
-        saveJudgmentBtn.setAttribute('data-channel-id', ctx.currentChannelId);
-    saveJudgmentBtn.innerHTML = shieldIcon() + ' 蒸馏为判断';
-    actions.appendChild(saveJudgmentBtn);
-    // 重新回答
-    const regenBtn = document.createElement('button');
-    regenBtn.className = 'action-btn regenerate-btn';
-    regenBtn.innerHTML = refreshIcon(false) + ' 重新回答';
-    regenBtn.title = '重新生成回复';
-    regenBtn.onclick = () => {
-        regenBtn.innerHTML = refreshIcon(true) + ' 生成中...';
-        regenBtn.disabled = true;
-        const messages = div.parentElement?.querySelectorAll('.message') || [];
-        let lastUserMsg = '';
-        for (let i = messages.length - 1; i >= 0; i--) {
-            const msg = messages[i];
-            if (msg.classList.contains('message-user')) {
-                const bubble = msg.querySelector('.bubble');
-                if (bubble) {
-                    lastUserMsg = bubble.textContent || bubble.innerText || '';
-                    break;
-                }
-            }
-        }
-        fetch('/regenerate', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ channelId: ctx.currentChannelId, userMessage: lastUserMsg })
-        }).then(res => {
-            if (!res.ok)
-                throw new Error('regenerate failed');
-        }).catch(err => {
-            console.error('重新生成失败:', err);
-            regenBtn.innerHTML = refreshIcon(false) + ' 失败';
-            setTimeout(() => {
-                regenBtn.innerHTML = refreshIcon(false) + ' 重新回答';
-                regenBtn.disabled = false;
-            }, 2000);
-        });
-    };
-    actions.appendChild(regenBtn);
-    return actions;
-}
-function copyIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>'; }
-function checkIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>'; }
-function shieldIcon() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg>'; }
-function refreshIcon(spin = false) { const cls = spin ? ' class="spin"' : ''; return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls}><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>`; }
-// ---------------------------------------------------------------------------
-// 流式 token 处理 (textNode 增量, 不重排)
-// ---------------------------------------------------------------------------
-export function handleStreamTokenEvent(data, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
-    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
-    const messagesContainers = ctx.messagesContainers || new Map();
-    const currentChannelId = ctx.currentChannelId;
-    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-    if (!container)
-        return;
-    const delta = data.content || '';
-    if (!delta)
-        return;
-    if (!streamingMessageEl || !streamingMessageEl.isConnected) {
-        // 新建流式消息
-        streamingMessageEl = document.createElement('div');
-        streamingMessageEl.className = 'message message-ai message-streaming';
-        streamingTextNode = document.createTextNode('');
-        streamingMessageEl.appendChild(streamingTextNode);
-        streamingText = '';
-        // 2026-06-15: 流式期间也挂一个空 step-timeline 占位 — step_start/done/error 事件
-        //   走 handleStepEvent, getStepTimeline 找到这个流式元素内的 timeline 推入
-        mountStepTimeline(streamingMessageEl, currentChannelId);
-        container.appendChild(streamingMessageEl);
-        // 2026-07-21: 流式元素创建后立即回放缓冲的 step 事件, 让用户尽早看到 tool call 状态
-        //   必须先 appendChild 让元素 isConnected=true, 否则 flushStepEventBuffer → handleStepEvent
-        //   会因 streamingMessageEl.isConnected===false 而丢弃缓冲中的 step.
-        flushStepEventBuffer(currentChannelId, ctx);
-        // B-3: 首个 token 来时切状态到 streaming (蓝徽), 提示用户 panel 在工作
-        if (typeof ctx.setTimelineState === 'function') {
-            ctx.setTimelineState('streaming');
+  const actions = document.createElement("div");
+  actions.className = "message-actions";
+  const copyBtn = document.createElement("button");
+  copyBtn.className = "action-btn copy-btn";
+  copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
+  copyBtn.title = "\u590D\u5236\u6D88\u606F";
+  copyBtn.onclick = () => {
+    navigator.clipboard.writeText(rawContent).then(() => {
+      copyBtn.innerHTML = checkIcon() + " \u5DF2\u590D\u5236";
+      setTimeout(() => {
+        copyBtn.innerHTML = copyIcon() + " \u590D\u5236";
+      }, 2e3);
+    });
+  };
+  actions.appendChild(copyBtn);
+  const saveJudgmentBtn = document.createElement("button");
+  saveJudgmentBtn.className = "action-btn save-as-judgment";
+  saveJudgmentBtn.title = "AI \u84B8\u998F\u4E3A 30-80 \u5B57\u5224\u65AD\u529B + \u81EA\u52A8\u6F14\u5316\u5BF9\u9F50";
+  saveJudgmentBtn.setAttribute("data-decision", rawContent.substring(0, 800));
+  if (ctx.currentChannelId) saveJudgmentBtn.setAttribute("data-channel-id", ctx.currentChannelId);
+  saveJudgmentBtn.innerHTML = shieldIcon() + " \u84B8\u998F\u4E3A\u5224\u65AD";
+  actions.appendChild(saveJudgmentBtn);
+  const regenBtn = document.createElement("button");
+  regenBtn.className = "action-btn regenerate-btn";
+  regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
+  regenBtn.title = "\u91CD\u65B0\u751F\u6210\u56DE\u590D";
+  regenBtn.onclick = () => {
+    regenBtn.innerHTML = refreshIcon(true) + " \u751F\u6210\u4E2D...";
+    regenBtn.disabled = true;
+    const messages = div.parentElement?.querySelectorAll(".message") || [];
+    let lastUserMsg = "";
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const msg = messages[i];
+      if (msg.classList.contains("message-user")) {
+        const bubble = msg.querySelector(".bubble");
+        if (bubble) {
+          lastUserMsg = bubble.textContent || bubble.innerText || "";
+          break;
         }
-        scheduleScrollToBottom(container);
+      }
     }
-    // 2026-07-06: pivot loop 现在用 stream: false, 每次 emit type='token' + content=reply.substring(0, 100)
-    //   也就是说每个 token event 实际是"LLM 这一轮回复的前 100 字符", 不是真正的 token 增量.
-    //   多次 emit 会让 streamingText 累积成 "片段1 + 片段2 + ..." 而不是最终回复.
-    //   改成 "replace last segment" 语义: streamingText 始终是 LLM 最新一轮的回执的前缀.
-    //   这样 finalize 出来的 ai message bubble 就是当前最完整的那一轮 (通常是最新的, pivot loop 最后一次 reply),
-    //   用户看到的就是 LLM 真正的最终回答, 不是堆叠的中间产物.
-    if (data.streamType === 'token') {
-        // 把 streamingText 用 nodeValue 整体替换, 不累加
-        if (streamingTextNode)
-            streamingTextNode.nodeValue = delta;
-        streamingText = delta;
-    }
-    else {
-        // thinking 类的保持原本的 append 语义 (罕见, 留个口子)
-        if (streamingTextNode)
-            streamingTextNode.appendData(delta);
-        streamingText += delta;
+    fetch("/regenerate", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ channelId: ctx.currentChannelId, userMessage: lastUserMsg })
+    }).then((res) => {
+      if (!res.ok) throw new Error("regenerate failed");
+    }).catch((err) => {
+      console.error("\u91CD\u65B0\u751F\u6210\u5931\u8D25:", err);
+      regenBtn.innerHTML = refreshIcon(false) + " \u5931\u8D25";
+      setTimeout(() => {
+        regenBtn.innerHTML = refreshIcon(false) + " \u91CD\u65B0\u56DE\u7B54";
+        regenBtn.disabled = false;
+      }, 2e3);
+    });
+  };
+  actions.appendChild(regenBtn);
+  return actions;
+}
+function copyIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+}
+function checkIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+}
+function shieldIcon() {
+  return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg>';
+}
+function refreshIcon(spin = false) {
+  const cls = spin ? ' class="spin"' : "";
+  return `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"${cls}><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"></path></svg>`;
+}
+function handleStreamTokenEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!container) return;
+  const delta = data.content || "";
+  if (!delta) return;
+  if (!streamingMessageEl || !streamingMessageEl.isConnected) {
+    streamingMessageEl = document.createElement("div");
+    streamingMessageEl.className = "message message-ai message-streaming";
+    streamingTextNode = document.createTextNode("");
+    streamingMessageEl.appendChild(streamingTextNode);
+    streamingText = "";
+    mountStepTimeline(streamingMessageEl, currentChannelId);
+    container.appendChild(streamingMessageEl);
+    flushStepEventBuffer(currentChannelId, ctx);
+    if (typeof ctx.setTimelineState === "function") {
+      ctx.setTimelineState("streaming");
     }
     scheduleScrollToBottom(container);
+  }
+  if (data.streamType === "token") {
+    if (streamingTextNode) streamingTextNode.nodeValue = delta;
+    streamingText = delta;
+  } else {
+    if (streamingTextNode) streamingTextNode.appendData(delta);
+    streamingText += delta;
+  }
+  scheduleScrollToBottom(container);
 }
-// ---------------------------------------------------------------------------
-// 流式消息 finalize (done 事件): 移除流式元素, 走 addMessage 走 marked.parse
-// ---------------------------------------------------------------------------
-export function finalizeTimelineAsMessage(ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
-    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
-    const messagesContainers = ctx.messagesContainers || new Map();
-    const currentChannelId = ctx.currentChannelId;
-    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-    if (streamingText.trim().length > 0) {
-        // 2026-06-15: finalize 时把 streaming 内的 step-timeline 整体搬到新建的正式 AI message 内
-        //   addMessage 会建一个新 timeline 占位, 先记下 streaming 的引用, addMessage 后再迁移
-        //   避免节点从 0 重渲 (10+ 步的任务, 重渲闪烁会很厉害)
-        const oldStreamingEl = streamingMessageEl;
-        if (oldStreamingEl && oldStreamingEl.parentNode) {
-            oldStreamingEl.parentNode.removeChild(oldStreamingEl);
-        }
-        addMessage(streamingText, 'ai', true, container, ctx.lastUsedJudgmentIds || [], ctx);
-        if (oldStreamingEl && container) {
-            // 找刚 addMessage 创建的最后一条 ai message
-            const newAiMsg = container.querySelector('.message-ai:last-of-type');
-            if (newAiMsg && newAiMsg !== oldStreamingEl) {
-                migrateStepTimeline(oldStreamingEl, newAiMsg);
-            }
-        }
+function finalizeTimelineAsMessage(ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (streamingText.trim().length > 0) {
+    const oldStreamingEl = streamingMessageEl;
+    if (oldStreamingEl && oldStreamingEl.parentNode) {
+      oldStreamingEl.parentNode.removeChild(oldStreamingEl);
     }
-    // 重置流式状态
-    streamingMessageEl = null;
-    streamingTextNode = null;
-    streamingText = '';
-    // B-3: finalize 时切 done 状态 (绿徽), hide 延迟由 client.js 的 hideTimelinePanel 统一管
-    if (typeof ctx.setTimelineState === 'function') {
-        ctx.setTimelineState('done');
+    addMessage(streamingText, "ai", true, container, ctx.lastUsedJudgmentIds || [], ctx);
+    if (oldStreamingEl && container) {
+      const newAiMsg = container.querySelector(".message-ai:last-of-type");
+      if (newAiMsg && newAiMsg !== oldStreamingEl) {
+        migrateStepTimeline(oldStreamingEl, newAiMsg);
+      }
     }
+  }
+  streamingMessageEl = null;
+  streamingTextNode = null;
+  streamingText = "";
+  if (typeof ctx.setTimelineState === "function") {
+    ctx.setTimelineState("done");
+  }
 }
-export function handleStepEvent(data, ctx = { messagesEl: null, messagesContainers: new Map(), currentChannelId: null }) {
-    const messagesEl = ctx.messagesEl || (typeof document !== 'undefined' ? document.getElementById('messages') : null);
-    const messagesContainers = ctx.messagesContainers || new Map();
-    const currentChannelId = ctx.currentChannelId;
-    const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
-    if (!container)
-        return;
-    if (!data || !data.type)
-        return;
-    // 1. 优先用正在流式的元素 (流式期间能即时看到)
-    let target = streamingMessageEl && streamingMessageEl.isConnected
-        ? streamingMessageEl
-        : null;
-    // 2. 无流式元素 → 缓冲等待 stream token 或 addMessage 后回放
-    //    (2026-07-21: 不再回退到 welcome 等旧 AI 消息, 避免 step 贴错 message)
-    if (!target) {
-        if (currentChannelId) {
-            const buf = stepEventBuffer.get(currentChannelId) || [];
-            buf.push(data);
-            stepEventBuffer.set(currentChannelId, buf);
-        }
-        return;
+function handleStepEvent(data, ctx = { messagesEl: null, messagesContainers: /* @__PURE__ */ new Map(), currentChannelId: null }) {
+  const messagesEl = ctx.messagesEl || (typeof document !== "undefined" ? document.getElementById("messages") : null);
+  const messagesContainers = ctx.messagesContainers || /* @__PURE__ */ new Map();
+  const currentChannelId = ctx.currentChannelId;
+  const container = getMessagesContainerForCurrent(currentChannelId, messagesContainers, messagesEl);
+  if (!container) return;
+  if (!data || !data.type) return;
+  let target = streamingMessageEl && streamingMessageEl.isConnected ? streamingMessageEl : null;
+  if (!target) {
+    if (currentChannelId) {
+      const buf = stepEventBuffer.get(currentChannelId) || [];
+      buf.push(data);
+      stepEventBuffer.set(currentChannelId, buf);
     }
-    if (!target)
-        return;
-    const timeline = getStepTimeline(target);
-    if (!timeline)
-        return;
-    pushStepToTimeline(timeline, data.type, {
-        tool: data.tool || 'unknown',
-        args: data.args,
-        success: data.success,
-        output: data.output,
-        error: data.error,
-    });
+    return;
+  }
+  if (!target) return;
+  const timeline = getStepTimeline(target);
+  if (!timeline) return;
+  pushStepToTimeline(timeline, data.type, {
+    tool: data.tool || "unknown",
+    args: data.args,
+    success: data.success,
+    output: data.output,
+    error: data.error
+  });
 }
-// 2026-07-20 Bug 1: 回放缓冲的 step 事件到刚创建的 AI 消息
-export function flushStepEventBuffer(channelId, ctx) {
-    if (!channelId)
-        return;
-    const buf = stepEventBuffer.get(channelId);
-    if (!buf || buf.length === 0)
-        return;
-    stepEventBuffer.delete(channelId);
-    for (const evt of buf) {
-        handleStepEvent(evt, ctx);
-    }
+function flushStepEventBuffer(channelId, ctx) {
+  if (!channelId) return;
+  const buf = stepEventBuffer.get(channelId);
+  if (!buf || buf.length === 0) return;
+  stepEventBuffer.delete(channelId);
+  for (const evt of buf) {
+    handleStepEvent(evt, ctx);
+  }
 }
-// ---------------------------------------------------------------------------
-// 重置模块状态 (切频道时调用)
-// ---------------------------------------------------------------------------
-export function resetRendererState() {
-    streamingMessageEl = null;
-    streamingTextNode = null;
-    streamingText = '';
-    lastUserCommand = '';
-    lastAiContent = '';
-    if (scrollToBottomTimer) {
-        clearTimeout(scrollToBottomTimer);
-        scrollToBottomTimer = null;
-    }
+function resetRendererState() {
+  streamingMessageEl = null;
+  streamingTextNode = null;
+  streamingText = "";
+  lastUserCommand = "";
+  lastAiContent = "";
+  if (scrollToBottomTimer) {
+    clearTimeout(scrollToBottomTimer);
+    scrollToBottomTimer = null;
+  }
 }
-export const MessageRenderer = {
-    addMessage,
-    handleStreamTokenEvent,
-    finalizeTimelineAsMessage,
-    handleStepEvent,
-    flushStepEventBuffer,
-    escapeHtml,
-    getMessagesContainerForCurrent,
-    resetRendererState,
+const MessageRenderer = {
+  addMessage,
+  handleStreamTokenEvent,
+  finalizeTimelineAsMessage,
+  handleStepEvent,
+  flushStepEventBuffer,
+  escapeHtml,
+  getMessagesContainerForCurrent,
+  resetRendererState
 };
-if (typeof window !== 'undefined') {
-    window.MR = MessageRenderer;
+if (typeof window !== "undefined") {
+  window.MR = MessageRenderer;
 }
+export {
+  MessageRenderer,
+  addMessage,
+  escapeHtml,
+  finalizeTimelineAsMessage,
+  flushStepEventBuffer,
+  getMessagesContainerForCurrent,
+  handleStepEvent,
+  handleStreamTokenEvent,
+  hasStreamingText,
+  injectRecoveredText,
+  replaceStreamingText,
+  resetRendererState
+};