@bolloon/bolloon-agent 0.1.34 → 0.1.36

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

@@ -0,0 +1,463 @@
+/**
+ * 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';
+// ---------------------------------------------------------------------------
+// 模块私有状态
+// ---------------------------------------------------------------------------
+let streamingMessageEl = null;
+let streamingTextNode = null;
+let streamingText = '';
+let lastUserCommand = '';
+let lastAiContent = '';
+// 滚动限频 (60ms 16fps, 减 reflow)
+let scrollToBottomTimer = null;
+function scheduleScrollToBottom(container) {
+    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;
+}
+// ---------------------------------------------------------------------------
+// HTML escape (供 think / env 折叠块用)
+// ---------------------------------------------------------------------------
+export 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 }) {
+    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;
+    }
+    const div = document.createElement('div');
+    div.className = `message message-${type}`;
+    // 清理: 移除 tool_call 标记
+    let cleanContent = content
+        .replace(/\[TOOL_CALL\][\s\S]*?\[\/TOOL_CALL\]/g, '')
+        .replace(/TOOL_CALL[\s\S]*?\/TOOL_CALL/g, '')
+        .replace(/<tool_call>[\s\S]*?<\/tool_call>/gi, '')
+        .replace(/\{\s*"tool":[\s\S]*?\}/g, '')
+        .replace(/\{\s*tool\s*=>\s*["'][^"']+["']\s*(?:,\s*args\s*=>\s*\{[\s\S]*?\})?\s*\}/g, '')
+        .replace(/\[Function[^\]]*\]\s*/g, '')
+        .trim();
+    // think 折叠
+    const thinkMatch = cleanContent.match(/<think>([\s\S]*?)<\/think>/);
+    let mainContent = cleanContent;
+    let thinkContainer = null;
+    if (thinkMatch) {
+        const thinkContent = thinkMatch[1].trim();
+        mainContent = cleanContent.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+        thinkContainer = buildThinkContainer(thinkContent);
+    }
+    // environment_details 折叠 + 身份头
+    const envMatch = mainContent.match(/^(.+?)\n<environment_details>([\s\S]*?)<\/environment_details>\n([\s\S]*)$/);
+    if (envMatch) {
+        const identity = envMatch[1].trim();
+        const envDetails = envMatch[2].trim();
+        const messageBody = envMatch[3].trim();
+        const header = document.createElement('div');
+        header.className = 'message-header';
+        header.textContent = identity;
+        div.appendChild(header);
+        div.appendChild(buildEnvContainer(envDetails));
+        if (thinkContainer)
+            div.appendChild(thinkContainer);
+        if (messageBody)
+            div.appendChild(buildBubble(messageBody, type));
+    }
+    else if (cleanContent) {
+        if (thinkContainer)
+            div.appendChild(thinkContainer);
+        div.appendChild(buildBubble(cleanContent, type));
+    }
+    else {
+        return; // 空内容, 不上屏
+    }
+    // 纯文本用于复制按钮
+    const rawContent = cleanContent
+        .replace(/<[^>]+>/g, '')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&')
+        .replace(/&nbsp;/g, ' ');
+    // 时间
+    const time = document.createElement('div');
+    time.className = 'time';
+    time.textContent = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
+    // 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);
+    }
+    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;
+}
+// ---------------------------------------------------------------------------
+// 私有: 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;
+}
+// ---------------------------------------------------------------------------
+// 私有: 气泡 (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;
+}
+// ---------------------------------------------------------------------------
+// 私有: 消息操作按钮 (复制 / 重新回答 / 蒸馏为判断)
+// ---------------------------------------------------------------------------
+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);
+        // B-3: 首个 token 来时切状态到 streaming (蓝徽), 提示用户 panel 在工作
+        if (typeof ctx.setTimelineState === 'function') {
+            ctx.setTimelineState('streaming');
+        }
+        scheduleScrollToBottom(container);
+    }
+    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);
+            }
+        }
+    }
+    // 重置流式状态
+    streamingMessageEl = null;
+    streamingTextNode = null;
+    streamingText = '';
+    // B-3: finalize 时切 done 状态 (绿徽), hide 延迟由 client.js 的 hideTimelinePanel 统一管
+    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. 否则用最后一条 AI message
+    if (!target) {
+        const aiMsgs = container.querySelectorAll('.message-ai');
+        if (aiMsgs.length === 0)
+            return;
+        target = aiMsgs[aiMsgs.length - 1];
+    }
+    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,
+    });
+}
+// ---------------------------------------------------------------------------
+// 重置模块状态 (切频道时调用)
+// ---------------------------------------------------------------------------
+export function resetRendererState() {
+    streamingMessageEl = null;
+    streamingTextNode = null;
+    streamingText = '';
+    lastUserCommand = '';
+    lastAiContent = '';
+    if (scrollToBottomTimer) {
+        clearTimeout(scrollToBottomTimer);
+        scrollToBottomTimer = null;
+    }
+}
+export const MessageRenderer = {
+    addMessage,
+    handleStreamTokenEvent,
+    finalizeTimelineAsMessage,
+    handleStepEvent,
+    escapeHtml,
+    getMessagesContainerForCurrent,
+    resetRendererState,
+};
+if (typeof window !== 'undefined') {
+    window.MR = MessageRenderer;
+}