开始与 ${label} 对话
${highlighted}
`;
} else {
avatar.innerHTML = `
`;
}
const bubble = document.createElement('div');
bubble.className = 'msg-bubble';
if (role === 'user') {
if (content) {
const textNode = document.createElement('div');
textNode.className = 'msg-text';
textNode.style.whiteSpace = 'pre-wrap';
textNode.textContent = content;
bubble.appendChild(textNode);
}
if (attachments.length > 0) {
bubble.insertAdjacentHTML('beforeend', renderAttachmentLabels(attachments));
}
} else {
bubble.innerHTML = content ? renderMarkdown(content) : '';
if (attachments.length > 0) {
bubble.insertAdjacentHTML('beforeend', renderAttachmentLabels(attachments));
}
}
div.appendChild(avatar);
div.appendChild(bubble);
return div;
}
let renderEpoch = 0;
function toolKind(tool) {
return tool?.kind || tool?.meta?.kind || '';
}
function toolTitle(tool) {
if (tool?.meta?.title) return tool.meta.title;
return tool?.name || 'Tool';
}
function toolSubtitle(tool) {
if (tool?.meta?.subtitle) return tool.meta.subtitle;
if (toolKind(tool) === 'command_execution') {
return tool?.input?.command || '';
}
return '';
}
function stringifyToolValue(value) {
if (typeof value === 'string') return value;
if (value === null || value === undefined) return '';
try {
return JSON.stringify(value, null, 2);
} catch {
return String(value);
}
}
function toolStateLabel(tool, done) {
if (!done) return 'Running';
if (toolKind(tool) === 'command_execution' && typeof tool?.meta?.exitCode === 'number') {
return `Exit ${tool.meta.exitCode}`;
}
return 'Done';
}
function toolStateClass(tool, done) {
if (!done) return 'running';
if (toolKind(tool) === 'command_execution' && typeof tool?.meta?.exitCode === 'number' && tool.meta.exitCode !== 0) {
return 'error';
}
return 'done';
}
function applyToolSummary(summary, tool, done) {
summary.innerHTML = '';
const icon = document.createElement('span');
icon.className = `tool-call-icon ${done ? 'done' : 'running'}`;
const main = document.createElement('span');
main.className = 'tool-call-summary-main';
const label = document.createElement('span');
label.className = 'tool-call-label';
label.textContent = toolTitle(tool);
main.appendChild(label);
const subtitleText = toolSubtitle(tool);
if (subtitleText) {
const subtitle = document.createElement('span');
subtitle.className = 'tool-call-subtitle';
subtitle.textContent = subtitleText;
main.appendChild(subtitle);
}
const state = document.createElement('span');
state.className = `tool-call-state ${toolStateClass(tool, done)}`;
state.textContent = toolStateLabel(tool, done);
summary.appendChild(icon);
summary.appendChild(main);
summary.appendChild(state);
}
function buildStructuredToolSection(labelText, bodyText) {
const section = document.createElement('div');
section.className = 'tool-call-section';
const label = document.createElement('div');
label.className = 'tool-call-section-label';
label.textContent = labelText;
const pre = document.createElement('pre');
pre.className = 'tool-call-code';
pre.textContent = bodyText;
section.appendChild(label);
section.appendChild(pre);
return section;
}
function buildMsgElement(m) {
const el = createMsgElement(m.role, m.content, m.attachments || []);
if (m.role === 'assistant' && m.toolCalls && m.toolCalls.length > 0) {
const bubble = el.querySelector('.msg-bubble');
const FOLD_AT = 3;
let grouped = false;
for (const tc of m.toolCalls) {
const details = createToolCallElement(tc.id || `saved-${Math.random().toString(36).slice(2)}`, tc, true);
// 散落的 .tool-call 达到 FOLD_AT 个时，移入唯一 .tool-group
const loose = Array.from(bubble.children).filter(c => c.classList.contains('tool-call'));
if (loose.length >= FOLD_AT) {
let group = bubble.querySelector(':scope > .tool-group');
if (!group) {
group = document.createElement('details');
group.className = 'tool-group';
const gs = document.createElement('summary');
gs.className = 'tool-group-summary';
group.appendChild(gs);
const inner = document.createElement('div');
inner.className = 'tool-group-inner';
group.appendChild(inner);
bubble.insertBefore(group, bubble.firstChild);
grouped = true;
}
const inner = group.querySelector('.tool-group-inner');
loose.forEach(c => inner.appendChild(c));
_refreshGroupSummary(group);
}
bubble.appendChild(details);
}
// 结束时若出现过父目录，收尾散落项
if (grouped) {
const loose = Array.from(bubble.children).filter(c => c.classList.contains('tool-call'));
if (loose.length > 0) {
const group = bubble.querySelector(':scope > .tool-group');
if (group) {
const inner = group.querySelector('.tool-group-inner');
loose.forEach(c => inner.appendChild(c));
_refreshGroupSummary(group);
}
}
}
}
return el;
}
function renderMessages(messages, options = {}) {
renderEpoch++;
const epoch = renderEpoch;
messagesDiv.innerHTML = '';
if (messages.length === 0) {
messagesDiv.innerHTML = buildWelcomeMarkup(currentAgent);
return;
}
if (options.immediate) {
const frag = document.createDocumentFragment();
messages.forEach((message) => frag.appendChild(buildMsgElement(message)));
messagesDiv.appendChild(frag);
scrollToBottom();
return;
}
// Batch render: last 10 first, then next 20, then the rest
const batches = [];
const len = messages.length;
if (len <= 10) {
batches.push([0, len]);
} else if (len <= 30) {
batches.push([len - 10, len]);
batches.push([0, len - 10]);
} else {
batches.push([len - 10, len]);
batches.push([len - 30, len - 10]);
batches.push([0, len - 30]);
}
// Render first batch immediately
const frag0 = document.createDocumentFragment();
for (let i = batches[0][0]; i < batches[0][1]; i++) frag0.appendChild(buildMsgElement(messages[i]));
messagesDiv.appendChild(frag0);
scrollToBottom();
// Render remaining batches asynchronously, prepending each
// Use scrollHeight delta to keep current view position stable after prepend
let delay = 0;
for (let b = 1; b < batches.length; b++) {
const [start, end] = batches[b];
delay += 16;
setTimeout(() => {
if (renderEpoch !== epoch) return; // session switched, abort stale render
const prevHeight = messagesDiv.scrollHeight;
const prevScrollTop = messagesDiv.scrollTop;
const frag = document.createDocumentFragment();
for (let i = start; i < end; i++) frag.appendChild(buildMsgElement(messages[i]));
messagesDiv.insertBefore(frag, messagesDiv.firstChild);
// Compensate scrollTop so visible area stays unchanged
messagesDiv.scrollTop = prevScrollTop + (messagesDiv.scrollHeight - prevHeight);
updateScrollbar();
}, delay);
}
}
function prependHistoryMessages(messages, options = {}) {
if (!Array.isArray(messages) || messages.length === 0) return;
const preserveScroll = options.preserveScroll !== false;
const skipScrollbar = options.skipScrollbar === true;
const welcome = messagesDiv.querySelector('.welcome-msg');
if (welcome) welcome.remove();
const frag = document.createDocumentFragment();
messages.forEach((m) => frag.appendChild(buildMsgElement(m)));
if (!preserveScroll) {
messagesDiv.insertBefore(frag, messagesDiv.firstChild);
if (!skipScrollbar) updateScrollbar();
return;
}
const prevHeight = messagesDiv.scrollHeight;
const prevScrollTop = messagesDiv.scrollTop;
messagesDiv.insertBefore(frag, messagesDiv.firstChild);
messagesDiv.scrollTop = prevScrollTop + (messagesDiv.scrollHeight - prevHeight);
if (!skipScrollbar) updateScrollbar();
}
function normalizeAskUserInput(input) {
if (input === null || input === undefined) return null;
if (typeof input === 'string') {
const trimmed = input.trim();
if (!trimmed) return null;
try {
return JSON.parse(trimmed);
} catch {
return null;
}
}
return input;
}
function extractAskUserQuestions(input) {
const parsed = normalizeAskUserInput(input);
if (!parsed || !Array.isArray(parsed.questions)) return [];
return parsed.questions;
}
function appendAskOptionToInput(question, option) {
const header = (question?.header || '').trim() || '问题';
const line = `【${header}】${option?.label || ''}`;
const current = msgInput.value.trim();
msgInput.value = current ? `${current}\n${line}` : line;
autoResize();
msgInput.focus();
}
function createAskUserQuestionView(questions) {
const wrapper = document.createElement('div');
wrapper.className = 'ask-user-question';
questions.forEach((q, idx) => {
const card = document.createElement('div');
card.className = 'ask-question-card';
const header = document.createElement('div');
header.className = 'ask-question-header';
header.textContent = `${idx + 1}. ${q.header || '问题'}`;
card.appendChild(header);
const body = document.createElement('div');
body.className = 'ask-question-text';
body.textContent = q.question || '';
card.appendChild(body);
if (Array.isArray(q.options) && q.options.length > 0) {
const hasDesc = q.options.some(o => o.description);
// 左右分栏容器
const layout = document.createElement('div');
layout.className = 'ask-options-layout' + (hasDesc ? ' has-preview' : '');
const opts = document.createElement('div');
opts.className = 'ask-question-options';
// 右侧预览区（仅在有 description 时创建）
const preview = hasDesc ? document.createElement('div') : null;
if (preview) {
preview.className = 'ask-option-preview';
// 默认显示第一项
preview.textContent = q.options[0].description || '';
}
// 当前选中项（移动端 tap-to-preview 状态）
let selectedOpt = null;
let selectedBtn = null;
q.options.forEach((opt, i) => {
const item = document.createElement('button');
item.type = 'button';
item.className = 'ask-option-item';
const title = document.createElement('div');
title.className = 'ask-option-label';
title.textContent = `${i + 1}. ${opt.label || ''}`;
item.appendChild(title);
// 桌面：hover 切换预览
if (preview) {
item.addEventListener('mouseenter', () => {
preview.textContent = opt.description || '';
});
}
item.addEventListener('click', (e) => {
const isTouch = item.dataset.touchActivated === '1';
item.dataset.touchActivated = '';
if (isTouch) {
// 移动端：第一次 tap = 选中预览，不发送
if (selectedBtn !== item) {
if (selectedBtn) selectedBtn.classList.remove('ask-option-selected');
selectedBtn = item;
selectedOpt = opt;
item.classList.add('ask-option-selected');
if (preview) preview.textContent = opt.description || '';
return;
}
// 第二次 tap 同一项 = 发送
}
// 桌面直接发送
appendAskOptionToInput(q, opt);
});
item.addEventListener('touchstart', () => {
item.dataset.touchActivated = '1';
}, { passive: true });
opts.appendChild(item);
});
layout.appendChild(opts);
if (preview) {
layout.appendChild(preview);
// 预览区最小高度 = 左侧选项列表总高度（渲染后同步）
requestAnimationFrame(() => {
preview.style.minHeight = opts.offsetHeight + 'px';
});
}
// 移动端确认按钮
if (hasDesc) {
const confirmBtn = document.createElement('button');
confirmBtn.type = 'button';
confirmBtn.className = 'ask-confirm-btn';
confirmBtn.textContent = '确认选择';
confirmBtn.addEventListener('click', () => {
if (selectedOpt) {
appendAskOptionToInput(q, selectedOpt);
} else if (q.options.length > 0) {
appendAskOptionToInput(q, q.options[0]);
}
});
layout.appendChild(confirmBtn);
}
card.appendChild(layout);
}
wrapper.appendChild(card);
});
return wrapper;
}
function buildToolContentElement(name, input) {
const tool = typeof name === 'object' && name !== null ? name : { name, input };
const effectiveName = tool.name || name;
const effectiveInput = tool.input !== undefined ? tool.input : input;
const effectiveResult = tool.result;
const kind = toolKind(tool);
if (effectiveName === 'AskUserQuestion') {
const questions = extractAskUserQuestions(effectiveInput);
if (questions.length > 0) {
return createAskUserQuestionView(questions);
}
}
if (kind === 'command_execution') {
const wrapper = document.createElement('div');
wrapper.className = 'tool-call-content command';
const stack = document.createElement('div');
stack.className = 'tool-call-structured';
const commandText = effectiveInput?.command || tool?.meta?.subtitle || '';
if (commandText) stack.appendChild(buildStructuredToolSection('Command', commandText));
if (effectiveResult) {
stack.appendChild(buildStructuredToolSection('Output', stringifyToolValue(effectiveResult)));
} else if (!tool.done) {
const empty = document.createElement('div');
empty.className = 'tool-call-empty';
empty.textContent = '等待命令输出…';
stack.appendChild(empty);
}
wrapper.appendChild(stack);
return wrapper;
}
if (kind === 'reasoning') {
const content = document.createElement('div');
content.className = 'tool-call-content reasoning';
const text = stringifyToolValue(effectiveResult || effectiveInput);
content.innerHTML = text ? renderMarkdown(text) : 'codex 的登录态与 ~/.codex/config.toml。这适合你已经在终端里正常使用 Codex 的场景。
${summaryBase}