'); } } // ===================================================================== // Chat Module // ===================================================================== let isPolling = false; let pollGeneration = 0; // incremented on each restart to cancel stale poll loops let loadingContainers = {}; let activeStreams = {}; // request_id -> EventSource let isComposing = false; let appConfig = { use_agent: false, title: 'CowAgent', subtitle: '', providers: {}, api_bases: {} }; const SESSION_ID_KEY = 'cow_session_id'; function generateSessionId() { return 'session_' + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) ); } // Restore session_id from localStorage so conversation history survives page refresh. // A new id is only generated when the user explicitly starts a new chat. function loadOrCreateSessionId() { const stored = localStorage.getItem(SESSION_ID_KEY); if (stored) return stored; const fresh = generateSessionId(); localStorage.setItem(SESSION_ID_KEY, fresh); return fresh; } let sessionId = loadOrCreateSessionId(); // ---- Conversation history state ---- let historyPage = 0; // last page fetched (0 = nothing fetched yet) let historyHasMore = false; let historyLoading = false; fetch('/config').then(r => r.json()).then(data => { if (data.status === 'success') { appConfig = data; const title = data.title || 'CowAgent'; document.getElementById('welcome-title').textContent = title; initConfigView(data); } loadHistory(1); }).catch(() => { loadHistory(1); }); // Start polling immediately so scheduler/push messages are received at any time startPolling(); const chatInput = document.getElementById('chat-input'); const sendBtn = document.getElementById('send-btn'); const messagesDiv = document.getElementById('chat-messages'); const fileInput = document.getElementById('file-input'); const attachmentPreview = document.getElementById('attachment-preview'); // Pending attachments: [{file_path, file_name, file_type, preview_url}] // Items with _uploading=true are still in flight. let pendingAttachments = []; let uploadingCount = 0; // Input history (like terminal arrow-key recall) const inputHistory = []; let historyIdx = -1; let historySavedDraft = ''; function updateSendBtnState() { sendBtn.disabled = uploadingCount > 0 || (!chatInput.value.trim() && pendingAttachments.length === 0); } function renderAttachmentPreview() { if (pendingAttachments.length === 0) { attachmentPreview.classList.add('hidden'); attachmentPreview.innerHTML = ''; updateSendBtnState(); return; } attachmentPreview.classList.remove('hidden'); attachmentPreview.innerHTML = pendingAttachments.map((att, idx) => { if (att._uploading) { return `
${escapeHtml(att.file_name)}
`;
}
if (att.file_type === 'image') {
return `
${escapeHtml(att.file_name)}
`;
}).join('');
updateSendBtnState();
}
function removeAttachment(idx) {
if (pendingAttachments[idx]?._uploading) return;
pendingAttachments.splice(idx, 1);
renderAttachmentPreview();
}
async function handleFileSelect(files) {
if (!files || files.length === 0) return;
const tasks = [];
for (const file of files) {
const placeholder = { file_name: file.name, file_type: 'file', _uploading: true };
pendingAttachments.push(placeholder);
uploadingCount++;
renderAttachmentPreview();
tasks.push((async () => {
const formData = new FormData();
formData.append('file', file);
formData.append('session_id', sessionId);
try {
const resp = await fetch('/upload', { method: 'POST', body: formData });
const data = await resp.json();
if (data.status === 'success') {
placeholder.file_path = data.file_path;
placeholder.file_name = data.file_name;
placeholder.file_type = data.file_type;
placeholder.preview_url = data.preview_url;
delete placeholder._uploading;
} else {
const i = pendingAttachments.indexOf(placeholder);
if (i !== -1) pendingAttachments.splice(i, 1);
}
} catch (e) {
console.error('Upload failed:', e);
const i = pendingAttachments.indexOf(placeholder);
if (i !== -1) pendingAttachments.splice(i, 1);
}
uploadingCount--;
renderAttachmentPreview();
})());
}
await Promise.all(tasks);
}
fileInput.addEventListener('change', function() {
handleFileSelect(this.files);
this.value = '';
});
// Drag-and-drop support on chat input area
const chatInputArea = chatInput.closest('.flex-shrink-0');
chatInputArea.addEventListener('dragover', (e) => { e.preventDefault(); e.stopPropagation(); chatInputArea.classList.add('drag-over'); });
chatInputArea.addEventListener('dragleave', (e) => { e.preventDefault(); e.stopPropagation(); chatInputArea.classList.remove('drag-over'); });
chatInputArea.addEventListener('drop', (e) => {
e.preventDefault(); e.stopPropagation();
chatInputArea.classList.remove('drag-over');
if (e.dataTransfer.files.length) handleFileSelect(e.dataTransfer.files);
});
// Paste image support
chatInput.addEventListener('paste', (e) => {
const items = e.clipboardData?.items;
if (!items) return;
const files = [];
for (const item of items) {
if (item.kind === 'file') {
files.push(item.getAsFile());
}
}
if (files.length) {
e.preventDefault();
handleFileSelect(files);
}
});
chatInput.addEventListener('compositionstart', () => { isComposing = true; });
chatInput.addEventListener('compositionend', () => { setTimeout(() => { isComposing = false; }, 100); });
// ── Slash Command Menu ───────────────────────────────────────
const SLASH_COMMANDS = [
{ cmd: '/help', desc: '显示命令帮助' },
{ cmd: '/status', desc: '查看运行状态' },
{ cmd: '/context', desc: '查看对话上下文' },
{ cmd: '/context clear', desc: '清除对话上下文' },
{ cmd: '/skill list', desc: '查看已安装技能' },
{ cmd: '/skill list --remote', desc: '浏览技能广场' },
{ cmd: '/skill search ', desc: '搜索技能' },
{ cmd: '/skill install ', desc: '安装技能 (名称或 GitHub URL)' },
{ cmd: '/skill uninstall ', desc: '卸载技能' },
{ cmd: '/skill info ', desc: '查看技能详情' },
{ cmd: '/skill enable ', desc: '启用技能' },
{ cmd: '/skill disable ', desc: '禁用技能' },
{ cmd: '/knowledge', desc: '查看知识库统计' },
{ cmd: '/knowledge list', desc: '查看知识库文件树' },
{ cmd: '/knowledge on', desc: '开启知识库' },
{ cmd: '/knowledge off', desc: '关闭知识库' },
{ cmd: '/config', desc: '查看当前配置' },
{ cmd: '/logs', desc: '查看最近日志' },
{ cmd: '/version', desc: '查看版本' },
];
const slashMenu = document.getElementById('slash-menu');
let slashActiveIdx = 0;
let slashFiltered = [];
let slashJustSelected = false;
let slashLastFilter = '';
let slashLastMouseX = -1;
let slashLastMouseY = -1;
function showSlashMenu(filter) {
const q = filter.toLowerCase();
if (q === slashLastFilter && !slashMenu.classList.contains('hidden')) return;
slashLastFilter = q;
const newFiltered = SLASH_COMMANDS.filter(c => c.cmd.toLowerCase().startsWith(q));
if (newFiltered.length === 0) {
hideSlashMenu();
return;
}
const changed = newFiltered.length !== slashFiltered.length ||
newFiltered.some((c, i) => c.cmd !== slashFiltered[i]?.cmd);
slashFiltered = newFiltered;
if (changed) slashActiveIdx = 0;
slashActiveIdx = Math.min(slashActiveIdx, slashFiltered.length - 1);
slashNavByKeyboard = true;
renderSlashItems();
slashMenu.classList.remove('hidden');
}
function hideSlashMenu() {
slashMenu.classList.add('hidden');
slashMenu.innerHTML = '';
slashFiltered = [];
slashActiveIdx = -1;
slashLastFilter = '';
slashNavByKeyboard = false;
slashLastMouseX = -1;
slashLastMouseY = -1;
}
function isSlashMenuVisible() {
return !slashMenu.classList.contains('hidden') && slashFiltered.length > 0;
}
function renderSlashItems() {
slashMenu.innerHTML =
'' +
slashFiltered.map((c, i) =>
``
).join('');
const activeEl = slashMenu.querySelector('.slash-menu-item.active');
if (activeEl) activeEl.scrollIntoView({ block: 'nearest' });
}
// Delegated events on the persistent slashMenu container (not destroyed by innerHTML)
// Use coordinate comparison to distinguish real mouse movement from DOM-rebuild phantom events.
slashMenu.addEventListener('mousemove', (e) => {
if (e.clientX === slashLastMouseX && e.clientY === slashLastMouseY) return;
slashLastMouseX = e.clientX;
slashLastMouseY = e.clientY;
if (!slashNavByKeyboard) return;
slashNavByKeyboard = false;
const item = e.target.closest('.slash-menu-item');
if (!item) return;
const idx = parseInt(item.dataset.idx);
if (idx === slashActiveIdx) return;
slashActiveIdx = idx;
slashMenu.querySelectorAll('.slash-menu-item').forEach(el => {
el.classList.toggle('active', parseInt(el.dataset.idx) === idx);
});
});
slashMenu.addEventListener('mouseover', (e) => {
if (slashNavByKeyboard) return;
const item = e.target.closest('.slash-menu-item');
if (!item) return;
const idx = parseInt(item.dataset.idx);
if (idx === slashActiveIdx) return;
slashActiveIdx = idx;
slashMenu.querySelectorAll('.slash-menu-item').forEach(el => {
el.classList.toggle('active', parseInt(el.dataset.idx) === idx);
});
});
slashMenu.addEventListener('mousedown', (e) => {
const item = e.target.closest('.slash-menu-item');
if (!item) return;
e.preventDefault();
selectSlashCommand(parseInt(item.dataset.idx));
});
function selectSlashCommand(idx) {
if (idx < 0 || idx >= slashFiltered.length) return;
const chosen = slashFiltered[idx].cmd;
slashJustSelected = true;
chatInput.value = chosen;
chatInput.dispatchEvent(new Event('input'));
hideSlashMenu();
chatInput.focus();
chatInput.selectionStart = chatInput.selectionEnd = chosen.length;
}
chatInput.addEventListener('input', function() {
this.style.height = '42px';
const scrollH = this.scrollHeight;
const newH = Math.min(scrollH, 180);
this.style.height = newH + 'px';
this.style.overflowY = scrollH > 180 ? 'auto' : 'hidden';
updateSendBtnState();
const val = this.value;
if (slashJustSelected) {
slashJustSelected = false;
} else if (val.startsWith('/')) {
showSlashMenu(val);
} else {
hideSlashMenu();
}
});
chatInput.addEventListener('keydown', function(e) {
if (e.keyCode === 229 || e.isComposing || isComposing) return;
if (isSlashMenuVisible()) {
if (e.key === 'ArrowDown') {
e.preventDefault();
slashNavByKeyboard = true;
slashActiveIdx = Math.min(slashActiveIdx + 1, slashFiltered.length - 1);
renderSlashItems();
return;
}
if (e.key === 'ArrowUp') {
e.preventDefault();
slashNavByKeyboard = true;
slashActiveIdx = Math.max(slashActiveIdx - 1, 0);
renderSlashItems();
return;
}
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
e.preventDefault();
selectSlashCommand(slashActiveIdx);
return;
}
if (e.key === 'Escape') {
e.preventDefault();
hideSlashMenu();
return;
}
if (e.key === 'Tab') {
e.preventDefault();
selectSlashCommand(slashActiveIdx);
return;
}
}
// Arrow-key history recall (only when input is empty or already browsing history)
if (e.key === 'ArrowUp' && inputHistory.length > 0 && !isSlashMenuVisible()) {
const curVal = this.value.trim();
const isSingleLine = !this.value.includes('\n');
if (isSingleLine && (curVal === '' || historyIdx >= 0)) {
e.preventDefault();
if (historyIdx < 0) {
historySavedDraft = this.value;
historyIdx = inputHistory.length - 1;
} else if (historyIdx > 0) {
historyIdx--;
}
this.value = inputHistory[historyIdx];
slashJustSelected = true;
this.dispatchEvent(new Event('input'));
hideSlashMenu();
this.selectionStart = this.selectionEnd = this.value.length;
return;
}
}
if (e.key === 'ArrowDown' && historyIdx >= 0 && !isSlashMenuVisible()) {
const isSingleLine = !this.value.includes('\n');
if (isSingleLine) {
e.preventDefault();
if (historyIdx < inputHistory.length - 1) {
historyIdx++;
this.value = inputHistory[historyIdx];
} else {
historyIdx = -1;
this.value = historySavedDraft;
historySavedDraft = '';
}
slashJustSelected = true;
this.dispatchEvent(new Event('input'));
hideSlashMenu();
this.selectionStart = this.selectionEnd = this.value.length;
return;
}
}
if ((e.ctrlKey || e.shiftKey) && e.key === 'Enter') {
const start = this.selectionStart;
const end = this.selectionEnd;
this.value = this.value.substring(0, start) + '\n' + this.value.substring(end);
this.selectionStart = this.selectionEnd = start + 1;
this.dispatchEvent(new Event('input'));
e.preventDefault();
} else if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
sendMessage();
e.preventDefault();
}
});
chatInput.addEventListener('blur', () => {
setTimeout(hideSlashMenu, 150);
});
document.querySelectorAll('.example-card').forEach(card => {
card.addEventListener('click', () => {
// data-send overrides the visible text (e.g. show "查看全部命令" but send "/help")
const sendText = card.dataset.send;
if (sendText) {
chatInput.value = sendText;
chatInput.dispatchEvent(new Event('input'));
chatInput.focus();
return;
}
const textEl = card.querySelector('[data-i18n*="text"]');
if (textEl) {
chatInput.value = textEl.textContent;
chatInput.dispatchEvent(new Event('input'));
chatInput.focus();
}
});
});
function sendMessage() {
const text = chatInput.value.trim();
if (!text && pendingAttachments.length === 0) return;
if (text) {
inputHistory.push(text);
historyIdx = -1;
historySavedDraft = '';
}
const ws = document.getElementById('welcome-screen');
if (ws) ws.remove();
const timestamp = new Date();
const attachments = [...pendingAttachments];
addUserMessage(text, timestamp, attachments);
const loadingEl = addLoadingIndicator();
chatInput.value = '';
chatInput.style.height = '42px';
chatInput.style.overflowY = 'hidden';
pendingAttachments = [];
renderAttachmentPreview();
sendBtn.disabled = true;
const body = { session_id: sessionId, message: text, stream: true, timestamp: timestamp.toISOString() };
if (attachments.length > 0) {
body.attachments = attachments.map(a => ({
file_path: a.file_path,
file_name: a.file_name,
file_type: a.file_type,
}));
}
const MAX_RETRIES = 2;
const RETRY_DELAY_MS = 1000;
function postWithRetry(attempt) {
fetch('/message', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
if (data.stream) {
startSSE(data.request_id, loadingEl, timestamp);
} else {
loadingContainers[data.request_id] = loadingEl;
}
} else {
loadingEl.remove();
addBotMessage(t('error_send'), new Date());
}
})
.catch(err => {
if (err.name === 'AbortError') {
loadingEl.remove();
addBotMessage(t('error_timeout'), new Date());
return;
}
if (attempt < MAX_RETRIES) {
console.warn(`[sendMessage] attempt ${attempt + 1} failed, retrying...`, err);
setTimeout(() => postWithRetry(attempt + 1), RETRY_DELAY_MS * (attempt + 1));
return;
}
loadingEl.remove();
addBotMessage(t('error_send'), new Date());
});
}
postWithRetry(0);
}
function startSSE(requestId, loadingEl, timestamp) {
let botEl = null;
let stepsEl = null; // .agent-steps (thinking summaries + tool indicators)
let contentEl = null; // .answer-content (final streaming answer)
let mediaEl = null; // .media-content (images & file attachments)
let accumulatedText = '';
let currentToolEl = null;
let currentReasoningEl = null; // live reasoning bubble
let reasoningText = '';
let done = false;
const MAX_RECONNECTS = 10;
const RECONNECT_BASE_MS = 1000;
let reconnectCount = 0;
function ensureBotEl() {
if (botEl) return;
if (loadingEl) { loadingEl.remove(); loadingEl = null; }
botEl = document.createElement('div');
botEl.className = 'flex gap-3 px-4 sm:px-6 py-3';
botEl.dataset.requestId = requestId;
botEl.innerHTML = `
${formatTime(timestamp)}
${renderMarkdown(accumulatedText.trim())}
`;
stepsEl.appendChild(frozenEl);
accumulatedText = '';
contentEl.innerHTML = '';
scrollChatToBottom();
}
} else if (item.type === 'tool_start') {
ensureBotEl();
if (currentReasoningEl) {
if (reasoningText.trim().replace(/\n+/g, ' ').length <= 80)
currentReasoningEl.classList.add('no-expand');
currentReasoningEl = null;
reasoningText = '';
}
accumulatedText = '';
contentEl.innerHTML = '';
// Add tool execution indicator (collapsible)
currentToolEl = document.createElement('div');
currentToolEl.className = 'agent-step agent-tool-step';
const argsStr = formatToolArgs(item.arguments || {});
currentToolEl.innerHTML = `
${item.tool}
Input
${argsStr}
${isError ? 'Error' : 'Output'}
${escapeHtml(String(item.result))}`;
}
if (isError) currentToolEl.classList.add('tool-failed');
currentToolEl = null;
}
} else if (item.type === 'image') {
ensureBotEl();
const imgEl = document.createElement('img');
imgEl.src = item.content;
imgEl.alt = 'screenshot';
imgEl.style.cssText = 'max-width:600px;border-radius:8px;margin:8px 0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.1);';
imgEl.onclick = () => window.open(item.content, '_blank');
mediaEl.appendChild(imgEl);
scrollChatToBottom();
} else if (item.type === 'text') {
// Intermediate text sent before media items; display it but keep SSE open.
ensureBotEl();
contentEl.classList.remove('sse-streaming');
const textContent = item.content || accumulatedText;
if (textContent) contentEl.innerHTML = renderMarkdown(textContent);
applyHighlighting(botEl);
scrollChatToBottom();
} else if (item.type === 'video') {
ensureBotEl();
const wrapper = document.createElement('div');
wrapper.innerHTML = _buildVideoHtml(item.content);
mediaEl.appendChild(wrapper.firstElementChild || wrapper);
scrollChatToBottom();
} else if (item.type === 'file') {
ensureBotEl();
const fileName = item.file_name || item.content.split('/').pop();
const fileEl = document.createElement('a');
fileEl.href = item.content;
fileEl.download = fileName;
fileEl.target = '_blank';
fileEl.className = 'file-attachment';
fileEl.style.cssText = 'display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin:8px 0;border-radius:8px;background:var(--bg-secondary,#f3f4f6);color:var(--text-primary,#374151);text-decoration:none;font-size:14px;border:1px solid var(--border-color,#e5e7eb);';
fileEl.innerHTML = ` ${fileName}`;
mediaEl.appendChild(fileEl);
scrollChatToBottom();
} else if (item.type === 'phase') {
// Coarse progress (e.g. cow install-browser); must not close SSE (unlike "done")
ensureBotEl();
const wrap = document.createElement('div');
wrap.className = 'text-xs sm:text-sm text-slate-600 dark:text-slate-400 border-l-2 border-primary-400 pl-2 py-1 my-0.5';
wrap.textContent = String(item.content || '');
stepsEl.appendChild(wrap);
scrollChatToBottom();
} else if (item.type === 'done') {
done = true;
es.close();
delete activeStreams[requestId];
// item.content may be empty when "done" is only a stream-close signal after media.
const finalText = item.content || accumulatedText;
if (!botEl && finalText) {
if (loadingEl) { loadingEl.remove(); loadingEl = null; }
addBotMessage(finalText, new Date((item.timestamp || Date.now() / 1000) * 1000), requestId);
} else if (botEl) {
contentEl.classList.remove('sse-streaming');
// Only update text content when there is something new to show.
if (finalText) contentEl.innerHTML = renderMarkdown(finalText);
applyHighlighting(botEl);
}
scrollChatToBottom();
} else if (item.type === 'error') {
done = true;
es.close();
delete activeStreams[requestId];
if (loadingEl) { loadingEl.remove(); loadingEl = null; }
addBotMessage(t('error_send'), new Date());
}
};
es.onerror = function() {
es.close();
delete activeStreams[requestId];
if (done) return;
if (currentReasoningEl) {
if (reasoningText.trim().replace(/\n+/g, ' ').length <= 80)
currentReasoningEl.classList.add('no-expand');
currentReasoningEl = null;
reasoningText = '';
}
if (reconnectCount < MAX_RECONNECTS) {
reconnectCount++;
const delay = Math.min(RECONNECT_BASE_MS * reconnectCount, 5000);
console.warn(`[SSE] connection lost for ${requestId}, reconnecting in ${delay}ms (attempt ${reconnectCount}/${MAX_RECONNECTS})`);
setTimeout(connect, delay);
return;
}
// Exhausted retries, show whatever we have
if (loadingEl) { loadingEl.remove(); loadingEl = null; }
if (!botEl) {
addBotMessage(t('error_send'), new Date());
} else if (accumulatedText) {
contentEl.classList.remove('sse-streaming');
contentEl.innerHTML = renderMarkdown(accumulatedText);
applyHighlighting(botEl);
bindChatKnowledgeLinks(botEl);
}
};
}
connect();
}
function startPolling() {
const gen = ++pollGeneration;
isPolling = true;
let pollInFlight = false;
function poll() {
if (gen !== pollGeneration) return;
if (pollInFlight) return;
if (document.hidden) { setTimeout(poll, 10000); return; }
pollInFlight = true;
fetch('/poll', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ session_id: sessionId })
})
.then(r => r.json())
.then(data => {
pollInFlight = false;
if (gen !== pollGeneration) return;
if (data.status === 'success' && data.has_content) {
const rid = data.request_id;
if (loadingContainers[rid]) {
loadingContainers[rid].remove();
delete loadingContainers[rid];
}
const welcomeScreen = document.getElementById('welcome-screen');
if (welcomeScreen) welcomeScreen.remove();
addBotMessage(data.content, new Date(data.timestamp * 1000), rid);
scrollChatToBottom();
}
const delay = (data.status === 'success' && data.has_content) ? 5000 : 10000;
setTimeout(poll, delay);
})
.catch(() => { pollInFlight = false; setTimeout(poll, 10000); });
}
poll();
}
function createUserMessageEl(content, timestamp, attachments) {
const el = document.createElement('div');
el.className = 'flex justify-end px-4 sm:px-6 py-3';
let attachHtml = '';
if (attachments && attachments.length > 0) {
const items = attachments.map(a => {
if (a.file_type === 'image') {
return ` ${escapeHtml(a.file_name)}
`;
}).join('');
attachHtml = ``;
}
const textHtml = content ? renderMarkdown(content) : '';
el.innerHTML = `
${attachHtml}${textHtml}
${formatTime(timestamp)}
${escapeHtml(tc.name || '')}
Input
${argsStr}
Output
${resultStr}
${escapeHtml(truncated)}
${renderMarkdown(full)}
${renderMarkdown(step.content)}
${escapeHtml(step.name || '')}
Input
${argsStr}
Output
${resultStr}
${stepsHtml ? `
${stepsHtml}
` : ''}
${renderMarkdown(displayContent)}
${formatTime(timestamp)}
${appConfig.title || 'CowAgent'}
${t('welcome_subtitle')}
${t('example_sys_text')}
${t('example_task_text')}
${t('example_code_text')}
${t('example_knowledge_text')}
${t('example_skill_text')}
${t('example_web_text')}
${escapeHtml(tool.name)}
${escapeHtml(tool.description || '--')}
${escapeHtml(sk.display_name || sk.name)}
${escapeHtml(sk.description || '--')}
`;
if (page > 1) pagHtml += ``;
if (page < totalPages) pagHtml += ``;
pagHtml += '
';
pagEl.innerHTML = pagHtml;
}).catch(() => {});
}
function openMemoryFile(filename) {
fetch(`/api/memory/content?filename=${encodeURIComponent(filename)}`).then(r => r.json()).then(data => {
if (data.status !== 'success') return;
document.getElementById('memory-panel-list').classList.add('hidden');
const panel = document.getElementById('memory-panel-viewer');
document.getElementById('memory-viewer-title').textContent = filename;
document.getElementById('memory-viewer-content').innerHTML = renderMarkdown(data.content || '');
panel.classList.remove('hidden');
applyHighlighting(panel);
}).catch(() => {});
}
function closeMemoryViewer() {
document.getElementById('memory-panel-viewer').classList.add('hidden');
document.getElementById('memory-panel-list').classList.remove('hidden');
}
// =====================================================================
// Custom Confirm Dialog
// =====================================================================
function showConfirmDialog({ title, message, okText, cancelText, onConfirm }) {
const overlay = document.getElementById('confirm-dialog-overlay');
document.getElementById('confirm-dialog-title').textContent = title || '';
document.getElementById('confirm-dialog-message').textContent = message || '';
document.getElementById('confirm-dialog-ok').textContent = okText || 'OK';
document.getElementById('confirm-dialog-cancel').textContent = cancelText || t('channels_cancel');
function cleanup() {
overlay.classList.add('hidden');
okBtn.removeEventListener('click', onOk);
cancelBtn.removeEventListener('click', onCancel);
overlay.removeEventListener('click', onOverlayClick);
}
function onOk() { cleanup(); if (onConfirm) onConfirm(); }
function onCancel() { cleanup(); }
function onOverlayClick(e) { if (e.target === overlay) cleanup(); }
const okBtn = document.getElementById('confirm-dialog-ok');
const cancelBtn = document.getElementById('confirm-dialog-cancel');
okBtn.addEventListener('click', onOk);
cancelBtn.addEventListener('click', onCancel);
overlay.addEventListener('click', onOverlayClick);
overlay.classList.remove('hidden');
}
// =====================================================================
// Channels View
// =====================================================================
let channelsData = [];
function loadChannelsView() {
const container = document.getElementById('channels-content');
container.innerHTML = `
Loading...
`;
fetch('/api/channels').then(r => r.json()).then(data => {
if (data.status !== 'success') return;
channelsData = data.channels || [];
renderActiveChannels();
}).catch(() => {
container.innerHTML = 'Failed to load channels
'; }); } function renderActiveChannels() { stopWeixinQrPoll(); stopWeixinStatusPoll(); const container = document.getElementById('channels-content'); container.innerHTML = ''; closeAddChannelPanel(); const activeChannels = channelsData.filter(ch => ch.active); if (activeChannels.length === 0) { container.innerHTML = `${t('channels_empty')}
${t('channels_empty_desc')}
${escapeHtml(label)}
${statusText}
${escapeHtml(ch.name)}
${t('wecom_scan_desc')}
${fieldsHtml}
` : ''}`;
container.appendChild(card);
bindSecretFieldEvents(card);
if (weixinWaiting) {
startWeixinActiveStatusPoll();
}
});
}
function buildChannelFieldsHtml(chName, fields) {
let html = '';
fields.forEach(f => {
const inputId = `ch-${chName}-${f.key}`;
let inputHtml = '';
if (f.type === 'bool') {
const checked = f.value ? 'checked' : '';
inputHtml = ``;
} else if (f.type === 'secret') {
inputHtml = ``;
} else {
const inputType = f.type === 'number' ? 'number' : 'text';
inputHtml = ``;
}
html += `
${inputHtml}
`;
});
return html;
}
function bindSecretFieldEvents(container) {
container.querySelectorAll('input[data-masked="1"]').forEach(inp => {
inp.addEventListener('focus', function() {
if (this.dataset.masked === '1') {
this.value = '';
this.dataset.masked = '';
this.classList.remove('cfg-key-masked');
}
});
});
}
function showChannelStatus(chName, msgKey, isError) {
const el = document.getElementById(`ch-status-${chName}`);
if (!el) return;
el.textContent = t(msgKey);
el.classList.toggle('text-red-500', !!isError);
el.classList.toggle('text-primary-500', !isError);
el.classList.remove('opacity-0');
setTimeout(() => el.classList.add('opacity-0'), 2500);
}
function saveChannelConfig(chName) {
const card = document.getElementById(`channel-card-${chName}`);
if (!card) return;
const updates = {};
card.querySelectorAll('input[data-ch="' + chName + '"]').forEach(inp => {
const key = inp.dataset.field;
if (inp.type === 'checkbox') {
updates[key] = inp.checked;
} else {
if (inp.dataset.masked === '1') return;
updates[key] = inp.value;
}
});
const btn = document.getElementById(`ch-save-${chName}`);
if (btn) btn.disabled = true;
fetch('/api/channels', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'save', channel: chName, config: updates })
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
showChannelStatus(chName, data.restarted ? 'channels_restarted' : 'channels_saved', false);
} else {
showChannelStatus(chName, 'channels_save_error', true);
}
})
.catch(() => showChannelStatus(chName, 'channels_save_error', true))
.finally(() => { if (btn) btn.disabled = false; });
}
function disconnectChannel(chName) {
const ch = channelsData.find(c => c.name === chName);
const label = ch ? ((typeof ch.label === 'object') ? (ch.label[currentLang] || ch.label.en) : ch.label) : chName;
showConfirmDialog({
title: t('channels_disconnect'),
message: t('channels_disconnect_confirm'),
okText: t('channels_disconnect'),
cancelText: t('channels_cancel'),
onConfirm: () => {
fetch('/api/channels', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ action: 'disconnect', channel: chName })
})
.then(r => r.json())
.then(data => {
if (data.status === 'success') {
if (ch) ch.active = false;
renderActiveChannels();
}
})
.catch(() => {});
}
});
}
// --- Add channel panel ---
function openAddChannelPanel() {
const panel = document.getElementById('channels-add-panel');
const activeNames = new Set(channelsData.filter(c => c.active).map(c => c.name));
const available = channelsData.filter(c => !activeNames.has(c.name));
const content = document.getElementById('channels-content');
if (activeNames.size === 0 && content) content.classList.add('hidden');
if (available.length === 0) {
panel.innerHTML = `${currentLang === 'zh' ? '所有通道均已接入' : 'All channels are already connected'}
${t('channels_add')}
--
${t('weixin_scan_loading')}
${t('weixin_scan_loading')}
${t('weixin_scan_fail')}: ${data.message || ''}
`; return; } renderWeixinQr(data.qr_image || data.qrcode_url, 'waiting'); if (data.source === 'channel') { startWeixinActiveStatusPoll(); } else { pollWeixinQrStatus(); } }) .catch(() => { const panel = document.getElementById('weixin-qr-panel'); if (panel) panel.innerHTML = `${t('weixin_scan_fail')}
`; }); } function renderWeixinQr(qrcodeUrl, status) { const panel = document.getElementById('weixin-qr-panel'); if (!panel) return; let statusText = t('weixin_scan_waiting'); let statusColor = 'text-slate-500 dark:text-slate-400'; if (status === 'scanned') { statusText = t('weixin_scan_scanned'); statusColor = 'text-primary-500'; } else if (status === 'expired') { statusText = t('weixin_scan_expired'); statusColor = 'text-amber-500'; } else if (status === 'confirmed') { statusText = t('weixin_scan_success'); statusColor = 'text-primary-500'; } panel.innerHTML = `${t('weixin_scan_title')}
${t('weixin_scan_desc')}
${statusText}
${t('weixin_qr_tip')}
${t('weixin_scan_success')}
${t('wecom_scan_desc')}
${buildChannelFieldsHtml('wecom_bot', ch ? ch.fields || [] : [])}
`;
bindSecretFieldEvents(content);
actions.classList.remove('hidden');
}
}
function startWecomBotAuth() {
const statusEl = document.getElementById('wecom-scan-status');
ensureWecomSdkLoaded().then(() => {
WecomAIBotSDK.openBotInfoAuthWindow({
source: WECOM_BOT_SOURCE,
onCreated: function(bot) {
if (statusEl) {
statusEl.innerHTML = `
${t('wecom_scan_success')}
${t('wecom_scan_fail')}: ${err.message || err.code || ''}
`; } } }); }).catch(err => { if (statusEl) { statusEl.innerHTML = `SDK load failed: ${err.message}
`; } }); } function connectWecomBotAfterAuth(botId, secret) { fetch('/api/channels', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'connect', channel: 'wecom_bot', config: { wecom_bot_id: botId, wecom_bot_secret: secret } }) }) .then(r => r.json()) .then(data => { if (data.status === 'success') { const ch = channelsData.find(c => c.name === 'wecom_bot'); if (ch) { ch.active = true; (ch.fields || []).forEach(f => { if (f.key === 'wecom_bot_id') f.value = botId; if (f.key === 'wecom_bot_secret') f.value = ChannelsHandler_maskSecret(secret); }); } setTimeout(() => renderActiveChannels(), 1500); } }) .catch(() => {}); } function startWecomBotAuthInCard() { const statusEl = document.getElementById('wecom-card-scan-status'); ensureWecomSdkLoaded().then(() => { WecomAIBotSDK.openBotInfoAuthWindow({ source: WECOM_BOT_SOURCE, onCreated: function(bot) { if (statusEl) { statusEl.innerHTML = `${t('wecom_scan_success')}
${t('wecom_scan_fail')}: ${err.message || err.code || ''}
`; } } }); }).catch(err => { if (statusEl) { statusEl.innerHTML = `SDK load failed: ${err.message}
`; } }); } // Initialize wecom bot panel with correct default mode when inserted into DOM document.addEventListener('DOMContentLoaded', function() { const observer = new MutationObserver(function() { const panel = document.getElementById('wecom-bot-panel'); if (panel && !panel.dataset.initialized) { panel.dataset.initialized = '1'; switchWecomBotMode(panel.dataset.defaultMode || 'scan'); } }); observer.observe(document.body, { childList: true, subtree: true }); }); // ===================================================================== // Scheduler View // ===================================================================== let tasksLoaded = false; function loadTasksView() { if (tasksLoaded) return; fetch('/api/scheduler').then(r => r.json()).then(data => { if (data.status !== 'success') return; const emptyEl = document.getElementById('tasks-empty'); const listEl = document.getElementById('tasks-list'); const allTasks = data.tasks || []; // Only show active (enabled) tasks const tasks = allTasks.filter(t => t.enabled !== false); if (tasks.length === 0) { emptyEl.querySelector('p').textContent = currentLang === 'zh' ? '暂无定时任务' : 'No scheduled tasks'; return; } emptyEl.classList.add('hidden'); listEl.classList.remove('hidden'); listEl.innerHTML = ''; tasks.forEach(task => { const card = document.createElement('div'); card.className = 'bg-white dark:bg-[#1A1A1A] rounded-xl border border-slate-200 dark:border-white/10 p-4'; const typeLabel = task.type === 'cron' ? `${escapeHtml(task.cron || '')}` : `${escapeHtml(task.type || 'once')}`; let nextRun = '--'; if (task.next_run_at) { // next_run_at is an ISO string, not a Unix timestamp const d = new Date(task.next_run_at); if (!isNaN(d.getTime())) nextRun = d.toLocaleString(); } card.innerHTML = `
${escapeHtml(task.name || task.id || '--')}
${typeLabel}
${escapeHtml(task.prompt || task.description || '')}
${currentLang === 'zh' ? '下次执行' : 'Next run'}: ${nextRun}
`;
listEl.appendChild(card);
});
tasksLoaded = true;
}).catch(() => {});
}
// =====================================================================
// Logs View
// =====================================================================
let logEventSource = null;
function startLogStream() {
if (logEventSource) return;
const output = document.getElementById('log-output');
output.innerHTML = '';
logEventSource = new EventSource('/api/logs');
logEventSource.onmessage = function(e) {
let item;
try { item = JSON.parse(e.data); } catch (_) { return; }
if (item.type === 'init') {
output.textContent = item.content || '';
output.scrollTop = output.scrollHeight;
} else if (item.type === 'line') {
output.textContent += item.content;
output.scrollTop = output.scrollHeight;
} else if (item.type === 'error') {
output.textContent = item.message || 'Error loading logs';
}
};
logEventSource.onerror = function() {
logEventSource.close();
logEventSource = null;
};
}
function stopLogStream() {
if (logEventSource) {
logEventSource.close();
logEventSource = null;
}
}
// =====================================================================
// View Navigation Hook
// =====================================================================
const _origNavigateTo = navigateTo;
navigateTo = function(viewId) {
// Stop log stream when leaving logs view
if (currentView === 'logs' && viewId !== 'logs') stopLogStream();
_origNavigateTo(viewId);
// Lazy-load view data
if (viewId === 'config') loadConfigView();
else if (viewId === 'skills') loadSkillsView();
else if (viewId === 'memory') {
// Always start from the list panel when navigating to memory
document.getElementById('memory-panel-viewer').classList.add('hidden');
document.getElementById('memory-panel-list').classList.remove('hidden');
loadMemoryView(1);
}
else if (viewId === 'knowledge') loadKnowledgeView();
else if (viewId === 'channels') loadChannelsView();
else if (viewId === 'tasks') loadTasksView();
else if (viewId === 'logs') startLogStream();
};
// =====================================================================
// Knowledge View
// =====================================================================
let _knowledgeTreeData = [];
let _knowledgeCurrentFile = null;
let _knowledgeGraphLoaded = false;
function loadKnowledgeView() {
// Reset to docs tab
switchKnowledgeTab('docs');
_knowledgeGraphLoaded = false;
_knowledgeCurrentFile = null;
fetch('/api/knowledge/list').then(r => r.json()).then(data => {
if (data.status !== 'success') return;
const emptyEl = document.getElementById('knowledge-empty');
const docsPanel = document.getElementById('knowledge-panel-docs');
const statsEl = document.getElementById('knowledge-stats');
const tree = data.tree || [];
_knowledgeTreeData = tree;
const stats = data.stats || {};
const totalPages = stats.pages || 0;
const sizeStr = stats.size < 1024 ? stats.size + ' B' : (stats.size / 1024).toFixed(1) + ' KB';
statsEl.textContent = totalPages + ' pages · ' + sizeStr;
if (totalPages === 0) {
emptyEl.querySelector('p').textContent = t('knowledge_empty_hint');
const guideEl = document.getElementById('knowledge-empty-guide');
if (guideEl) guideEl.classList.remove('hidden');
emptyEl.classList.remove('hidden');
docsPanel.classList.add('hidden');
return;
}
emptyEl.classList.add('hidden');
docsPanel.classList.remove('hidden');
renderKnowledgeTree(tree);
// Auto-select the first file (desktop only)
if (window.innerWidth >= 768) {
const firstGroup = tree.find(g => g.files && g.files.length > 0);
if (firstGroup) {
const firstFile = firstGroup.files[0];
openKnowledgeFile(firstGroup.dir + '/' + firstFile.name, firstFile.title);
}
} else {
document.getElementById('knowledge-content-placeholder').classList.add('hidden');
document.getElementById('knowledge-content-viewer').classList.add('hidden');
}
}).catch(() => {});
}
function renderKnowledgeTree(tree, filter) {
const container = document.getElementById('knowledge-tree');
container.innerHTML = '';
const lowerFilter = (filter || '').toLowerCase();
tree.forEach(group => {
const files = group.files.filter(f =>
!lowerFilter || f.title.toLowerCase().includes(lowerFilter) || f.name.toLowerCase().includes(lowerFilter)
);
if (files.length === 0 && lowerFilter) return;
const div = document.createElement('div');
div.className = 'knowledge-tree-group open';
const btn = document.createElement('button');
btn.className = 'knowledge-tree-group-btn';
btn.innerHTML = `${escapeHtml(group.dir)}${files.length}`;
btn.onclick = () => div.classList.toggle('open');
div.appendChild(btn);
const items = document.createElement('div');
items.className = 'knowledge-tree-group-items';
files.forEach(f => {
const fbtn = document.createElement('button');
const fpath = group.dir + '/' + f.name;
fbtn.className = 'knowledge-tree-file' + (_knowledgeCurrentFile === fpath ? ' active' : '');
fbtn.dataset.path = fpath;
fbtn.innerHTML = `${escapeHtml(f.title)}`;
fbtn.onclick = () => openKnowledgeFile(fpath, f.title);
items.appendChild(fbtn);
});
div.appendChild(items);
container.appendChild(div);
});
}
function filterKnowledgeTree(query) {
renderKnowledgeTree(_knowledgeTreeData, query);
}
function resolveKnowledgePath(currentFilePath, relativeHref) {
// currentFilePath: e.g. "concepts/mcp-protocol.md"
// relativeHref: e.g. "../entities/openai.md"
const parts = currentFilePath.split('/');
parts.pop(); // remove filename, keep directory
const segments = [...parts, ...relativeHref.split('/')];
const resolved = [];
for (const seg of segments) {
if (seg === '..') resolved.pop();
else if (seg !== '.' && seg !== '') resolved.push(seg);
}
return resolved.join('/');
}
function bindKnowledgeLinks(container, currentFilePath) {
container.querySelectorAll('a').forEach(a => {
const href = a.getAttribute('href');
if (!href || !href.endsWith('.md')) return;
// Skip absolute URLs
if (/^https?:\/\//.test(href)) return;
a.addEventListener('click', (e) => {
e.preventDefault();
const resolved = resolveKnowledgePath(currentFilePath, href);
const linkTitle = a.textContent.trim() || resolved.replace(/\.md$/, '').split('/').pop();
openKnowledgeFile(resolved, linkTitle);
});
a.style.cursor = 'pointer';
a.classList.add('text-primary-500', 'hover:underline');
});
}
function bindChatKnowledgeLinks(container) {
if (!container) return;
container.querySelectorAll('a').forEach(a => {
const href = a.getAttribute('href');
if (!href || !href.endsWith('.md')) return;
if (/^https?:\/\//.test(href)) return;
// Determine knowledge path
let knowledgePath = null;
if (href.startsWith('knowledge/')) {
// Full path from workspace root: knowledge/concepts/moe.md
knowledgePath = href.replace(/^knowledge\//, '');
} else if (/^[a-z0-9_-]+\/[a-z0-9_.-]+\.md$/i.test(href)) {
// Looks like category/file.md pattern without knowledge/ prefix
knowledgePath = href;
} else if (href.includes('/') && !href.startsWith('/')) {
// Relative path like ../entities/deepseek.md — extract filename and search
const filename = href.split('/').pop();
knowledgePath = '__search__:' + filename;
}
if (!knowledgePath) return;
a.addEventListener('click', (e) => {
e.preventDefault();
if (knowledgePath.startsWith('__search__:')) {
const filename = knowledgePath.replace('__search__:', '');
// Find the file in cached tree data
const found = _findKnowledgeFileByName(filename);
if (found) {
navigateTo('knowledge');
setTimeout(() => openKnowledgeFile(found.path, found.title), 100);
}
} else {
navigateTo('knowledge');
const linkTitle = a.textContent.trim() || knowledgePath.replace(/\.md$/, '').split('/').pop();
setTimeout(() => openKnowledgeFile(knowledgePath, linkTitle), 100);
}
});
a.style.cursor = 'pointer';
a.classList.add('text-primary-500', 'hover:underline');
});
}
function _findKnowledgeFileByName(filename) {
for (const group of _knowledgeTreeData) {
for (const f of group.files) {
if (f.name === filename) {
return { path: group.dir + '/' + f.name, title: f.title };
}
}
}
return null;
}
function openKnowledgeFile(path, title) {
_knowledgeCurrentFile = path;
// Update active state in tree via data-path
document.querySelectorAll('.knowledge-tree-file').forEach(el => {
el.classList.toggle('active', el.dataset.path === path);
});
// Immediately hide placeholder
document.getElementById('knowledge-content-placeholder').classList.add('hidden');
fetch(`/api/knowledge/read?path=${encodeURIComponent(path)}`).then(r => r.json()).then(data => {
if (data.status !== 'success') return;
const viewer = document.getElementById('knowledge-content-viewer');
document.getElementById('knowledge-viewer-title').textContent = title;
document.getElementById('knowledge-viewer-path').textContent = path;
const bodyEl = document.getElementById('knowledge-viewer-body');
bodyEl.innerHTML = renderMarkdown(data.content || '');
viewer.classList.remove('hidden');
applyHighlighting(viewer);
bindKnowledgeLinks(bodyEl, path);
// Mobile: hide sidebar, show content
if (window.innerWidth < 768) {
document.getElementById('knowledge-sidebar').classList.add('hidden');
}
}).catch(() => {});
}
function knowledgeMobileBack() {
document.getElementById('knowledge-sidebar').classList.remove('hidden');
document.getElementById('knowledge-content-viewer').classList.add('hidden');
}
function switchKnowledgeTab(tab) {
document.querySelectorAll('.knowledge-tab').forEach(el => el.classList.remove('active'));
document.getElementById('knowledge-tab-' + tab).classList.add('active');
const docsPanel = document.getElementById('knowledge-panel-docs');
const graphPanel = document.getElementById('knowledge-panel-graph');
if (tab === 'docs') {
docsPanel.classList.remove('hidden');
graphPanel.classList.add('hidden');
} else {
docsPanel.classList.add('hidden');
graphPanel.classList.remove('hidden');
if (!_knowledgeGraphLoaded) {
loadKnowledgeGraph();
}
}
}
function loadKnowledgeGraph() {
_knowledgeGraphLoaded = true;
const container = document.getElementById('knowledge-graph-container');
container.innerHTML = '';
fetch('/api/knowledge/graph').then(r => r.json()).then(data => {
const nodes = data.nodes || [];
const links = data.links || [];
if (nodes.length === 0) {
container.innerHTML = `${t('knowledge_empty_hint')}
Failed to load graph
';
});
}
function renderKnowledgeGraph(container, nodes, links) {
const width = container.clientWidth;
const height = container.clientHeight || 600;
const categories = [...new Set(nodes.map(n => n.category))];
const colorScale = d3.scaleOrdinal(d3.schemeTableau10).domain(categories);
// Connection count for sizing
const connCount = {};
nodes.forEach(n => connCount[n.id] = 0);
links.forEach(l => {
connCount[l.source] = (connCount[l.source] || 0) + 1;
connCount[l.target] = (connCount[l.target] || 0) + 1;
});
const svg = d3.select(container)
.append('svg')
.attr('width', width)
.attr('height', height);
const g = svg.append('g');
// Zoom with adaptive label visibility
let currentZoomScale = 1;
const zoom = d3.zoom()
.scaleExtent([0.2, 5])
.on('zoom', (event) => {
g.attr('transform', event.transform);
currentZoomScale = event.transform.k;
updateLabelVisibility();
});
svg.call(zoom);
function updateLabelVisibility() {
if (!label) return;
if (currentZoomScale < 0.8) {
label.attr('opacity', 0);
} else {
const baseFontSize = Math.min(12, 10 / Math.max(currentZoomScale * 0.7, 0.5));
label.attr('opacity', 1).attr('font-size', baseFontSize);
}
}
const simulation = d3.forceSimulation(nodes)
.force('link', d3.forceLink(links).id(d => d.id).distance(90))
.force('charge', d3.forceManyBody().strength(-180))
.force('center', d3.forceCenter(width / 2, height / 2))
.force('x', d3.forceX(width / 2).strength(0.06))
.force('y', d3.forceY(height / 2).strength(0.06))
.force('collision', d3.forceCollide().radius(d => getNodeRadius(d) + 30));
function getNodeRadius(d) {
return Math.max(5, Math.min(16, 5 + (connCount[d.id] || 0) * 2));
}
const link = g.append('g')
.selectAll('line')
.data(links)
.join('line')
.attr('stroke', '#94a3b8')
.attr('stroke-opacity', 0.3)
.attr('stroke-width', 1);
const node = g.append('g')
.selectAll('circle')
.data(nodes)
.join('circle')
.attr('r', d => getNodeRadius(d))
.attr('fill', d => colorScale(d.category))
.attr('stroke', '#fff')
.attr('stroke-width', 1.5)
.style('cursor', 'pointer')
.call(d3.drag()
.on('start', (event, d) => { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
.on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
.on('end', (event, d) => { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })
);
const label = g.append('g')
.selectAll('text')
.data(nodes)
.join('text')
.text(d => d.label.length > 15 ? d.label.slice(0, 14) + '…' : d.label)
.attr('font-size', 9)
.attr('dx', d => getNodeRadius(d) + 4)
.attr('dy', 3)
.attr('fill', '#64748b')
.style('pointer-events', 'none');
// Tooltip
const tooltip = document.createElement('div');
tooltip.className = 'knowledge-graph-tooltip';
container.style.position = 'relative';
container.appendChild(tooltip);
node.on('mouseover', (event, d) => {
tooltip.textContent = d.label + ' (' + d.category + ')';
tooltip.style.opacity = '1';
tooltip.style.left = (event.offsetX + 12) + 'px';
tooltip.style.top = (event.offsetY - 8) + 'px';
// Highlight connections
link.attr('stroke-opacity', l => (l.source.id === d.id || l.target.id === d.id) ? 0.8 : 0.1);
node.attr('opacity', n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)) ? 1 : 0.2);
label.attr('opacity', n => n.id === d.id || links.some(l => (l.source.id === d.id && l.target.id === n.id) || (l.target.id === d.id && l.source.id === n.id)) ? 1 : 0.1);
}).on('mousemove', (event) => {
tooltip.style.left = (event.offsetX + 12) + 'px';
tooltip.style.top = (event.offsetY - 8) + 'px';
}).on('mouseout', () => {
tooltip.style.opacity = '0';
link.attr('stroke-opacity', 0.3);
node.attr('opacity', 1);
label.attr('opacity', 1);
}).on('click', (event, d) => {
// Switch to docs tab and open the file
switchKnowledgeTab('docs');
openKnowledgeFile(d.id, d.label);
});
simulation.on('tick', () => {
link.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
.attr('x2', d => d.target.x).attr('y2', d => d.target.y);
node.attr('cx', d => d.x).attr('cy', d => d.y);
label.attr('x', d => d.x).attr('y', d => d.y);
});
// Auto fit-to-view when simulation settles
simulation.on('end', () => {
const pad = 16;
let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
nodes.forEach(n => {
if (n.x < x0) x0 = n.x;
if (n.y < y0) y0 = n.y;
if (n.x > x1) x1 = n.x;
if (n.y > y1) y1 = n.y;
});
const bw = x1 - x0 + pad * 2;
const bh = y1 - y0 + pad * 2;
if (bw > 0 && bh > 0) {
const scale = Math.min(width / bw, height / bh, 4);
const tx = width / 2 - (x0 + x1) / 2 * scale;
const ty = height / 2 - (y0 + y1) / 2 * scale;
svg.transition().duration(500).call(
zoom.transform, d3.zoomIdentity.translate(tx, ty).scale(scale)
);
}
});
// Legend
const legendDiv = document.createElement('div');
legendDiv.className = 'knowledge-graph-legend';
categories.forEach(cat => {
const item = document.createElement('span');
item.className = 'knowledge-graph-legend-item';
item.innerHTML = `${escapeHtml(cat)}`;
legendDiv.appendChild(item);
});
container.appendChild(legendDiv);
}
// =====================================================================
// Authentication
// =====================================================================
function toggleLoginPassword() {
const input = document.getElementById('login-password');
const icon = document.querySelector('#login-toggle-pwd i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.replace('fa-eye', 'fa-eye-slash');
} else {
input.type = 'password';
icon.classList.replace('fa-eye-slash', 'fa-eye');
}
}
window.toggleLoginPassword = toggleLoginPassword;
function showLoginScreen() {
const overlay = document.getElementById('login-overlay');
if (!overlay) return;
overlay.classList.remove('hidden');
document.getElementById('app').classList.add('hidden');
const subtitle = document.getElementById('login-subtitle');
const loginBtn = document.getElementById('login-btn');
if (currentLang === 'en') {
subtitle.textContent = 'Enter password to access the console';
loginBtn.textContent = 'Login';
} else {
subtitle.textContent = '请输入密码以访问控制台';
loginBtn.textContent = '登录';
}
const form = document.getElementById('login-form');
const pwdInput = document.getElementById('login-password');
pwdInput.focus();
form.onsubmit = function(e) {
e.preventDefault();
const pwd = pwdInput.value;
if (!pwd) return;
const btn = document.getElementById('login-btn');
const errEl = document.getElementById('login-error');
btn.disabled = true;
errEl.classList.add('hidden');
fetch('/auth/login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({password: pwd})
}).then(r => r.json()).then(data => {
if (data.status === 'success') {
overlay.classList.add('hidden');
document.getElementById('app').classList.remove('hidden');
initApp();
} else {
errEl.textContent = currentLang === 'zh' ? '密码错误' : 'Wrong password';
errEl.classList.remove('hidden');
pwdInput.value = '';
pwdInput.focus();
}
btn.disabled = false;
}).catch(() => {
errEl.textContent = currentLang === 'zh' ? '网络错误，请重试' : 'Network error, please retry';
errEl.classList.remove('hidden');
btn.disabled = false;
});
return false;
};
}
// Intercept 401 responses globally to show login screen on session expiry
const _originalFetch = window.fetch;
window.fetch = function(...args) {
return _originalFetch.apply(this, args).then(response => {
if (response.status === 401) {
const url = typeof args[0] === 'string' ? args[0] : (args[0]?.url || '');
if (!url.startsWith('/auth/')) {
showLoginScreen();
}
}
return response;
});
};
function initApp() {
fetch('/api/knowledge/list').then(r => r.json()).then(data => {
if (data.status === 'success') _knowledgeTreeData = data.tree || [];
}).catch(() => {});
fetch('/api/version').then(r => r.json()).then(data => {
APP_VERSION = `v${data.version}`;
document.getElementById('sidebar-version').textContent = `CowAgent ${APP_VERSION}`;
}).catch(() => {
document.getElementById('sidebar-version').textContent = 'CowAgent';
});
chatInput.focus();
}
// =====================================================================
// Initialization
// =====================================================================
applyTheme();
applyI18n();
fetch('/auth/check').then(r => r.json()).then(data => {
if (data.auth_required && !data.authenticated) {
showLoginScreen();
} else {
initApp();
}
}).catch(() => {
initApp();
});
requestAnimationFrame(() => {
document.body.classList.add('transition-colors', 'duration-200');
});