错误：消息渲染模块加载失败。
"; } setTimeout(() => { if (!window.ChatbotCore.isChatbotLoading) { chatBody.querySelectorAll('code.language-mermaid, pre code.language-mermaid').forEach(block => { block.setAttribute('data-mermaid-final', 'true'); }); } }, 0); // Phase 3.5 智能滚动：完整渲染时保持用户阅读位置 const isUserAtBottom = oldScrollHeight - oldClientHeight <= oldScrollTop + 50; // 增加容差到 50px const isNewMessageArrival = currentMessageCount > lastRenderedCount; // 检测是否有新消息到达 // 自动滚动到底部的条件： // 1. 有新消息到达（用户发送消息或助手开始回复） // 2. 或者用户已经停留在底部附近 if (isNewMessageArrival || isUserAtBottom) { chatBody.scrollTop = chatBody.scrollHeight; } // 否则保持用户当前的阅读位置（即使正在加载也不强制滚动） if (window.ChatbotRenderingUtils && typeof window.ChatbotRenderingUtils.renderAllMermaidBlocks === 'function') { if (window.mermaidLoaded && typeof window.mermaid !== 'undefined') { window.ChatbotRenderingUtils.renderAllMermaidBlocks(chatBody); } else { setTimeout(() => { if (window.ChatbotRenderingUtils && typeof window.ChatbotRenderingUtils.renderAllMermaidBlocks === 'function') { window.ChatbotRenderingUtils.renderAllMermaidBlocks(chatBody); } }, 600); setTimeout(() => { if (window.ChatbotRenderingUtils && typeof window.ChatbotRenderingUtils.renderAllMermaidBlocks === 'function') { window.ChatbotRenderingUtils.renderAllMermaidBlocks(chatBody); } }, 1200); } } else { console.warn('ChatbotUI: ChatbotRenderingUtils.renderAllMermaidBlocks is not available.'); } // Phase 4.1: 表格滚动性能优化 - 使用 IntersectionObserver 优先，回退到 requestAnimationFrame 节流 setupChatbotTableScrollHints(chatBody); } const input = document.getElementById('chatbot-input'); const sendBtn = document.getElementById('chatbot-send-btn'); const stopBtn = document.getElementById('chatbot-stop-btn'); if (input && sendBtn) { input.disabled = window.ChatbotCore.isChatbotLoading; sendBtn.disabled = window.ChatbotCore.isChatbotLoading; if (window.ChatbotCore.isChatbotLoading) { sendBtn.style.display = 'none'; if (stopBtn) stopBtn.style.display = 'flex'; } else { sendBtn.style.display = 'flex'; if (stopBtn) stopBtn.style.display = 'none'; } } const disclaimerDiv = document.querySelector('.chatbot-disclaimer'); if (disclaimerDiv) { const currentChatHistory = window.ChatbotCore && window.ChatbotCore.chatHistory ? window.ChatbotCore.chatHistory : []; if (currentChatHistory.length > 0) { disclaimerDiv.innerHTML = 'AI助手可能会犯错。请核实重要信息。丨删除对话记录'; const clearBtn = document.getElementById('chatbot-clear-history-btn'); if (clearBtn) { clearBtn.onclick = function() { if (confirm('确定要删除当前对话的所有记录吗？')) { if (window.ChatbotCore && typeof window.ChatbotCore.clearCurrentDocChatHistory === 'function') { const docIdToClear = window.ChatbotCore.getCurrentDocId ? window.ChatbotCore.getCurrentDocId() : 'default_doc'; window.ChatbotCore.clearCurrentDocChatHistory(updateChatbotUI); window.isPresetQuestionsCollapsed = false; if (window.presetAutoCollapseTriggeredForDoc) { delete window.presetAutoCollapseTriggeredForDoc[docIdToClear]; } } else { console.error("clearCurrentDocChatHistory function not found on ChatbotCore"); } } }; } } else { disclaimerDiv.innerHTML = 'AI助手可能会犯错。请核实重要信息。
'; } } // 将调用 _updateFloatingOptionsDisplay() 改为调用独立模块 if (window.ChatbotFloatingOptionsUI && typeof window.ChatbotFloatingOptionsUI.updateDisplay === 'function') { window.ChatbotFloatingOptionsUI.updateDisplay(); } } /** * Phase 4.1 - 表格滚动提示性能优化 * 目标：在保持现有视觉行为（滚动到最右侧隐藏渐变阴影）的前提下，减少滚动事件压力。 * * 策略： * 1. 优先使用 IntersectionObserver 观察表格中“最右侧单元格”是否完全进入视口。 * - root: table，自身作为滚动容器。 * - threshold: 1.0，仅当最后单元格完全可见时认为滚动到末尾。 * 2. 当浏览器不支持 IntersectionObserver 时，回退到 requestAnimationFrame 节流的 scroll 监听。 * 3. 每次调用都会清理旧的监听器和观察器，避免重复绑定和内存泄漏。 */ function setupChatbotTableScrollHints(chatBody) { if (!chatBody) return; const tables = chatBody.querySelectorAll('.markdown-content table'); tables.forEach(function(table) { // 清理旧的 IntersectionObserver（如有） if (table._scrollObserver && typeof table._scrollObserver.disconnect === 'function') { try { table._scrollObserver.disconnect(); } catch (e) { if (window.PerfLogger) { window.PerfLogger.warn('ChatbotUI: disconnect table._scrollObserver failed', e); } } } table._scrollObserver = null; // 清理旧的 scroll 监听器（如有） if (table._scrollListener) { table.removeEventListener('scroll', table._scrollListener); } table._scrollListener = null; // 如果浏览器支持 IntersectionObserver，则优先使用 if (window.IntersectionObserver) { let lastCell = table.querySelector('tr:last-child td:last-child'); if (!lastCell) { lastCell = table.querySelector('td:last-child, th:last-child'); } // 如果找不到可观察的单元格，则直接视为已滚动到底部（不显示渐变阴影） if (!lastCell) { table.classList.add('scrolled-to-end'); return; } const observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { // 当最后一个单元格完全进入视口时，认为滚动到了最右端 const isEnd = entry.isIntersecting && entry.intersectionRatio >= 1; if (isEnd) { table.classList.add('scrolled-to-end'); } else { table.classList.remove('scrolled-to-end'); } }); }, { root: table, threshold: 1.0 }); observer.observe(lastCell); table._scrollObserver = observer; return; } // 回退方案：使用 requestAnimationFrame 节流 scroll 事件 let scrollRAF = null; const scrollListener = function() { if (scrollRAF) return; // 若浏览器不支持 requestAnimationFrame，则直接同步执行 if (typeof window.requestAnimationFrame !== 'function') { const isScrolledToEnd = table.scrollLeft >= (table.scrollWidth - table.clientWidth - 5); if (isScrolledToEnd) { table.classList.add('scrolled-to-end'); } else { table.classList.remove('scrolled-to-end'); } return; } scrollRAF = window.requestAnimationFrame(function() { const isScrolledToEnd = table.scrollLeft >= (table.scrollWidth - table.clientWidth - 5); if (isScrolledToEnd) { table.classList.add('scrolled-to-end'); } else { table.classList.remove('scrolled-to-end'); } scrollRAF = null; }); }; table._scrollListener = scrollListener; table.addEventListener('scroll', scrollListener); // 初始检查（表格首次渲染时） scrollListener(); }); } /** * Phase 4.2 - 简单增量追加判定（纯文本场景） * 仅在追加内容较为“安全”时启用增量渲染： * - newContent 以 oldContent 为前缀（纯追加，而非回退/编辑） * - 追加部分不包含明显的结构/公式标记（如 ```、$$、\[…\] 等） * 复杂 Markdown / LaTeX 场景仍回退到完整重渲染，避免破坏结构。 */ function isChatbotSafePlainAppend(oldContent, appendedText) { if (!appendedText) return false; // 边界检查 1：若旧内容末尾处位于未闭合的块级结构中（代码块/公式等），则不做增量。 // 这里采用“保守策略”：一旦存在疑似未闭合结构，就直接回退完整渲染，以换取更高的渲染正确性。 try { if (isChatbotInsideUnclosedBlock(oldContent)) { return false; } } catch (e) { // 检测异常时同样回退完整渲染 if (window.PerfLogger) { window.PerfLogger.warn('ChatbotUI: isChatbotInsideUnclosedBlock failed, fallback to full render.', e); } return false; } // 若追加部分包含明显的代码块/公式/复杂结构标记，则不做增量 const riskyPatterns = [ /```/, // 代码块 /\$\$/, // 块级公式 /\\\[/, // \[ ... \] /\\\(/, // \( ... \) /<\/?[a-zA-Z]/, // HTML 标签 /^#{1,6}\s/m, // 标题 /^\s{0,3}[-*+]\s/m, // 无序列表 /^\s{0,3}\d+\.\s/m, // 有序列表 /^\s{0,3}>\s/m // 引用 ]; for (let i = 0; i < riskyPatterns.length; i++) { if (riskyPatterns[i].test(appendedText)) { return false; } } return true; } /** * Phase 4.2.2 - Markdown 结构边界检测 * 检测 oldContent 末尾是否位于未闭合的 Markdown 块级结构中： * - ``` fenced code block * - $$ 块级公式 * - \[ \] / \( \) LaTeX 公式包裹 * * 为保证性能： * - 优先仅分析结尾一段文本（TAIL_WINDOW），减少在极长消息上的全量扫描开销； * - 对 fenced code / $$ 使用“奇偶计数”策略；对 \[ / \] 与 \( / \) 使用“数量差值”近似判断； * - 一旦存在“不确定”或“可能未闭合”的结构，则视为不安全，回退完整渲染。 */ function isChatbotInsideUnclosedBlock(oldContent) { if (!oldContent || typeof oldContent !== 'string') return false; // 限制分析窗口，避免在超长内容上多次全量扫描 const TAIL_WINDOW = 4000; const text = oldContent.length > TAIL_WINDOW ? oldContent.slice(-TAIL_WINDOW) : oldContent; // 辅助函数：统计匹配次数 function countMatches(pattern) { const re = new RegExp(pattern, 'g'); let count = 0; while (re.exec(text) !== null) { count++; } return count; } // 1) Fenced code block: ``` ... ``` // 使用出现次数的奇偶性近似判断是否在未闭合的代码块中。 const codeFenceCount = countMatches('```'); if (codeFenceCount % 2 === 1) { return true; } // 2) Block math: $$ ... $$ const blockMathCount = countMatches('\\$\\$'); if (blockMathCount % 2 === 1) { return true; } // 3) LaTeX-style delimiters: \[ ... \], \( ... \) const openBracket = countMatches('\\\\\\['); const closeBracket = countMatches('\\\\\\]'); if (openBracket > closeBracket) { return true; } const openParen = countMatches('\\\\\\('); const closeParen = countMatches('\\\\\\)'); if (openParen > closeParen) { return true; } return false; } /** * 初始化聊天机器人浮动按钮 (FAB) 和主弹窗 (Modal) 的 UI。 * * 主要步骤： * 1. **FAB 初始化**：创建 FAB，设置样式和点击事件（打开聊天弹窗）。 * 2. **Modal 初始化**：创建 Modal，包含头部、预设区、聊天内容区、输入区等。 * - 头部：标题、全屏/位置切换/关闭按钮。 * - 主内容区：承载预设区和聊天内容区。 * - 输入区：图片添加、文本输入、发送按钮、免责声明。 * - 注入基础 CSS (滚动条、响应式、暗黑模式等)。 * 3. **浮动高级选项初始化**：调用 `_createFloatingOptionsBar` 创建选项按钮并插入到输入区。 * 4. **事件绑定**：为全屏、位置切换、关闭按钮绑定事件。 * 5. **初始UI更新**：调用 `updateChatbotUI`。 */ function initChatbotUI() { // --- FAB (浮动操作按钮) 初始化 --- let fab = document.getElementById('chatbot-fab'); if (!fab) { fab = document.createElement('div'); fab.id = 'chatbot-fab'; // 设置 FAB 的固定定位、初始位置（根据 isChatbotPositionedLeft 决定左右）和层级 fab.style.position = 'fixed'; fab.style.bottom = '32px'; if (window.isChatbotPositionedLeft) { fab.style.left = '32px'; fab.style.right = 'auto'; } else { fab.style.right = '32px'; fab.style.left = 'auto'; } fab.style.zIndex = '99999'; // FAB 内部的按钮 HTML，使用响应式尺寸和CSS变量 fab.innerHTML = ` `; document.body.appendChild(fab); } // FAB 点击事件：打开聊天窗口，默认展开预设问题，并强制重置窗口宽度 fab.onclick = function() { window.isChatbotOpen = true; window.isPresetQuestionsCollapsed = false; window.forceChatbotWidthReset = true; updateChatbotUI(); }; // --- Modal (主聊天窗口) 初始化 --- let modal = document.getElementById('chatbot-modal'); if (!modal) { modal = document.createElement('div'); modal.id = 'chatbot-modal'; // Modal 作为聊天窗口的容器，初始隐藏，通过 flex 布局控制 chatbot-window 的居中（非全屏时） modal.style.position = 'fixed'; modal.style.inset = '0'; // 等同于 top:0, left:0, bottom:0, right:0 modal.style.zIndex = '100000'; modal.style.background = 'transparent'; // 背景透明，依赖内部 chatbot-window 的背景 modal.style.display = 'none'; // 初始隐藏 modal.style.pointerEvents = 'none'; // 自身不接收鼠标事件，允许穿透 // Modal 内部的 HTML 结构 modal.innerHTML = `AI助手可能会犯错。请核实重要信息。